@php
    $channel = core()->getCurrentChannel();
@endphp
<!-- SEO Meta Content -->
@push('meta')
    <meta name="title" content="{{ $channel->home_seo['meta_title'] ?? '' }}" />
    <meta name="description" content="{{ $channel->home_seo['meta_description'] ?? '' }}" />
    <meta name="keywords" content="{{ $channel->home_seo['meta_keywords'] ?? '' }}" />
@endPush


<x-shop::layouts>
    <x-slot:title>
        {{ $channel->home_seo['meta_title'] ?? '' }}
    </x-slot>
    <div>
        <div class="relative w-full flex items-center justify-center" style="height: 600px">
            <img class="aspect-[4/1] absolute object-cover w-full h-full "
                src="{{ str_replace('franchises', 'cache/original/franchises', $data['banner']) }}"
                alt="Franchise Image Failed" />
            <div
                class="absolute inset-0 bg-opacity-0 bg-[rgb(0,0,0,0.3)] flex items-center justify-center transition-all duration-300">
            </div>

            <div class="relative text-center text-white px-4 max-w-4xl mx-auto mt-6">
                <div class="flex justify-center">
                    <img src="{{ bagisto_asset('images/Heading.svg') }}" class="h-full absolute mx-auto -top-10"
                        alt="the chef its you" width="400" />
                </div>
                <div class="w-full max-w-[523px] px-10 flex flex-col items-center">
                    <h1 class=" tracking-[0.36em] text-[66px] latest_recipes_title text-white  uppercase font-stritch ">
                        {{ $data['page_title'] }}
                    </h1>
                    <p class="text-[16px] max-w-[458px]= font-[500] text-[#FFFFFF]">
                        {{ $data['short_description'] }}
                    </p>
                </div>
            </div>
        </div>


        <div class="max-w-7xl mt-10 mx-auto p-4 sm:p-6 lg:p-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start ">
                <div class="md:sticky md:top-8">
                    <h1 class="text-4xl font-light tracking-wider mb-8 font-stritch">CONCEPT BRIEF</h1>
                </div>

                <div class="space-y-8 text-gray-700">
                    {!! $data['description'] !!}
                    <div class="mt-8">
                        <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4">
                            <div class="font-medium">FRANCHISE FEE</div>
                            <div class="font-medium">AREA REQUIRED</div>
                            <div class="font-medium">ROYALTY FEE</div>
                        </div>

                        <div class="grid grid-cols-3 gap-4 border-b border-gray-200 p-4">
                            <div class="text-gray-600"> {{ $data['franchise_fee_text'] }}</div>
                            <div class="text-gray-600">{{ $data['area_required'] }}</div>
                            <div class="text-gray-600">{{ $data['royalty_fee'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Slider -->
        <v-franchise-slider></v-franchise-slider>
    </div>

    <div class="max-w-7xl relative mx-auto p-4 max-sm:px-0 lg:p-8 font-[16px] left-[-110px] mt-20 max-md:mt-0 max-lg:mt-0 franchise-remove_relative">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 franchise_items-col">
            <div class="relative">
                <div class="bg-gray-200 h-full">
                    <img class="object-cover w-full h-full "
                        src="{{ str_replace('franchises', 'cache/original/franchises', $data['program_banner']) }}"
                        alt="Franchise Image Failed" />
                </div>
            </div>
            <div class="space-y-8">
                <section>
                    <h2 class="text-2xl font-semibold mb-4">Training</h2>
                    @foreach ($training_programs as $training)
                        <div class="flex justify-between items-center border border-gray-200 h-[fit-content]">
                            <div class="flex items-center bg-gray-100 border-b p-3 max-sm:px-1 w-[50%] h-[60px]">
                                <span class="font-medium">{{ $training['title'] }}</span>
                            </div>
                            <div class="flex items-center border-b p-3 max-sm:px-1 w-[50%] h-[60px]">
                                <span>{{ $training['value'] }}</span>
                            </div>
                        </div>
                    @endforeach
                </section>
                <section>
                    <h2 class="text-2xl font-semibold mb-4">Franchise Fee</h2>
                    <div>
                        @foreach ($franchise_fees as $franchise)
                            <div class="flex justify-between items-center border border-gray-200 h-[fit-content]">
                                <div class="flex items-center bg-gray-100 border-b max-sm:px-1 p-3 w-[50%] h-[60px]">
                                    <span class="font-medium">{{ $franchise['title'] }}</span>
                                </div>
                                <div class="flex items-center border-b max-sm:px-1 p-3 w-[50%] h-[60px]">
                                    <span>{{ $franchise['value'] }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
                <section>
                    <h2 class="text-2xl font-semibold mb-4">Support Program</h2>
                    <div>
                        @foreach ($support_programs as $support)
                            <div class="flex justify-between items-center border border-gray-200 h-[fit-content]">
                                <div class="flex items-center bg-gray-100 border-b max-sm:px-1 p-3 w-[50%] h-[60px]">
                                    <span class="font-medium">{{ $support['title'] }}</span>
                                </div>
                                <div class="flex items-center border-b max-sm:px-1 p-3 w-[50%] h-[60px]">
                                    <span>{{ $support['value'] }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
                <section>
                    <h2 class="text-2xl font-semibold mb-4">Ongoing Fee</h2>
                    <div>
                        @foreach ($ongoing_fees as $ongoing)
                            <div class="flex justify-between items-center border border-gray-200 h-[60px]">
                                <div class="flex-1 bg-gray-100 border-b max-sm:px-1 p-4 w-[50%] h-[60px]">
                                    <span class="font-medium">{{ $ongoing['title'] }}</span>
                                </div>
                                <div class="flex-1 border-b max-sm:px-1 p-4 w-[50%] h-[60px]">
                                    <span>{{ $ongoing['value'] }}</span>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </section>
            </div>
        </div>
    </div>

    <div class="bg-gray-100">
        <div class="relative text-center px-4 max-w-7xl py-10 mx-auto h-[300px] ">
            <div class="flex justify-center items-center">
                <img src="{{ bagisto_asset('images/contactus.svg') }}"
                    class="h-full -mt-12 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                    alt="the chef its you" width="150" />
            </div>
            <div
                class="w-full max-w-[523px] px-10 flex flex-col items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <h1 class=" tracking-[8px] text-[44px] uppercase font-stritch ">
                    Request For More Info
                </h1>
                <p class="text-[16px] text-[#1C1C1C] max-w-[458px] text-center font-[500] w-full">
                {{core()->getConfigData('general.content.franchise_form_desciption.title')}}
                </p>
            </div>
        </div>

        <div class="flex justify-center items-center w-full pb-20 ">

            <div class="mt-2  max-w-7xl w-full flex-col flex justify-center items-center p-10 bg-white">
                <x-shop::form :action="route('shop.franchise.enquiry.store')" class="w-full  rounded">
                    <div>
                        <x-shop::form.control-group class="">
                            <x-shop::form.control-group.label
                                class="required text-[#000000CC] font-[400] text-[18px] leading-[27px] signup_labels">
                                @lang('shop::app.franchise.index.full_name')
                            </x-shop::form.control-group.label>

                            <x-shop::form.control-group.control type="text" name="full_name" rules="required"
                                :value="old('full_name')" :label="trans('shop::app.franchise.index.full_name')"
                                class="input_border_black max-h-[75px] h-full w-full text-[18px] leading-[27px] font-[400] focus:outline-0"
                                :placeholder="trans('shop::app.franchise.index.full_name')" :aria-label="trans('shop::app.franchise.index.full_name')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="full_name" />
                        </x-shop::form.control-group>
                    </div>

                    <div class="flex max-sm:flex-col max-sm:gap-0  gap-4 ">
                        <x-shop::form.control-group class="basis-2/4">
                            <x-shop::form.control-group.label
                                class="required text-[#000000CC] font-[400] text-[18px] leading-[27px] signup_labels">
                                @lang('shop::app.franchise.index.company_name')
                            </x-shop::form.control-group.label>

                            <x-shop::form.control-group.control type="text"
                                class="px-5 h-[56px] max-sm:h-[40px] max-sm:h-[40px] input_border_black text-[#00000099] font-[400] text-[18px] basis-2/4"
                                name="company_name" rules="required" :value="old('company_name')" :label="trans('shop::app.franchise.index.company_name')"
                                :placeholder="trans('shop::app.franchise.index.company_name')" :aria-label="trans('shop::app.franchise.index.company_name')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="company_name" />
                        </x-shop::form.control-group>
                        <x-shop::form.control-group class="basis-2/4">
                            <x-shop::form.control-group.label
                                class="required text-[#000000CC] font-[400] text-[18px] leading-[27px] signup_labels">
                                @lang('shop::app.franchise.index.country')
                            </x-shop::form.control-group.label>

                            <x-shop::form.control-group.control type="text"
                                class="px-5 h-[56px] max-sm:h-[40px] input_border_black text-[#00000099] font-[400] text-[18px]"
                                name="country" rules="required" :value="old('country')" :label="trans('shop::app.franchise.index.country')" :placeholder="trans('shop::app.franchise.index.country')"
                                :aria-label="trans('shop::app.franchise.index.country')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="country" />
                        </x-shop::form.control-group>
                    </div>
                    <div class="flex max-sm:flex-col max-sm:gap-0 gap-4 w-full">
                        <x-shop::form.control-group class="basis-2/4">
                            <x-shop::form.control-group.label
                                class="required text-[#000000CC] font-[400] text-[18px] leading-[27px] signup_labels">
                                @lang('shop::app.franchise.index.email')
                            </x-shop::form.control-group.label>

                            <x-shop::form.control-group.control type="email"
                                class="px-5 h-[56px] max-sm:h-[40px] input_border_black text-[#00000099] font-[400] text-[18px]"
                                name="email" rules="required" :value="old('email')" :label="trans('shop::app.franchise.index.email')"
                                :placeholder="trans('shop::app.franchise.index.email')" :aria-label="trans('shop::app.franchise.index.email')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="email" />
                        </x-shop::form.control-group>
                        <x-shop::form.control-group class="basis-2/4">
                            <x-shop::form.control-group.label
                                class="required text-[#000000CC] font-[400] text-[18px] leading-[27px] signup_labels">
                                @lang('shop::app.franchise.index.phone_number')
                            </x-shop::form.control-group.label>
                            <x-shop::form.control-group.control type="text"
                                class="px-5 h-[56px] max-sm:h-[40px] input_border_black text-[#00000099] font-[400] text-[18px]"
                                name="phone_number" rules="required" :value="old('phone_number')" :label="trans('shop::app.franchise.index.phone_number')"
                                :placeholder="trans('shop::app.franchise.index.phone_number')" :aria-label="trans('shop::app.franchise.index.phone_number')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="phone_number" />
                        </x-shop::form.control-group>
                    </div>

                    <div>
                        <x-shop::form.control-group class="signup_grid_controls_fields">
                            <x-shop::form.control-group.label
                                class="required text-[#000000CC] font-[400] text-[18px] leading-[27px] signup_labels">
                                @lang('shop::app.franchise.index.message')
                            </x-shop::form.control-group.label>


                            <x-shop::form.control-group.control type="textarea"
                                class="input_border_black max-h-[75px] h-full w-full text-[18px] leading-[27px] font-[400] focus:outline-0"
                                name="message" rules="required" :value="old('message')" :label="trans('shop::app.home.contact.message')"
                                :placeholder="trans('shop::app.franchise.index.message')" :aria-label="trans('shop::app.franchise.index.message')" aria-required="true" rows="4" />

                            <x-shop::form.control-group.error control-name="message" />
                        </x-shop::form.control-group>
                    </div>

                    <!-- Recaptcha -->
                    @if (core()->getConfigData('google.recaptcha.settings.status'))
                        <div class="mb-3 flex">
                            {!! Captcha::render() !!}
                        </div>
                    @endif

                    <!-- Submit Button -->
                    <div class="mt-2 flex flex-wrap items-center gap-9 max-sm:justify-center max-sm:text-center">
                        <button
                            class="primary-button m-0 mx-auto block w-full max-w-[121px] rounded-full px-4 py-2 text-center text-base max-md:max-w-full max-md:rounded-lg max-md:py-3 max-sm:py-1.5 ltr:ml-0 rtl:mr-0"
                            type="submit">
                            @lang('shop::app.home.contact.submit')
                        </button>
                    </div>
                </x-shop::form>


            </div>
        </div>
    </div>


    </div>



    </div>




    </div>
    @pushOnce('scripts')
        <script type="text/x-template" id="v-franchise-slider">
            <div class="w-full block flex justify-center items-center mt-20">

        <div class="shadow-md h-[500px] w-full flex justify-center gap-12 overflow-hidden slider " >
                     <img class="object-cover w-[1000px] max-w-[1000px] h-full" v-for="slide in currentArray"
                            :src="'cache/original/' + slide"   alt="Franchise Image Failed" />
        </div>
    </div>
</script>
        <script type="module">
            app.component('v-franchise-slider', {
                template: '#v-franchise-slider',
                data() {
                    return {
                        sliderImages: @json($sliderImages),
                        currentSlideIndex: 0,
                        currentArray: [],
                        remainingArray: [],
                    };
                },
                computed: {},
                mounted() {
                    const startIndex = 0;

                    for (let i = 0; i <= this.sliderImages.length - 1; i++) {
                        if (i < 3) {
                            console.log("less then 3 item", this.sliderImages[i])
                            this.currentArray.push(this.sliderImages[i])
                        } else {
                            this.remainingArray.push(this.sliderImages[i])
                        }
                    }


                    this.autoScroll()
                    window.addEventListener('scroll', () => {
                        const overlay = document.getElementById('header_overlay');
                        if (overlay) {
                            window.addEventListener('scroll', function() {
                                const scrollPosition = window.scrollY || document.documentElement
                                    .scrollTop;
                                if (scrollPosition >= 5) {
                                    overlay.classList.add('header-onscroll');
                                } else {
                                    overlay.classList.remove('header-onscroll');
                                }
                            });
                        } else {}
                    });
                },

                methods: {

                    nextSlide() {
                        this.currentArray.shift()
                        this.currentArray.push(this.remainingArray[this.currentSlideIndex])
                        if (this.currentSlideIndex == this.remainingArray.length - 1) {
                            this.currentSlideIndex = 0
                        } else {
                            this.currentSlideIndex = this.currentSlideIndex + 1
                        }

                    },
                    autoScroll() {
                        setInterval(() => {
                            this.nextSlide();

                        }, 2000);
                    }
                },
            });
        </script>
    @endPushOnce
</x-shop::layouts>