@extends('frontend.layouts.app')

@section('title', __('Reach us'))

@section('meta_description', 'Idein The Ideal Partner for All of Your Creative & strategic Communication Needs.')

@section('content')


{{-- <div class="fixed right-5 top-32 z-[999]">
    <div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
        <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
            </svg>
            <span class="sr-only">Fire icon</span>
        </div>
        <div class="ms-3 text-sm font-normal">Set yourself free.</div>
        <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-default" aria-label="Close">
            <span class="sr-only">Close</span>
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
            </svg>
        </button>
    </div>
</div> --}}


    <section class="bg-hero-reachus">
        <div class="text-[32px] max-md:leading-tight md:text-7xl font-rubik">
            Our Doors Are Open, <br>
            <span class="text-primary font-medium">Come On In</span>
        </div>
        <div class="absolute bottom-20 left-20 max-md:hidden">
            <img class="w-40 h-40" src="{{ asset('img/reachus/our-office.svg') }}" alt="">
        </div>

        <div class="mt-10 md:hidden">
            <img class="w-12 h-12" src="{{ asset('img/reachus/our-office-black.svg') }}" alt="">
        </div>

        <div class="splide hero-slide -mx-5 pt-40 pb-10 md:hidden">
            <div class="splide__track">
                  <div class="splide__list flex">
                    @foreach ($sliders as $slide)
                        <div class="splide__slide !h-40 !w-60 bg-slate-400 rounded-2xl overflow-hidden horizontal_scroll">
                            <img class="h-full w-full" src="{{ asset("$slide->image") }}" alt="">
                        </div>
                    @endforeach
                  </div>
            </div>
        </div>
    </section>
    <section class="pt-0 md:pt-16 pb-10 md:pb-20 container">
        <!-- Swiper -->
        <div class="mb-16 max-md:hidden">
            <!-- Swiper -->
            <div class="swiper reachus-swiper relative">
               <div class="swiper-wrapper flex">
                   @foreach ($sliders as $slide)
                       <div class="swiper-slide rounded-3xl">
                            <img class="h-full w-full" src="{{ asset("$slide->image") }}" alt="">
                       </div>
                   @endforeach
               </div>
               <div class="flex items-center gap-4 absolute bottom-10 left-12">
                   <div class="swiper-button-prev" style="position: unset;"><img class="rotate-180" src="{{ asset('img/arrw-slider.png') }}" alt=""></div>
                   <div class="relative mb-[17%] z-40">
                       <div class="swiper-pagination !w-max" style="position: unset;"></div>
                   </div>
                   <div class="swiper-button-next" style="position: unset;"><img src="{{ asset('img/arrw-slider.png') }}" alt=""></div>
               </div>
             </div>
       </div>

        <div class="flex max-md:flex-col md:gap-10 max-md:mx-8 max-md:text-xs">
            <div class="space-y-5 md:space-y-10 relative py-10">
                <div class="flex items-end gap-10 md:justify-between">
                    <div><img class="max-md:h-3 md:h-[1.4rem]" src="{{ asset('img/idein-creative-b.png') }}" alt=""></div>
                    <div><img class="max-md:h-5 md:h-[2.5rem] md:mr-20"src="{{ asset('img/idein-studio-b.png') }}" alt=""></div>
                </div>
                <div class="max-md:text-justify">
                    {{ $settPage['reachus_addrs_idn_creative']->value }}
                </div>
                <div class="md:absolute bottom-10">
                    <a target="_blank" href="mailto:management@idein.id">
                        {{ $settPage['reachus_email_idn_creative']->value }}
                    </a>
                </div>
            </div>
            <div class="w-[1px] h-auto bg-black max-md:hidden"></div>
            <div class="space-y-4 md:space-y-10 py-10">
                <div class="md:mt-3">
                    <div><img class="max-md:h-[13.666px] md:h-[1.7rem]" src="{{ asset('img/idein-workshop-b.png') }}" alt=""></div>
                </div>
                <div class="max-md:text-justify">
                    {{ $settPage['reachus_addrs_idn_workshop']->value }}
                </div>
                <div class="max-md:flex flex-wrap justify-between">
                    <div>
                        @php
                            $phone = str_replace(["+", " "], "", $settPage['reachus_phone_idn_workshop']->value);
                        @endphp
                        <a target="_blank" href="https://wa.me/{{ $phone }}">
                            {{ $settPage['reachus_phone_idn_workshop']->value }}
                        </a>
                    </div>
                    <div>
                        <a target="_blank" href="mailto:idein.workshop@gmail.com">
                            {{ $settPage['reachus_email_idn_workshop']->value }}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="my-10 h-80 md:h-[40rem]">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.7490845503576!2d106.72374537589127!3d-6.164348093822907!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f832a42b713f%3A0x330f2935958509af!2sidein%20creative!5e0!3m2!1sen!2sid!4v1699804600097!5m2!1sen!2sid" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>

        <div>
            <div class="flex justify-center mt-20">
                <div class="relative flex items-end z-10 -mr-6 md:-mr-20">
                    <img class="max-md:w-[113.408px]" src="{{ asset('img/reachus/maskot-idein.png') }}" alt="">
                </div>
                <div class="relative">
                    <img class="max-md:h-[131.232px] max-md:!w-[262.035px]" src="{{ asset('img/reachus/buble-cht.png') }}" alt="">
                    <span class="absolute top-1/2 -translate-y-1/2 left-8 right-2  md:left-28 md:right-10 text-white text-base md:text-3xl">I'm pretty sure your brand
                        could benefit
                        <span class="font-[600]">from what we offer</span>.
                        Let's just chat
                        casually, no pressure.😇
                    </span>
                </div>
            </div>
            <div class="flex justify-center mt-10">
                <button  onclick="openModal()" class="btn-outline md:!px-16"><span class="btn-text max-md:!text-base">Sounds Good, Let’s Roll!🔥</span></button>
            </div>
        </div>

        <div id="form-reachus" class="md:mx-[10%] pt-20 md:pt-32">
            <div class="text-2xl md:text-4xl font-bold mb-8">Reach us</div>
            <form action="{{ route('frontend.reach-us.form') }}" method="POST">
                @csrf
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="email" id="floating_email" value="{{ old('email') }}" class="block py-2.5 px-0 w-full text-xs md:text-base {{ $errors->get('email') ? 'text-red-500 border-red-500' : 'text-black border-black' }} !bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer" placeholder=" " autocomplete="__away" required />
                    <label for="floating_email" class="peer-focus:font-medium absolute text-xs md:text-base {{ $errors->get('email') ? 'text-red-500' : 'text-black' }} duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-black peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Email</label>
                    @error('email')
                        <small class="text-xs text-red-500">{{ $message }}</small>
                    @enderror
                </div>
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="name" id="floating_name" value="{{ old('name') }}" class="block py-2.5 px-0 w-full text-xs md:text-base {{ $errors->get('name') ? 'text-red-500 border-red-500' : 'text-black border-black' }} !bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer" placeholder=" " autocomplete="__away" required />
                    <label for="floating_name" class="peer-focus:font-medium absolute text-xs md:text-base {{ $errors->get('name') ? 'text-red-500' : 'text-black' }} duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-black peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Name</label>
                    @error('name')
                        <small class="text-xs text-red-500">{{ $message }}</small>
                    @enderror
                </div>
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="subject" id="floating_subject" value="{{ old('subject') }}" class="block py-2.5 px-0 w-full text-xs md:text-base {{ $errors->get('subject') ? 'text-red-500 border-red-500' : 'text-black border-black' }} !bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer" placeholder=" " autocomplete="__away" required />
                    <label for="floating_subject" class="peer-focus:font-medium absolute text-xs md:text-base {{ $errors->get('subject') ? 'text-red-500' : 'text-black' }} duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-black peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Subject</label>
                    @error('subject')
                        <small class="text-xs text-red-500">{{ $message }}</small>
                    @enderror
                </div>
                <div class="relative z-0 w-full mb-6 group">
                    {{-- <input type="text" name="subject" id="floating_subject" value="{{ old('subject') }}" class="block py-2.5 px-0 w-full text-xs md:text-base {{ $errors->get('subject') ? 'text-red-500 border-red-500' : 'text-black border-black' }} !bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer" placeholder=" " required /> --}}
                    <label for="floating_message" class="text-xs md:text-base {{ $errors->get('message') ? 'text-red-500' : 'text-black' }}">Message</label>
                    <textarea name="message" id="floating_message" class="w-full border {{ $errors->get('subject') ? 'text-red-500 border-red-500' : 'text-black border-black' }} rounded-lg mt-4 p-5" rows="8"></textarea>
                    @error('message')
                        <small class="text-xs text-red-500">{{ $message }}</small>
                    @enderror
                </div>

                @if(config('boilerplate.access.captcha.frontend'))
                    <div class="row">
                        <div class="col">
                            @captcha
                            <input type="hidden" name="captcha_status" value="true" />
                        </div><!--col-->
                    </div><!--row-->
                @endif
                <div>
                    <button class="bg-primary py-2 px-3 rounded-lg text-2xl md:text-3xl text-white max-md:w-full max-md:rounded-xl">Send</button>
                </div>
            </form>
        </div>
    </section>

    <livewire:frontend.book-session />
