@extends('app')

@section('content')
    <!-- Hero Section -->
    <section id="home" class="position-relative py-5 py-lg-6 px-3 px-md-4" 
             style="background-image: url({{ asset($setup->bottle_image) }}); background-size: cover; background-position: center; background-repeat: no-repeat;">
        <div class="container">
            <div class="mb-5 text-center">
                <h1 class="display-4 fw-semibold text-white">{{ $setup->bottle_title }}</h1>
                <p class="fs-5 fw-semibold text-white">{{ $setup->bottle_subtitle }}</p>
            </div>

            <div class="row g-4 g-lg-5 align-items-center justify-content-center">
                <!-- Right: Image (hidden on mobile) -->
                <div class="col-lg-6 d-none d-lg-block">
                    <img src="{{ asset($setup->booking_card) }}" alt="Contact Illustration"
                         class="img-fluid rounded-3 shadow">
                </div>

                <!-- Left: Contact Form -->
                <div class="col-lg-6">
                    <form action="{{ route('table-booking.store') }}" method="post" 
                          class="row g-3 text-white">
                        @csrf
                        
                        <!-- First Name -->
                        <div class="col-md-6">
                            <input type="text" placeholder="First Name" name="first_name"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Last Name -->
                        <div class="col-md-6">
                            <input type="text" placeholder="Last Name" name="last_name"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Phone -->
                        <div class="col-md-6">
                            <input type="text" placeholder="Phone Number" name="phone"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Email -->
                        <div class="col-md-6">
                            <input type="email" name="email" placeholder="E-mail Address"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Event Date -->
                        <div class="col-md-6">
                            <input type="date" name="date" placeholder="Event Date"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Budget -->
                        <div class="col-md-6">
                            <input type="number" min="0" name="budget" placeholder="Approximate Budget"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Number of Guys -->
                        <div class="col-md-6">
                            <input type="number" name="guys" placeholder="Number of Guys"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Number of Girls -->
                        <div class="col-md-6">
                            <input type="number" name="girls" placeholder="Number of Girls"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Party Size -->
                        <div class="col-md-12">
                            <input type="number" name="party_size" placeholder="Number of Guests"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Message -->
                        <div class="col-12">
                            <textarea rows="3" name="message" placeholder="Write Your Message..."
                                      class="form-control bg-dark text-white border-dark"></textarea>
                        </div>
                        
                        <!-- Submit Button -->
                        <div class="col-12">
                            <button type="submit" style="background: {{ $setup->bottle_color }}"
                                    class="btn w-100 text-white fw-semibold py-3 border-0">
                                Submit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Signup Section -->
    <section class="py-5 py-lg-6 px-3 px-md-4"
             style="background-image: url({{ asset($setup->booking_image) }}); background-size: cover; background-position: center; background-repeat: no-repeat;">
        <div class="container">
            <div class="row g-4 g-lg-5 align-items-center">
                <div class="col-lg-6 text-white">
                    <h1 class="display-4 fw-semibold text-white mb-3">{{ $setup->signup_title }}</h1>
                    <p class="fs-5">{{ $setup->signup_subtitle }}</p>
                </div>

                <!-- Contact Form -->
                <div class="col-lg-6">
                    <form action="{{ route('registration.store') }}" method="post" 
                          class="row g-3 text-white">
                        @csrf

                        <!-- First Name -->
                        <div class="col-md-6">
                            <input type="text" name="first_name" placeholder="First Name"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Last Name -->
                        <div class="col-md-6">
                            <input type="text" name="last_name" placeholder="Last Name"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Phone Number -->
                        <div class="col-md-6">
                            <input type="text" name="phone" placeholder="Phone Number"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Email -->
                        <div class="col-md-6">
                            <input type="email" name="email" placeholder="E-mail Address"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Birthdate -->
                        <div class="col-md-6">
                            <input type="date" name="birthdate" placeholder="Birthdate"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Height -->
                        <div class="col-md-6">
                            <input type="text" name="height" placeholder="Height (in cm or ft)"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Instagram Handle -->
                        <div class="col-md-6">
                            <input type="text" name="instagram" placeholder="Instagram Handle"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Agency -->
                        <div class="col-md-6">
                            <input type="text" name="agency" placeholder="Agency (if any)"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Dates in New York -->
                        <div class="col-12">
                            <input type="text" name="dates_in_ny" placeholder="Dates in New York"
                                   class="form-control bg-dark text-white border-dark" />
                        </div>
                        
                        <!-- Submit Button -->
                        <div class="col-12">
                            <button type="submit" style="background: {{ $setup->bottle_color }}"
                                    class="btn w-100 text-white fw-semibold py-3 border-0">
                                Join Model Community
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section id="blog" class="py-5">
        <div class="container">
            <div class="row align-items-center justify-content-between mb-5">
                <div class="col-lg-8 text-center text-lg-start">
                    <h2 class="display-5 fw-semibold text-white mb-4 mb-lg-0">
                        Check out the blog of our previous events!
                    </h2>
                </div>
                {{-- <div class="col-lg-4 text-center text-lg-end">
                    <button class="btn btn-primary btn-lg px-5 py-3 fw-semibold">
                        Read All Blog
                    </button>
                </div> --}}
            </div>

            <div class="row g-4">
                @foreach ($blogs as $d)
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 h-100 shadow" 
                             style="background: #18112D; border-color: {{ $setup->blog_border_color }} !important;">
                            <!-- Image -->
                            <div class="card-img-top overflow-hidden" style="height: 250px;">
                                <img src="{{ asset($d->photo) }}" alt="{{ $d->title }}" 
                                     class="img-fluid w-100 h-100 object-fit-cover">
                            </div>
                            
                            <!-- Content -->
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title text-white fw-semibold mb-3">{{ $d->title }}</h5>
                                <p class="card-text text-white-50 flex-grow-1">
                                    {{ Str::limit(strip_tags($d->content), 150, ' ...') }}
                                </p>
                                
                                <!-- Button -->
                                <div class="mt-auto pt-3">
                                    <a href="{{ route('blog.show', $d->slug) }}" 
                                       class="btn btn-dark w-100 text-white">
                                        Read more
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section id="faq" class="py-5">
        <div class="container">
            <h1 class="display-4 fw-bold mb-5 text-white text-center">Frequently Asked Questions</h1>
            
            <div class="row justify-content-center">
                <div class="col-lg-10 col-xl-8">
                    <div class="accordion accordion-flush" id="faqAccordion">
                        @foreach ($faq as $index => $d)
                            <div class="accordion-item mb-3 border-0 rounded-3 overflow-hidden" 
                                 style="background: {{ $setup->faq_color }}">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed text-white fs-5 fw-semibold py-3" 
                                            type="button" 
                                            data-bs-toggle="collapse" 
                                            data-bs-target="#faqCollapse{{ $index }}"
                                            aria-expanded="false" 
                                            aria-controls="faqCollapse{{ $index }}"
                                            style="background: {{ $setup->faq_color }}">
                                        {{ $d->question }}
                                    </button>
                                </h2>
                                <div id="faqCollapse{{ $index }}" 
                                     class="accordion-collapse collapse" 
                                     data-bs-parent="#faqAccordion">
                                    <div class="accordion-body bg-white text-dark">
                                        {{ $d->answer }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-5 border-top border-bottom border-secondary">
        <div class="container">
            <h1 class="display-4 text-white text-center mb-5">{{ env('APP_NAME') }}</h1>
            
            <p class="text-white text-center fs-5 mb-4">
                Connect with us on social media.
            </p>
            
            <div class="d-flex justify-content-center gap-3">
                <!-- Facebook -->
                <a href="{{ $setup->facebook }}" 
                   class="btn btn-dark btn-lg rounded-circle d-flex align-items-center justify-content-center"
                   style="width: 50px; height: 50px;">
                    <i class="bi bi-facebook"></i>
                </a>
                
                <!-- Instagram -->
                <a href="{{ $setup->instagram }}" 
                   class="btn btn-dark btn-lg rounded-circle d-flex align-items-center justify-content-center"
                   style="width: 50px; height: 50px;">
                    <i class="bi bi-instagram"></i>
                </a>
                
                <!-- YouTube -->
                <a href="{{ $setup->youtube }}" 
                   class="btn btn-dark btn-lg rounded-circle d-flex align-items-center justify-content-center"
                   style="width: 50px; height: 50px;">
                    <i class="bi bi-youtube"></i>
                </a>
            </div>
        </div>
    </section>
@endsection

@push('styles')
<style>
    /* Custom styles for the sections */
    section {
        position: relative;
    }
    
    /* Background overlay for sections with background images */
    section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(17, 25, 40, 0.61);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.125);
        border-radius: 12px;
        z-index: 0;
    }
    
    section > .container {
        position: relative;
        z-index: 1;
    }
    
    /* Form input styling */
    .form-control.bg-dark {
        background-color: #040515 !important;
        border: 1px solid #333 !important;
        color: white !important;
    }
    
    .form-control.bg-dark::placeholder {
        color: #aaa !important;
    }
    
    .form-control.bg-dark:focus {
        box-shadow: none !important;
        border-color: #666 !important;
    }
    
    /* Card styling */
    .card {
        transition: transform 0.3s ease;
        border: 1px solid;
    }
    
    .card:hover {
        transform: translateY(-5px);
    }
    
    /* Social media icons hover effect */
    .btn-dark.rounded-circle:hover {
        background: linear-gradient(135deg, #9333ea 0%, #3b82f6 100%) !important;
        transform: scale(1.1);
        transition: all 0.3s ease;
    }
</style>
@endpush