<x-layouts::app :title="__('Global Billing Settings')">
    <flux:card class="max-w-6xl mx-auto">
        <div class="space-y-4">
            <div>
                <flux:heading size="lg">Platform Billing Configuration</flux:heading>
                <flux:text class="text-slate-600">These settings define the default billing behavior for all new schools provisioned on the platform.</flux:text>
            </div>

            <form action="{{ route('admin.billing.settings.update') }}" method="POST" class="space-y-6">
                @csrf

                <div class="grid gap-6 lg:grid-cols-2">
                    <div class="space-y-2">
                        <label for="default_amount" class="block text-sm font-semibold text-slate-700">Default Subscription Amount</label>
                        <div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2">
                            <span class="text-slate-500">RWF</span>
                            <input id="default_amount" name="default_amount" type="number" step="0.01" value="{{ $settings['default_amount'] }}" required class="w-full border-0 bg-transparent p-0 text-sm text-slate-900 focus:outline-none" />
                        </div>
                        <p class="text-sm text-slate-500">Initial fee charged to new schools.</p>
                    </div>

                    <div class="space-y-2">
                        <label for="currency" class="block text-sm font-semibold text-slate-700">Currency Code</label>
                        <select id="currency" name="currency" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100">
                            @foreach($currencies as $currency)
                                <option value="{{ $currency->code }}" {{ $settings['currency'] == $currency->code ? 'selected' : '' }}>
                                    {{ $currency->name }} ({{ $currency->code }} - {{ $currency->symbol }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid gap-6 lg:grid-cols-2">
                    <div class="space-y-2">
                        <label for="payment_interval" class="block text-sm font-semibold text-slate-700">Payment Interval</label>
                        <select id="payment_interval" name="payment_interval" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100">
                            <option value="monthly" {{ $settings['payment_interval'] == 'monthly' ? 'selected' : '' }}>Monthly</option>
                            <option value="yearly" {{ $settings['payment_interval'] == 'yearly' ? 'selected' : '' }}>Yearly</option>
                            <option value="weekly" {{ $settings['payment_interval'] == 'weekly' ? 'selected' : '' }}>Weekly</option>
                        </select>
                    </div>

                    <div class="space-y-2">
                        <label for="autobilling_day" class="block text-sm font-semibold text-slate-700">Auto-Billing Day</label>
                        <select id="autobilling_day" name="autobilling_day" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100">
                            @for($i = 1; $i <= 31; $i++)
                                <option value="{{ $i }}" {{ $settings['autobilling_day'] == $i ? 'selected' : '' }}>{{ $i }}</option>
                            @endfor
                        </select>
                        <p class="text-sm text-slate-500">The day of the month when invoices generate.</p>
                    </div>
                </div>

                <div class="grid gap-6 lg:grid-cols-2">
                    <div class="space-y-2">
                        <label for="auto_billing_limit" class="block text-sm font-semibold text-slate-700">Auto-Billing Limit (Invoices)</label>
                        <input id="auto_billing_limit" name="auto_billing_limit" type="number" min="1" max="10" value="{{ $settings['auto_billing_limit'] }}" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100" />
                        <p class="text-sm text-slate-500">Maximum number of invoices to deduct per tenant per run.</p>
                    </div>
                </div>

                <div class="border-t border-slate-200 pt-6">
                    <flux:heading size="md">Payment Methods</flux:heading>
                    <flux:text class="text-slate-600">Enable or disable payment methods available to all schools. These settings apply globally to parent payment pages and admin payment forms.</flux:text>

                    <div class="mt-4 grid gap-4 md:grid-cols-2">
                        @foreach([
                            ['mobile_money', 'Mobile Money', 'fa-mobile-alt', 'text-amber-500'],
                            ['card', 'Card Payment', 'fa-credit-card', 'text-sky-500'],
                            ['bank_transfer', 'Bank Transfer', 'fa-university', 'text-emerald-500'],
                            ['cash', 'Cash', 'fa-money-bill-wave', 'text-slate-500']
                        ] as $method)
                            <label class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                                <input type="checkbox" name="payment_methods[]" value="{{ $method[0] }}" class="h-4 w-4 rounded border-slate-300 text-primary focus:ring-primary" {{ in_array($method[0], $enabledPaymentMethods ?? ['mobile_money','card','bank_transfer','cash']) ? 'checked' : '' }}>
                                <div class="flex items-center gap-3">
                                    <i class="fas {{ $method[2] }} {{ $method[3] }}"></i>
                                    <span class="font-semibold text-slate-700">{{ $method[1] }}</span>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="inline-flex items-center rounded-xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700">Save Global Configuration</button>
                </div>
            </form>
        </div>
    </flux:card>
</x-layouts::app>