@endsection

@push('before-styles')
    <style>
        .swiper > .swiper-wrapper > .swiper-slide {
            opacity: 0!important;
            height: 600px;
            font-size: 22px;
            font-weight: bold;
            color: #fff;
        }

        .swiper > .swiper-wrapper > .swiper-slide.swiper-slide-visible{
            opacity: 1!important;
        }
        .swiper > .swiper-wrapper > .swiper-slide.swiper-slide-next{
            flex-basis: 80%;
            margin-left: -40%;
        }

        .swiper > .swiper-wrapper > .swiper-slide.swiper-slide-active{
                /* width: 50%!important; */
                height: 80%;
                /* flex-basis: 40%; */
                margin-left: -20%;
                margin-bottom: auto;
                margin-top: auto;
                /* margin-right: -10%;
                transform: scale(.7)!important */
        }

        .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
            background: #000;
        }

        .swiper .swiper-button-prev::after, .swiper .swiper-button-next::after {
            content: unset;
        }
    </style>
@endpush


@push('after-scripts')
    <script>
        const modal = document.querySelector('.main-modal');
        const closeButton = document.querySelectorAll('.modal-close');

		const modalClose = () => {
			modal.classList.remove('fadeIn');
			modal.classList.add('fadeOut');
			setTimeout(() => {
				modal.style.display = 'none';
			}, 100);
		}

		const openModal = () => {
			modal.classList.remove('fadeOut');
			modal.classList.add('fadeIn');
			modal.style.display = 'flex';
		}

		for (let i = 0; i < closeButton.length; i++) {

			const elements = closeButton[i];

			elements.onclick = (e) => modalClose();

			modal.style.display = 'none';

			window.onclick = function (event) {
				if (event.target == modal) modalClose();
			}
		}

        let splide = new Splide( '.hero-slide', {
            type   : 'loop',
            perPage: 1,
            focus  : 'center',
            gap    : '1rem',
            autoWidth: false,
            pagination: false,
            arrows: false,
        } );
        splide.mount();

        $(window).on('load', function(){
            let swiper = new Swiper(".reachus-swiper", {
                effect: "creative",
                autoHeight: true,
                slidesPerView: 2,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },

                creativeEffect: {
                    perspective: true,
                    prev: {
                        translate: [500, 0, -700],
                        opacity: 0
                    },
                    next: {
                        translate: ["100%", 0, 0],
                    },
                },
                on: {
                        init: function () {
                            let x = "translate3d(calc(160px), calc(0px), calc(0px)) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(.7)"
                            $('.swiper-slide-active').css({"transform": x})
                        },

                        beforeTransitionStart: function (swiper) {
                            const activeIndex = swiper.activeIndex;
                            // let nextIndex = swiper.activeIndex + 1;
                            let prevIndex = swiper.previousIndex;
                            // let width = swiper.slides[activeIndex].swiperSlideOffset;
                            let translate = swiper.translate;

                            for (let i = 0; i < swiper.slides.length; i++){
                                let slide = swiper.slides[i];

                                if (activeIndex == i) {
                                    $(slide).css({
                                        transform: `translate3d(calc(${translate + 160}px), calc(0px), calc(0px)) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(.7)`
                                    });
                                }

                            }
                        },
                    }
                });
            });
    </script>
@endpush