@extends('back_office.layouts.app')
@section('content')
    <script src="https://maps.google.com/maps/api/js?key={{ env('MAPS_KEY') }}&libraries=drawing"></script>

    <style>
        .color-button {
            width: 30px;
            height: 30px;
            font-size: 0;
            margin: 2px;
            float: left;
            cursor: pointer;
        }
    </style>
    <div class="container-fluid">
        <div class="p-4 bg-white row">
            @if ($maps && $maps->value == 1)
                <div class="col-9" id="map" style="height: 600px;"></div>
                <div class="col-3">
                    <form class="form-horizontal" method="POST" action="{{ route('breakdown-service.zones.update', $breakdownServiceZone->id) }}">
                        @csrf
                        @method('POST')
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Colors</label>
                                    <div id="color-palette"></div>
                                    <input id="color" name="color" value="{{ old('color', $breakdownServiceZone->color) }}" type="hidden">
                                    @error('color')
                                        <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Zone name</label>
                                    <input type="text" placeholder="Zone name" name="name" id="name"
                                        class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $breakdownServiceZone->name) }}" />
                                    @error('name')
                                        <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Price for the zone</label>
                                    <input type="text" placeholder="Price for the zone" name="price" id="price"
                                        class="form-control @error('price') is-invalid @enderror" value="{{ old('price', $breakdownServiceZone->price) }}" />
                                    @error('price')
                                        <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <input id="geojson" name="geojson" type="hidden" value="">
                            <div class="mt-5">
                                <button id="save" value="save" type="submit" class="btn btn-primary">Update Zone</button>
                                <button id="delete-button" value="delete" type="button" class="btn btn-secondary">Reset</button>
                                <a href="{{ route('breakdown-service.zones.index') }}" class="btn btn-link">Back</a>
                            </div>
                        </div>
                    </form>
                </div>
            @else
                <span>Activate Google Maps Key first!
                    <a style="color: #1e90ff" href="{{ route('fatora.and.maps') }}">Activate</a>
                </span>
            @endif
        </div>
    </div>

    <script>
        var drawingManager;
        var selectedShape;
        var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
        var selectedColor = "{{ $breakdownServiceZone->color }}";
        var colorButtons = {};
        var existingFeature = @json($breakdownServiceZone->geojson ?? null);

        function clearSelection() {
            if (selectedShape) {
                selectedShape.setEditable(false);
                selectedShape = null;
            }
        }

        function setSelection(shape) {
            clearSelection();
            selectedShape = shape;
            shape.setEditable(true);
            selectColor(shape.get('fillColor') || shape.get('strokeColor'));
        }

        function deleteSelectedShape() {
            if (selectedShape) {
                selectedShape.setMap(null);
                drawingManager.setOptions({ drawingControl: true });
            }
        }

        function selectColor(color) {
            selectedColor = color;
            document.getElementById('color').value = color;
            for (var i = 0; i < colors.length; ++i) {
                var currColor = colors[i];
                colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
            }
            var polygonOptions = drawingManager.get('polygonOptions');
            polygonOptions.fillColor = color;
            drawingManager.set('polygonOptions', polygonOptions);
            if (selectedShape) {
                selectedShape.set('fillColor', color);
            }
        }

        function setSelectedShapeColor(color) {
            if (selectedShape) {
                if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
                    selectedShape.set('strokeColor', color);
                } else {
                    selectedShape.set('fillColor', color);
                }
            }
        }

        function makeColorButton(color) {
            var button = document.createElement('span');
            button.className = 'color-button';
            button.style.backgroundColor = color;
            google.maps.event.addDomListener(button, 'click', function() {
                selectColor(color);
                setSelectedShapeColor(color);
            });
            return button;
        }

        function buildColorPalette() {
            var colorPalette = document.getElementById('color-palette');
            for (var i = 0; i < colors.length; ++i) {
                var currColor = colors[i];
                var colorButton = makeColorButton(currColor);
                colorPalette.appendChild(colorButton);
                colorButtons[currColor] = colorButton;
            }
            // If existing color not in palette, push visually
            if (!colors.includes(selectedColor)) {
                var extraButton = makeColorButton(selectedColor);
                colorPalette.appendChild(extraButton);
                colorButtons[selectedColor] = extraButton;
                colors.push(selectedColor);
            }
            selectColor(selectedColor || colors[0]);
        }

        function initialize() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 25.387895, lng: 51.530836 },
                zoom: 13,
                mapTypeControl: false,
                zoomControl: true,
                zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER },
                scaleControl: true,
                streetViewControl: false,
                fullscreenControl: false,
            });

            var polyOptions = { strokeWeight: 0, fillOpacity: 0.9, editable: true, fillColor: selectedColor };

            drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.POLYGON,
                drawingControlOptions: { drawingModes: [google.maps.drawing.OverlayType.POLYGON] },
                markerOptions: { draggable: true },
                polylineOptions: { editable: true },
                rectangleOptions: polyOptions,
                circleOptions: polyOptions,
                polygonOptions: polyOptions,
                map: map
            });

            google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
                if (e.type != google.maps.drawing.OverlayType.MARKER) {
                    drawingManager.setDrawingMode(null);
                    drawingManager.setOptions({ drawingControl: false });
                    var newShape = e.overlay;
                    newShape.type = e.type;
                    google.maps.event.addListener(newShape, 'click', function() { setSelection(newShape); });
                    setSelection(newShape);
                }
            });

            google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
            google.maps.event.addListener(map, 'click', clearSelection);
            google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

            // Save GeoJSON on submit
            google.maps.event.addDomListener(document.getElementById('save'), 'click', function() {
                map.data.toGeoJson(function(obj) {
                    if (selectedShape) {
                        // Build a single feature for the selected shape
                        var path = selectedShape.getPath().getArray().map(function(latLng) { return [latLng.lng(), latLng.lat()]; });
                        // Close polygon if not closed
                        if (path.length && (path[0][0] !== path[path.length - 1][0] || path[0][1] !== path[path.length - 1][1])) {
                            path.push(path[0]);
                        }
                        var feature = {
                            type: 'Feature',
                            properties: { color: selectedColor },
                            geometry: { type: 'Polygon', coordinates: [path] }
                        };
                        document.getElementById('geojson').value = JSON.stringify(feature);
                    }
                });
            });

            buildColorPalette();
            loadPolygons(map);
            loadCurrentPolygon(map);
        }

        function loadPolygons(map) {
            var features = { type: 'FeatureCollection', features: [] };
            var dbGeo = @json($areas);
            dbGeo.forEach((el) => {
                // Skip current zone
                if (el.id === {{ $breakdownServiceZone->id }}) return;
                features.features.push(JSON.parse(el['geojson']));
            });
            map.data.forEach(function(f) { map.data.remove(f); });
            map.data.addGeoJson(features);
            map.data.setStyle(function(feature) { return { fillColor: feature.getProperty('color'), strokeWeight: 1, clickable: false }; });
        }

        function loadCurrentPolygon(map) {
            if (!existingFeature) return;
            var featureObj = typeof existingFeature === 'string' ? JSON.parse(existingFeature) : existingFeature;
            if (!featureObj || !featureObj.geometry || featureObj.geometry.type !== 'Polygon') return;
            var coords = featureObj.geometry.coordinates[0]; // first ring
            var path = coords.map(function(coord) { return { lat: coord[1], lng: coord[0] }; });
            var polygon = new google.maps.Polygon({
                paths: path,
                strokeWeight: 0,
                fillOpacity: 0.9,
                editable: true,
                fillColor: featureObj.properties && featureObj.properties.color ? featureObj.properties.color : selectedColor
            });
            polygon.setMap(map);
            drawingManager.setDrawingMode(null);
            drawingManager.setOptions({ drawingControl: false });
            google.maps.event.addListener(polygon, 'click', function() { setSelection(polygon); });
            setSelection(polygon);
            // Fit bounds
            var bounds = new google.maps.LatLngBounds();
            path.forEach(function(p) { bounds.extend(p); });
            map.fitBounds(bounds);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
@endsection