@extends('admin.layouts.container')
@section('css')
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
    {{--    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css" type="text/css">--}}
    {{--    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">--}}


    {{--    <link href="{{asset('assets/web/css/lib/mapbox-gl.css')}}" rel="stylesheet">--}}
    {{--    <link href="{{asset('assets/web/css/lib/mapbox-gl-directions.css')}}" rel="stylesheet">--}}
    {{--    <link href="{{asset('assets/web/css/lib/mapbox-gl-geocoder.css')}}" rel="stylesheet">--}}

    <style>
        #lang_buttons {
            width: 90%;
            margin: 0 auto;
        }
        .button {
            display: inline-block;
            position: relative;
            cursor: pointer;
            width: 20%;
            padding: 8px;
            border-radius: 3px;
            margin-top: 10px;
            font-size: 12px;
            text-align: center;
            color: #fff;
            background: #ee8a65;
            font-family: sans-serif;
            font-weight: bold;
        }
    </style>
@endsection
@section('content')
<div class="side-title">
    <h3>{{ $head ?? '' }}</h3>
</div>

@if (auth()->user()->role == 'super_admin')
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="site-settings-tab" data-toggle="tab" href="#site-settings" role="tab" aria-controls="site-settings" aria-selected="true">
                <b>{{__('settings.site_settings')}}</b>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="modules-settings-tab" data-toggle="tab" href="#modules-settings" role="tab" aria-controls="modules-settings" aria-selected="false">
                <b>{{__('settings.module_settings')}}</b>
            </a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="site-settings" role="tabpanel" aria-labelledby="site-settings-tab">
            @include('admin.settings.site_settings')
        </div>
        <div class="tab-pane fade show" id="modules-settings" role="tabpanel" aria-labelledby="modules-settings-tab">
            @include('admin.settings.module_settings')
        </div>
    </div>
@else
    @include('admin.settings.site_settings')
@endif


@endsection

@section('inner_js')
    <!-- Editor JS files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    {{--    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>--}}
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            currentLanguage = "{{$lang}}",
            imagePath = "{{asset('')}}",
            inputName = null;
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script src="{{ asset('assets/admin/js/settings.js') }}"></script>

    <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="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>--}}
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.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 src="{{asset('assets/web/js/lib/mapbox-gl-directions.js')}}"></script>--}}
    {{--    <script src="{{asset('assets/web/js/lib/mapbox-gl-geocoder.min.js')}}"></script>--}}


    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibGVnYWxvZ2FpbCIsImEiOiJjbDM3NXF2Nm8xdXBoM2JwOWMyZ2Zua3o2In0.MVzxl1JEKwb-V9z5unrOwQ';
        const coordinates = document.getElementById('coordinates'),
            oldLat = "{{old('lat', $settings->lat)}}",
            oldLng = "{{old('lng', $settings->lng)}}",
            latitude = oldLat ? parseFloat(oldLat) : parseFloat(localStorage.getItem('lat')),
            longitude = oldLng ? parseFloat(oldLng) : parseFloat(localStorage.getItem('lng'));

        $('.lat').html(`Latitude: ${latitude}`);
        $('.lng').html(`Longitude: ${longitude}`);

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

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

        mapboxgl.setRTLTextPlugin(
            'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
            null,
            true // Lazy load the plugin
        );


        document.getElementById('lang_buttons').addEventListener('click', (event) => {
            const language = event.target.id.substr('button-'.length);
            // Use setLayoutProperty to set the value of a layout property in a style layer.
            // The three arguments are the id of the layer, the name of the layout property,
            // and the new property value.
            map.setLayoutProperty('country-label', 'text-field', [
                'get',
                `name_${language}`
            ]);
        });


        function onDragEnd() {
            const lngLat = marker.getLngLat();
            // coordinates.style.display = 'flex';
            // coordinates.innerHTML = `<span>Longitude: ${lngLat.lng}</span><span class="mr-5">Latitude: ${lngLat.lat}</span>`;
            $('input[name="lat"]').val(lngLat.lat);
            $('input[name="lng"]').val(lngLat.lng);
        }

        marker.on('dragend', onDragEnd);

        // const script = document.getElementById('search-js');
        // mapboxsearch = document.querySelector('[autocomplete~="street-address"], [autocomplete~="address-line1"]');
        // script.onload = function() {
        //     mapboxsearch.autofill({
        //         accessToken: 'pk.eyJ1IjoibGVnYWxvZ2FpbCIsImEiOiJjbDM3NXF2Nm8xdXBoM2JwOWMyZ2Zua3o2In0.MVzxl1JEKwb-V9z5unrOwQ'
        //     });
        // };

    </script>
@endsection