<x-app-layout>

    <x-module-hero
        title="Payment Configuration"
        description="Configure listing payment settings for institutions and machines"
        icon="fa-cog">

        <x-slot name="backButton">
            <a href="{{ route('admin.payments.index') }}"
               class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition-colors">
                <i class="fas fa-arrow-left"></i> Back to Payments
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view payments')
            <a href="{{ route('admin.payments.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.payments.index') ? 'active-tab' : '' }}">
                <i class="fas fa-list fa-fw"></i> All Payments
            </a>
            @endcan
            @can('configure payments')
            <a href="{{ route('admin.payments.configure') }}"
               class="module-hero-tab {{ request()->routeIs('admin.payments.configure') ? 'active-tab' : '' }}">
                <i class="fas fa-cog fa-fw"></i> Configure
            </a>
            @endcan
        </x-slot>

    </x-module-hero>

    <div class="p-6">

        @if(session('success'))
        <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
        @endif

        @if($errors->any())
        <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
            <ul class="list-disc list-inside space-y-1">
                @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form action="{{ route('admin.payments.configure.save') }}" method="POST"
              x-data="{
                  institutionFree: {{ $institutionConfig && $institutionConfig->is_free ? 'true' : 'false' }},
                  machineFree: {{ $machineConfig && $machineConfig->is_free ? 'true' : 'false' }}
              }">
            @csrf

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

                {{-- Institution Payment Config --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 flex items-center gap-2" style="background-color: var(--theme-bg-sidebar);">
                        <i class="fas fa-hospital text-white"></i>
                        <h3 class="font-semibold text-white">Institution Listing Payment</h3>
                    </div>
                    <div class="p-6 space-y-5">

                        <div class="mb-6">
                            <h4 class="text-sm font-semibold text-gray-700 border-b pb-2 mb-4">Pricing Settings</h4>
                        </div>

                        {{-- Free toggle --}}
                        <div>
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="checkbox" name="institution_is_free" value="1"
                                       {{ $institutionConfig && $institutionConfig->is_free ? 'checked' : '' }}
                                       x-model="institutionFree"
                                       class="h-5 w-5 text-green-600 rounded focus:ring-green-500">
                                <span class="text-sm font-medium text-gray-700">Free Listing (No payment required)</span>
                            </label>
                        </div>

                        <div x-show="!institutionFree" x-transition class="space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Amount (SSP) <span class="text-red-500">*</span></label>
                                    <input type="number" name="institution_amount_ssp"
                                           value="{{ old('institution_amount_ssp', $institutionConfig->amount_ssp ?? 0) }}"
                                           min="0" step="0.01"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-transparent">
                                    <x-input-error :messages="$errors->get('institution_amount_ssp')" class="mt-1" />
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Amount (USD)</label>
                                    <input type="number" name="institution_amount_usd"
                                           value="{{ old('institution_amount_usd', $institutionConfig->amount_usd ?? '') }}"
                                           min="0" step="0.01"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-transparent">
                                    <x-input-error :messages="$errors->get('institution_amount_usd')" class="mt-1" />
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Available Payment Frequencies</label>
                                <div class="flex flex-wrap gap-3">
                                    @foreach($frequencies as $key => $label)
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="checkbox" name="institution_frequencies[]" value="{{ $key }}"
                                               {{ in_array($key, $institutionConfig->frequencies ?? ['yearly']) ? 'checked' : '' }}
                                               class="h-4 w-4 text-green-600 rounded focus:ring-green-500">
                                        <span class="text-sm text-gray-600">{{ $label }}</span>
                                    </label>
                                    @endforeach
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Default Frequency</label>
                                <select name="institution_default_frequency"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-transparent">
                                    @foreach($frequencies as $key => $label)
                                    <option value="{{ $key }}" {{ ($institutionConfig->default_frequency ?? 'yearly') == $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Grace Period (Days)</label>
                                <input type="number" name="institution_grace_period"
                                       value="{{ old('institution_grace_period', $institutionConfig->grace_period_days ?? 7) }}"
                                       min="0" max="30"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-transparent">
                                <p class="mt-1 text-xs text-gray-500">Days before unpaid listing is suspended</p>
                            </div>
                        </div>

                    </div>
                </div>

                {{-- Machine Payment Config --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 flex items-center gap-2" style="background: linear-gradient(90deg, #1e40af 0%, #1d4ed8 100%);">
                        <i class="fas fa-computer text-white"></i>
                        <h3 class="font-semibold text-white">Machine Listing Payment</h3>
                    </div>
                    <div class="p-6 space-y-5">

                        <div class="mb-6">
                            <h4 class="text-sm font-semibold text-gray-700 border-b pb-2 mb-4">Pricing Settings</h4>
                        </div>

                        <div>
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="checkbox" name="machine_is_free" value="1"
                                       {{ $machineConfig && $machineConfig->is_free ? 'checked' : '' }}
                                       x-model="machineFree"
                                       class="h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Free Listing (No payment required)</span>
                            </label>
                        </div>

                        <div x-show="!machineFree" x-transition class="space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Amount (SSP) <span class="text-red-500">*</span></label>
                                    <input type="number" name="machine_amount_ssp"
                                           value="{{ old('machine_amount_ssp', $machineConfig->amount_ssp ?? 0) }}"
                                           min="0" step="0.01"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <x-input-error :messages="$errors->get('machine_amount_ssp')" class="mt-1" />
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Amount (USD)</label>
                                    <input type="number" name="machine_amount_usd"
                                           value="{{ old('machine_amount_usd', $machineConfig->amount_usd ?? '') }}"
                                           min="0" step="0.01"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <x-input-error :messages="$errors->get('machine_amount_usd')" class="mt-1" />
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Available Payment Frequencies</label>
                                <div class="flex flex-wrap gap-3">
                                    @foreach($frequencies as $key => $label)
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="checkbox" name="machine_frequencies[]" value="{{ $key }}"
                                               {{ in_array($key, $machineConfig->frequencies ?? ['yearly']) ? 'checked' : '' }}
                                               class="h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-600">{{ $label }}</span>
                                    </label>
                                    @endforeach
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Default Frequency</label>
                                <select name="machine_default_frequency"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    @foreach($frequencies as $key => $label)
                                    <option value="{{ $key }}" {{ ($machineConfig->default_frequency ?? 'yearly') == $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Grace Period (Days)</label>
                                <input type="number" name="machine_grace_period"
                                       value="{{ old('machine_grace_period', $machineConfig->grace_period_days ?? 7) }}"
                                       min="0" max="30"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <p class="mt-1 text-xs text-gray-500">Days before unpaid listing is suspended</p>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

            {{-- MTN MoMo Info --}}
            <div class="mt-6 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="mb-4">
                    <h3 class="text-sm font-semibold text-gray-700 border-b pb-2">MTN Mobile Money Integration</h3>
                </div>
                <div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
                    <p class="text-sm text-amber-800 flex items-start gap-2">
                        <i class="fas fa-info-circle mt-0.5 flex-shrink-0"></i>
                        MTN MoMo API credentials are managed separately via the
                        <a href="{{ route('config.payment.index') }}" class="font-semibold underline hover:no-underline">Payment Configuration</a>
                        panel under System Config. The settings above control listing pricing only.
                    </p>
                </div>
            </div>

            {{-- Actions --}}
            <div class="mt-6 flex justify-end gap-3">
                <a href="{{ route('admin.payments.index') }}"
                   class="px-5 py-2.5 bg-gray-200 text-gray-700 text-sm rounded-lg hover:bg-gray-300 transition-colors">
                    Cancel
                </a>
                <button type="submit"
                        class="px-5 py-2.5 text-white text-sm rounded-lg transition-colors"
                        style="background-color: var(--theme-bg-sidebar);">
                    <i class="fas fa-save mr-2"></i> Save Configuration
                </button>
            </div>

        </form>
    </div>

</x-app-layout>
