@extends('layouts/layoutMaster')


@section('title', __('Edit Setting'))

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/leaflet/leaflet.scss'])
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />

@endsection
@section('page-style')
@endsection
@section('styles')
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{ __('Edit Setting') }}</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a
                                        href="{{ route('dashboard.main') }}">{{ __('Dashboard') }}</a>
                                </li>
                                @if (isset($menu))
                                    <li class="breadcrumb-item"><a href="{{ route($menu_link) }}">{{ $menu }}</a>
                                    </li>
                                @endif
                                <li class="breadcrumb-item active">
                                    {{ __('Settings') }}
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="content-body">
            <x-any-errors></x-any-errors>
            <section class="form-control-repeater">
                <div class="row">

                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <form action="{{ route('dashboard.settings.update') }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="card mb-4">
                                        <h5 class="card-header">{{ __('Settings') }}</h5>
                                        <div class="card-body">

                                            @foreach ($settings as $setting)
                                                @if (!in_array($setting->key->value, $excptedKeys))
                                                    <div class="m-4">
                                                        <fieldset>
                                                            <div>
                                                                <label for="value_{{ $setting->id }}"
                                                                    class="form-label">{{ __($setting->key->value) }}</label>
                                                                <input required
                                                                    type="{{ $setting->key->type() ?? 'text' }}"
                                                                    id="value_{{ $setting->id }}"
                                                                    name="settings[{{ $setting->id }}][value]"
                                                                    class="form-control"
                                                                    placeholder="{{ __($setting->key->value) }}"
                                                                    value="{{ $setting?->value }}" />
                                                                {{-- show description as hint text --}}
                                                                @if ($setting->key->description())
                                                                    <small
                                                                        class="text-muted">{{ __($setting->key->description()) }}</small>
                                                                @endif

                                                                @if ($setting->has_image)
                                                                    <div class="col-6">
                                                                        <label for="image"
                                                                            class="form-label">{{ __('Image') }}</label>
                                                                        <input type="file" id="image"
                                                                            name="settings[{{ $setting->id }}][image]"
                                                                            class="form-control"
                                                                            placeholder="{{ __('Image') }}" />
                                                                        <img class="img-fluid rounded mb-3 pt-1 mt-4"
                                                                            src="{{ $setting->getFirstMediaUrl('image') }}"
                                                                            height="200" width="300" alt="User avatar">
                                                                    </div>
                                                                @endif
                                                                <input hidden required type="text"
                                                                    name="settings[{{ $setting->id }}][key]"
                                                                    class="form-control" value="{{ $setting?->key }}" />
                                                            </div>
                                                        </fieldset>
                                                    </div>
                                                @endif
                                            @endforeach

                                            {{-- <div class="col-12">
                                                <div class="card mb-4">
                                                    <div class="card-body">
                                                        <div class="leaflet-map" id="dragMap"></div>
                                                    </div>
                                                </div>
                                            </div> --}}

                                            {{-- <input hidden required type="text"
                                                name="settings[{{ $settings->where('key', App\Enums\SettingEnum::LATITUDE)->value('id') }}][key]"
                                                class="form-control" value="{{ App\Enums\SettingEnum::LATITUDE->value }}" />
                                            <input type="hidden"
                                                name="settings[{{ $settings->where('key', App\Enums\SettingEnum::LATITUDE)->value('id') }}][value]"
                                                id="latitude"
                                                value="{{ $settings->where('key', App\Enums\SettingEnum::LATITUDE)->value('value') }}"> --}}


                                            {{-- <input hidden required type="text"
                                                name="settings[{{ $settings->where('key', App\Enums\SettingKeyEnum::LONGITUDE)->value('id') }}][key]"
                                                class="form-control" value="{{ App\Enums\SettingKeyEnum::LONGITUDE->value }}" />

                                            <input type="hidden"
                                                name="settings[{{ $settings->where('key', App\Enums\SettingKeyEnum::LONGITUDE)->value('id') }}][value]"
                                                id="longitude"
                                                value="{{ $settings->where('key', App\Enums\SettingKeyEnum::LONGITUDE)->value('value') }}">
                                            <!-- /Draggable Marker With Popup --> --}}


                                            <hr />
                                            <div class="col-6">
                                                <x-forms.submit-button />
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

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

@section('vendor-script')
@endsection

@section('page-script')

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script>
        const dragMapVar = document.getElementById('dragMap');
        if (dragMapVar) {
            const map = L.map('dragMap').setView([25.245938079306878, 55.28663635253907], 12);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            var searchControl = L.Control.geocoder({
                defaultMarkGeocode: false
            }).on('markgeocode', function(e) {
                var latlng = e.geocode.center;
                map.flyTo(latlng, 12);
                // You can do additional actions here, such as adding a marker
            }).addTo(map);

            // Check if latitude and longitude input fields have values
            var latitude = $('#latitude').val();
            var longitude = $('#longitude').val();
            console.log('latitude');
            console.log(latitude);
            console.log(longitude);
            if (latitude && longitude) {
                console.log('yes');
                // Set initial marker location from input fields
                var initialLocation = [parseFloat(latitude), parseFloat(longitude)];
                map.setView(initialLocation, 12);

                var marker = L.marker(initialLocation, {
                    draggable: true
                }).addTo(map);

                marker.on('dragend', function(event) {
                    var markerLocation = marker.getLatLng();
                    console.log(markerLocation.lat, markerLocation.lng);
                    // Update hidden input fields in the form with these values
                    $('#latitude').val(markerLocation.lat);
                    $('#longitude').val(markerLocation.lng);
                });

                map.on('click', function(event) {
                    marker.setLatLng(event.latlng);
                    var markerLocation = marker.getLatLng();
                    console.log(markerLocation.lat, markerLocation.lng);
                    // Update hidden input fields in the form with these values
                    $('#latitude').val(markerLocation.lat);
                    $('#longitude').val(markerLocation.lng);
                });

            } else {
                // Try to get the user's location
                // Success, center the map on the user's location
                var userLocation = [25.245938079306878, 55.28663635253907];
                $('#latitude').val(25.245938079306878);
                $('#longitude').val(55.28663635253907);
                map.setView(userLocation, 12);

                // Add a marker at the user's location
                var marker = L.marker(userLocation, {
                    draggable: true
                }).addTo(map);

                marker.on('dragend', function(event) {
                    var markerLocation = marker.getLatLng();
                    console.log(markerLocation.lat, markerLocation.lng);
                    // Update hidden input fields in the form with these values
                    $('#latitude').val(markerLocation.lat);
                    $('#longitude').val(markerLocation.lng);
                });

                map.on('click', function(event) {
                    marker.setLatLng(event.latlng);
                    var markerLocation = marker.getLatLng();
                    console.log(markerLocation.lat, markerLocation.lng);
                    // Update hidden input fields in the form with these values
                    $('#latitude').val(markerLocation.lat);
                    $('#longitude').val(markerLocation.lng);
                });
            }

        }
    </script>
@endsection