@extends ('back_office.layouts.app')

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

<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>
    <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" action="{{ route('area.store') }}" 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="#1E90FF" 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" 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" 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>
            @else
                <span>Activate Google Maps Key first!
                <a style="color: #1e90ff" href="{{route('fatora.and.maps')}}">Activate</a>
                </span>
            @endif
        </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(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
        };


        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($areas);
        dbGeo.forEach((el, index) => {
           features.features.push(JSON.parse(el['geojson']));
        });
        var data = JSON.parse(dbGeo[0]['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