{{--
    Health Marketor Dashboard — Machine Listing Payment
    Authenticated page with <x-app-layout> + <x-module-hero>
    Requirements: 8.2, 8.4
--}}
<x-app-layout>

    <x-module-hero
        title="Machine Listing Payment"
        description="{{ $machine->name }}"
        icon="fa-credit-card"
    >
        <x-slot name="backButton">
            <a href="{{ route('dashboard.machines.index') }}"
               class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
                <i class="fas fa-arrow-left"></i> Back to My Machines
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view institutions')
                <a href="{{ route('dashboard.institutions.index') }}" class="module-hero-tab">
                    <i class="fas fa-hospital"></i> My Institutions
                </a>
            @endcan
            @can('view machines')
                <a href="{{ route('dashboard.machines.index') }}" class="module-hero-tab active-tab" aria-current="page">
                    <i class="fas fa-cogs"></i> My Machines
                </a>
            @endcan
            @can('view payments')
                <a href="{{ route('dashboard.payments.index') }}" class="module-hero-tab">
                    <i class="fas fa-credit-card"></i> Payment History
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        <div class="max-w-5xl">

            {{-- Summary Card --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-6">
                <div class="px-4 py-3 border-b border-gray-200">
                    <h3 class="font-semibold text-gray-800">
                        <i class="fas fa-receipt mr-2 text-blue-600"></i>Payment Summary
                    </h3>
                </div>
                <div class="p-4">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-14 h-14 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0 overflow-hidden">
                            @if($machine->primary_image)
                                <img src="{{ asset('storage/' . $machine->primary_image) }}"
                                     alt="{{ $machine->name }}" class="w-full h-full object-cover">
                            @else
                                <i class="fas fa-cogs text-2xl text-blue-500"></i>
                            @endif
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800">{{ $machine->name }}</h4>
                            <p class="text-sm text-gray-500">
                                {{ $machine->brand }}{{ $machine->category ? ' · ' . $machine->category : '' }}
                            </p>
                        </div>
                    </div>
                    <div class="border-t border-gray-100 pt-3 space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Listing Type</span>
                            <span class="font-medium text-gray-800">Digital Health Machine</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Payment Frequency</span>
                            <span class="font-medium text-gray-800">{{ ucfirst($paymentConfig->default_frequency ?? 'yearly') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Payment Form --}}
            <form action="{{ route('payments.machine', $machine) }}" method="POST">
                @csrf

                {{-- Currency --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4"
                     x-data="{
                         currency: 'SSP',
                         amountSsp: {{ (float)($paymentConfig->amount_ssp ?? 0) }},
                         amountUsd: {{ (float)($paymentConfig->amount_usd ?? 0) }},
                         get selectedAmount() {
                             return this.currency === 'USD' ? this.amountUsd : this.amountSsp;
                         }
                     }">
                    <h3 class="font-semibold text-gray-800 mb-3">
                        <i class="fas fa-coins mr-2 text-yellow-500"></i>Select Currency
                    </h3>
                    <div class="grid grid-cols-2 gap-3">
                        <label class="cursor-pointer">
                            <input type="radio" name="currency" value="SSP" class="sr-only peer"
                                   x-model="currency" checked>
                            <div class="p-3 border-2 border-gray-200 rounded-lg text-center peer-checked:border-green-500 peer-checked:bg-green-50 transition">
                                <div class="text-lg font-bold text-gray-800">SSP</div>
                                <div class="text-xs text-gray-500">South Sudanese Pound</div>
                                <div class="text-base font-bold text-green-600 mt-1">
                                    {{ number_format($paymentConfig->amount_ssp ?? 0) }} SSP
                                </div>
                            </div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="currency" value="USD" class="sr-only peer"
                                   x-model="currency">
                            <div class="p-3 border-2 border-gray-200 rounded-lg text-center peer-checked:border-green-500 peer-checked:bg-green-50 transition">
                                <div class="text-lg font-bold text-gray-800">USD</div>
                                <div class="text-xs text-gray-500">US Dollar</div>
                                <div class="text-base font-bold text-green-600 mt-1">
                                    ${{ number_format($paymentConfig->amount_usd ?? 0, 2) }}
                                </div>
                            </div>
                        </label>
                    </div>
                    {{-- Amount updates reactively with the selected currency --}}
                    <input type="hidden" name="amount" :value="selectedAmount">
                    <input type="hidden" name="payment_frequency" value="{{ $paymentConfig->default_frequency ?? 'yearly' }}">
                </div>

                {{-- Payment Method Toggle --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
                    <h3 class="font-semibold text-gray-800 mb-3">
                        <i class="fas fa-credit-card mr-2 text-yellow-500"></i>Payment Method
                    </h3>
                    <x-payment-method-toggle />
                </div>

                {{-- Terms --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" required class="mt-0.5 h-4 w-4 text-green-600 rounded focus:ring-green-500">
                        <span class="text-sm text-gray-600">
                            I confirm this payment. The amount will be deducted from my MTN Mobile Money account.
                        </span>
                    </label>
                </div>

                <button type="submit"
                        class="w-full py-3 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold rounded-lg transition flex items-center justify-center gap-2">
                    <i class="fas fa-mobile-alt"></i> Pay with MTN MoMo
                </button>
                <p class="text-center text-xs text-gray-500 mt-3">
                    <i class="fas fa-shield-alt mr-1 text-green-500"></i>
                    Secured with MTN Mobile Money
                </p>
            </form>

        </div>
    </div>

</x-app-layout>
