@extends('web.layouts.container')
@section('css')
    {{--    <link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">--}}
    <link href="{{asset('assets/web/css/lib/mapbox-gl.css')}}" rel="stylesheet">
@endsection
@section('content')
    <section class="inner_header">
        <img src="{{asset('assets/web/images/icons/inner.svg')}}" alt="" class="inner_shap">
        <div class="container">
            <ul class="links">
                <li>
                    <a href="{{LaravelLocalization::getLocalizedURL($lang, route('home'), [], true)}}">{{__('main.home')}}</a>
                </li>
                <li>
                    <a href="#"> {{__('visitorMessages.head')}} </a>
                </li>
            </ul>
            <h4>{{__('visitorMessages.head')}}</h4>
        </div>
    </section>
    <!-- ---------- consultation-pg ----------- -->
    <section class="contact-pg consultation-pg section_padding">
        <div class="container">
            <div class="form-container">
                <div class="sec-cards mb-5">
                    <h5 class="title text-dark mb-4"><b>{{__('main.connect_with_us')}}</b></h5>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="item color2">
                                <div class="icon-outer">
                                    <i class="bi bi-telephone-fill"></i>
                                </div>
                                <div class="content">
                                    <h6 class="label text-white mb-2">{{__('settings.site_phone')}}</h6>
                                    <h5 class="title text-white"><b>{{($settings['site_phone'] ?? '+966-5447222441')}}</b></h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="item color1">
                                <div class="icon-outer">
                                    <i class="bi bi-building"></i>
                                </div>
                                <div class="content">
                                    <h6 class="label text-white mb-2">{{__('settings.site_address')}}</h6>
                                    <h5 class="title text-white"><b>{{($settings['site_address'] ?? '')}}</b></h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="item color2">
                                <div class="icon-outer">
                                    <i class="bi bi-camera-video-fill"></i>
                                </div>
                                <div class="content">
                                    <h6 class="label text-white mb-2">{{__('settings.site_email')}}</h6>
                                    <h5 class="title text-white"><b>{{($settings['site_email'] ?? '')}}</b></h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="social-links mb-5">
                    <h5 class="title text-dark mb-4"><b>{{__('visitorMessages.social_media_follow')}}</b></h5>
                    <div class="links">
                        @if(($settings['instagram'] ?? null))
                        <a target="_blank" href="{{$settings['instagram']}}">
                            <img src="{{asset('assets/web/images/icons/social-5.svg')}}" alt="" class="icon"/>
                        </a>
                        @endif

                        @if(($settings['twitter'] ?? null))
                        <a target="_blank" href="{{$settings['twitter']}}">
                            <img src="{{asset('assets/web/images/icons/social-6.svg')}}" alt="" class="icon"/>
                        </a>
                        @endif

                        @if(($settings['facebook'] ?? null))
                        <a target="_blank" href="{{$settings['facebook']}}">
                            <img src="{{asset('assets/web/images/icons/social-7.svg')}}" alt="" class="icon"/>
                        </a>
                        @endif


                        @if(($settings['tiktok'] ?? null))
                        <a target="_blank" href="#">
                            <img src="{{asset('assets/web/images/icons/social-1.svg')}}" alt="" class="icon"/>
                        </a>
                        @endif


                        @if(($settings['youtube'] ?? null))
                        <a target="_blank" href="{{$settings['youtube']}}">
                            <img src="{{asset('assets/web/images/icons/social-2.svg')}}" alt="" class="icon"/>
                        </a>
                        @endif

                        @if(($settings['linkedin'] ?? null))
                        <a target="_blank" href="{{$settings['linkedin']}}">
                            <img src="{{asset('assets/web/images/icons/social-3.svg')}}" alt="" class="icon"/>
                        </a>
                        @endif

                        @if(($settings['snapchat'] ?? null))
                        <a target="_blank" href="{{$settings['snapchat']}}">
                            <img src="{{asset('assets/web/images/icons/social-4.svg')}}" alt="" class="icon"/>
                        </a>
                        @endif



                    </div>
                </div>
                <div class="row mt-5 pt-3">
                    <div class="col-md-6">
                        <div class="contact-form">
                            <div class="text-box text-center mb-4">
                                <h4 class="title text-dark mb-2"><b>{{__('visitorMessages.send_message')}}</b></h4>
                                <p class="text">{{__('visitorMessages.title_1')}}</p>
                                <h6 class="main_color">{{__('visitorMessages.title_2')}}</h6>
                            </div>
                            <form method="post" action="{{route('send_contact_us')}}" class="contact_us_form">
                                <div class="form-group">
                                    <input name="name" class="form-control" placeholder="{{__('visitorMessages.name')}}">
                                </div>
                                <div class="form-group">
                                    <input name="email" class="form-control" placeholder="{{__('visitorMessages.email')}}">
                                </div>
                                <div class="form-group">
                                    <input name="phone" class="form-control" placeholder="{{__('visitorMessages.phone')}}">
                                </div>
                                <div class="form-group">
                                    <input name="subject" class="form-control" placeholder="{{__('visitorMessages.subject')}}">
                                </div>
                                <div class="form-group">
                                    <textarea name="message" class="form-control" rows="5" placeholder="{{__('visitorMessages.message')}}"></textarea>
                                </div>
                                <button class="butn mt-4 m-auto d-block contact_us_button"><span><b> {{__('main.send')}}  </b></span></button>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="map-box">
                            <div class="text-box text-center">
                                <h5 class="title text-white"><b>{{__('visitorMessages.map_location')}}</b></h5>
                                <p class="text text-light">{{__('visitorMessages.map_location_hint')}}</p>
                            </div>
                            <div class="map-box">
                                <div style="border:0; height: 400px; width: 100%" class="map" id="map"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    {{--    <script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>--}}
    {{--    <script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>--}}
    {{--    <script id="search-js" defer src="https://api.mapbox.com/search-js/v1.0.0-beta.9/web.js"></script>--}}

    <script src='{{asset('assets/web/js/lib/mapbox-gl.js')}}'></script>
{{--    <script src="{{asset('assets/web/js/lib/mapbox-sdk.min.js')}}"></script>--}}
{{--    <script id="search-js" defer src="{{asset('assets/web/js/lib/web.js')}}"></script>--}}

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibGVnYWxvZ2FpbCIsImEiOiJjbDM3NXF2Nm8xdXBoM2JwOWMyZ2Zua3o2In0.MVzxl1JEKwb-V9z5unrOwQ';
        const latitude = "{{$settings['lat']}}",
            longitude = "{{$settings['lng']}}";

        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [46, 25],
            zoom: 4
        });

        const marker = new mapboxgl.Marker({
            draggable: false
        }).setLngLat([longitude, latitude]).addTo(map);


    </script>
@endsection