@extends('layouts.app')

@section('title', 'Bookings - WedBooker')
@section('page-title', 'Booking Management')
@section('page-description', 'Track all guest bookings')

@section('content')
<div class="space-y-6">
    
    <!-- Quick Navigation Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4" data-aos="fade-up">
        <a href="{{ route('bookings.accommodation') }}" class="glass-card rounded-2xl p-4 border border-white/10 hover:bg-white/10 transition text-center group">
            <i class="fas fa-hotel text-2xl text-purple-400 mb-2 block group-hover:scale-110 transition"></i>
            <span class="text-white text-sm">Accommodation</span>
            <p class="text-gray-400 text-xs mt-1">57 bookings</p>
        </a>
        <a href="{{ route('bookings.transport') }}" class="glass-card rounded-2xl p-4 border border-white/10 hover:bg-white/10 transition text-center group">
            <i class="fas fa-bus text-2xl text-green-400 mb-2 block group-hover:scale-110 transition"></i>
            <span class="text-white text-sm">Transport</span>
            <p class="text-gray-400 text-xs mt-1">32 bookings</p>
        </a>
        <a href="{{ route('bookings.activities') }}" class="glass-card rounded-2xl p-4 border border-white/10 hover:bg-white/10 transition text-center group">
            <i class="fas fa-utensils text-2xl text-orange-400 mb-2 block group-hover:scale-110 transition"></i>
            <span class="text-white text-sm">Activities</span>
            <p class="text-gray-400 text-xs mt-1">48 bookings</p>
        </a>
    </div>
    
    <!-- Booking Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300" data-aos="fade-up">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400 text-sm">Total Bookings</p>
                    <h3 class="text-2xl font-bold text-white">89</h3>
                    <p class="text-green-400 text-sm mt-2">+12 this week</p>
                </div>
                <i class="fas fa-calendar-check text-3xl text-purple-400"></i>
            </div>
            <a href="{{ route('bookings.index') }}" class="mt-3 inline-block text-purple-400 text-sm hover:text-purple-300 transition">View All →</a>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400 text-sm">Confirmed</p>
                    <h3 class="text-2xl font-bold text-green-400">57</h3>
                    <p class="text-green-400 text-sm mt-2">64% confirmed</p>
                </div>
                <i class="fas fa-check-circle text-3xl text-green-400"></i>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400 text-sm">Pending</p>
                    <h3 class="text-2xl font-bold text-yellow-400">32</h3>
                    <p class="text-yellow-400 text-sm mt-2">Needs action</p>
                </div>
                <i class="fas fa-clock text-3xl text-yellow-400"></i>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400 text-sm">Total Spent</p>
                    <h3 class="text-2xl font-bold text-blue-400">£12,450</h3>
                    <p class="text-blue-400 text-sm mt-2">Accommodation: £8,200</p>
                </div>
                <i class="fas fa-pound-sign text-3xl text-blue-400"></i>
            </div>
        </div>
    </div>
    
    <!-- Bookings Table -->
    <div class="glass-card rounded-2xl p-6 border border-white/10 overflow-x-auto" data-aos="fade-up">
        <div class="flex flex-wrap justify-between items-center gap-4 mb-4">
            <h3 class="text-xl font-bold text-white">All Bookings</h3>
            <div class="flex flex-wrap gap-2">
                <select id="serviceFilter" class="px-3 py-1 bg-white/10 border border-white/20 rounded text-white text-sm focus:outline-none focus:border-purple-500">
                    <option value="all">All Services</option>
                    <option value="accommodation">Accommodation</option>
                    <option value="transport">Transport</option>
                    <option value="activity">Activities</option>
                </select>
                <select id="statusFilter" class="px-3 py-1 bg-white/10 border border-white/20 rounded text-white text-sm focus:outline-none focus:border-purple-500">
                    <option value="all">All Status</option>
                    <option value="confirmed">Confirmed</option>
                    <option value="pending">Pending</option>
                    <option value="cancelled">Cancelled</option>
                </select>
                <button onclick="applyFilters()" class="px-3 py-1 bg-purple-600 rounded text-white text-sm hover:bg-purple-700 transition">
                    <i class="fas fa-filter mr-1"></i>Apply
                </button>
                <a href="{{ route('bookings.export') }}" class="px-3 py-1 bg-green-600/20 text-green-400 rounded text-sm hover:bg-green-600/30 transition">
                    <i class="fas fa-download mr-1"></i>Export
                </a>
            </div>
        </div>
        
        <table class="data-table w-full" id="bookingsTable">
            <thead>
                <tr class="border-b border-white/10">
                    <th class="text-left py-3 px-4 text-gray-400">Guest</th>
                    <th class="text-left py-3 px-4 text-gray-400">Service</th>
                    <th class="text-left py-3 px-4 text-gray-400">Details</th>
                    <th class="text-left py-3 px-4 text-gray-400">Date</th>
                    <th class="text-left py-3 px-4 text-gray-400">Amount</th>
                    <th class="text-left py-3 px-4 text-gray-400">Status</th>
                    <th class="text-left py-3 px-4 text-gray-400">Actions</th>
                 </tr>
            </thead>
            <tbody>
                @php
                    $bookings = [
                        ['id' => 1, 'name' => 'Sarah Johnson', 'service' => 'accommodation', 'service_name' => 'Accommodation', 'details' => 'The Grand Hotel - Deluxe Room', 'date' => '2024-06-14 to 2024-06-16', 'amount' => '£360', 'status' => 'confirmed'],
                        ['id' => 2, 'name' => 'Michael Brown', 'service' => 'transport', 'service_name' => 'Transport', 'details' => 'Airport Pickup - 2 passengers', 'date' => '2024-06-15, 10:00 AM', 'amount' => '£50', 'status' => 'pending'],
                        ['id' => 3, 'name' => 'Emma Wilson', 'service' => 'activity', 'service_name' => 'Activity', 'details' => 'Welcome Dinner - 2 guests', 'date' => '2024-06-14, 7:00 PM', 'amount' => '£80', 'status' => 'confirmed'],
                        ['id' => 4, 'name' => 'James Taylor', 'service' => 'accommodation', 'service_name' => 'Accommodation', 'details' => 'The Riverside Inn - Standard Room', 'date' => '2024-06-14 to 2024-06-16', 'amount' => '£240', 'status' => 'cancelled'],
                        ['id' => 5, 'name' => 'Lisa Anderson', 'service' => 'transport', 'service_name' => 'Transport', 'details' => 'Venue Shuttle - 2 passengers', 'date' => '2024-06-15, 2:00 PM', 'amount' => '£30', 'status' => 'pending'],
                    ];
                @endphp
                @foreach($bookings as $booking)
                <tr class="hover:bg-white/5 transition" data-service="{{ $booking['service'] }}" data-status="{{ $booking['status'] }}">
                    <td class="py-3 px-4 text-white">{{ $booking['name'] }} </td>
                    <td class="py-3 px-4">
                        @if($booking['service'] == 'accommodation')
                            <span class="badge badge-info"><i class="fas fa-hotel mr-1"></i>{{ $booking['service_name'] }}</span>
                        @elseif($booking['service'] == 'transport')
                            <span class="badge badge-info"><i class="fas fa-bus mr-1"></i>{{ $booking['service_name'] }}</span>
                        @else
                            <span class="badge badge-info"><i class="fas fa-utensils mr-1"></i>{{ $booking['service_name'] }}</span>
                        @endif
                     </td>
                    <td class="py-3 px-4 text-gray-300">{{ $booking['details'] }} </td>
                    <td class="py-3 px-4 text-gray-300">{{ $booking['date'] }} </td>
                    <td class="py-3 px-4 text-gray-300">{{ $booking['amount'] }} </td>
                    <td class="py-3 px-4">
                        <span class="badge badge-{{ $booking['status'] === 'confirmed' ? 'success' : ($booking['status'] === 'pending' ? 'warning' : 'danger') }}">
                            {{ ucfirst($booking['status']) }}
                        </span>
                     </td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <a href="{{ route('bookings.show', $booking['id']) }}" class="text-blue-400 hover:text-blue-300 transition" title="View Details">
                                <i class="fas fa-eye"></i>
                            </a>
                            <button onclick="confirmBooking({{ $booking['id'] }})" class="text-green-400 hover:text-green-300 transition {{ $booking['status'] === 'confirmed' ? 'opacity-50 cursor-not-allowed' : '' }}" title="Confirm Booking" {{ $booking['status'] === 'confirmed' ? 'disabled' : '' }}>
                                <i class="fas fa-check"></i>
                            </button>
                            <button onclick="cancelBooking({{ $booking['id'] }})" class="text-red-400 hover:text-red-300 transition" title="Cancel Booking">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                     </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        
        <div class="mt-4 flex justify-between items-center pt-4 border-t border-white/10">
            <p class="text-gray-400 text-sm">Showing 1-5 of 89 bookings</p>
            <div class="flex gap-2">
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">Previous</button>
                <button class="px-3 py-1 bg-purple-600 rounded text-white">1</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">2</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">3</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">Next</button>
            </div>
        </div>
    </div>
    
    <!-- Recent Activity -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <h3 class="text-xl font-bold text-white mb-4">Recent Booking Activity</h3>
        <div class="space-y-3">
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg">
                <div class="w-10 h-10 bg-green-600/20 rounded-full flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-400"></i>
                </div>
                <div class="flex-1">
                    <p class="text-white">Booking confirmed for <span class="font-semibold">Sarah Johnson</span></p>
                    <p class="text-gray-400 text-sm">Accommodation • The Grand Hotel</p>
                </div>
                <span class="text-gray-500 text-xs">2 hours ago</span>
            </div>
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg">
                <div class="w-10 h-10 bg-yellow-600/20 rounded-full flex items-center justify-center">
                    <i class="fas fa-clock text-yellow-400"></i>
                </div>
                <div class="flex-1">
                    <p class="text-white">New booking request from <span class="font-semibold">Michael Brown</span></p>
                    <p class="text-gray-400 text-sm">Transport • Airport Pickup</p>
                </div>
                <span class="text-gray-500 text-xs">5 hours ago</span>
            </div>
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg">
                <div class="w-10 h-10 bg-red-600/20 rounded-full flex items-center justify-center">
                    <i class="fas fa-times-circle text-red-400"></i>
                </div>
                <div class="flex-1">
                    <p class="text-white">Booking cancelled for <span class="font-semibold">James Taylor</span></p>
                    <p class="text-gray-400 text-sm">Accommodation • The Riverside Inn</p>
                </div>
                <span class="text-gray-500 text-xs">Yesterday</span>
            </div>
        </div>
    </div>
