@extends('layouts.app')
@section('title', 'Services — De Eventa')

@section('content')
<div class="pt-20">

{{-- Page Header --}}
<section class="py-20 bg-dark-800 text-center">
    <div class="max-w-4xl mx-auto px-4">
        <p class="section-subtitle">What We Offer</p>
        <h1 class="section-title mb-4">Our Services</h1>
        <div class="gold-divider"></div>
        <p class="text-dark-200 text-lg">Full-service event management from concept to completion.</p>
    </div>
</section>

{{-- Event Categories Detail --}}
<section class="py-20 bg-dark-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 gap-12">
            @forelse($categories as $cat)
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center {{ $loop->even ? 'md:flex-row-reverse' : '' }}">
                @if($cat->image)
                <div class="overflow-hidden rounded-sm">
                    <img src="{{ Storage::url($cat->image) }}" alt="{{ $cat->name }}"
                         class="w-full h-72 object-cover hover:scale-105 transition-transform duration-500">
                </div>
                @else
                <div class="bg-dark-700 rounded-sm h-72 flex items-center justify-center">
                    <svg class="w-20 h-20 text-gold-500 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                    </svg>
                </div>
                @endif
                <div>
                    <p class="text-gold-500 text-xs uppercase tracking-widest mb-2">Event Type</p>
                    <h3 class="font-serif text-3xl text-white font-bold mb-4">{{ $cat->name }}</h3>
                    <p class="text-dark-200 leading-relaxed mb-6">{{ $cat->description }}</p>
                    <a href="#booking-form" class="btn-gold">Book This Event</a>
                </div>
            </div>
            @empty
            <p class="text-dark-400 text-center">Services coming soon.</p>
            @endforelse
        </div>
    </div>
</section>

{{-- How We Work --}}
<section class="py-20 bg-dark-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-14">
            <p class="section-subtitle">Our Process</p>
            <h2 class="section-title">How We Work</h2>
            <div class="gold-divider"></div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach([
                ['01', 'Submit Requirement', 'Tell us about your event vision and requirements.'],
                ['02', 'Consultation', 'We discuss details and craft a personalised plan.'],
                ['03', 'Planning', 'Our team handles every detail from venue to décor.'],
                ['04', 'Execution', 'Sit back and enjoy — we deliver flawlessly.'],
            ] as [$num, $title, $desc])
            <div class="text-center group">
                <div class="w-16 h-16 border-2 border-gold-500 rounded-sm flex items-center justify-center mx-auto mb-4
                            group-hover:bg-gold-500 transition-colors duration-300">
                    <span class="font-serif text-xl font-bold text-gold-500 group-hover:text-dark-900 transition-colors">
                        {{ $num }}
                    </span>
                </div>
                <h4 class="font-serif text-xl text-white font-semibold mb-2">{{ $title }}</h4>
                <p class="text-dark-300 text-sm leading-relaxed">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- BOOKING FORM --}}
<section id="booking-form" class="py-20 bg-dark-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <p class="section-subtitle">Get Started</p>
            <h2 class="section-title">Book Your Event</h2>
            <div class="gold-divider"></div>
            <p class="text-dark-200">Fill in the details and we'll get back to you within 24 hours.</p>
        </div>

        @if(session('success'))
        <div class="bg-green-900/30 border border-green-500 text-green-300 px-6 py-4 rounded-sm mb-8">
            {{ session('success') }}
        </div>
        @endif

        <form action="{{ route('booking.store') }}" method="POST" class="card-dark p-8 md:p-12">
            @csrf

            {{-- Client Info --}}
            <div class="mb-8">
                <h3 class="font-serif text-xl text-gold-500 font-semibold mb-6 pb-2 border-b border-dark-700">
                    Your Information
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Full Name *</label>
                        <input type="text" name="name" value="{{ old('name') }}"
                               class="input-dark @error('name') border-red-500 @enderror"
                               placeholder="Your full name">
                        @error('name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Phone Number *</label>
                        <input type="tel" name="phone" value="{{ old('phone') }}"
                               class="input-dark @error('phone') border-red-500 @enderror"
                               placeholder="+880 1XXX-XXXXXX">
                        @error('phone')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Email Address *</label>
                        <input type="email" name="email" value="{{ old('email') }}"
                               class="input-dark @error('email') border-red-500 @enderror"
                               placeholder="your@email.com">
                        @error('email')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            {{-- Event Details --}}
            <div class="mb-8">
                <h3 class="font-serif text-xl text-gold-500 font-semibold mb-6 pb-2 border-b border-dark-700">
                    Event Details
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Event Type *</label>
                        <select name="event_type" class="input-dark @error('event_type') border-red-500 @enderror">
                            <option value="">Select type...</option>
                            @foreach(['wedding'=>'Wedding Event','birthday'=>'Birthday Party','corporate'=>'Corporate Event','holud'=>'Holud / Mehendi','custom'=>'Custom Event'] as $val => $label)
                            <option value="{{ $val }}" {{ old('event_type') === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('event_type')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Event Date *</label>
                        <input type="date" name="event_date" value="{{ old('event_date') }}"
                               class="input-dark @error('event_date') border-red-500 @enderror"
                               min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                        @error('event_date')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Location *</label>
                        <input type="text" name="location" value="{{ old('location') }}"
                               class="input-dark @error('location') border-red-500 @enderror"
                               placeholder="Venue or city">
                        @error('location')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Guest Count *</label>
                        <input type="number" name="guest_count" value="{{ old('guest_count') }}"
                               class="input-dark @error('guest_count') border-red-500 @enderror"
                               placeholder="Approx. number" min="1">
                        @error('guest_count')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Budget Range</label>
                        <input type="text" name="budget" value="{{ old('budget') }}"
                               class="input-dark" placeholder="e.g. ৳50,000 – ৳1,00,000">
                    </div>
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Preferred Package</label>
                        <select name="package_id" class="input-dark">
                            <option value="">No preference</option>
                            @foreach($packages as $pkg)
                            <option value="{{ $pkg->id }}" {{ old('package_id') == $pkg->id ? 'selected' : '' }}>
                                {{ $pkg->name }} — ৳{{ number_format($pkg->price) }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- Requirements --}}
            <div class="mb-8">
                <label class="block text-dark-200 text-sm mb-2">Special Requirements</label>
                <textarea name="requirements" rows="4" class="input-dark"
                          placeholder="Tell us anything specific about your event...">{{ old('requirements') }}</textarea>
            </div>

            <div class="text-center">
                <button type="submit" class="btn-gold px-16 py-4 text-base">
                    Submit Booking Request
                </button>
                <p class="text-dark-400 text-xs mt-4">We'll respond within 24 hours.</p>
            </div>
        </form>
    </div>
</section>

</div>
@endsection