@extends('layouts.app')

@section('title', 'Create Booking')
@section('page-title', 'Create New Booking')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow-md p-8">
        <form action="{{ route('bookings.store') }}" method="POST">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">CNTR NO *</label>
                    <input type="text" name="cntr_no" value="{{ old('cntr_no') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Customer *</label>
                    <div class="flex gap-2">
                        <select name="customer_id" id="customer_id" required
                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                            <option value="">Select Customer</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                            @endforeach
                        </select>
                        <button type="button" onclick="openCustomerModal()" 
                            class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center whitespace-nowrap">
                            <i class="fas fa-plus mr-2"></i>Add Customer
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Or <a href="{{ route('customers.create') }}" target="_blank" class="text-purple-600 hover:underline">open in new tab</a></p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Booking Date *</label>
                    <input type="date" name="booking_date" value="{{ old('booking_date', date('Y-m-d')) }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Pickup Date *</label>
                    <input type="date" name="pickup_date" value="{{ old('pickup_date') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Delivery Date</label>
                    <input type="date" name="delivery_date" value="{{ old('delivery_date') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                    <p class="text-xs text-gray-500 mt-1">Optional</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Pickup Location *</label>
                    <input type="text" name="pickup_location" value="{{ old('pickup_location') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Delivery Location *</label>
                    <input type="text" name="delivery_location" value="{{ old('delivery_location') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Weight (KG) *</label>
                    <input type="number" step="0.01" name="weight_kg" value="{{ old('weight_kg') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Volume (CBM)</label>
                    <input type="number" step="0.01" name="volume_cbm" value="{{ old('volume_cbm') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                    <p class="text-xs text-gray-500 mt-1">Optional - Leave empty if not applicable</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Carton Count</label>
                    <input type="number" name="carton_count" value="{{ old('carton_count') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                    <p class="text-xs text-gray-500 mt-1">Optional - Leave empty if not applicable</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Total Amount *</label>
                    <input type="number" step="0.01" name="total_amount" value="{{ old('total_amount') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                </div>

                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Cargo Description *</label>
                    <textarea name="cargo_description" rows="3" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">{{ old('cargo_description') }}</textarea>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                    <textarea name="notes" rows="2"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">{{ old('notes') }}</textarea>
                    <p class="text-xs text-gray-500 mt-1">Optional</p>
                </div>
            </div>

            <div class="mt-8 flex justify-end space-x-4">
                <a href="{{ route('bookings.index') }}" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:shadow-lg">
                    Create Booking
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Customer Modal -->
<div id="customerModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="p-6 border-b flex justify-between items-center">
            <h3 class="text-xl font-semibold text-gray-800">Add New Customer</h3>
            <button onclick="closeCustomerModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times text-2xl"></i>
            </button>
        </div>
        
        <form id="quickCustomerForm" class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Name *</label>
                    <input type="text" id="modal_name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
                    <input type="email" id="modal_email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
                    <input type="text" id="modal_phone" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Company Name</label>
                    <input type="text" id="modal_company" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Address *</label>
                    <textarea id="modal_address" required rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">City *</label>
                    <input type="text" id="modal_city" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">State *</label>
                    <input type="text" id="modal_state" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Postal Code *</label>
                    <input type="text" id="modal_postal" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Country *</label>
                    <input type="text" id="modal_country" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>
            </div>
            
            <div class="mt-6 flex justify-end space-x-4">
                <button type="button" onclick="closeCustomerModal()" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    Cancel
                </button>
                <button type="submit" class="px-6 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg hover:shadow-lg">
                    <i class="fas fa-save mr-2"></i>Save Customer
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openCustomerModal() {
    document.getElementById('customerModal').classList.remove('hidden');
}

function closeCustomerModal() {
    document.getElementById('customerModal').classList.add('hidden');
    document.getElementById('quickCustomerForm').reset();
}

document.getElementById('quickCustomerForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = {
        name: document.getElementById('modal_name').value,
        email: document.getElementById('modal_email').value,
        phone: document.getElementById('modal_phone').value,
        company_name: document.getElementById('modal_company').value,
        address: document.getElementById('modal_address').value,
        city: document.getElementById('modal_city').value,
        state: document.getElementById('modal_state').value,
        postal_code: document.getElementById('modal_postal').value,
        country: document.getElementById('modal_country').value,
    };
    
    try {
        const response = await fetch('{{ route("customers.store") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify(formData)
        });
        
        if (response.ok) {
            const data = await response.json();
            // Add new customer to dropdown
            const select = document.getElementById('customer_id');
            const option = new Option(formData.name, data.id, true, true);
            select.add(option);
            
            closeCustomerModal();
            alert('Customer added successfully!');
        } else {
            const error = await response.json();
            alert('Error: ' + (error.message || 'Failed to create customer'));
        }
    } catch (error) {
        alert('Error: ' + error.message);
    }
});

// Close modal on outside click
document.getElementById('customerModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeCustomerModal();
    }
});
</script>
@endsection