@extends('layouts.app')

@section('title', 'Accommodation Bookings - WedBooker')
@section('page-title', 'Accommodation Management')
@section('page-description', 'Manage guest accommodation bookings')

@section('content')
<div class="space-y-6">
    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400">Total Bookings</p>
                    <h3 class="text-2xl font-bold text-white">57</h3>
                </div>
                <i class="fas fa-bed text-3xl text-purple-400"></i>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up" data-aos-delay="100">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400">Rooms Available</p>
                    <h3 class="text-2xl font-bold text-green-400">28</h3>
                </div>
                <i class="fas fa-door-open text-3xl text-green-400"></i>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up" data-aos-delay="200">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400">Occupancy Rate</p>
                    <h3 class="text-2xl font-bold text-blue-400">67%</h3>
                </div>
                <i class="fas fa-chart-line text-3xl text-blue-400"></i>
            </div>
        </div>
    </div>

    <!-- Hotels Section -->
    <div class="grid md:grid-cols-2 gap-6">
        <!-- The Grand Hotel -->
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-right">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <h3 class="text-2xl font-bold text-white">The Grand Hotel</h3>
                    <p class="text-gray-400">★★★★★ • 0.5 miles from venue</p>
                </div>
                <span class="badge badge-success">Available</span>
            </div>
            
            <div class="space-y-3 mb-4">
                <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
                    <div>
                        <p class="text-white font-semibold">Deluxe Suite</p>
                        <p class="text-gray-400 text-sm">£220/night • 8 rooms left</p>
                    </div>
                    <button class="px-3 py-1 bg-purple-600 rounded text-sm">View</button>
                </div>
                <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
                    <div>
                        <p class="text-white font-semibold">Standard Room</p>
                        <p class="text-gray-400 text-sm">£180/night • 15 rooms left</p>
                    </div>
                    <button class="px-3 py-1 bg-purple-600 rounded text-sm">View</button>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-white/10">
                <div class="flex justify-between items-center">
                    <span class="text-gray-400">Total Bookings: 32</span>
                    <span class="text-green-400">+12 this week</span>
                </div>
            </div>
        </div>

        <!-- The Riverside Inn -->
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-left">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <h3 class="text-2xl font-bold text-white">The Riverside Inn</h3>
                    <p class="text-gray-400">★★★★ • 1.2 miles from venue</p>
                </div>
                <span class="badge badge-warning">Limited</span>
            </div>
            
            <div class="space-y-3 mb-4">
                <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
                    <div>
                        <p class="text-white font-semibold">River View Room</p>
                        <p class="text-gray-400 text-sm">£150/night • 3 rooms left</p>
                    </div>
                    <button class="px-3 py-1 bg-purple-600 rounded text-sm">View</button>
                </div>
                <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
                    <div>
                        <p class="text-white font-semibold">Standard Room</p>
                        <p class="text-gray-400 text-sm">£120/night • 5 rooms left</p>
                    </div>
                    <button class="px-3 py-1 bg-purple-600 rounded text-sm">View</button>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-white/10">
                <div class="flex justify-between items-center">
                    <span class="text-gray-400">Total Bookings: 25</span>
                    <span class="text-orange-400">Almost full</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Accommodation Bookings -->
    <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 Accommodation Bookings</h3>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-white/10">
                        <th class="text-left py-3 text-gray-400">Guest</th>
                        <th class="text-left py-3 text-gray-400">Hotel</th>
                        <th class="text-left py-3 text-gray-400">Room Type</th>
                        <th class="text-left py-3 text-gray-400">Check In</th>
                        <th class="text-left py-3 text-gray-400">Check Out</th>
                        <th class="text-left py-3 text-gray-400">Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="hover:bg-white/5 transition">
                        <td class="py-3 text-white">Sarah Johnson</td>
                        <td class="py-3 text-gray-300">The Grand Hotel</td>
                        <td class="py-3 text-gray-300">Deluxe Suite</td>
                        <td class="py-3 text-gray-300">Jun 14, 2024</td>
                        <td class="py-3 text-gray-300">Jun 16, 2024</td>
                        <td class="py-3"><span class="badge badge-success">Confirmed</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection