@php
    use App\Enums\DateTimeFormats;
    use Carbon\Carbon;
@endphp
<x-app-layout>

    <div class="max-w-full mx-auto sm:px-1 lg:px-1">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900" x-data="pendingPayments()" x-ref="pendingPaymentsRoot">

                <!-- Header -->
                <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                    <p class="text-lg font-semibold text-gray-900">
                        {{ __('Pending Collection') }}
                    </p>
                </div>

                <x-session-message/>

                <!-- Search Form -->
                <x-filters.form action="{{ route('pending_payments.index') }}" :show-search="true" search-name="q"
                                :show-from-date="true" from-date-name="start_date" to-date-name="end_date">
                    <x-filters.search :label="__('Search with Customer ( Name or Mobile Number ) or Bill Number')"/>

                    <x-filters.from-date/>

                    <x-filters.to-date/>
                </x-filters.form>

                <!-- Full Screen Loader -->
                <div x-show="sending"
                     x-cloak
                     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
                     style="display: none;">
                    <div class="text-center">
                        <svg class="animate-spin h-16 w-16 text-white mx-auto" xmlns="http://www.w3.org/2000/svg"
                             fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor"
                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <p class="text-white mt-4 text-lg font-medium">{{ __('Processing...') }}</p>
                    </div>
                </div>

                <div class="mt-4">
                    <x-buttons.primary
                        x-bind:disabled="selectedRows.length === 0 || sending"
                        x-bind:class="(selectedRows.length === 0 || sending) ? 'opacity-50 pointer-events-none' : ''"
                        @click="selectedRows.length > 0 && !sending && submitSelectedRows()"
                    >
                        <svg x-show="sending" class="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg"
                             fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor"
                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <x-icons.rocket-launch x-show="!sending" class="w-4 h-4 mr-2"/>
                        {{ __('Verify Selected Transaction') }}
                    </x-buttons.primary>
                </div>


                <!-- Product Orders Table -->
                <div class="table-responsive">
                    <table class="min-w-full table-auto border-collapse border border-gray-300 text-xs mt-4">
                        <thead class="bg-gray-200 text-gray-700">
                        <tr>
                            <x-th rowspan="2" class="text-center w-10">
                                <div class="flex justify-center items-center">
                                    <input type="checkbox"
                                           id="selectAll"
                                           class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 cursor-pointer"
                                           @change="toggleAll()"
                                           :checked="selectedRows.length === @json($pendingPayments->count())">
                                </div>
                            </x-th>
                            <x-th>SL</x-th>
                            <x-th>Customer Name</x-th>
                            <x-th>Customer Mobile Number</x-th>
                            <x-th>Bill Number</x-th>
                            <x-th>Payment Initiate Time</x-th>
                            <x-th>Payment Channel</x-th>
                            <x-th>Action</x-th>
                        </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200 text-center">
                        @foreach($pendingPayments as $pendingPayment)
                            <tr
                                data-id="{{ $pendingPayment->id }}"
                                :class="isSelected({{ $pendingPayment->id }})
                                                            ? 'bg-purple-100 text-gray-900 font-medium'
                                                            : 'hover:bg-gray-50'"
                                class="cursor-pointer transition-colors duration-150"
                            >
                                <x-td class="text-center w-10" @click="toggleSelection({{ $pendingPayment->id }})">
                                    <div class="flex justify-center items-center">
                                        <input type="checkbox"
                                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 cursor-pointer orderCheckbox"
                                               :checked="isSelected({{ $pendingPayment->id }})"
                                               @click.stop="toggleSelection({{ $pendingPayment->id }})"
                                               data-id="{{ $pendingPayment->id }}">
                                    </div>
                                </x-td>
                                <x-td>{{  $pendingPayments->firstItem() + $loop->index }}</x-td>
                                <x-td class="text-left">
                                    {{ $pendingPayment?->customerDetail?->cust_nid_name_en }}
                                </x-td>
                                <x-td>
                                    {{ $pendingPayment?->customerDetail?->user?->mobile_number }}
                                </x-td>
                                <x-td>
                                    {{ $pendingPayment?->productOrder?->bill_number }}
                                </x-td>
                                <x-td class="text-nowrap">
                                    {{ $pendingPayment?->initiate_time->format(DateTimeFormats::CLIENT_DATE_TIME) }}
                                </x-td>
                                <x-td>
                                    {{ $pendingPayment->payment_channel }}
                                </x-td>

                                <x-td>
                                    <x-buttons.primary
                                        type="button"
                                        @click="showPaymentDetails({{ $pendingPayment->id }})"
                                        x-bind:disabled="isSelected({{ $pendingPayment->id }})"
                                        x-bind:class="isSelected({{ $pendingPayment->id }}) ? 'opacity-50 cursor-not-allowed' : ''"
                                    >
                                        <x-icons.rocket-launch class="w-4 h-4"/>
                                    </x-buttons.primary>
                                </x-td>

                            </tr>
                        @endforeach
                        </tbody>

                    </table>

                    <div class="mt-4">
                        {{ $pendingPayments->withQueryString()->links() }}
                    </div>
                </div>

                <!-- Payment Details Modal -->
                <div x-show="showDetailsModal"
                     x-cloak
                     class="fixed inset-0 z-50 overflow-y-auto"
                     style="display: none;">
                    <div class="flex items-center justify-center min-h-screen px-4">
                        <!-- Backdrop -->
                        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
                             @click="showDetailsModal = false"></div>

                        <!-- Modal Content -->
                        <div class="relative bg-white rounded-lg shadow-xl max-w-2xl w-full p-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-gray-900">
                                    {{ __('Payment Details') }}
                                </h3>
                                <button @click="showDetailsModal = false" class="text-gray-400 hover:text-gray-600">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>

                            <div x-show="paymentDetail" class="space-y-3">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">{{ __('Payment Id') }}</p>
                                        <p class="text-sm text-gray-900" x-text="paymentDetail?.paymentID"></p>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">{{ __('Transaction Id') }}</p>
                                        <p class="text-sm text-gray-900" x-text="paymentDetail?.trxID"></p>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">{{ __('Payer Reference') }}</p>
                                        <p class="text-sm text-gray-900" x-text="paymentDetail?.payerReference"></p>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">{{ __('Payer Account') }}</p>
                                        <p class="text-sm text-gray-900" x-text="paymentDetail?.payerAccount"></p>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">{{ __('Initiate Time') }}</p>
                                        <p class="text-sm text-gray-900" x-text="paymentDetail?.paymentCreateTime"></p>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">{{ __('Execution Time') }}</p>
                                        <p class="text-sm text-gray-900" x-text="paymentDetail?.paymentExecuteTime"></p>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">{{ __('Transaction Amount') }}</p>
                                        <p class="text-sm text-gray-900" x-text="paymentDetail?.amount"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="flex justify-end mt-6">
                                <x-buttons.secondary @click="showDetailsModal = false">
                                    {{ __('Cancel') }}
                                </x-buttons.secondary>

                                <x-buttons.primary class="ml-3" @click="collectPayment(initializePaymentId)">
                                    {{ __('Add To Collection') }}
                                </x-buttons.primary>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Error Modal -->
                <div x-show="showErrorModal"
                     x-cloak
                     class="fixed inset-0 z-50 overflow-y-auto"
                     style="display: none;">
                    <div class="flex items-center justify-center min-h-screen px-4 text-center">
                        <!-- Backdrop -->
                        <div class="fixed inset-0 bg-black/30 backdrop-blur-sm transition-opacity"
                             @click="showErrorModal = false"></div>

                        <!-- Modal Content -->
                        <div
                            class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full p-6">
                            <h3 class="text-lg font-semibold text-red-700 mb-4">
                                {{ __('Error') }}
                            </h3>

                            <p class="text-gray-600 mb-6" x-text="errorMessage"></p>

                            <div class="flex justify-end gap-3">
                                <x-buttons.secondary @click="showErrorModal = false">
                                    {{ __('Cancel') }}
                                </x-buttons.secondary>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        function pendingPayments() {
            const allIds = @json($pendingPayments->pluck('id'));
            const totalCount = @json($pendingPayments->count());

            return {
                selectedRows: [],
                sending: false,

                showDetailsModal: false,
                showErrorModal: false,

                initializePaymentId: null,
                paymentDetail: null,
                errorMessage: '',

                async showPaymentDetails(id) {
                    this.paymentDetail = null;
                    this.initializePaymentId = id;
                    this.sending = true;

                    try {
                        const response = await fetch(`{{route('pending_payments.index')}}/${id}`, {
                            method: 'GET',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json'
                            }
                        });

                        if (!response.ok) {
                            const errBody = await response.json().catch(() => null);
                            if (response.status === 403) {
                                this.errorMessage = errBody?.message || 'Forbidden';
                                this.showDetailsModal = false;
                                this.showErrorModal = true;
                                return; // handled 403 — don't reload
                            }
                            // other non-403 errors -> throw to trigger reload
                            throw new Error(errBody?.message || `Request failed with status ${response.status}`);
                        }

                        const data = await response.json();
                        this.paymentDetail = data.data;
                        this.showDetailsModal = true;
                    } catch (error) {
                        console.error('showPaymentDetails error:', error);
                        // If not already showing a 403 modal, reload for other errors
                        if (!this.showErrorModal) {
                            window.location.reload();
                        }
                    } finally {
                        this.sending = false;
                    }
                },

                async collectPayment(id) {
                    this.sending = true;

                    try {
                        const response = await fetch(`{{route('pending_payments.index')}}/${id}/collect-payment`, {
                            method: 'POST',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json',
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        });

                        if (!response.ok) {
                            const errBody = await response.json().catch(() => null);
                            if (response.status === 403) {
                                this.errorMessage = errBody?.message || 'Forbidden';
                                this.showDetailsModal = false;
                                this.showErrorModal = true;
                                return; // handled 403 — don't reload
                            }
                            // other non-403 errors -> throw to trigger reload
                            throw new Error(errBody?.message || `Request failed with status ${response.status}`);
                        }

                        await response.json();
                        this.showDetailsModal = false;
                        window.location.reload();
                    } catch (error) {
                        console.error('collectPayment error:', error);
                        if (!this.showErrorModal) {
                            window.location.reload();
                        }
                    } finally {
                        this.sending = false;
                    }
                },


                toggleSelection(id) {
                    const idx = this.selectedRows.indexOf(id);
                    if (idx === -1) {
                        this.selectedRows.push(id);
                    } else {
                        this.selectedRows.splice(idx, 1);
                    }
                },

                isSelected(id) {
                    return this.selectedRows.includes(id);
                },

                toggleAll() {
                    if (this.selectedRows.length === totalCount) {
                        this.selectedRows = [];
                    } else {
                        this.selectedRows = allIds.slice();
                    }
                },

                submitSelectedRows() {
                    if (this.sending || this.selectedRows.length === 0) return;

                    this.sending = true;

                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '{{ route('pending_payments.all_check') }}';

                    const csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = '_token';
                    csrfInput.value = '{{ csrf_token() }}';
                    form.appendChild(csrfInput);

                    this.selectedRows.forEach(id => {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'ids[]';
                        input.value = id;
                        form.appendChild(input);
                    });

                    document.body.appendChild(form);
                    form.submit();
                },
            };
        }
    </script>
</x-app-layout>