@extends('layouts.app')

@section('title', 'Services - WedBooker')
@section('page-title', 'Wedding Services')
@section('page-description', 'Manage accommodation, transport, and activities')

@section('content')
<div class="space-y-6">
    
    <!-- Quick Actions -->
    <div class="flex justify-end">
        <a href="{{ route('services.create') }}" class="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition hover:scale-105">
            <i class="fas fa-plus mr-2"></i>Add New Service
        </a>
    </div>
    
    <!-- Service Categories -->
    <div class="grid md:grid-cols-3 gap-6">
        <!-- Accommodation -->
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 hover:-translate-y-2 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <i class="fas fa-hotel text-2xl text-purple-400"></i>
                    <h3 class="text-xl font-bold text-white">Accommodation</h3>
                </div>
                <span class="px-2 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">2 hotels</span>
            </div>
            <div class="space-y-3">
                @php
                    $accommodations = [
                        ['id' => 1, 'name' => 'The Grand Hotel', 'type' => 'Deluxe Suite', 'available' => 25, 'total' => 30, 'price' => '£180'],
                        ['id' => 2, 'name' => 'The Riverside Inn', 'type' => 'Standard Room', 'available' => 12, 'total' => 20, 'price' => '£120'],
                    ];
                @endphp
                @foreach($accommodations as $item)
                <div class="p-3 bg-white/5 rounded-lg hover:bg-white/10 transition group">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <p class="text-white font-semibold">{{ $item['name'] }}</p>
                            <p class="text-gray-300 text-sm">{{ $item['type'] }} • {{ $item['price'] }}/night</p>
                            <p class="text-gray-400 text-xs mt-1">{{ $item['available'] }}/{{ $item['total'] }} rooms available</p>
                            <div class="w-full h-1.5 bg-white/10 rounded-full mt-2 overflow-hidden">
                                <div class="h-full bg-green-400 rounded-full" style="width: {{ ($item['available'] / $item['total']) * 100 }}%"></div>
                            </div>
                        </div>
                        <div class="flex gap-2 ml-3">
                            <a href="{{ route('services.edit', $item['id']) }}" class="text-blue-400 hover:text-blue-300 transition" title="Edit Service">
                                <i class="fas fa-edit"></i>
                            </a>
                            <button onclick="deleteService({{ $item['id'] }}, 'accommodation')" class="text-red-400 hover:text-red-300 transition" title="Delete Service">
                                <i class="fas fa-trash"></i>
                            </button>
                            <a href="{{ route('services.update-capacity', $item['id']) }}" class="text-green-400 hover:text-green-300 transition" title="Update Capacity">
                                <i class="fas fa-chart-line"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
                <a href="{{ route('services.create', ['type' => 'accommodation']) }}" class="block w-full py-2 border border-dashed border-purple-500/50 rounded-lg text-purple-400 hover:text-white hover:bg-purple-600/20 transition text-sm text-center">
                    <i class="fas fa-plus mr-1"></i>Add Accommodation
                </a>
            </div>
        </div>
        
        <!-- Transport -->
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 hover:-translate-y-2 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <i class="fas fa-bus text-2xl text-pink-400"></i>
                    <h3 class="text-xl font-bold text-white">Transport</h3>
                </div>
                <span class="px-2 py-1 bg-pink-500/20 text-pink-400 rounded-full text-xs">2 services</span>
            </div>
            <div class="space-y-3">
                @php
                    $transports = [
                        ['id' => 3, 'name' => 'Airport Pickup', 'type' => 'Shuttle Service', 'capacity' => 45, 'booked' => 32, 'price' => '£25'],
                        ['id' => 4, 'name' => 'Venue Shuttle', 'type' => 'Shuttle Service', 'capacity' => 60, 'booked' => 28, 'price' => '£15'],
                    ];
                @endphp
                @foreach($transports as $item)
                <div class="p-3 bg-white/5 rounded-lg hover:bg-white/10 transition group">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <p class="text-white font-semibold">{{ $item['name'] }}</p>
                            <p class="text-gray-300 text-sm">{{ $item['type'] }} • {{ $item['price'] }}/person</p>
                            <p class="text-gray-400 text-xs mt-1">{{ $item['booked'] }}/{{ $item['capacity'] }} guests booked</p>
                            <div class="w-full h-1.5 bg-white/10 rounded-full mt-2 overflow-hidden">
                                <div class="h-full bg-blue-400 rounded-full" style="width: {{ ($item['booked'] / $item['capacity']) * 100 }}%"></div>
                            </div>
                        </div>
                        <div class="flex gap-2 ml-3">
                            <a href="{{ route('services.edit', $item['id']) }}" class="text-blue-400 hover:text-blue-300 transition"><i class="fas fa-edit"></i></a>
                            <button onclick="deleteService({{ $item['id'] }}, 'transport')" class="text-red-400 hover:text-red-300 transition"><i class="fas fa-trash"></i></button>
                            <a href="{{ route('services.update-capacity', $item['id']) }}" class="text-green-400 hover:text-green-300 transition"><i class="fas fa-chart-line"></i></a>
                        </div>
                    </div>
                </div>
                @endforeach
                <a href="{{ route('services.create', ['type' => 'transport']) }}" class="block w-full py-2 border border-dashed border-purple-500/50 rounded-lg text-purple-400 hover:text-white hover:bg-purple-600/20 transition text-sm text-center">
                    <i class="fas fa-plus mr-1"></i>Add Transport
                </a>
            </div>
        </div>
        
        <!-- Activities -->
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 hover:-translate-y-2 transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <i class="fas fa-utensils text-2xl text-orange-400"></i>
                    <h3 class="text-xl font-bold text-white">Activities</h3>
                </div>
                <span class="px-2 py-1 bg-orange-500/20 text-orange-400 rounded-full text-xs">4 activities</span>
            </div>
            <div class="space-y-3">
                @php
                    $activities = [
                        ['id' => 5, 'name' => 'Welcome Dinner', 'date' => 'Jun 14, 2024', 'capacity' => 150, 'booked' => 78, 'price' => '£40'],
                        ['id' => 6, 'name' => 'Day Excursion', 'date' => 'Jun 16, 2024', 'capacity' => 80, 'booked' => 45, 'price' => '£35'],
                        ['id' => 7, 'name' => 'After Party', 'date' => 'Jun 15, 2024', 'capacity' => 150, 'booked' => 98, 'price' => '£25'],
                        ['id' => 8, 'name' => 'Farewell Brunch', 'date' => 'Jun 16, 2024', 'capacity' => 120, 'booked' => 62, 'price' => '£30'],
                    ];
                @endphp
                @foreach($activities as $item)
                <div class="p-3 bg-white/5 rounded-lg hover:bg-white/10 transition group">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <p class="text-white font-semibold">{{ $item['name'] }}</p>
                            <p class="text-gray-300 text-sm">{{ $item['date'] }} • {{ $item['price'] }}/person</p>
                            <p class="text-gray-400 text-xs mt-1">{{ $item['booked'] }}/{{ $item['capacity'] }} guests booked</p>
                            <div class="w-full h-1.5 bg-white/10 rounded-full mt-2 overflow-hidden">
                                <div class="h-full bg-orange-400 rounded-full" style="width: {{ ($item['booked'] / $item['capacity']) * 100 }}%"></div>
                            </div>
                        </div>
                        <div class="flex gap-2 ml-3">
                            <a href="{{ route('services.edit', $item['id']) }}" class="text-blue-400 hover:text-blue-300 transition"><i class="fas fa-edit"></i></a>
                            <button onclick="deleteService({{ $item['id'] }}, 'activity')" class="text-red-400 hover:text-red-300 transition"><i class="fas fa-trash"></i></button>
                            <a href="{{ route('services.update-capacity', $item['id']) }}" class="text-green-400 hover:text-green-300 transition"><i class="fas fa-chart-line"></i></a>
                        </div>
                    </div>
                </div>
                @endforeach
                <a href="{{ route('services.create', ['type' => 'activity']) }}" class="block w-full py-2 border border-dashed border-purple-500/50 rounded-lg text-purple-400 hover:text-white hover:bg-purple-600/20 transition text-sm text-center">
                    <i class="fas fa-plus mr-1"></i>Add Activity
                </a>
            </div>
        </div>
    </div>
    
    <!-- Service Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-purple-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-hotel text-purple-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">Total Accommodation</p>
                    <p class="text-white font-bold text-xl">37 rooms</p>
                    <p class="text-green-400 text-xs">67% occupancy</p>
                </div>
            </div>
        </div>
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-pink-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-bus text-pink-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">Transport Bookings</p>
                    <p class="text-white font-bold text-xl">60 guests</p>
                    <p class="text-blue-400 text-xs">57% capacity</p>
                </div>
            </div>
        </div>
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-orange-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-utensils text-orange-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">Activity Sign-ups</p>
                    <p class="text-white font-bold text-xl">283 guests</p>
                    <p class="text-orange-400 text-xs">68% of capacity</p>
                </div>
            </div>
        </div>
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-green-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-chart-line text-green-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">Total Services</p>
                    <p class="text-white font-bold text-xl">8 services</p>
                    <p class="text-green-400 text-xs">All active</p>
                </div>
            </div>
        </div>
    </div>
</div>

<form id="deleteServiceForm" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

@push('scripts')
<script>
    function deleteService(serviceId, type) {
        let message = '';
        switch(type) {
            case 'accommodation':
                message = 'Are you sure you want to delete this accommodation? This will remove all associated bookings.';
                break;
            case 'transport':
                message = 'Are you sure you want to delete this transport service? This will remove all associated bookings.';
                break;
            case 'activity':
                message = 'Are you sure you want to delete this activity? This will remove all associated bookings.';
                break;
        }
        
        if(confirm(message)) {
            const form = document.getElementById('deleteServiceForm');
            form.action = "{{ url('services') }}/" + serviceId;
            form.submit();
        }
    }
    
    // Add animation to cards on hover
    document.querySelectorAll('.bg-white\\/10').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
    
    // Ensure all content is visible on load
    document.addEventListener('DOMContentLoaded', function() {
        // Force reflow to ensure all elements are properly rendered
        document.body.style.display = 'none';
        document.body.offsetHeight;
        document.body.style.display = '';
    });
</script>
@endpush
@endsection