@extends('layouts.app')
@section('title', 'BusGo | New Booking')

@section('content')
<style>
    [x-cloak] { display: none !important; }
 
    .trip-card {
        transition: all 0.3s ease;
    }
 
    .trip-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }
 
    .trip-card.selected {
        border-color: #4f46e5;
        background-color: #eef2ff;
    }
    
    .stat-card {
        transition: all 0.2s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
</style>

<div x-data="{
    selectedTripId: null,
    selectedTrip: null,
    farePerSeat: 0,
    numberOfSeats: 1,
    allocatedSeats: [],
    availableSeats: [],
    useCustomFare: false,
    customFarePerSeat: 0,
    paymentMethod: '',
    isLoadingSeats: false,
    trips: {{ json_encode($trips->map(function($trip) {
        return [
            'id' => $trip->id,
            'from_station' => $trip->from_station,
            'to_station' => $trip->to_station,
            'bus_fare' => $trip->bus_fare,
            'start_date' => $trip->start_date,
            'start_time' => $trip->start_time,
            'bus_name' => $trip->bus->name ?? 'N/A',
            'bus_plate' => $trip->bus->number_plate ?? 'N/A',
            'total_seats' => $trip->bus->number_of_seats ?? 0,
            'confirmed_seats' => $trip->booked_seats_count,
            'pending_seats' => $trip->pending_seats_count ?? 0,
            'available_seats' => $trip->available_seats_count,
            'available_seat_numbers' => $trip->available_seat_numbers
        ];
    }) ) }},

    init() {
        if (this.selectedTripId) {
            this.updateSelectedTrip();
            this.loadAvailableSeats();
        }
    },
    
    updateSelectedTrip() {
        this.selectedTrip = this.trips.find(t => t.id == this.selectedTripId);
        if (this.selectedTrip) {
            this.farePerSeat = parseFloat(this.selectedTrip.bus_fare) || 0;
            this.customFarePerSeat = this.farePerSeat;
            this.numberOfSeats = 1;
            this.allocatedSeats = [];
            this.availableSeats = [];
            this.loadAvailableSeats();
        }
    },

    selectTrip(tripId) {
        this.selectedTripId = tripId;
        this.updateSelectedTrip();
    },
    
    loadAvailableSeats() {
        if (!this.selectedTripId) return;
        
        this.isLoadingSeats = true;
        
        // First try to get seats from API
        fetch('/tripmanager/public/trips/' + this.selectedTripId + '/available-seats')
            .then(response => response.json())
            .then(data => {
                console.log('API Response:', data);
                
                // If seats array is empty but we have available_count, generate seats
                if ((!data.seats || data.seats.length === 0) && data.available_count > 0) {
                    this.availableSeats = Array.from({length: data.available_count}, (_, i) => i + 1);
                } else if (data.seats && data.seats.length > 0) {
                    this.availableSeats = data.seats;
                } else {
                    // Fallback: generate seats based on total seats
                    const totalSeats = this.selectedTrip?.total_seats || 56;
                    this.availableSeats = Array.from({length: totalSeats}, (_, i) => i + 1);
                }
                
                console.log('Available seats:', this.availableSeats);
                this.allocateSeats();
                this.isLoadingSeats = false;
            })
            .catch(error => {
                console.error('Error loading seats:', error);
                // Fallback: generate seats based on total seats from selected trip
                const totalSeats = this.selectedTrip?.total_seats || 56;
                this.availableSeats = Array.from({length: totalSeats}, (_, i) => i + 1);
                this.allocateSeats();
                this.isLoadingSeats = false;
            });
    },
    
    allocateSeats() {
        if (!this.availableSeats.length) {
            this.allocatedSeats = [];
            return;
        }
        
        const sortedAvailable = [...this.availableSeats].sort((a, b) => a - b);
        this.allocatedSeats = sortedAvailable.slice(0, this.numberOfSeats);
    },
    
    updateSeatAllocation() {
        let seats = parseInt(this.numberOfSeats);
        if (isNaN(seats) || seats < 1) {
            seats = 1;
            this.numberOfSeats = 1;
        }
        
        const maxSeats = this.availableSeats.length;
        if (maxSeats > 0 && seats > maxSeats) {
            seats = maxSeats;
            this.numberOfSeats = seats;
        }
        
        this.allocateSeats();
        this.getTotal();
    },

    getTotal() {
        const fare = this.useCustomFare ? parseFloat(this.customFarePerSeat) || 0 : this.farePerSeat;
        return (fare * parseInt(this.numberOfSeats || 1)).toFixed(2);
    },
    
    getRemainingAfterBooking() {
        if (!this.selectedTrip) return 0;
        const available = this.availableSeats.length;
        return Math.max(0, available - (parseInt(this.numberOfSeats) || 0));
    },
    
    getAvailableSeats() {
        return this.availableSeats.length;
    },
    
    getTotalSeats() {
        return this.selectedTrip ? (this.selectedTrip.total_seats || 0) : 0;
    },
    
    getConfirmedSeats() {
        return this.selectedTrip ? (this.selectedTrip.confirmed_seats || 0) : 0;
    },
    
    getPendingSeats() {
        return this.selectedTrip ? (this.selectedTrip.pending_seats || 0) : 0;
    },
    
    canBook() {
        if (!this.selectedTrip) return false;
        const availableCount = this.availableSeats.length;
        const seatsRequested = parseInt(this.numberOfSeats) || 0;
        return seatsRequested <= availableCount && seatsRequested > 0;
    }
}" x-init="init()">

    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight">New Booking</h1>
            <p class="text-slate-500 font-medium">Create a new passenger booking.</p>
        </div>
        <a href="{{ route('bookings.index') }}" 
           class="border border-slate-300 text-slate-600 hover:bg-slate-50 px-4 py-2 rounded font-bold text-xs transition flex items-center gap-2">
            ← Back to Bookings
        </a>
    </div>

    @if($errors->any())
    <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded">
        <p class="font-medium mb-2">Please fix the following errors:</p>
        <ul class="list-disc list-inside text-sm">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('bookings.store') }}" method="POST" class="space-y-6">
        @csrf

        <!-- Trip Selection -->
        <div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
                <h3 class="font-bold text-slate-700">Select Trip</h3>
            </div>
            <div class="p-6">
                @if($trips->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($trips as $trip)
                    <label class="cursor-pointer">
                        <div 
                            class="trip-card border-2 rounded-xl p-5"
                            :class="{ 'selected border-indigo-500 bg-indigo-50': selectedTripId == {{ $trip->id }} }"
                            @click="selectTrip({{ $trip->id }})">
                            <div class="flex justify-between items-start mb-3">
                                <div>
                                    <div class="font-bold text-lg text-slate-900">
                                        {{ $trip->from_station ?? 'N/A' }} → {{ $trip->to_station ?? 'N/A' }}
                                    </div>
                                    <div class="text-xs text-slate-500 mt-1">
                                        {{ \Carbon\Carbon::parse($trip->start_date)->format('d M Y') }} at {{ $trip->start_time }}
                                    </div>
                                </div>
                                <span class="text-sm font-semibold text-indigo-600">
                                    ZMW {{ number_format($trip->bus_fare, 2) }}
                                </span>
                            </div>
                            <div class="text-xs text-slate-500 space-y-1">
                                <div>Bus: {{ $trip->bus->name ?? 'N/A' }} ({{ $trip->bus->number_plate ?? 'N/A' }})</div>
                                <div class="flex justify-between">
                                    <span>Available Seats:</span>
                                    <span class="font-semibold text-emerald-600">{{ $trip->available_seats_count ?? 0 }}</span>
                                </div>
                            </div>
                        </div>
                        <input type="radio" name="trip_id" value="{{ $trip->id }}" class="hidden" 
                               :checked="selectedTripId == {{ $trip->id }}">
                    </label>
                    @endforeach
                </div>
                @else
                <div class="text-center py-12 text-slate-400">
                    <p class="text-lg font-medium">No scheduled trips available</p>
                    <p class="text-sm mt-2">Please create a scheduled trip first.</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Seat Statistics Cards -->
        <div x-show="selectedTripId" x-cloak class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gradient-to-r from-slate-50 to-slate-100 rounded-xl border border-slate-200 p-4 stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs font-medium text-slate-500 uppercase tracking-wider">Total Seats</p>
                        <p class="text-2xl font-black text-slate-800 mt-1" x-text="getTotalSeats()"></p>
                    </div>
                    <div class="bg-slate-200 rounded-full p-2">
                        <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-200 p-4 stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs font-medium text-green-700 uppercase tracking-wider">Confirmed Seats</p>
                        <p class="text-2xl font-black text-green-700 mt-1" x-text="getConfirmedSeats()"></p>
                    </div>
                    <div class="bg-green-200 rounded-full p-2">
                        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <div class="bg-gradient-to-r from-yellow-50 to-amber-50 rounded-xl border border-yellow-200 p-4 stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs font-medium text-yellow-700 uppercase tracking-wider">Pending Seats</p>
                        <p class="text-2xl font-black text-yellow-700 mt-1" x-text="getPendingSeats()"></p>
                    </div>
                    <div class="bg-yellow-200 rounded-full p-2">
                        <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-4 stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs font-medium text-blue-700 uppercase tracking-wider">Available Seats</p>
                        <p class="text-2xl font-black text-blue-700 mt-1" x-text="getAvailableSeats()"></p>
                    </div>
                    <div class="bg-blue-200 rounded-full p-2">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- Allocated Seats Display -->
        <div x-show="selectedTripId" x-cloak class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
                <h3 class="font-bold text-slate-700">Seat Allocation</h3>
                <p class="text-xs text-slate-500 mt-1">Seats will be automatically allocated from the available seats</p>
            </div>
            <div class="p-6">
                <div x-show="isLoadingSeats" class="text-center py-8">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto"></div>
                    <p class="mt-2 text-sm text-slate-500">Loading seat availability...</p>
                </div>
                <div x-show="!isLoadingSeats && allocatedSeats.length > 0" class="text-center">
                    <div class="inline-flex items-center gap-2 bg-green-100 text-green-800 px-4 py-2 rounded-lg">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span class="font-semibold">Allocated Seats:</span>
                        <span class="font-mono font-bold text-lg" x-text="allocatedSeats.join(', ')"></span>
                    </div>
                    <p class="text-xs text-slate-500 mt-2">These seats will be reserved for this booking</p>
                </div>
                <div x-show="!isLoadingSeats && allocatedSeats.length === 0 && availableSeats.length > 0" class="text-center py-4 text-amber-600">
                    <p>No seats allocated. Please select the number of seats above.</p>
                </div>
                <div x-show="!isLoadingSeats && availableSeats.length === 0" class="text-center py-4 text-red-600">
                    <p>No seats available for this trip.</p>
                </div>
            </div>
        </div>

        <!-- Booking Details -->
        <div x-show="selectedTripId" x-cloak class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
                <h3 class="font-bold text-slate-700">Booking Details</h3>
            </div>
            <div class="p-6">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Number of Seats -->
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Number of Seats <span class="text-red-500">*</span></label>
                        <input type="number"
                               name="number_of_seats"
                               x-model.number="numberOfSeats"
                               @change="updateSeatAllocation()"
                               required 
                               min="1"
                               :max="getAvailableSeats()"
                               class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-3 focus:border-indigo-500 focus:ring-1">
                        <p class="text-xs text-slate-400 mt-1" x-show="selectedTrip">
                            After booking: <span x-text="getRemainingAfterBooking()"></span> seats remaining
                        </p>
                    </div>

                    <!-- Fare per Seat -->
                    <div>
                        <label class="flex items-center gap-2 mb-2">
                            <input type="checkbox" x-model="useCustomFare" class="w-4 h-4">
                            <span class="text-sm font-medium">Use Custom Fare per Seat</span>
                        </label>

                        <input type="number" 
                               step="0.01"
                               name="custom_fare"
                               :value="useCustomFare ? customFarePerSeat : farePerSeat"
                               @input="if(useCustomFare) customFarePerSeat = $el.value; getTotal()"
                               class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-3 focus:border-indigo-500 focus:ring-1"
                               placeholder="Fare per seat (ZMW)">
                    </div>
                </div>

                <!-- Live Total Amount -->
                <div class="mt-6 p-5 bg-indigo-50 border border-indigo-200 rounded-xl">
                    <div class="flex justify-between items-center">
                        <span class="font-semibold text-slate-700">Total Amount</span>
                        <span class="text-3xl font-black text-indigo-700">
                            ZMW <span x-text="getTotal()"></span>
                        </span>
                    </div>
                </div>

                <!-- Hidden input for seat numbers -->
                <input type="hidden" name="seat_numbers" :value="JSON.stringify(allocatedSeats)">

                <!-- Passenger Information -->
                <div class="mt-8">
                    <h4 class="font-semibold text-slate-700 mb-4">Passenger Information</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slate-500 mb-1">Full Name <span class="text-red-500">*</span></label>
                            <input type="text" name="passenger_name" required value="{{ old('passenger_name') }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-3 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-500 mb-1">Phone Number <span class="text-red-500">*</span></label>
                            <input type="text" name="passenger_phone" required value="{{ old('passenger_phone') }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-3 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-500 mb-1">Email Address</label>
                            <input type="email" name="passenger_email" value="{{ old('passenger_email') }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-3 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-500 mb-1">ID Type <span class="text-red-500">*</span></label>
                            <select name="passenger_id_type" required class="w-full border border-slate-200 rounded-lg px-3 py-3">
                                <option value="">Select ID Type</option>
                                <option value="national_id" {{ old('passenger_id_type') == 'national_id' ? 'selected' : '' }}>National ID</option>
                                <option value="passport" {{ old('passenger_id_type') == 'passport' ? 'selected' : '' }}>Passport</option>
                                <option value="driver_license" {{ old('passenger_id_type') == 'driver_license' ? 'selected' : '' }}>Driver License</option>
                            </select>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-xs font-bold text-slate-500 mb-1">ID Number <span class="text-red-500">*</span></label>
                            <input type="text" name="passenger_id_number" required value="{{ old('passenger_id_number') }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-3 focus:border-indigo-500">
                        </div>
                    </div>
                </div>

                <!-- Payment Method -->
                <div class="mt-8">
                    <h4 class="font-semibold text-slate-700 mb-4">Payment Method</h4>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                        <button type="button" @click="paymentMethod = 'cash'" 
                                :class="{ 'bg-indigo-600 text-white': paymentMethod === 'cash' }"
                                class="px-4 py-3 rounded-lg border text-sm font-medium hover:bg-slate-50 transition">Cash</button>
                        <button type="button" @click="paymentMethod = 'mobile_money'" 
                                :class="{ 'bg-indigo-600 text-white': paymentMethod === 'mobile_money' }"
                                class="px-4 py-3 rounded-lg border text-sm font-medium hover:bg-slate-50 transition">Mobile Money</button>
                        <button type="button" @click="paymentMethod = 'card'" 
                                :class="{ 'bg-indigo-600 text-white': paymentMethod === 'card' }"
                                class="px-4 py-3 rounded-lg border text-sm font-medium hover:bg-slate-50 transition">Card</button>
                        <button type="button" @click="paymentMethod = 'bank_transfer'" 
                                :class="{ 'bg-indigo-600 text-white': paymentMethod === 'bank_transfer' }"
                                class="px-4 py-3 rounded-lg border text-sm font-medium hover:bg-slate-50 transition">Bank Transfer</button>
                    </div>
                    <input type="hidden" name="payment_method" :value="paymentMethod">
                </div>

                <div class="mt-6">
                    <label class="block text-xs font-bold text-slate-500 mb-1">Special Requests / Notes</label>
                    <textarea name="notes" rows="3" class="w-full border border-slate-200 rounded-lg px-3 py-3">{{ old('notes') }}</textarea>
                </div>
            </div>
        </div>

        <div class="flex gap-3 pt-4">
            <a href="{{ route('bookings.index') }}" class="flex-1 text-center px-6 py-3 border border-slate-300 text-slate-600 rounded-lg font-bold hover:bg-slate-50 transition">
                Cancel
            </a>
            <button type="submit" 
                    x-show="selectedTripId"
                    :disabled="!canBook()"
                    :class="{ 'opacity-50 cursor-not-allowed': !canBook() }"
                    class="flex-1 px-6 py-3 bg-indigo-600 text-white rounded-lg font-bold hover:bg-indigo-700 transition shadow-md">
                Create Booking
            </button>
        </div>
        <div x-show="selectedTripId && !canBook()" 
             class="text-center text-red-600 text-sm mt-2">
            ⚠️ Cannot book <span x-text="numberOfSeats"></span> seats. Only <span x-text="availableSeats.length"></span> seats available.
        </div>
    </form>
</div>

<script>
// Auto-hide flash messages after 3 seconds
setTimeout(function() {
    var alerts = document.querySelectorAll('.bg-red-100, .bg-green-100');
    alerts.forEach(function(alert) {
        alert.style.transition = 'opacity 0.5s';
        alert.style.opacity = '0';
        setTimeout(function() {
            if(alert && alert.remove) alert.remove();
        }, 500);
    });
}, 3000);
</script>
@endsection