@extends('admin.layouts.app')

@section('title', 'Invoices')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Invoices</h1>
        <p class="text-gray-500 text-sm mt-1">Create and manage guest invoices</p>
    </div>
    <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 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">Guest</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">Paid</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">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($invoices as $invoice)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 text-sm font-medium">{{ $invoice->invoice_number }}</td>
                <td class="px-6 py-4 text-sm">{{ $invoice->guest_name }}</td>
                <td class="px-6 py-4 text-sm text-right">₦{{ number_format($invoice->total_amount, 0) }}</td>
                <td class="px-6 py-4 text-sm text-right text-green-600">₦{{ number_format($invoice->amount_paid, 0) }}</td>
                <td class="px-6 py-4 text-sm text-right font-medium {{ $invoice->balance > 0 ? 'text-red-600' : 'text-green-600' }}">
                    ₦{{ number_format($invoice->balance, 0) }}
                </td>
                <td class="px-6 py-4 text-sm">{{ $invoice->invoice_date->format('M d, Y') }}</td>
                <td class="px-6 py-4">
                    <span class="px-2 py-1 rounded text-xs {{ $invoice->status === 'paid' ? 'bg-green-100 text-green-800' : ($invoice->status === 'overdue' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
                        {{ ucfirst($invoice->status) }}
                    </span>
                </td>
                <td class="px-6 py-4">
                    <div class="flex space-x-2">
                        <a href="{{ route('accounting.invoices.edit', $invoice) }}" class="text-blue-600 hover:text-blue-800 text-sm">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="{{ route('accounting.invoices.download', $invoice) }}" class="text-gray-600 hover:text-gray-800 text-sm">
                            <i class="fas fa-download"></i>
                        </a>
                        @if($invoice->status !== 'paid')
                        <a href="{{ route('accounting.invoices.send', $invoice) }}" class="text-green-600 hover:text-green-800 text-sm">
                            <i class="fas fa-paper-plane"></i>
                        </a>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" class="px-6 py-8 text-center text-gray-500">No invoices found.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">
    {{ $invoices->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">Create Invoice</h3>
        <form action="{{ route('accounting.invoices.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">Guest Name *</label>
                    <input type="text" name="guest_name" 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">Email</label>
                    <input type="email" name="guest_email" class="w-full border rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                    <input type="text" name="guest_phone" 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">Company Name</label>
                    <input type="text" name="company_name" 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" 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="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">Create & Add Items</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function openModal() { document.getElementById('modal').classList.remove('hidden'); }
function closeModal() { document.getElementById('modal').classList.add('hidden'); }
</script>
@endpush
@endsection