<x-app-layout>
    <x-slot name="title">Invoices</x-slot>
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Generate Invoice</h1>
            <p class="text-sm text-gray-500 mt-1">Create a new invoice or payment receipt.</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('invoices.index') }}" class="text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
                &larr; Back to Invoices
            </a>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <form action="{{ route('invoices.store') }}" method="POST" class="p-6 sm:p-8">
            @csrf
            
            @if($installment)
                <input type="hidden" name="installment_id" value="{{ $installment->id }}">
                <div class="mb-8 bg-blue-50 p-4 rounded-lg border border-blue-100">
                    <h4 class="text-blue-800 font-medium text-sm">Linked to Installment</h4>
                    <p class="text-blue-600 text-xs mt-1">This invoice is pre-filled for Installment due on {{ \Carbon\Carbon::parse($installment->due_date)->format('M d, Y') }}.</p>
                </div>
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                
                <div>
                    <label for="customer_id" class="block text-sm font-medium text-gray-700">Customer *</label>
                    <select name="customer_id" id="customer_id" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">Select a customer</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}" {{ ($installment && $installment->installmentPlan->customer_id == $customer->id) ? 'selected' : '' }}>
                                {{ $customer->name }} ({{ $customer->cnic ?? $customer->phone }})
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label for="property_id" class="block text-sm font-medium text-gray-700">Property / Plot</label>
                    <select name="property_id" id="property_id" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">Select a property (optional)</option>
                        @foreach($properties as $property)
                            <option value="{{ $property->id }}" {{ ($installment && $installment->installmentPlan->property_id == $property->id) ? 'selected' : '' }}>
                                Plot {{ $property->plot_number }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700">Invoice Type *</label>
                    <select name="type" id="type" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="Installment" {{ $installment ? 'selected' : '' }}>Installment</option>
                        <option value="Down Payment">Down Payment</option>
                        <option value="Token">Token</option>
                        <option value="Full Payment">Full Payment</option>
                        <option value="Fine">Fine / Surcharge</option>
                    </select>
                </div>

                <div>
                    <label for="amount" class="block text-sm font-medium text-gray-700">Amount (PKR) *</label>
                    <input type="number" name="amount" id="amount" value="{{ $installment ? $installment->amount_due : '' }}" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>
                
                <div>
                    <label for="date" class="block text-sm font-medium text-gray-700">Date *</label>
                    <input type="date" name="date" id="date" value="{{ date('Y-m-d') }}" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>

                <div>
                    <label for="payment_method" class="block text-sm font-medium text-gray-700">Payment Method *</label>
                    <select name="payment_method" id="payment_method" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="Cash">Cash</option>
                        <option value="Bank Transfer">Bank Transfer</option>
                        <option value="Cheque">Cheque</option>
                        <option value="Credit Card">Credit Card</option>
                    </select>
                </div>

                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700">Status *</label>
                    <select name="status" id="status" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="Unpaid">Unpaid</option>
                        <option value="Paid" selected>Paid</option>
                        <option value="Overdue">Overdue</option>
                    </select>
                </div>
                
                <div class="col-span-1 md:col-span-2">
                    <label for="notes" class="block text-sm font-medium text-gray-700">Notes / Details</label>
                    <textarea name="notes" id="notes" rows="3" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"></textarea>
                </div>

            </div>

            <div class="mt-8 pt-5 border-t border-gray-200 flex justify-end">
                <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    Generate Invoice
                </button>
            </div>
        </form>
    </div>
</x-app-layout>
