@extends('layouts.app')

@section('title', 'Create Service - WedBooker')
@section('page-title', 'Add New Service')
@section('page-description', 'Create a new accommodation, transport, or activity service')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="glass-card rounded-2xl p-8 border border-white/10" data-aos="fade-up">
        
        <!-- Service Type Selection -->
        <div class="mb-8">
            <label class="block text-white mb-3 font-semibold">Service Type</label>
            <div class="grid grid-cols-3 gap-4">
                <a href="{{ route('services.create', ['type' => 'accommodation']) }}" class="cursor-pointer">
                    <div class="p-4 bg-white/5 rounded-xl border-2 border-white/10 hover:border-purple-500 hover:bg-purple-600/20 transition-all text-center {{ request('type') == 'accommodation' ? 'border-purple-500 bg-purple-600/20' : '' }}">
                        <i class="fas fa-hotel text-3xl text-purple-400 mb-2 block"></i>
                        <span class="text-white">Accommodation</span>
                    </div>
                </a>
                <a href="{{ route('services.create', ['type' => 'transport']) }}" class="cursor-pointer">
                    <div class="p-4 bg-white/5 rounded-xl border-2 border-white/10 hover:border-purple-500 hover:bg-purple-600/20 transition-all text-center {{ request('type') == 'transport' ? 'border-purple-500 bg-purple-600/20' : '' }}">
                        <i class="fas fa-bus text-3xl text-purple-400 mb-2 block"></i>
                        <span class="text-white">Transport</span>
                    </div>
                </a>
                <a href="{{ route('services.create', ['type' => 'activity']) }}" class="cursor-pointer">
                    <div class="p-4 bg-white/5 rounded-xl border-2 border-white/10 hover:border-purple-500 hover:bg-purple-600/20 transition-all text-center {{ request('type') == 'activity' ? 'border-purple-500 bg-purple-600/20' : '' }}">
                        <i class="fas fa-utensils text-3xl text-purple-400 mb-2 block"></i>
                        <span class="text-white">Activity</span>
                    </div>
                </a>
            </div>
        </div>
        
        @if(request('type') == 'accommodation')
        <!-- Accommodation Form -->
        <form action="{{ route('services.store') }}" method="POST" class="space-y-6">
            @csrf
            <input type="hidden" name="type" value="accommodation">
            <h3 class="text-2xl font-bold text-white mb-4 flex items-center gap-2">
                <i class="fas fa-hotel text-purple-400"></i>
                Accommodation Details
            </h3>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-white mb-2">Hotel Name *</label>
                    <input type="text" name="name" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500" placeholder="e.g., The Grand Hotel" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Star Rating</label>
                    <select name="rating" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                        <option>5 Stars</option>
                        <option>4 Stars</option>
                        <option>3 Stars</option>
                    </select>
                </div>
                <div>
                    <label class="block text-white mb-2">Room Type *</label>
                    <input type="text" name="room_type" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., Deluxe Suite" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Price per Night (£) *</label>
                    <input type="number" name="price" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 180" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Total Rooms Available *</label>
                    <input type="number" name="total_rooms" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 25" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Rooms Reserved for Guests</label>
                    <input type="number" name="reserved_rooms" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 15">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">Address *</label>
                    <input type="text" name="address" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="Full hotel address" required>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">Amenities</label>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                        <label class="flex items-center gap-2"><input type="checkbox" name="amenities[]" value="wifi"> <span class="text-gray-300">Free WiFi</span></label>
                        <label class="flex items-center gap-2"><input type="checkbox" name="amenities[]" value="breakfast"> <span class="text-gray-300">Breakfast Included</span></label>
                        <label class="flex items-center gap-2"><input type="checkbox" name="amenities[]" value="parking"> <span class="text-gray-300">Parking</span></label>
                        <label class="flex items-center gap-2"><input type="checkbox" name="amenities[]" value="pool"> <span class="text-gray-300">Swimming Pool</span></label>
                    </div>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">Description</label>
                    <textarea name="description" rows="4" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="Describe the accommodation, special features, etc."></textarea>
                </div>
            </div>
            <div class="flex gap-4">
                <button type="submit" class="flex-1 px-6 py-3 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-save mr-2"></i>Create Service
                </button>
                <a href="{{ route('services.index') }}" class="px-6 py-3 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition text-center">
                    Cancel
                </a>
            </div>
        </form>
        
        @elseif(request('type') == 'transport')
        <!-- Transport Form -->
        <form action="{{ route('services.store') }}" method="POST" class="space-y-6">
            @csrf
            <input type="hidden" name="type" value="transport">
            <h3 class="text-2xl font-bold text-white mb-4 flex items-center gap-2">
                <i class="fas fa-bus text-purple-400"></i>
                Transport Details
            </h3>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-white mb-2">Service Name *</label>
                    <input type="text" name="name" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., Airport Shuttle Service" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Transport Type *</label>
                    <select name="transport_type" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" required>
                        <option value="">Select Type</option>
                        <option>Airport Pickup</option>
                        <option>Venue Shuttle</option>
                        <option>Bus Service</option>
                        <option>Car Service</option>
                    </select>
                </div>
                <div>
                    <label class="block text-white mb-2">Pickup Location *</label>
                    <input type="text" name="pickup" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., Heathrow Airport" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Drop-off Location *</label>
                    <input type="text" name="dropoff" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., The Grand Hotel" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Capacity (Passengers) *</label>
                    <input type="number" name="capacity" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 50" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Price per Person (£) *</label>
                    <input type="number" name="price" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 25" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Available Time Slots</label>
                    <input type="text" name="time_slots" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 10:00 AM, 2:00 PM, 6:00 PM">
                </div>
                <div>
                    <label class="block text-white mb-2">Duration (minutes)</label>
                    <input type="number" name="duration" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 45">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">Description</label>
                    <textarea name="description" rows="3" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="Describe the transport service"></textarea>
                </div>
            </div>
            <div class="flex gap-4">
                <button type="submit" class="flex-1 px-6 py-3 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-save mr-2"></i>Create Service
                </button>
                <a href="{{ route('services.index') }}" class="px-6 py-3 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition text-center">
                    Cancel
                </a>
            </div>
        </form>
        
        @elseif(request('type') == 'activity')
        <!-- Activity Form -->
        <form action="{{ route('services.store') }}" method="POST" class="space-y-6">
            @csrf
            <input type="hidden" name="type" value="activity">
            <h3 class="text-2xl font-bold text-white mb-4 flex items-center gap-2">
                <i class="fas fa-utensils text-purple-400"></i>
                Activity Details
            </h3>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-white mb-2">Activity Name *</label>
                    <input type="text" name="name" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., Welcome Dinner" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Activity Type *</label>
                    <select name="activity_type" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" required>
                        <option value="">Select Type</option>
                        <option>Dinner</option>
                        <option>Lunch</option>
                        <option>Excursion</option>
                        <option>Party</option>
                        <option>Entertainment</option>
                    </select>
                </div>
                <div>
                    <label class="block text-white mb-2">Date *</label>
                    <input type="date" name="date" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Time *</label>
                    <input type="time" name="time" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Location *</label>
                    <input type="text" name="location" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., Grand Hotel Ballroom" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Capacity *</label>
                    <input type="number" name="capacity" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 150" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Price per Person (£)</label>
                    <input type="number" name="price" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 0 for free">
                </div>
                <div>
                    <label class="block text-white mb-2">Duration (hours)</label>
                    <input type="number" step="0.5" name="duration" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., 2">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">What's Included</label>
                    <div class="grid grid-cols-2 gap-3">
                        <label class="flex items-center gap-2"><input type="checkbox" name="includes[]" value="food"> <span class="text-gray-300">Food & Drinks</span></label>
                        <label class="flex items-center gap-2"><input type="checkbox" name="includes[]" value="entertainment"> <span class="text-gray-300">Entertainment</span></label>
                        <label class="flex items-center gap-2"><input type="checkbox" name="includes[]" value="transport"> <span class="text-gray-300">Transport</span></label>
                        <label class="flex items-center gap-2"><input type="checkbox" name="includes[]" value="photography"> <span class="text-gray-300">Photography</span></label>
                    </div>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">Description *</label>
                    <textarea name="description" rows="4" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="Describe the activity, what to expect, dress code, etc." required></textarea>
                </div>
            </div>
            <div class="flex gap-4">
                <button type="submit" class="flex-1 px-6 py-3 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-save mr-2"></i>Create Service
                </button>
                <a href="{{ route('services.index') }}" class="px-6 py-3 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition text-center">
                    Cancel
                </a>
            </div>
        </form>
        
        @else
        <!-- No Type Selected - Show Welcome Message -->
        <div class="text-center py-12">
            <i class="fas fa-concierge-bell text-6xl text-purple-400 mb-4"></i>
            <h3 class="text-2xl font-bold text-white mb-2">Select a Service Type</h3>
            <p class="text-gray-400">Choose from Accommodation, Transport, or Activities to get started</p>
        </div>
        @endif
    </div>
</div>
@endsection