@extends('layouts.app')
@section('title')
    {{ __('messages_301.Zones') }}
@endsection
@section('style')
    <style>
        #map {
            width: 100%;
            height: 500px;
            margin-top: 20px;
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_301.Zones') => route('admin.zones.index'),
                __('messages.Edit') => 'active',
            ],
        ])



        <div class="row justify-content-center">
            <!-- Form controls -->
            <div class="col-md-12">
                <input type="hidden" id="default_lat" name="default_lat" value="{{ $default_lat ?? 11.280085537724654 }}">
                <input type="hidden" id="default_lng" name="default_lng" value="{{ $default_lng ?? 76.59630807365204 }}">
                <!-- Multi Column with Form Separator -->
                <div class="card mb-4">
                    <h5 class="card-header">{{ __('messages_301.Zone data') }}</h5>
                    <form class="card-body" action="{{ route('admin.zones.update', $zone->id) }}" method="POST"
                        id="form_submit" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <h6>1. {{ __('messages.Basic information') }}</h6>
                        <input type="hidden" id="info" name="coordinates" value="{{ $zone_coordinates ?? '' }}">
                        <input type="hidden" id="city_polygon" name="city_polygon"
                            value="{{ old('city_polygon', $zone->city_polygon) }}">
                        <div class="row g-3">
                            <div class="nav-align-top  mb-4">
                                <ul class="nav nav-tabs" role="tablist">
                                    @foreach ($languages as $lang)
                                        <li class="nav-item" role="presentation">
                                            <button type="button" class="nav-link {{ $loop->index == 0 ? 'active' : '' }}"
                                                role="tab" data-bs-toggle="tab"
                                                data-bs-target="#navs-{{ $lang->id }}"
                                                aria-controls="navs-{{ $lang->id }}" aria-selected="true">
                                                {{ $lang->native_name }}
                                            </button>
                                        </li>
                                    @endforeach


                                </ul>
                                <div class="tab-content p-0">
                                    @foreach ($languages as $lang)
                                        <div class="tab-pane fade {{ $loop->index == 0 ? 'active show' : '' }}  "
                                            id="navs-{{ $lang->id }}" role="tabpanel">
                                            <div class="row">
                                                <div class="col-md-6 mt-3">
                                                    <label class="form-label mb-1"
                                                        for="name_{{ $lang->code }}">{{ __('messages_303.Department name') }}
                                                        ({{ $lang->code }})
                                                    </label>
                                                    <input type="text" id="name_{{ $lang->code }}"
                                                        data-slug_name="slug_{{ $lang->code }}"
                                                        class="form-control input_name  @error('name_' . $lang->code) is-invalid @enderror"
                                                        name="name_{{ $lang->code }}"
                                                        value="{{ old('name_' . $lang->code, \App\Http\Helpers\HelperTranslate::get_value($zone, $lang->code, 'name')) }}" />
                                                    @error('name_' . $lang->code)
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                            </div>
                                        </div>
                                    @endforeach


                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label class="form-label mb-1" for="distance">{{ __('messages_301.Distance') }}</label>
                                <input type="number" id="distance"
                                    class="form-control   @error('distance') is-invalid @enderror" name="distance"
                                    value="{{ old('distance', $zone->distance) }}" step=".01" />
                                @error('distance')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mt-3">
                                <label class="form-label mb-1"
                                    for="distance_price">{{ __('messages_301.Distance price') }}</label>
                                <input type="number" id="distance_price"
                                    class="form-control   @error('distance_price') is-invalid @enderror"
                                    name="distance_price" value="{{ old('distance_price', $zone->distance_price) }}"
                                    step=".01" />
                                @error('distance_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>


                            <div class="col-xl-12">
                                <div class="card border-top border-0 border-4 border-primary">
                                    <div class="card-body p-5">

                                        <div class="col-md-12 mb-2">
                                            <div class="form-group">
                                                <input id="search-box" class="form-control controls" type="text"
                                                    placeholder="search" />
                                            </div>
                                        </div>
                                        <div class="col-md-12 mb-2">
                                            <ul style="list-style: none;display:flex;justify-content: center">
                                                <li style="margin: 0 7px;font-size: 23px;">
                                                    <a id="select-button" href="javascript:void(0)"
                                                        onclick="drawingManager.setDrawingMode(null)"
                                                        class="btn-floating zone-add-btn btn-large waves-effect waves-light tooltipped">
                                                        <i class="ti ti-hand-click"></i>
                                                    </a>
                                                </li>

                                                <li style="margin: 0 7px;font-size: 23px;">
                                                    <a id="add-button" href="javascript:void(0)" onclick="createShape()"
                                                        class="btn-floating zone-add-btn btn-large waves-effect waves-light tooltipped">
                                                        <i class="ti ti-map-pin"></i>
                                                    </a>
                                                </li>

                                                <li style="margin: 0 7px;font-size: 23px;">
                                                    <a id="delete-all-button" href="javascript:void(0)"
                                                        onclick="clearMap();"
                                                        class="btn-floating zone-delete-all-btn btn-large waves-effect waves-light tooltipped">
                                                        <i class="ti ti-trash"></i>
                                                    </a>
                                                </li>

                                            </ul>
                                        </div>
                                        <div class="col-md-12 mb-2">
                                            <div id="map"></div>
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>



                        <div class="pt-4">
                            <button type="submit"
                                class="btn btn-primary me-sm-3 me-1">{{ __('messages.Save') }}</button>
                            <button type="reset" class="btn btn-label-secondary">{{ __('messages.Cancel') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAOcn3r6DVavhuoPatQvNGg5kUuV1zAFo&callback=initMap&libraries=drawing,geometry,places"
        defer></script>
@endsection
@section('script')
    @include('admin.products.inc.script_submit')
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>

    <script src="{{ asset('assets/js/polygon/main.js') }}"></script>
    <script src="{{ asset('assets/js/polygon/nucleu.js') }}"></script>


    <script type="text/javascript">
        // cod jQuery

        // activare tooltips
        $('[data-toggle="tooltip"]').each(function() {
            var options = {
                html: true
            };
            // setari colorare tooltips
            if ($(this)[0].hasAttribute('data-type')) {
                options['template'] =
                    '<div class="tooltip ' + $(this).attr('data-type') + '" role="tooltip">' +
                    ' <div class="tooltip-arrow"></div>' +
                    ' <div class="tooltip-inner"></div>' +
                    '</div>';
            }

            $(this).tooltip(options);
        });



        //final cod JQuery



        // inceput Javascript

        // variabile globale
        var map; // harta Google
        var drawingManager; // obiectul care cuprinde majoritatea metodelor si proprietatilor necesare pentru desenare
        var selectedShape; // ajuta la identificarea formei selectate
        var selectedKernel; // ajuta la identificarea nucleului selectat
        var gmarkers = []; // lista cu markerele care vor fi pozitionate in varfurile nucleului
        var coordinates = []; // lista cu coordonatele varfurilor poligonului selectat
        var infowindow = new google.maps.InfoWindow({
            size: new google.maps.Size(150, 50)
        }); // infowindow care apare cand se da click pe markere
        var allShapes = []; // lista cu toate formele desenate pe harta - ajuta pentru stergerea lor in acelasi timp
        var
        sendable_coordinates = []; // lista cu toate formele desenate pe harta - ajuta pentru stergerea lor in acelasi timp
        var shapeColor = "#007cff"; // culoare forma desenata
        var kernelColor = "#000"; // culoare nucleu
        var default_lat = '{{ $default_lat }}';
        var default_lng = '{{ $default_lng }}';
        var data = '{{ $zone_coordinates }}';
        let zones = JSON.parse(data.replace(/&quot;/g, '"'));
        // functie care copiaza textul primit ca parametru in clipboard
        // Primeste ca parametri:
        // text - document.getElementById('id-element').innerHTML,
        // copymsg - document.getElementById('id-element')
        function copyToClipboard(text, copymsg) {
            var temp = document.createElement('input');
            temp.type = 'input';
            temp.setAttribute('value', text);
            document.body.appendChild(temp);
            temp.select();
            document.execCommand("copy");
            temp.remove();
            copymsg.innerHTML = "Copiat în clipboard!"; // mesaj care se va afisa la executarea functiei
            setTimeout(function() {
                copymsg.innerHTML = ""
            }, 1000); // timp afisare mesaj
        }


        // schimba opacitatea containerului "opcard" atunci cand utilizatorul trece cursorul peste acest element
        function changeOpacityHover() {
            var element = document.getElementById("opcard");
            element.classList.remove("ccard");
            element.classList.add("vcard");
        }

        // schimba opacitatea containerului "opcard" la forma initiala dupa ce cursorul nu se mai afla peste elementul "opcard"
        function changeOpacityOut() {
            var element = document.getElementById("opcard");
            element.classList.remove("vcard");
            element.classList.add("ccard");
        }

        // Atribuie fiecarui marcator o harta
        // parametrul "map" va fi trimis cu valoarea hartii Google sau cu "null"
        function setMapOnAll(map) {
            for (var i = 0; i < gmarkers.length; i++) {
                gmarkers[i].setMap(map);
            }
        }

        // Ascunde toti marcatorii de pe harta
        function clearMarkers() {
            setMapOnAll(null);
        }

        function createShape() {
            if (allShapes.length === 0)
                drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON)
        }

        // Sterge toti marcatorii
        function deleteMarkers() {
            clearMarkers();
            gmarkers = [];
        }


        // functie care sterge forma selectata
        function deleteSelectedShape() {
            if (selectedShape) {
                selectedShape.setMap(null);
                var index = allShapes.indexOf(selectedShape);
                if (index > -1) {
                    allShapes.splice(index, 1);
                }
                let lat_lng = [];
                allShapes.forEach(function(data, index) {
                    lat_lng[index] = getCoordinates(data);
                });
                document.getElementById('info').value = JSON.stringify(lat_lng);
                // document.getElementById('info').value = null; // actualizează lista de coordonate afisata
            }

            if (selectedKernel) {
                selectedKernel.setMap(null);
                // document.getElementById('info').value = null; // actualizează lista de coordonate afisata
            }
        }



        // functie care sterge toate formele de pe harta
        function clearMap() {
            if (allShapes.length > 0) { // verific daca exista forme desenate

                for (var i = 0; i < allShapes.length; i++) // sterge toate formele
                {
                    allShapes[i].setMap(null);
                }
                allShapes = [];
                deleteMarkers();
                document.getElementById('info').value = null;
                // document.getElementById('info').innerHTML = "Desenează un poligon. Aici vor apărea coordonatele vârfurilor sale și vor fi actualizate în timp real."; // actualizează lista de coordonate afisata

            }
        }


        // functie care seteaza culoarea formei selectate ca fiind cea aleasa de utilizator prin Color Picker

        function update(picker) {
            shapeColor = picker.toHEXString();
            if (selectedShape) {
                selectedShape.setOptions({
                    fillColor: shapeColor
                });
            }
        }



        // a function that sets the color of the core selected as the one chosen by the user through the Color Picker
        // function that cancels the current selection
        function clearSelection() {
            if (selectedShape) { //check that the selected shape is a polygon
                if (selectedShape.type !== 'marker') {
                    selectedShape.setEditable(false);
                }
                selectedShape = null;
            }

            if (selectedKernel) { // check to see if the selected shape is a core
                if (selectedKernel.type !== 'marker') {
                    selectedKernel.setEditable(false);
                }
                selectedKernel = null;
            }
        }

        // function that selects a form and receives as parameters:
        // shape - the form to be selected
        // check - 0 = polygon, 1 = core
        function setSelection(shape, check) {
            clearSelection();
            console.log(shape);
            shape.setEditable(true);
            shape.setDraggable(true);
            if (check) {
                selectedKernel = shape;
            } else {
                selectedShape = shape;
            }
        }



        //display function that saves in the list "coordinates" the coordinates of the points of the polygon given as parameter coordinates coordonatele varfurilor poligonului dat ca parametru
        function getCoordinates(polygon) {
            var path = polygon.getPath();
            coordinates = [];
            for (var i = 0; i < path.length; i++) {
                coordinates.push({
                    lat: path.getAt(i).lat(),
                    lng: path.getAt(i).lng()
                });
            }
            return coordinates;
            // document.getElementById('info').value = coordinates;
        }



        // functie care creeaza un marker si primeste ca parametri
        // coord = coordonatele unde va fi creat marker-ul
        // nr = numarul marker-ului
        // map = harta Google Maps
        function createMarker(coord, nr, map) {
            var mesaj = "<h6>Vârf " + nr + "</h6><br>" + "Lat: " + coord.lat + "<br>" + "Lng: " + coord.lng;
            var marker = new google.maps.Marker({
                position: coord,
                map: map,
                //zIndex: Math.round(coord.lat * -100000) << 5
            });
            // displaying marker information at "click"
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(mesaj);
                infowindow.open(map, marker);
            });
            google.maps.event.addListener(marker, 'dblclick', function() { // delete marker at "double click"

                marker.setMap(null);
            });
            return marker;
        }


        // function that offers functionality to the search box
        function searchBox() {
            // Create the search box
            var input = document.getElementById('search-box');
            var searchBox = new google.maps.places.SearchBox(input);

            // Results relevant to the current location
            map.addListener('bounds_changed', function() {
                searchBox.setBounds(map.getBounds());
            });


            // Get more details on the selected place
            searchBox.addListener('places_changed', function() {
                var places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }

                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) {
                    if (!place.geometry) {
                        return;
                    }
                    var icon = {
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(25, 25)
                    };

                    if (place.geometry.viewport) {
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                });
                map.fitBounds(bounds);
            });

        }



        // function that initializes the Google Maps, sets its options and calls other functions
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 8,
                center: new google.maps.LatLng(default_lat, default_lng),
                mapTypeControl: false, // disabled
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                zoomControl: true,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_CENTER
                },
                scaleControl: false, // disabled
                scaleControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_CENTER
                },
                streetViewControl: false, // disabled
                fullscreenControl: false // disabled
            });

            var i;
            var polygon;
            for (i = 0; i < zones.length; i++) {
                polygon = new google.maps.Polygon({
                    paths: zones[i],
                    strokeWeight: 1,
                    strokeColor: '#007cf',
                    fillColor: '#007cff',
                    fillOpacity: 0.4,
                });
                polygon.setMap(map);
                addNewPolys(polygon);
                allShapes.push(polygon); // save the form to the allShapes list
                google.maps.event.addListener(polygon, 'click', function(e) {
                    getCoordinates(polygon);
                });
                google.maps.event.addListener(polygon, "dragend", function(e) {
                    // console.log(polygon);
                    console.log(getCoordinates(polygon));
                    for (i = 0; i < allShapes.length; i++) { // Clear out the old allShapes entry
                        if (polygon.getPath() == allShapes[i].getPath()) {
                            allShapes.splice(i, 1);
                        }
                    }
                    allShapes.push(polygon);
                    let lat_lng = [];
                    allShapes.forEach(function(data, index) {
                        lat_lng[index] = getCoordinates(data);
                    });

                    console.log(lat_lng);
                    document.getElementById('info').value = JSON.stringify(lat_lng);
                });
                google.maps.event.addListener(polygon.getPath(), "insert_at", function(e) {

                    for (i = 0; i < allShapes.length; i++) { // Clear out the old allShapes entry
                        if (polygon.getPath() == allShapes[i].getPath()) {
                            allShapes.splice(i, 1);
                        }
                    }
                    allShapes.push(polygon);
                    let lat_lng = [];
                    allShapes.forEach(function(data, index) {
                        lat_lng[index] = getCoordinates(data);
                    });

                    document.getElementById('info').value = JSON.stringify(lat_lng);
                });
                google.maps.event.addListener(polygon.getPath(), "remove_at", function(e) {
                    getCoordinates(polygon);
                });
                google.maps.event.addListener(polygon.getPath(), "set_at", function(e) {
                    getCoordinates(polygon);
                });

            }

            let lat_lng = [];
            allShapes.forEach(function(data, index) {
                lat_lng[index] = getCoordinates(data);
            });

            document.getElementById('info').value = JSON.stringify(lat_lng);

            console.log("lat_lng");
            console.log(lat_lng);

            searchBox();
            // settings for drawing shapes and drawing polygon
            var shapeOptions = {
                strokeWeight: 1,
                fillOpacity: 0.4,
                editable: true,
                draggable: true
            };

            // initializare Drawing Manager
            drawingManager = new google.maps.drawing.DrawingManager({
                // direct polygon drawing setting
                // drawingMode: google.maps.drawing.OverlayType.POLYGON,
                drawingMode: null,
                drawingControl: false, //dezactivat
                drawingControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_CENTER,
                    drawingModes: ['polygon'] //  you can also add: 'marker', 'polyline', 'rectangle', 'circle'
                },
                polygonOptions: shapeOptions,
                map: map
            });
            google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
                var newShape = e.overlay;
                // console.log(newShape);
                allShapes.push(newShape); // save the form to the allShapes list

                console.log(allShapes);

                let lat_lng = [];

                allShapes.forEach(function(data, index) {
                    lat_lng[index] = getCoordinates(data);
                    // console.log(lat_lng);
                });
                document.getElementById('info').value = JSON.stringify(lat_lng);

                newShape.setOptions({
                    fillColor: shapeColor
                }); // color form with the current value of shapeColor

                getCoordinates(newShape); // find coordinates peaks
                // exit drawing mode after completion of the polygon
                drawingManager.setDrawingMode(null);
                setSelection(newShape, 0);
                // select polygon at "click"
                google.maps.event.addListener(newShape, 'click', function(e) {
                    if (e.vertex !== undefined) {
                        var path = newShape.getPaths().getAt(e.path);
                        path.removeAt(e.vertex);
                        getCoordinates(newShape);
                        if (path.length < 3) {
                            newShape.setMap(null);
                        }
                    }
                    setSelection(newShape, 0);
                });

                google.maps.event.addListener(newShape, 'mouseup', function() {
                    for (i = 0; i < allShapes.length; i++) { // Clear out the old allShapes entry
                        if (newShape.getPath() == allShapes[i].getPath()) {
                            allShapes.splice(i, 1);
                        }
                    }
                    allShapes.push(newShape);
                });

                //update coordinates
                google.maps.event.addListener(newShape, 'click', function(e) {
                    getCoordinates(newShape);
                });
                google.maps.event.addListener(newShape, "dragend", function(e) {
                    console.log(e);
                    getCoordinates(newShape);
                });
                google.maps.event.addListener(newShape.getPath(), "insert_at", function(e) {
                    getCoordinates(newShape);
                });
                google.maps.event.addListener(newShape.getPath(), "remove_at", function(e) {
                    getCoordinates(newShape);
                });
                google.maps.event.addListener(newShape.getPath(), "set_at", function(e) {
                    getCoordinates(newShape);
                });

            });
            // Deselect the form when changing the drawing mode or when the user clicks on the map
            google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
            google.maps.event.addListener(map, 'click', clearSelection);


        }

        function addNewPolys(newPoly) {
            google.maps.event.addListener(newPoly, 'click', function() {
                setSelection(newPoly);
            });
        }
        // start application
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
@endsection