@extends('admin.layouts.app')

@section('title', 'Accounts Payable')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Accounts Payable</h1>
        <p class="text-gray-500 text-sm mt-1">Manage supplier invoices and payments</p>
    </div>
    <div class="flex space-x-3">
        <a href="{{ route('accounting.vendors') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
            <i class="fas fa-building mr-2"></i>Vendors
        </a>
        <button onclick="openModal()" class="bg-gold hover:bg-gold-dark text-white px-4 py-2 rounded-lg">
            <i class="fas fa-plus mr-2"></i>New Invoice
        </button>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-lg shadow p-4">
        <p class="text-gray-500 text-sm">Total Payable</p>
        <p class="text-xl font-bold text-navy">₦{{ number_format($summary['total'], 0) }}</p>
    </div>
    <div class="bg-white rounded-lg shadow p-4">
        <p class="text-gray-500 text-sm">Paid</p>
        <p class="text-xl font-bold text-green-600">₦{{ number_format($summary['paid'], 0) }}</p>
    </div>
    <div class="bg-white rounded-lg shadow p-4">
        <p class="text-gray-500 text-sm">Pending</p>
        <p class="text-xl font-bold text-yellow-600">₦{{ number_format($summary['pending'], 0) }}</p>
    </div>
    <div class="bg-white rounded-lg shadow p-4">
        <p class="text-gray-500 text-sm">Overdue</p>
        <p class="text-xl font-bold text-red-600">₦{{ number_format($summary['overdue'], 0) }}</p>
    </div>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Invoice #</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">Description</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Amount</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Balance</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Due Date</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">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y">
            @forelse($payables as $ap)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 text-sm font-medium">{{ $ap->invoice_number }}</td>
                <td class="px-6 py-4 text-sm">{{ $ap->vendor_name }}</td>
                <td class="px-6 py-4 text-sm">{{ Str::limit($ap->description, 30) }}</td>
                <td class="px-6 py-4 text-sm text-right">₦{{ number_format($ap->total_amount, 0) }}</td>
                <td class="px-6 py-4 text-sm text-right font-medium">₦{{ number_format($ap->balance, 0) }}</td>
                <td class="px-6 py-4 text-sm {{ $ap->isOverdue() ? 'text-red-600 font-medium' : '' }}">
                    {{ $ap->due_date->format('M d, Y') }}
                </td>
                <td class="px-6 py-4">
                    <span class="px-2 py-1 rounded text-xs {{ $ap->status === 'paid' ? 'bg-green-100 text-green-800' : ($ap->status === 'overdue' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
                        {{ ucfirst($ap->status) }}
                    </span>
                </td>
                <td class="px-6 py-4">
                    @if($ap->balance > 0)
                    <button onclick="openPaymentModal({{ $ap->id }}, {{ $ap->balance }})" class="text-blue-600 hover:text-blue-800 text-sm">
                        <i class="fas fa-money-bill mr-1"></i>Pay
                    </button>
                    @endif
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" class="px-6 py-8 text-center text-gray-500">No accounts payable entries found.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

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

<div id="modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-full max-w-lg">
        <h3 class="text-lg font-bold mb-4">New Invoice</h3>
        <form action="{{ route('accounting.payable.store') }}" method="POST">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Vendor Name *</label>
                    <input type="text" name="vendor_name" required class="w-full border rounded-lg px-3 py-2">
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description *</label>
                    <textarea name="description" rows="2" required class="w-full border rounded-lg px-3 py-2"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Amount (₦) *</label>
                    <input type="number" name="amount" min="0.01" step="0.01" required class="w-full border rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tax Amount (₦)</label>
                    <input type="number" name="tax_amount" min="0" step="0.01" value="0" class="w-full border rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Invoice Date *</label>
                    <input type="date" name="invoice_date" value="{{ now()->format('Y-m-d') }}" required class="w-full border rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Due Date *</label>
                    <input type="date" name="due_date" required class="w-full border rounded-lg px-3 py-2">
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Payment Terms</label>
                    <select name="payment_terms" class="w-full border rounded-lg px-3 py-2">
                        <option value="due_on_receipt">Due on Receipt</option>
                        <option value="net_15">Net 15</option>
                        <option value="net_30" selected>Net 30</option>
                        <option value="net_60">Net 60</option>
                    </select>
                </div>
            </div>
            <div class="flex justify-end space-x-3 mt-6">
                <button type="button" onclick="closeModal()" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-gold text-white rounded-lg hover:bg-gold-dark">Save</button>
            </div>
        </form>
    </div>
</div>

<div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-full max-w-md">
        <h3 class="text-lg font-bold mb-4">Record Payment</h3>
        <p class="text-sm text-gray-600 mb-4">Outstanding Balance: <span id="modalBalance" class="font-bold text-navy"></span></p>
        <form action="" method="POST" id="paymentForm">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Amount (₦) *</label>
                    <input type="number" name="amount" id="paymentAmount" min="0.01" step="0.01" required class="w-full border rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
                    <select name="payment_method" class="w-full border rounded-lg px-3 py-2">
                        <option value="cash">Cash</option>
                        <option value="bank_transfer">Bank Transfer</option>
                        <option value="check">Check</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Reference Number</label>
                    <input type="text" name="reference_number" class="w-full border rounded-lg px-3 py-2">
                </div>
            </div>
            <div class="flex justify-end space-x-3 mt-6">
                <button type="button" onclick="closePaymentModal()" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">Record Payment</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function openModal() { document.getElementById('modal').classList.remove('hidden'); }
function closeModal() { document.getElementById('modal').classList.add('hidden'); }
function openPaymentModal(id, balance) {
    document.getElementById('paymentForm').action = '/admin/accounting/payable/' + id + '/pay';
    document.getElementById('modalBalance').textContent = '₦' + balance.toLocaleString();
    document.getElementById('paymentAmount').max = balance;
    document.getElementById('paymentModal').classList.remove('hidden');
}
function closePaymentModal() { document.getElementById('paymentModal').classList.add('hidden'); }
</script>
@endpush
@endsection