@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>

    <div class="border-item">
        <form class="form-row add_consulting_from" method="get" action="{{ $action }}" enctype="multipart/form-data" autocomplete="off">
            @csrf
                <div class="form-group col">
                    <label>{{ meta('type', $lang) ?? __('documentationRequests.type') }} </label>
                    <input readonly class="form-control bg-white" value='{{ __('documentationRequests.'.$documentationRequest->type) }}'/>
                </div>
                <div class="form-group col">
                    <label>{{ meta('documentation_type_id', $lang) ?? __('documentationRequests.documentation_type_id') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $documentationType ? $documentationType->name : '' }}'/>
                </div>
                @if($city)
                    <div class="form-group col">
                        <label>{{ meta('city_id', $lang) ?? __('documentationRequests.city_id') }} </label>
                        <input readonly class="form-control bg-white" value='{{ $city->name }}'/>
                    </div>
                @endif

                @if($documentationRequest->lat && $documentationRequest->lng)
                    <div class="form-group col-lg-12">
                        <div style="border:0; height: 400px; width: 100%" class="map" id="map"></div>
                        <ul id="lang_buttons">
                            <li id="button-ar" class="button">{{__('main.arabic')}}</li>
                            {{--                                    <li id="button-en" class="button">{{__('main.english')}}</li>--}}
                            {{--                                    <li id="button-ru" class="button">Russian</li>--}}
                            {{--                                    <li id="button-de" class="button">German</li>--}}
                            {{--                                    <li id="button-es" class="button">Spanish</li>--}}
                        </ul>
                    </div>
                @endif

                <div class="form-group col-lg-12">
                    <label>{{ meta('address', $lang) ?? __('documentationRequests.address') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $documentationRequest->address }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('user_name', $lang) ?? __('documentationRequests.user_name') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $documentationRequest->user_name }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('user_phone', $lang) ?? __('documentationRequests.user_phone') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $documentationRequest->user_phone }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('user_email', $lang) ?? __('documentationRequests.user_email') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $documentationRequest->user_email }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('documentation_date', $lang) ?? __('documentationRequests.documentation_date') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $documentationRequest->documentation_date }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('documentation_time', $lang) ?? __('documentationRequests.documentation_time') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $documentationRequest->documentation_time }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('pay_way', $lang) ?? __('documentationRequests.pay_way') }} </label>
                    <input readonly class="form-control bg-white" value='{{ __('documentationRequests.'.($documentationRequest->pay_way ?? 'coupon_discount')) }}'/>
                </div>
                <div class="form-group col-lg-6">
                    <label>{{ meta('total', $lang) ?? __('documentationRequests.total') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $documentationRequest->total }}'/>
                </div>
                <div class="form-group col-lg-6">
                    <label>{{ meta('status', $lang) ?? __('documentationRequests.status') }} </label>
{{--                    @if($documentationRequest->status == 'being_documented')--}}
                        <select name="status" id="status" class="form-control">
                            <option value="">{{ meta('status', $lang) ?? __('documentationRequests.status') }}</option>
                            <option {{ ($documentationRequest->status ?? null) == 'being_documented' ? 'selected' : '' }} value="being_documented">{{__('documentationRequests.being_documented')}}</option>
                            <option {{ ($documentationRequest->status ?? null) == 'documented' ? 'selected' : '' }} value="documented">{{__('documentationRequests.documented')}}</option>
                        </select>
{{--                    @else--}}
{{--                        <input readonly class="form-control bg-white" value='{{__('documentationRequests.documented')}}'/>--}}
{{--                    @endif--}}
                </div>

                <div class="form-group col-lg-12">
                    <label>{{ meta('notes', $lang) ?? __('documentationRequests.notes') }} </label>
                    <textarea cols="30" rows="10" readonly class="form-control bg-white">{{ $documentationRequest->notes ?? "" }}</textarea>
                </div>


            <div class="text-center mt-5 col-12">
                <button class="butn add_consulting_button"><span>{{ __('dashboard.save') }}</span></button>
            </div>
        </form>
    </div>



@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>
        var route_prefix = "{{ url(config('lfm.prefix')) }}";
        var url = "{{url('/')}}/",
            currentLanguage = "{{$lang}}",
            inputName = '';
    </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/lib/toastr.min.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>
        let latitude = "{{$documentationRequest->lat}}",
            longitude = "{{$documentationRequest->lng}}";



            if(latitude && longitude){
                mapboxgl.accessToken = 'pk.eyJ1IjoibGVnYWxvZ2FpbCIsImEiOiJjbDM3NXF2Nm8xdXBoM2JwOWMyZ2Zua3o2In0.MVzxl1JEKwb-V9z5unrOwQ';

                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);

                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}`
                    ]);
                });
            }

    </script>

    <script>
        $('.add_consulting_button').click(async function (e) {
            e.preventDefault();

            let form = $('.add_consulting_from'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if (response.url){
                toasterSuccess(response.message);
                setTimeout(function () {
                    window.location.href = response.url;
                }, 100)
            }

            if (response.errors){
                toasterError(response.errors);
            }


        });
    </script>

    @endsection