@extends ('back_office.layouts.app')

@section('content')
    <script src="https://maps.google.com/maps/api/js?key=AIzaSyAQkSTe7WsPj_6_nv8Hccbx3Cg0quu_5b0&libraries=drawing"></script>

    <style>
        .color-button {
            width: 30px;
            height: 30px;
            font-size: 0;
            margin: 2px;
            float: left;
            cursor: pointer;
        }
    </style>

    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <div class="col-9" id="map" style="height: 600px;"></div>
                <div class="col-3">
                    <form class="form-horizontal" action="{{ route('area.update', $area->id) }}" method="POST">
                        @csrf
                        <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="{{$area->color}}" type="hidden">
                                    @error('color')
                                    <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Area name</label>
                                    <input type="text" placeholder="Area name" name="name" id="name" value="{{$area->name}}" class="form-control @error('name') is-invalid @enderror" />
                                    @error('name')
                                    <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Area name for customer</label>
                                    <input type="text" placeholder="Area name for customer" name="customer_name" id="customer_name" value="{{$area->customer_name}}" class="form-control @error('customer_name') is-invalid @enderror" />
                                    @error('customer_name')
                                    <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <input id="geojson" name="geojson" type="hidden">
                            <div class="mt-5">
                                <button id="save" value="save" type="submit" class="btn btn-info">Save Shape</button>
                                <button id="delete-button" value="delete" type="button" class="btn btn-secondary">Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <script>
        var drawingManager;
        var selectedShape;
        var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
        var selectedColor;
        var colorButtons = {};

        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);
                // To show:
                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);
        }

        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;
            }
            selectColor(@json($area).color);
        }

        function initialize() {

            var map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 25.387895,
                    lng: 51.530836
                },
                zoom: 12,
                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
            };


            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) {
                    // Switch back to non-drawing mode after drawing a shape.
                    drawingManager.setDrawingMode(null);
                    // To hide:
                    drawingManager.setOptions({
                        drawingControl: false,
                    });

                    // Add an event listener that selects the newly-drawn shape when the user
                    // mouses down on it.
                    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);


            //To Save data we need listen to OverlayComplete
            google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
                map.data.add(new google.maps.Data.Feature({
                    geometry: new google.maps.Data.Polygon([event.overlay.getPath().getArray()])
                }));
            });

            google.maps.event.addDomListener(document.getElementById('save'), 'click', function() {

                map.data.toGeoJson(function(obj) {
                    Object.assign(obj.features[obj.features.length - 1].properties, {
                        color: selectedColor
                    });
                    document.getElementById('geojson').value = JSON.stringify(obj.features[obj.features.length - 1]);
                });
            })

            buildColorPalette();
            loadPolygons(map);
        }

        function loadPolygons(map) {
            var features = {"type":"FeatureCollection","features":[]};
            var dbGeo = @json($area);
            features.features.push(JSON.parse(dbGeo['geojson']));
            console.log(features);
            var data = JSON.parse(dbGeo['geojson']);
            map.data.forEach(function(f) {
                map.data.remove(f);
            });
            map.data.addGeoJson(features)
            map.data.setStyle(function(feature) {
                var color = feature.getProperty('color');
                return {
                    fillColor: color,
                    strokeWeight: 1
                }
            });
        }


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

@endsection