@extends('new-design.layouts.master')
@section('title')
    Home | Wedding Realm
@endsection
@section('description',
    'Welcome to Wedding Realm - where your love story meets seamless planning. We know that planning
    a wedding is one of the most exciting and emotional journeys of your life, and we’re here to make it stress-free.')
@section('content')
    @php
        $categories = DB::table('vendor_category')->where('isActive', 1)->orderBy('name')->get();
        $userLoggedIn = Session::get('user_logged_in');
        $user = App\WeddingBudgetCustomerDetails::where('user_id', $userLoggedIn)->first();
        $testimonial = DB::table('testimonials')->get();
        $data = [
            'categories' => $categories,
        ];
        $memeber = DB::table('users')->where('id', Session::get('user_logged_in'))->first();
    @endphp

    <style>
        img.img-fluid.rounded
        {
            height: 243px !important;
            width: 381px !important;
            border-radius: 22px !important;
            object-fit: cover !important;
        }
    </style>

    <section class="new_banner">
        <div class="video-container" style="position: relative; overflow: hidden;">
            <video
                id="background-video"
                autoplay
                muted
                playsinline
                loop
                preload="metadata"
                class="w-full h-full object-cover"
                controls
            >
                <source src="{{ asset('new-design/assets/media/re-desigining/WEDDING_REALM_DEMO_FINAL_720_v2.mp4') }}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
    
            <div class="overlay" style="">
                <div class="label-title sub_title">From Chaos To Confetti: We Help PREPARE, PLAN & PRESERVE Marriages</div>
                <button class="nav-btn" id="play-button">Start Here</button>
            </div>
        </div>
    </section>
    
        {{-- Wedding Genie --}}
    <section class="bg-light py-5 mt-5 negotiation-banner-section">
        <div class="container">
            <div class="row align-items-center bg-gradient p-4 rounded-4 wedding-gennie-banner-image">
                <div class="col-md-6 text-white">
                    <h2 class="fw-bold mb-3 sub_title negotiation_banner_title fs-custom">Harmony</h2>
                    <p class="fs-custom">A full-circle planning ecosystem that creates your wedding checklist, budget, vendor recommendations, negotiated pricing and more in seconds!</p>
                    <a href="{{ Session::get('vendor') ? 'javascript:void(0)' : (Session::get('user_logged_in') ? route('web.couples.dashboard', [Session::get('user_logged_in')]) : route('web.wedding.genie', ['formOpen' => 'true'])) }}"
                    class="btn btn-dark mt-3 px-5 py-2 fs-5 fs-custom" @if(Session::get('vendor'))
                        onclick="Swal.fire({
                            title: 'Attention!',
                            icon: 'warning',
                            html: 'You are currently logged in as a <b>vendor</b>. To view this page, please sign out of your vendor account.',
                            confirmButtonText: 'Understood',
                            confirmButtonColor: '#5DB5E3',
                            background: '#fff3f3',
                            iconColor: '#e74c3c'
                        })"
                    @endif>Try Now</a>
                </div>
            </div>
        </div>
    </section>

     @if(!empty($promotion2Winners))
    <section id="services_section">
        <div class="container-custom">
            <div class="text-center mb-5">
                <h3 class="sub_title our_services_title"><span class="highlights_texts" style="color: black !important"><span style="color: black !important;font-weight: bolder">Book Vendors</span> on Wedding Realm and be automatically entered
                    to win a FREE bridal gown. Retail value $1,500 - $6,000</span></h3>
                    <div class="d-flex justify-content-center">
                        <a href="{{route('web.our.guranteed.price')}}" target="_blank" class="purple_button w-50 button_book" style="width: fit-content !important; border-radius:10px">Book Vendors</a>
                    </div>
            </div>

            <div class="slider-wrapper">
                <div class="slider">
                    @forEach($promotion2Winners as $winner)
                    <div class="slide flex-item position-relative text-center">
                        <a href="javascript:void(0)" class="position-absolute w-100 h-100"></a>
                        <h5 class="sub_title"><span class=""> {{$winner->title}}</span></h5>
                        <p class="body_text"> </p>
                        <img src="{{ asset('promotions_2_winners/' . $winner->images) }}"
                            class="img-fluid rounded" style="border-radius: 16px;">
                    </div>
                    @endForEach
                </div>

                <button class="slider-btn prev-btn">❮</button>
                <button class="slider-btn next-btn">❯</button>

                <div class="pagination"></div>
            </div>
        </div>
    </section>
    @endif



    

    {{-- Wedding Planner Consultations --}}
    <section class="bg-light py-5 mt-5 negotiation-banner-section">
        <div class="container">
            <div class="row align-items-center bg-gradient p-4 rounded-4 wedding-planner-banner-image">
                <div class="col-md-6 text-white">
                    <h2 class="fw-bold mb-3 sub_title negotiation_banner_title fs-custom">Wedding Planner Consultations</h2>
                    <p class="fs-custom">
                        Book expert planners by the hour. No full-service price tags. Planners offer guidance via video meetings, making professional help more accessible than ever. (Full-Service and other support available). <br><br>
                        Couples choose what they need and planners get to grow their business from coast to coast. Flexible, Modern, Convenient!
                    </p>
                    <a href="{{ route('create.wedding_planner_order') }}" class="btn btn-dark mt-3 px-5 py-2 fs-5 fs-custom">Try
                        Now</a>
                </div>
            </div>
        </div>
    </section>

    <section id="services_section">
        <div class="container-custom">
            <div class="text-center mb-5">
                <h2 class="sub_title our_services_title">Our <span class="highlights_texts">Services</span></h2>
            </div>

            <!-- Slider Container -->
            <div class="slider-wrapper">
                <div class="slider">

                    <!-- Slide 1  -->
                    <div class="slide flex-item position-relative text-center">
                        <a href="{{ route('web.our.guranteed.price') }}" class="position-absolute w-100 h-100"></a>
                        <h5 class="sub_title">Our Negotiated <span class="highlights_texts"> Prices & Vendors</span></h5>
                        <p class="body_text">Get your negotiated pricing</p>
                        <img src="{{ asset('new-design/assets/media/re-desigining/vendor_proposal.png') }}"
                            class="img-fluid rounded" style="border-radius: 16px;">
                    </div>

                    <!-- Slide 2  -->
                    <div class="slide flex-item position-relative text-center">
                        <a href="{{ route('web.wedding.checklist.tool') }}" class="position-absolute w-100 h-100"></a>
                        <h5 class="sub_title">Wedding <span class="highlights_texts"> Checklist Tool</span></h5>
                        <p class="body_text">Get your personal wedding checklist</p>
                        <img src="{{ asset('new-design/assets/media/re-desigining/service_card_image_2.png') }}"
                            class="img-fluid rounded" style="border-radius: 16px;">
                    </div>

                    <!-- Slide 3 -->
                    <div class="slide flex-item position-relative text-center">
                        <a href="{{ route('wedding.budget.homePage') }}" class="position-absolute w-100 h-100"></a>
                        <h5 class="sub_title">Interactive <span class="highlights_texts">Wedding Budget Planner</span></h5>
                        <p class="body_text">Get your proposed wedding budget</p>
                        <img src="{{ asset('new-design/assets/media/re-desigining/budget.png') }}" class="img-fluid rounded"
                            style="border-radius: 16px;">
                    </div>

                    <!-- Slide 4 -->
                    <div class="slide flex-item position-relative text-center">
                        <a href="{{ route('create.wedding_planner_order') }}"
                            class="position-absolute w-100 h-100"></a>
                        <h5 class="sub_title">Wedding <span class="highlights_texts">Planner Consultations</span></h5>
                        <p class="body_text">Book planners by the hour</p>
                        <img src="{{ asset('new-design/assets/media/re-desigining/wedding_planner_service.png') }}"
                            class="img-fluid rounded" style="border-radius: 16px;">
                    </div>

                    <!-- Slide 5 -->
                    <div class="slide flex-item position-relative text-center">
                        <a href="{{ $memeber ? route('web.couples.dashboard', ['id' => $memeber->id]) : route('web.couple.manage.request') }}"
                            class="position-absolute w-100 h-100"></a>
                        <h5 class="sub_title">Harmony <span class="highlights_texts">Dashboard</span></h5>
                        <p class="body_text">Manage your wedding planning here</p>
                        <img src="{{ asset('new-design/assets/media/re-desigining/couples_dashboard.png') }}"
                            class="img-fluid rounded" style="border-radius: 16px;">
                    </div>

                </div>

                <!-- Navigation Arrows -->
                <button class="slider-btn prev-btn">❮</button>
                <button class="slider-btn next-btn">❯</button>

                <!-- Pagination Dots -->
                <div class="pagination"></div>
            </div>
        </div>
    </section>


    <div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="modalLabel" class="modal-title">Announcement</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div>
                        @if (!empty($announcement))
                            <p style="color: black;">{!! $announcement !!}</p>
                        @endif
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @include('new-design.common.testimonials')

    {{-- Negotiated Pricing --}}
    {{-- <section class="bg-light py-5 mt-5 negotiation-banner-section">
        <div class="container">
            <div class="row align-items-center bg-gradient p-4 rounded-4 negotiation-banner-image">
                <div class="col-md-6 text-white">
                    <h2 class="fw-bold mb-3 sub_title negotiation_banner_title fs-custom">Negotiated Pricing</h2>
                    <p class="fs-custom">Why pay more? Book vendors on Wedding Realm and <span
                            class="fw-bold bg-white px-2 py-1 d-inline-block rounded fs-custom"
                            style="color: #66A3D5 !important">Save Up to 30%</span> with our Negotiated Pricing. Keep your
                        budget as blissful as you love story.</p>
                    <a href="{{ route('web.our.guranteed.price') }}" class="btn btn-dark mt-3 px-5 py-2 fs-5 fs-custom">Try
                        Now</a>
                </div>
            </div>
        </div>
    </section> --}}

 
    @include('new-design.common.searchAndMap')



    <section class="wedding-realm">
        <div class="container-custom">
            <div class="row">
                <div class="col-12">
                    <div class="sec1-heading">
                        <h2 class="sub_title">Wedding Realm <img loading="lazy"
                                src="{{ asset('new-design\assets\media\R.svg') }}" alt=""></h2>
                    </div>
                    <div class="main-sec1">
                        <a href="https://youtu.be/xB8qFkCpVQM?si=82_HigPcXRjj25ah" target="_blank"
                            rel="noopener noreferrer">
                            <div class="sec1-card">
                                <img loading="lazy" src="{{ asset('new-design/assets/media/cnbclogo.svg') }}"
                                    alt="CNBC Logo">
                                <p class="body_text">As seen on CNBC</p>
                            </div>
                        </a>
                        <a href="https://www.empoweredprogram.com/features-postid38df13f6/" target="_blank"
                            rel="noopener noreferrer">
                            <div class="sec1-card">
                                <img loading="lazy" src="{{ asset('new-design\assets\media\emp.svg') }}"
                                    alt="EMP WERED Logo Logo">
                                <p class="body_text">As seen on Public Television</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@push('js')
    <script type="text/javascript">
        $(window).on('load', function() {
            @if (!empty($announcement))
                const modalShownTime = localStorage.getItem('modalShownTime');
                const currentTime = Date.now();

                if (!modalShownTime || (currentTime - modalShownTime) > 5 * 60 * 1000) {
                    $('#myModal').modal('show');
                    localStorage.setItem('modalShownTime', currentTime);

                    console.log('Modal shown and timestamp set');
                } else {
                    console.log('Modal shown recently, will not show again');
                }
            @endif
        });

        $("#play-button").click(function() {
            $('.joinModal').modal('show');
        });
    </script>
    @if (session('vendorDetected'))
        <script>
           Swal.fire({
                title: 'Vendor Account Detected!',
                icon: 'warning',
                html: 'You are currently signed in as a vendor. To place legitimate orders, sign out of your account and use the platform as a customer. <b>Violation could lead to a ban from our platform.</b>',
                confirmButtonText: '🚪 Got it!',
                confirmButtonColor: '#5DB5E3',
                background: '#fff3f3',
                iconColor: '#e74c3c'
            });
        </script>
    @endif

    @if (session('vendorDetectedQ_A'))
        <script>
           Swal.fire({
                title: 'Attention!',
                icon: 'warning',
                html: 'You are currently logged in as a <b>vendor</b>. To view this page, please sign out of your vendor account.',
                confirmButtonText: 'Understood',
                confirmButtonColor: '#5DB5E3',
                background: '#fff3f3',
                iconColor: '#e74c3c'
            });
        </script>
    @endif

    @if (session('block_vendor_detected'))
        <script>
           Swal.fire({
                title: 'ACCESS DENIED 🙅‍♀️',
                icon: 'error',
                html: "You are currently blocked by the Administrator. Your **vendor privileges have been revoked**, and you cannot view these pages or access your account features. Please contact Wedding Realm for more details. 📧",
                confirmButtonText: 'Understood',
                confirmButtonColor: '#c0392b', // Darker red/maroon
                background: '#fcf3f3',
                iconColor: '#c0392b'
            });
        </script>
    @endif

    @if (session('block_member_detected'))
        <script>
           Swal.fire({
                title: 'Access Restricted! 🔒',
                icon: 'error',
                html: "Your **Member account** access has been blocked by the Administrator. You cannot access your account features. Please contact Wedding Realm for assistance. 📧",
                confirmButtonText: 'Understood',
                confirmButtonColor: '#e74c3c', // Use a standard error red
                background: '#fcf3f3',
                iconColor: '#e74c3c'
            });
        </script>
    @endif

    @if (session('CaptchaError'))
        <script>
            Swal.fire({
                title: 'Captcha Validation Failed',
                icon: 'error',
                text: 'Please try again.',
                confirmButtonText: 'Close',
            });
        </script>
    @endif

    @if (session('PhoneNumberNotFound'))
        <script>
            Swal.fire({
                title: 'Phone number not found',
                icon: 'error',
                text: 'Please try again.',
                confirmButtonText: 'Close',
            });
        </script>
    @endif

    @if (session('BitFoundError'))
        <script>
            Swal.fire({
                title: 'Duplicate Proposal Found',
                icon: 'error',
                text: 'Duplicate proposal detected. Please don\'t click the SEND button again.',
                confirmButtonText: 'Close',
            });
        </script>
    @endif

    @if (session('MeetingLinks'))
        <script>
            Swal.fire({
                title: 'Meeting confirmed. An email containing meeting details will be sent to you shortly.',
                icon: 'success',
                confirmButtonText: 'Close'
            });
        </script>
    @endif
    @if (session('MeetingAlreadyAccepted'))
        <script>
            Swal.fire({
                title: 'An action has already been taken, thanks.',
                icon: 'error',
                confirmButtonText: 'Close'
            });
        </script>
    @endif
    @if (session('MeetingRejected'))
        <script>
            Swal.fire({
                title: 'The meeting reschedule email has been sent successfully.',
                icon: 'success',
                confirmButtonText: 'Close'
            });
        </script>
    @endif
    @if (session('MeetingAlreadyRejected'))
        <script>
            Swal.fire({
                title: 'An action has already been taken, thanks.',
                icon: 'error',
                confirmButtonText: 'Close'
            });
        </script>
    @endif
    @if (session('RescheduleMeetingLinks'))
        <script>
            Swal.fire({
                title: 'Meeting Rescheduled. An email containing meeting details will be sent to you shortly.',
                icon: 'success',
                confirmButtonText: 'Close'
            });
        </script>
    @endif
    <script>
        document.addEventListener('DOMContentLoaded', () => {
        const sliderWrappers = document.querySelectorAll('.slider-wrapper');
        
        sliderWrappers.forEach((wrapper) => {
            const slider = wrapper.querySelector('.slider');
            let slides = wrapper.querySelectorAll('.slide');
            const prevBtn = wrapper.querySelector('.prev-btn');
            const nextBtn = wrapper.querySelector('.next-btn');
            const pagination = wrapper.querySelector('.pagination');

            let slidesPerView = getSlidesPerView();
            let currentSlideIndex = 0;
            let autoSlideInterval;

            function cloneSlides() {
                for (let i = 0; i < slidesPerView; i++) {
                    const clone = slides[i].cloneNode(true);
                    slider.appendChild(clone);
                }
                slides = wrapper.querySelectorAll('.slide');
            }

            function getSlidesPerView() {
                return window.innerWidth <= 768 ? 1 : 3;
            }

            function updateSlider(animate = true) {
                const slideWidth = slides[0].clientWidth;
                slider.style.transition = animate ? "transform 4.5s ease-in-out" : "none";
                slider.style.transform = `translateX(-${currentSlideIndex * slideWidth}px)`;
                updatePaginationDots();
            }

            function updatePagination() {
                const totalDots = Math.ceil((slides.length - slidesPerView) / slidesPerView); 
                pagination.innerHTML = '';
                for (let i = 0; i < totalDots; i++) {
                    const dot = document.createElement('span');
                    dot.classList.add('dot');
                    dot.setAttribute('data-slide', i);
                    if (i === 0) dot.classList.add('active');
                    pagination.appendChild(dot);
                }

                wrapper.querySelectorAll('.dot').forEach((dot, index) => {
                    dot.addEventListener('click', () => {
                        currentSlideIndex = index * slidesPerView;
                        updateSlider();
                        restartAutoSlide();
                    });
                });
            }

            function updatePaginationDots() {
                const totalDots = Math.ceil((slides.length - slidesPerView) / slidesPerView);
                wrapper.querySelectorAll('.dot').forEach((dot, index) => {
                    dot.classList.toggle('active', index === Math.floor(currentSlideIndex / slidesPerView) % totalDots);
                });
            }

            function nextSlide() {
                currentSlideIndex++;
                updateSlider();

                if (currentSlideIndex === slides.length - slidesPerView + 1) {
                    setTimeout(() => {
                        slider.style.transition = 'none';
                        currentSlideIndex = 0;
                        updateSlider(false);
                    }, 500);
                }
            }

            function prevSlide() {
                if (currentSlideIndex === 0) {
                    currentSlideIndex = slides.length - slidesPerView;
                    updateSlider(false);
                    setTimeout(() => {
                        currentSlideIndex--;
                        updateSlider();
                    }, 50);
                } else {
                    currentSlideIndex--;
                    updateSlider();
                }
            }

            function startAutoSlide() {
                autoSlideInterval = setInterval(nextSlide, 6000);
            }

            function restartAutoSlide() {
                clearInterval(autoSlideInterval);
                startAutoSlide();
            }

            nextBtn.addEventListener("click", () => {
                nextSlide();
                restartAutoSlide();
            });

            prevBtn.addEventListener("click", () => {
                prevSlide();
                restartAutoSlide();
            });

            window.addEventListener('resize', () => {
                slidesPerView = getSlidesPerView();
                updatePagination();
                updateSlider();
            });

            cloneSlides(); 
            updatePagination();
            updateSlider(false);
            startAutoSlide();
        });
    });
    </script>
@endpush