@extends('layouts.finance.finance')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-semibold text-gray-800">Pending Due Approvals</h1>
            <a href="{{ route('finance.purchasesDetails') }}" class="text-sm text-blue-600 hover:underline">← Back to
                Purchases</a>
        </div>

        <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Document</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Vendor</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Project</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase">Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($pendingApprovals as $approval)
                            @php
                                $paidAmt = $approval->payment->paid_amount ?? 0;
                                $pendingAmt = $approval->payment->pending_amount ?? $approval->total_amount;
                            @endphp
                            <tr class="hover:bg-gray-50 cursor-pointer transition" data-id="{{ $approval->id }}"
                                data-po="{{ $approval->po_number }}"
                                data-vendor="{{ $approval->vendor->company_name ?? 'N/A' }}"
                                data-project="{{ $approval->project->title ?? 'General / Overhead' }}"
                                data-amount-formatted="{{ number_format($approval->total_amount, 2) }}"
                                data-amount-raw="{{ $approval->total_amount }}" data-paid-raw="{{ $paidAmt }}"
                                data-pending-raw="{{ $pendingAmt }}"
                                data-date="{{ \Carbon\Carbon::parse($approval->created_at)->format('d M, Y') }}"
                                data-items="{{ json_encode($approval->items ?? []) }}" onclick="openPoModal(this)">

                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    {{ $approval->po_number }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $approval->vendor->company_name ?? 'N/A' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $approval->project->title ?? 'General / Overhead' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    ₹{{ number_format($approval->total_amount, 2) }}
                                    @if($paidAmt > 0)
                                        <span class="block text-xs text-gray-400 font-normal">
                                            ₹{{ number_format($pendingAmt, 2) }} pending
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
                                    @if($pendingAmt > 0)
                                        <button
                                            onclick="event.stopPropagation(); openPaymentModal('{{ $approval->id }}', '{{ $approval->po_number }}', {{ $approval->total_amount }}, {{ $pendingAmt }})"
                                            class="bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold py-1.5 px-4 rounded shadow-sm">
                                            Pay Due
                                        </button>
                                    @else
                                        <span onclick="event.stopPropagation();"
                                            class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-100 text-green-800 cursor-default border border-green-200">
                                            Paid
                                        </span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">
                                    All caught up! No pending approvals at the moment.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- 1. Overlay / Modal for PO DETAILS --}}
        <div id="poModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog"
            aria-modal="true">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closePoModal()"
                    aria-hidden="true"></div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div
                    class="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-2xl sm:w-full">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                                <h3 class="text-lg leading-6 font-medium text-gray-900 border-b pb-3">Purchase Order Details
                                </h3>

                                <div class="mt-4 grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <span class="block text-gray-500 font-medium">PO Number</span>
                                        <span class="block text-gray-900 font-semibold" id="modal-po-number"></span>
                                    </div>
                                    <div>
                                        <span class="block text-gray-500 font-medium">Total Amount</span>
                                        <span class="block text-gray-900 font-semibold text-lg text-blue-600"
                                            id="modal-amount"></span>
                                    </div>
                                    <div>
                                        <span class="block text-gray-500 font-medium">Vendor</span>
                                        <span class="block text-gray-900" id="modal-vendor"></span>
                                    </div>
                                    <div>
                                        <span class="block text-gray-500 font-medium">Project</span>
                                        <span class="block text-gray-900" id="modal-project"></span>
                                    </div>
                                </div>

                                <div class="mt-6 border-t pt-4">
                                    <h4 class="text-sm font-medium text-gray-900 mb-3">Items in this Order</h4>
                                    <div class="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
                                        <table class="min-w-full divide-y divide-gray-200">
                                            <thead class="bg-gray-100">
                                                <tr>
                                                    <th
                                                        class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
                                                        Item</th>
                                                    <th
                                                        class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">
                                                        Qty</th>
                                                    <th
                                                        class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">
                                                        Total</th>
                                                </tr>
                                            </thead>
                                            <tbody id="modal-items-list" class="bg-white divide-y divide-gray-200"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse border-t">
                        <button type="button" id="btn-modal-pay"
                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 sm:ml-3 sm:w-auto sm:text-sm">
                            Pay Due
                        </button>
                        <button type="button"
                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                            onclick="closePoModal()">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- 2. Overlay / Modal for ADD PAYMENT --}}
        <div id="paymentModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog"
            aria-modal="true">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closePaymentModal()"
                    aria-hidden="true"></div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div
                    class="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-lg sm:w-full">

                    <form id="paymentForm" method="POST"
                        action="{{ route('finance.payments.add', ['order' => 'PLACEHOLDER_ID']) }}">
                        @csrf

                        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                            <div class="flex justify-between items-center border-b pb-3 mb-4">
                                <div>
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">Add Payment</h3>
                                    <p class="text-sm text-gray-500 font-mono mt-1" id="pay-modal-po">PO-XXXXXX</p>
                                </div>
                                <button type="button" onclick="closePaymentModal()"
                                    class="text-gray-400 hover:text-gray-500">
                                    <span class="sr-only">Close</span>
                                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>

                            {{-- Summary Bar --}}
                            <div class="grid grid-cols-2 gap-3 mb-5">
                                <div class="bg-gray-50 rounded-md p-3 text-center border border-gray-100">
                                    <div class="text-[10px] font-bold text-gray-500 uppercase tracking-wider">Total Amount
                                    </div>
                                    <div class="font-mono font-semibold text-gray-900 mt-1" id="pay-modal-total-amt">₹ 0.00
                                    </div>
                                </div>
                                <div class="bg-red-50 rounded-md p-3 text-center border border-red-100">
                                    <div class="text-[10px] font-bold text-red-500 uppercase tracking-wider">Pending</div>
                                    <div class="font-mono font-semibold text-red-600 mt-1" id="pay-modal-pending-amt">₹ 0.00
                                    </div>
                                </div>
                            </div>

                            {{-- Form Fields --}}
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">
                                        Amount Paying <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative rounded-md shadow-sm">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <span class="text-gray-500 sm:text-sm">₹</span>
                                        </div>
                                        <input type="number" step="0.01" name="paid_amount" id="pay-input-amount" required
                                            class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 sm:text-sm border-gray-300 rounded-md py-2 px-3 border"
                                            placeholder="0.00">
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">
                                        Payment Date <span class="text-red-500">*</span>
                                    </label>
                                    <input type="date" name="payment_date" required value="{{ date('Y-m-d') }}"
                                        class="focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md py-2 px-3 border">
                                </div>

                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">
                                        Payment Method <span class="text-red-500">*</span>
                                    </label>
                                    <select name="payment_method" required
                                        class="focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md py-2 px-3 border bg-white">
                                        <option value="">— Select —</option>
                                        <option value="bank_transfer">Bank Transfer</option>
                                        <option value="upi">UPI</option>
                                        <option value="rtgs">RTGS</option>
                                        <option value="neft">NEFT</option>
                                        <option value="cheque">Cheque</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">
                                        Transaction ID
                                    </label>
                                    <input type="text" name="transaction_id" placeholder="Bank ref number"
                                        class="focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md py-2 px-3 border">
                                </div>

                                <div class="col-span-1 sm:col-span-2">
                                    <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">
                                        Notes
                                    </label>
                                    <textarea name="notes" rows="2" placeholder="Optional notes..."
                                        class="focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md py-2 px-3 border"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse border-t">
                            <button type="submit"
                                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 sm:ml-3 sm:w-auto sm:text-sm">
                                Record Payment
                            </button>
                            <button type="button"
                                class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                                onclick="closePaymentModal()">
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>

    <script>
        const paymentAddBaseUrl = "{{ route('finance.payments.add', ['order' => 'PLACEHOLDER_ID']) }}";

        // --- PO DETAILS MODAL LOGIC ---
        function openPoModal(rowElement) {
            const id = rowElement.getAttribute('data-id');
            const poNumber = rowElement.getAttribute('data-po');
            const vendor = rowElement.getAttribute('data-vendor');
            const project = rowElement.getAttribute('data-project');
            const formattedAmount = rowElement.getAttribute('data-amount-formatted');
            const rawAmount = rowElement.getAttribute('data-amount-raw');
            const rawPending = rowElement.getAttribute('data-pending-raw');
            const items = JSON.parse(rowElement.getAttribute('data-items') || "[]");

            document.getElementById('modal-po-number').innerText = poNumber;
            document.getElementById('modal-vendor').innerText = vendor;
            document.getElementById('modal-project').innerText = project;
            document.getElementById('modal-amount').innerText = '₹' + formattedAmount;

            const itemsList = document.getElementById('modal-items-list');
            itemsList.innerHTML = '';
            if (items.length > 0) {
                items.forEach(item => {
                    const itemName = item.name || item.item_name || item.description || 'N/A';
                    const qty = item.quantity || item.qty || 1;
                    const price = item.total_price || item.total || item.price || 0;
                    const formattedPrice = parseFloat(price).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

                    itemsList.innerHTML += `
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-4 py-2 text-sm text-gray-900">${itemName}</td>
                                            <td class="px-4 py-2 text-sm text-gray-500 text-center">${qty}</td>
                                            <td class="px-4 py-2 text-sm text-gray-900 text-right font-medium">₹${formattedPrice}</td>
                                        </tr>
                                    `;
                });
            } else {
                itemsList.innerHTML = `<tr><td colspan="3" class="px-4 py-4 text-center text-sm text-gray-500">No items recorded.</td></tr>`;
            }

            const payBtn = document.getElementById('btn-modal-pay');
            payBtn.onclick = function () {
                closePoModal();
                openPaymentModal(id, poNumber, rawAmount, rawPending);
            };

            document.getElementById('poModal').classList.remove('hidden');
        }

        function closePoModal() {
            document.getElementById('poModal').classList.add('hidden');
        }

        // --- ADD PAYMENT MODAL LOGIC ---
        function openPaymentModal(orderId, poNumber, totalAmount, pendingAmount) {
            const formattedTotal = parseFloat(totalAmount).toLocaleString('en-IN', {
                minimumFractionDigits: 2, maximumFractionDigits: 2
            });
            const formattedPending = parseFloat(pendingAmount).toLocaleString('en-IN', {
                minimumFractionDigits: 2, maximumFractionDigits: 2
            });

            document.getElementById('pay-modal-po').innerText = poNumber;
            document.getElementById('pay-modal-total-amt').innerText = '₹ ' + formattedTotal;
            document.getElementById('pay-modal-pending-amt').innerText = '₹ ' + formattedPending;

            const amountInput = document.getElementById('pay-input-amount');
            amountInput.max = pendingAmount;
            amountInput.value = '';

            const form = document.getElementById('paymentForm');
            form.action = paymentAddBaseUrl.replace('PLACEHOLDER_ID', orderId);

            document.getElementById('paymentModal').classList.remove('hidden');
        }

        function closePaymentModal() {
            document.getElementById('paymentModal').classList.add('hidden');
            document.getElementById('paymentForm').reset();
        }
    </script>
@endsection