<x-app-layout>
    <x-slot name="title">Create Quotation</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">Create Quotation</h1>
            <p class="text-sm text-gray-500 mt-1">Generate a new pricing quotation for a lead or customer.</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('quotations.index') }}" class="text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
                &larr; Back to Quotations
            </a>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <form action="{{ route('quotations.store') }}" method="POST" class="p-6">
            @csrf
            
            @if ($errors->any())
                <div class="mb-6 bg-red-50 p-4 rounded-md border border-red-200">
                    <ul class="list-disc list-inside text-sm text-red-600">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <!-- Client Info -->
                <div class="col-span-1 md:col-span-2">
                    <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Client Information</h3>
                    <p class="text-xs text-gray-500 mb-4">Select either a Lead or an existing Customer.</p>
                </div>
                
                <div>
                    <label for="lead_id" class="block text-sm font-medium text-gray-700 mb-1">Select Lead</label>
                    <select name="lead_id" id="lead_id" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500">
                        <option value="">-- Choose a Lead --</option>
                        @foreach($leads as $lead)
                            <option value="{{ $lead->id }}" {{ old('lead_id') == $lead->id ? 'selected' : '' }}>{{ $lead->name }} ({{ $lead->email ?? $lead->phone }})</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="customer_id" class="block text-sm font-medium text-gray-700 mb-1">Or Select Customer</label>
                    <select name="customer_id" id="customer_id" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500">
                        <option value="">-- Choose a Customer --</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }} ({{ $customer->cnic ?? $customer->phone }})</option>
                        @endforeach
                    </select>
                </div>

                <!-- Property Info -->
                <div class="col-span-1 md:col-span-2 mt-4">
                    <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Property & Pricing</h3>
                </div>

                <div>
                    <label for="property_id" class="block text-sm font-medium text-gray-700 mb-1">Select Property <span class="text-red-500">*</span></label>
                    <select name="property_id" id="property_id" required class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500">
                        <option value="">-- Choose Available Property --</option>
                        @foreach($properties as $property)
                            <option value="{{ $property->id }}" {{ old('property_id') == $property->id ? 'selected' : '' }} data-price="{{ $property->price }}">
                                Plot {{ $property->plot_number }} ({{ $property->block->name ?? '' }} - {{ $property->block->project->name ?? '' }}) - PKR {{ number_format($property->price) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label for="valid_until" class="block text-sm font-medium text-gray-700 mb-1">Valid Until <span class="text-red-500">*</span></label>
                    <input type="date" name="valid_until" id="valid_until" required value="{{ old('valid_until', now()->addDays(7)->format('Y-m-d')) }}" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500">
                </div>

                <div>
                    <label for="base_price" class="block text-sm font-medium text-gray-700 mb-1">Base Price (PKR) <span class="text-red-500">*</span></label>
                    <input type="number" name="base_price" id="base_price" required min="0" value="{{ old('base_price', 0) }}" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500" oninput="calculateNet()">
                </div>

                <div>
                    <label for="discount" class="block text-sm font-medium text-gray-700 mb-1">Discount (PKR)</label>
                    <input type="number" name="discount" id="discount" min="0" value="{{ old('discount', 0) }}" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500" oninput="calculateNet()">
                </div>

                <div>
                    <label for="development_charges" class="block text-sm font-medium text-gray-700 mb-1">Development Charges (PKR)</label>
                    <input type="number" name="development_charges" id="development_charges" min="0" value="{{ old('development_charges', 0) }}" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500" oninput="calculateNet()">
                </div>

                <div>
                    <label for="other_charges" class="block text-sm font-medium text-gray-700 mb-1">Other Charges (PKR)</label>
                    <input type="number" name="other_charges" id="other_charges" min="0" value="{{ old('other_charges', 0) }}" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500" oninput="calculateNet()">
                </div>

                <div class="col-span-1 md:col-span-2 bg-gray-50 p-4 rounded-lg mt-2 flex items-center justify-between">
                    <span class="text-gray-700 font-medium text-lg">Net Price</span>
                    <span id="net_price_display" class="text-2xl font-bold text-primary-600">PKR 0</span>
                </div>
            </div>

            <div class="flex justify-end pt-4 border-t border-gray-100">
                <button type="submit" class="bg-primary-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-700 focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors">
                    Generate Quotation
                </button>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        function calculateNet() {
            const base = parseFloat(document.getElementById('base_price').value) || 0;
            const discount = parseFloat(document.getElementById('discount').value) || 0;
            const dev = parseFloat(document.getElementById('development_charges').value) || 0;
            const other = parseFloat(document.getElementById('other_charges').value) || 0;
            
            const net = base - discount + dev + other;
            document.getElementById('net_price_display').textContent = 'PKR ' + net.toLocaleString();
        }

        document.getElementById('property_id').addEventListener('change', function() {
            const selected = this.options[this.selectedIndex];
            if (selected.value) {
                const price = selected.dataset.price;
                if(price) {
                    document.getElementById('base_price').value = price;
                    calculateNet();
                }
            }
        });

        // Initialize calculation on load
        calculateNet();
    </script>
    @endpush
</x-app-layout>
