{{-- resources/views/purchase/index.blade.php --}}
@extends('layouts.finance.finance')

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

        {{-- Page Header --}}
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-semibold text-gray-800">Purchase Management</h1>
            <div class="space-x-2">
                </div>
        </div>

        {{-- Purchase Overview Stats --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Committed PO Value</h3>
                <p class="text-3xl font-bold text-gray-900 mt-2">₹{{ number_format($stats['total_po_value'], 2) }}</p>
            </div>

            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Pending Approvals</h3>
                <p class="text-3xl font-bold text-amber-600 mt-2">{{ $stats['pending_approvals_count'] }}</p>
            </div>

            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Verified GRNs</h3>
                <p class="text-3xl font-bold text-green-600 mt-2">{{ $stats['completed_grns_count'] }}</p>
            </div>
        </div>

        {{-- 1. SECTION: PURCHASE ORDERS --}}
        <div class="bg-white rounded-lg shadow border border-gray-200 mb-10 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-gray-800">Recent Purchase Orders</h2>
                <!-- <a href="#" class="text-sm text-blue-600 hover:underline">View All POs →</a> -->
            </div>
            <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">PO Number</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">Items</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($purchaseOrders as $po)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600 cursor-pointer">
                                    {{ $po->po_number }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $po->vendor->company_name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $po->items_count }} items</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    ₹{{ number_format($po->total_amount, 2) }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <span
                                        class="px-2.5 py-1 text-xs font-semibold rounded-full 
                                            {{ $po->status === 'received' ? 'bg-green-100 text-green-800' : ($po->status === 'ordered' ? 'bg-blue-100 text-blue-800' : 'bg-amber-100 text-amber-800') }}">
                                        {{ ucfirst($po->status) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
                                    <a href="{{ route('finance.orders.show', $po->id) }}"
                                        class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-semibold py-1.5 px-3 rounded shadow-sm">
                                        View
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">No Purchase Orders found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {{-- 2. SECTION: APPROVALS QUEUE --}}
            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-800">Pending Due Approvals Queue</h2>
                    <a href="{{ route('finance.approvals') }}" class="text-sm text-blue-600 hover:underline">Manage Approvals →</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Document</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase text-center">Action</th>
                            </tr>
                        </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($pendingApprovals as $approval)
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-4 whitespace-nowrap text-sm">
                                    <div class="font-medium text-gray-900">{{ $approval->po_number }}</div>
                                    <div class="text-xs text-gray-400">Vendor: {{ $approval->vendor->company_name ?? 'N/A' }}</div>
                                </td>

                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    ₹{{ number_format($approval->total_amount, 2) }}
                                </td>

                                <td class="px-4 py-4 whitespace-nowrap text-sm text-center">
                                    {{-- Pay Due Button triggering the modal --}}
                                    <button
                                        onclick="openPaymentModal('{{ $approval->id }}', '{{ $approval->po_number }}', {{ $approval->total_amount }})"
                                        class="bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold py-1.5 px-3 rounded shadow-sm">
                                        Pay Due
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="px-4 py-4 text-center text-sm text-gray-500">All caught up! No pending approvals.</td>
                            </tr>
                        @endforelse
                    </tbody>
                    </table>
                </div>
            </div>

            {{-- 3. SECTION: GOODS RECEIVED NOTES (GRN) --}}
            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-800">Goods Received Notes (GRN)</h2>
                    <a href="#" class="text-sm text-blue-600 hover:underline">Inward Registry →</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">GRN No.</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Ref PO</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Received Date</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($grns as $grn)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        <div>{{ $grn->grn_number }}</div>
                                        <div class="text-xs text-gray-400">{{ $grn->vendor_name }}</div>
                                    </td>
                                    <td class="px-4 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">
                                        {{ $grn->po_number }}</td>
                                    <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ \Carbon\Carbon::parse($grn->received_date)->format('M d, Y') }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="px-4 py-4 text-center text-sm text-gray-500">No goods received logs found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- ADD PAYMENT MODAL --}}
        <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>
        {{-- END ADD PAYMENT MODAL --}}

    </div>

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

    function openPaymentModal(orderId, poNumber, totalAmount) {
        // Format number as Indian currency string
        const formattedAmount = parseFloat(totalAmount).toLocaleString('en-IN', {
            minimumFractionDigits: 2, maximumFractionDigits: 2
        });

        // Populate text
        document.getElementById('pay-modal-po').innerText = poNumber;
        document.getElementById('pay-modal-total-amt').innerText = '₹ ' + formattedAmount;
        document.getElementById('pay-modal-pending-amt').innerText = '₹ ' + formattedAmount;

        // Set input constraints
        const amountInput = document.getElementById('pay-input-amount');
        amountInput.max = totalAmount;
        amountInput.value = '';

        // Dynamically set the correct finance payment URL
        const form = document.getElementById('paymentForm');
        form.action = paymentAddBaseUrl.replace('PLACEHOLDER_ID', orderId);

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

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