</div>

<form id="bookingActionForm" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="_method" id="formMethod" value="PUT">
</form>

@push('scripts')
<script>
    function applyFilters() {
        const serviceFilter = document.getElementById('serviceFilter').value;
        const statusFilter = document.getElementById('statusFilter').value;
        const rows = document.querySelectorAll('#bookingsTable tbody tr');
        
        rows.forEach(row => {
            const service = row.getAttribute('data-service');
            const status = row.getAttribute('data-status');
            
            let show = true;
            if(serviceFilter !== 'all' && service !== serviceFilter) show = false;
            if(statusFilter !== 'all' && status !== statusFilter) show = false;
            
            row.style.display = show ? '' : 'none';
        });
    }
    
    function submitBookingAction(bookingId, action) {
        const form = document.getElementById('bookingActionForm');
        let url = '';
        let method = 'PUT';
        
        if(action === 'confirm') {
            if(confirm('Confirm this booking?')) {
                url = '{{ url("bookings") }}/' + bookingId + '/confirm';
                form.action = url;
                form.submit();
            }
        } else if(action === 'cancel') {
            if(confirm('Cancel this booking?')) {
                url = '{{ url("bookings") }}/' + bookingId + '/cancel';
                form.action = url;
                form.submit();
            }
        }
    }
    
    function confirmBooking(bookingId) {
        submitBookingAction(bookingId, 'confirm');
    }
    
    function cancelBooking(bookingId) {
        submitBookingAction(bookingId, 'cancel');
    }
    
    function exportBookings() {
        window.location.href = "{{ route('bookings.export') }}";
    }
    
    // Add animation to cards
    document.querySelectorAll('.glass-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
</script>
@endpush
@endsection