@extends('layouts/layoutMaster')

@section('title', $title)

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/flatpickr/flatpickr.scss', 'resources/assets/vendor/libs/pickr/pickr-themes.scss', 'resources/assets/vendor/libs/@form-validation/form-validation.scss'])
    @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" />

    <!-- Leaflet Draw CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.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">{{ $title }}</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">
                                    {{ __('Areas') }}
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">

            <section class="form-control-repeater">
                <div class="row">

                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <x-any-errors></x-any-errors>
                                <form action="{{ route('dashboard.areas.store') }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    @isset($area)
                                        <input type="text" hidden name="id" value={{ $area->id }} id="">
                                    @endisset
                                    <div class="row">
                                        <div>
                                            <x-forms.input.text :field="'name'" :required="true" :value="$area?->name" />

                                            <!-- Draggable Marker With Popup -->
                                            <div class="col-12">
                                                <div class="card mb-4">
                                                    <div class="card-body">
                                                        <div class="leaflet-map" id="dragMap"></div>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- <input type="hidden" name="latitude" id="latitude"
                                                    value="{{ $area?->latitude }}">
                                                <input type="hidden" name="longitude" id="longitude"
                                                    value="{{ $area?->longitude }}"> --}}
                                            <!-- /Draggable Marker With Popup -->

                                            <!-- Hidden input to store polygon coordinates -->
                                            <input type="hidden" name="points" id="points"
                                                value="{{ json_encode($area?->points) }}">

                                        </div>
                                        <div class="col-6">
                                            <button class="btn btn-primary" type="submit">
                                                {{ __('Save') }}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

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

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/moment/moment.js', 'resources/assets/vendor/libs/flatpickr/flatpickr.js', 'resources/assets/vendor/libs/pickr/pickr.js', 'resources/assets/vendor/libs/@form-validation/popular.js', 'resources/assets/vendor/libs/@form-validation/bootstrap5.js', 'resources/assets/vendor/libs/@form-validation/auto-focus.js'])

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

    <!-- Leaflet Draw JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>

    {{-- <script>
        const dragMapVar = document.getElementById('dragMap');
        if (dragMapVar) {
            const map = L.map('dragMap').setView([52.0207975, 4.4937836], 12);

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

            // Initialize leaflet draw plugin
            var drawnItems = new L.FeatureGroup();
            map.addLayer(drawnItems);

            var drawControl = new L.Control.Draw({
                edit: {
                    featureGroup: drawnItems
                },
                draw: {
                    polygon: true,
                    marker: false,
                    circle: false,
                    rectangle: false,
                    polyline: false
                }
            });
            map.addControl(drawControl);

            // Handle the creation of new polygon
            map.on(L.Draw.Event.CREATED, function(event) {
                var layer = event.layer;
                drawnItems.addLayer(layer);

                // Get the polygon's coordinates and store them in the hidden input
                var latlngs = layer.getLatLngs()[0].map(function(latlng) {
                    return [latlng.lat, latlng.lng];
                });

                // Convert the coordinates to JSON and store them in the hidden input
                document.getElementById('polygon_coordinates').value = JSON.stringify(latlngs);
            });

            var storedPolygon = @json($area->boundaries);
            var polygon = L.polygon(storedPolygon, {
                color: 'blue'
            }).addTo(map);

            // Draggable Marker Section
            var latitude = $('#latitude').val();
            var longitude = $('#longitude').val();
            if (latitude && longitude) {
                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();
                    $('#latitude').val(markerLocation.lat);
                    $('#longitude').val(markerLocation.lng);
                });

                map.on('click', function(event) {
                    marker.setLatLng(event.latlng);
                });
                console.log('test');

                var storedPolygon = @json($area->boundaries);
                var polygon = L.polygon(storedPolygon, {
                    color: 'blue'
                }).addTo(map);
            } else {
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        var userLocation = [position.coords.latitude, position.coords.longitude];
                        $('#latitude').val(position.coords.latitude);
                        $('#longitude').val(position.coords.longitude);
                        map.setView(userLocation, 12);

                        var marker = L.marker(userLocation, {
                            draggable: true
                        }).addTo(map);
                        console.log('test');

                        var storedPolygon = @json($area->boundaries);
                        var polygon = L.polygon(storedPolygon, {
                            color: 'blue'
                        }).addTo(map);

                        marker.on('dragend', function(event) {
                            var markerLocation = marker.getLatLng();
                            $('#latitude').val(markerLocation.lat);
                            $('#longitude').val(markerLocation.lng);
                        });

                        map.on('click', function(event) {
                            marker.setLatLng(event.latlng);
                        });
                    },
                    function(error) {
                        var defaultLocation = [33.5138, 36.2765];
                        map.setView(defaultLocation, 12);
                    }
                );
            }
        }
    </script> --}}

    <script>
        const dragMapVar = document.getElementById('dragMap');
        if (dragMapVar) {
            // Initialize the map with a default location
            const map = L.map('dragMap').setView([52.0207975, 4.4937836], 12);

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

            // Initialize leaflet draw plugin
            var drawnItems = new L.FeatureGroup();
            map.addLayer(drawnItems);

            var drawControl = new L.Control.Draw({
                edit: {
                    featureGroup: drawnItems
                },
                draw: {
                    polygon: true,
                    marker: false,
                    circle: false,
                    rectangle: false,
                    polyline: false
                }
            });
            map.addControl(drawControl);

            // Handle the creation of a new polygon
            map.on(L.Draw.Event.CREATED, function(event) {
                var layer = event.layer;
                drawnItems.addLayer(layer);

                // Get the polygon's coordinates and store them in the hidden input
                var latlngs = layer.getLatLngs()[0].map(function(latlng) {
                    return {
                        latitude: latlng.lat,
                        longitude: latlng.lng
                    };
                });

                // Convert the coordinates to JSON and store them in the hidden input
                document.getElementById('points').value = JSON.stringify(latlngs);
            });

            // Check if there's a stored polygon and render it on the map
            @if (isset($area) && $area->points)
                var storedPolygon = @json($area->points);

                // Convert from {latitude, longitude} to [lat, lng] for Leaflet
                var polygonCoords = storedPolygon.map(function(point) {
                    return [point.latitude, point.longitude];
                });

                var polygon = L.polygon(polygonCoords, {
                    color: 'blue'
                }).addTo(map);

                // Add to drawnItems so it can be edited
                drawnItems.addLayer(polygon);

                // Fit the map to the bounds of the stored polygon
                map.fitBounds(polygon.getBounds());
            @endif

            // Initialize the leaflet-control-geocoder for search
            var searchControl = L.Control.geocoder({
                defaultMarkGeocode: false
            }).on('markgeocode', function(e) {
                var latlng = e.geocode.center;
                map.setView(latlng, 12);
            }).addTo(map);
        }
    </script>


@endsection