@extends('layouts.admin')

@section('title', 'Settings')
@section('page-title', 'Settings')

@section('content')
<div class="mx-auto max-w-2xl space-y-6">
    <h1 class="text-2xl font-bold text-gray-900">Platform Settings</h1>

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

        <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Category-Specific Fees</h2>
            <div class="space-y-6">
                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Electricity Service Charge</p>
                        <p class="text-xs text-gray-500">Enable or disable service charge for electricity bills</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="hidden" name="settings[value][electricity_service_charge_enabled]" value="0">
                        <input type="checkbox" name="settings[value][electricity_service_charge_enabled]" value="1" class="sr-only peer" {{ \App\Models\Setting::getValue('electricity_service_charge_enabled', '0') == '1' ? 'checked' : '' }}>
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                    </label>
                </div>
                <div id="electricity-fee-row" class="{{ \App\Models\Setting::getValue('electricity_service_charge_enabled', '0') == '1' ? '' : 'hidden' }}">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Electricity Flat Fee (₦)</label>
                    <input type="number" name="settings[value][electricity_service_charge]" value="{{ \App\Models\Setting::getValue('electricity_service_charge', 0) }}" step="0.01" min="0" class="block w-full rounded-lg border-gray-300 text-sm px-3 py-2 border">
                </div>

                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Cable TV Service Charge</p>
                        <p class="text-xs text-gray-500">Enable or disable service charge for cable TV subscriptions</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="hidden" name="settings[value][cable_service_charge_enabled]" value="0">
                        <input type="checkbox" name="settings[value][cable_service_charge_enabled]" value="1" class="sr-only peer" {{ \App\Models\Setting::getValue('cable_service_charge_enabled', '0') == '1' ? 'checked' : '' }}>
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                    </label>
                </div>
                <div id="cable-fee-row" class="{{ \App\Models\Setting::getValue('cable_service_charge_enabled', '0') == '1' ? '' : 'hidden' }}">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Cable TV Flat Fee (₦)</label>
                    <input type="number" name="settings[value][cable_service_charge]" value="{{ \App\Models\Setting::getValue('cable_service_charge', 0) }}" step="0.01" min="0" class="block w-full rounded-lg border-gray-300 text-sm px-3 py-2 border">
                </div>
            </div>
        </div>

        <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Limits</h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Min Funding (₦)</label>
                    <input type="number" name="settings[value][min_funding]" value="{{ \App\Models\Setting::getValue('min_funding', 100) }}" class="block w-full rounded-lg border-gray-300 text-sm px-3 py-2 border">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Max Funding (₦)</label>
                    <input type="number" name="settings[value][max_funding]" value="{{ \App\Models\Setting::getValue('max_funding', 500000) }}" class="block w-full rounded-lg border-gray-300 text-sm px-3 py-2 border">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Max Daily Transactions</label>
                    <input type="number" name="settings[value][max_daily_transactions]" value="{{ \App\Models\Setting::getValue('max_daily_transactions', 50) }}" class="block w-full rounded-lg border-gray-300 text-sm px-3 py-2 border">
                </div>
            </div>
        </div>

        <button type="submit" class="rounded-lg bg-green-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-700">Save Settings</button>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        if (this.name.includes('electricity')) {
            document.getElementById('electricity-fee-row').classList.toggle('hidden', !this.checked);
        }
        if (this.name.includes('cable')) {
            document.getElementById('cable-fee-row').classList.toggle('hidden', !this.checked);
        }
    });
});
</script>
@endpush