@extends('web.layouts.container')

@section('content')
    <section class="banner-sec section py-5 contact-banners-sec  mt-5">
        <div class="swiper-container banners-swiper">
            <div class="swiper-wrapper">
                @if(count($sliders))
                    @foreach($sliders as $slider)
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="container">
                                    <div class="text-center py-5">
                                        <p class="fs-4 col-lg-6 m-auto contact_det">{{$slider->description}}</p>
                                    </div>
                                </div>
                                <img src="{{asset($slider->image)}}" alt="" class="bg"/>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="swiper-pagination"></div>
        </div>

    </section>
    <!-- Start contact-pg -->
    <section class="contact-pg section">
        <div class="container">
            <div class="row mt-5 justify-content-evenly">
                <div class="col-lg-4">
                    <div class="contact_box">
                        <h1 class="title text-uppercase text-white mb-5">
                            {{__('visitorMessages.map_title')}}
                        </h1>
                        <form>
                            <div class="form-group mb-5">
                                <select class="form-control form-select address_select">
                                    @foreach($addresses as $address)
                                        <option value=".address_{{$address->id}}">{{$address->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </form>
                        @foreach($addresses as $address)
                        <div class="contact_data {{ $loop->first ? '' : 'd-none' }} address_{{$address->id}}">
                            <p class="data">
                                <i class="fa-solid fa-location-dot"></i> {{$address->name}}
                            </p>
                            <p class="data">
                                <i class="fa-solid fa-envelope"></i> {{$address->email}}
                            </p>
                            <p class="data">
                                <i class="fa-solid fa-phone"></i> {{$address->phone}}
                            </p>
                        </div>
                        @endforeach
                    </div>
                </div>
                @foreach($addresses as $address)
                    <div class="col-lg-7 contact_map address_{{$address->id}} {{ $loop->first ? '' : 'd-none' }}">
                        <div class="map_box">
                            {!! $address->map_url !!}
                        </div>
                    </div>
                @endforeach

            </div>
            <div class="contact_inner">
                <h1 class="title mb-5 text-uppercase"><b>{{__('visitorMessages.send_message')}}</b></h1>
                <form method="post" action="{{route('contact.store')}}" class="contact_us_form">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="form-group">
                                <input name="name" class="form-control" placeholder="{{__('visitorMessages.name')}}">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <input name="phone" class="form-control" placeholder="{{__('visitorMessages.phone')}}">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <input name="email" class="form-control" placeholder="{{__('visitorMessages.email')}}">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <textarea name="message" class="form-control" placeholder="{{__('visitorMessages.message')}}" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <button class="butn border_butn mt-4 px-5 py-3 contact_us_button"><b>{{__('main.send')}}</b></button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.navbar').addClass('navbar-light white-nav');
        $(document).find('header img.bg').attr('style', 'object-position: top;');

        $('.map_box iframe').css({
            width: "100%",
            height: "700",
        });

        $('.address_select').change(function() {
            let info = $($(this).val());
            $('.contact_data, .contact_map').addClass('d-none');
            info.removeClass('d-none');
        })

    </script>
@endsection