@extends('admin.layouts.app')

@section('title', 'Edit Invoice - ' . $invoice->invoice_number)

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <a href="{{ route('accounting.invoices') }}" class="text-gray-600 hover:text-gray-800 text-sm">
            <i class="fas fa-arrow-left mr-2"></i>Back to Invoices
        </a>
        <h1 class="text-2xl font-bold text-gray-800 mt-2">Invoice {{ $invoice->invoice_number }}</h1>
        <p class="text-gray-500 text-sm">
            {{ $invoice->guest_name }} | {{ $invoice->invoice_date->format('M d, Y') }}
        </p>
    </div>
    <div class="flex space-x-3">
        <a href="{{ route('accounting.invoices.download', $invoice) }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
            <i class="fas fa-download mr-2"></i>Download PDF
        </a>
        @if($invoice->status !== 'paid')
        <a href="{{ route('accounting.invoices.send', $invoice) }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
            <i class="fas fa-paper-plane mr-2"></i>Send Invoice
        </a>
        @endif
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800">Invoice Items</h3>
                <button onclick="openItemModal()" class="bg-gold hover:bg-gold-dark text-white px-4 py-2 rounded-lg text-sm">
                    <i class="fas fa-plus mr-2"></i>Add Item
                </button>
            </div>

            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Description</th>
                        <th class="px-4 py-2 text-right 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">Price</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Tax</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Amount</th>
                        <th class="px-4 py-2"></th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($invoice->items as $item)
                    <tr>
                        <td class="px-4 py-3">{{ $item->description }}</td>
                        <td class="px-4 py-3 text-right">{{ $item->quantity }}</td>
                        <td class="px-4 py-3 text-right">₦{{ number_format($item->unit_price, 0) }}</td>
                        <td class="px-4 py-3 text-right">{{ $item->tax_rate }}%</td>
                        <td class="px-4 py-3 text-right font-medium">₦{{ number_format($item->amount + $item->tax_amount, 0) }}</td>
                        <td class="px-4 py-3">
                            <form action="{{ route('accounting.invoices.items.remove', [$invoice, $item]) }}" method="POST" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-800 text-sm">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-gray-500">No items added yet.</td>
                    </tr>
                    @endforelse
                </tbody>
                <tfoot class="bg-gray-50">
                    <tr>
                        <td colspan="4" class="px-4 py-2 text-right">Subtotal:</td>
                        <td class="px-4 py-2 text-right font-medium">₦{{ number_format($invoice->subtotal, 0) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="4" class="px-4 py-2 text-right">Tax:</td>
                        <td class="px-4 py-2 text-right font-medium">₦{{ number_format($invoice->tax_amount, 0) }}</td>
                        <td></td>
                    </tr>
                    @if($invoice->discount_amount > 0)
                    <tr>
                        <td colspan="4" class="px-4 py-2 text-right">Discount:</td>
                        <td class="px-4 py-2 text-right font-medium text-green-600">-₦{{ number_format($invoice->discount_amount, 0) }}</td>
                        <td></td>
                    </tr>
                    @endif
                    <tr class="bg-navy/10">
                        <td colspan="4" class="px-4 py-2 text-right font-bold">Total:</td>
                        <td class="px-4 py-2 text-right font-bold text-navy">₦{{ number_format($invoice->total_amount, 0) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="4" class="px-4 py-2 text-right">Paid:</td>
                        <td class="px-4 py-2 text-right font-medium text-green-600">₦{{ number_format($invoice->amount_paid, 0) }}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="4" class="px-4 py-2 text-right font-bold">Balance:</td>
                        <td class="px-4 py-2 text-right font-bold text-red-600">₦{{ number_format($invoice->balance, 0) }}</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div>
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">Record Payment</h3>
            @if($invoice->balance > 0)
            <form action="{{ route('accounting.invoices.payment', $invoice) }}" method="POST">
                @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" max="{{ $invoice->balance }}" 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="card">Card</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Reference</label>
                        <input type="text" name="reference_number" class="w-full border rounded-lg px-3 py-2">
                    </div>
                    <button type="submit" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700">
                        Record Payment
                    </button>
                </div>
            </form>
            @else
            <p class="text-green-600 font-medium text-center py-4">Invoice is fully paid</p>
            @endif
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">Guest Information</h3>
            <div class="space-y-2 text-sm">
                <p><strong>Name:</strong> {{ $invoice->guest_name }}</p>
                @if($invoice->guest_email)
                <p><strong>Email:</strong> {{ $invoice->guest_email }}</p>
                @endif
                @if($invoice->guest_phone)
                <p><strong>Phone:</strong> {{ $invoice->guest_phone }}</p>
                @endif
                @if($invoice->company_name)
                <p><strong>Company:</strong> {{ $invoice->company_name }}</p>
                @endif
            </div>
        </div>
    </div>
</div>

<div id="itemModal" 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">Add Item</h3>
        <form action="{{ route('accounting.invoices.items.add', $invoice) }}" method="POST">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description *</label>
                    <input type="text" name="description" required class="w-full border rounded-lg px-3 py-2">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Quantity *</label>
                        <input type="number" name="quantity" min="1" value="1" 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">Unit Price (₦) *</label>
                        <input type="number" name="unit_price" min="0" step="0.01" required class="w-full border rounded-lg px-3 py-2">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tax Rate (%)</label>
                    <input type="number" name="tax_rate" min="0" max="100" value="0" 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="closeItemModal()" 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">Add Item</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function openItemModal() { document.getElementById('itemModal').classList.remove('hidden'); }
function closeItemModal() { document.getElementById('itemModal').classList.add('hidden'); }
</script>
@endpush
@endsection