@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col">
        <div id="map"></div>
    </div>
</div>
<div class="row">
    <div class="col">
        <form method="POST" action="{{ url('add') }}">
            @csrf
            <input type="hidden" name="latitude" id="latitude" value="{{ @$disaster->latitude }}">
            <input type="hidden" name="longtitude" id="longtitude" value="{{ @$disaster->longtitude }}">
            <div class="form-group">
                <label for="exampleInputEmail1">สถานที่</label>
                <select id="location" name="location" class="custom-select form-control">
                    @foreach($provinces as $province)
                    <option value="{{ $province->name_th }}" selected>{{ $province->name_th }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">วันที่</label>
                <input type="date" name="date" class="form-control" value="{{ @$disaster->date }}">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">เวลา</label>
                <input type="time" name="time" class="form-control" value="{{ @$disaster->time }}">
            </div>
                        <div class="form-group">
                <label for="exampleInputPassword1">ประเภท</label>
                <select name="type" class="custom-select form-control">
                    @foreach($types as $type)
                    <option value="{{ $type }}" selected>{{ $type }}</option>
                    @endforeach
                </select>
            </div>
                        <div class="form-group">
                <label for="exampleInputPassword1">ระดับ</label>
                <select name="level" class="custom-select orm-control">
                    @foreach($levels as $level)
                    <option value="{{ $level }}" selected>{{ $level }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">งบประมาณ</label>
                <input type="text" name="budget" class="form-control" placeholder="" value="{{ @$disaster->budget }}">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">หน่วยสนับสนุน</label>
                <select id="department" name="support_unit" class="custom-select form-control">
                    @foreach($departments as $department)
                    <option value="{{ $department->short_name }}" selected>{{ $department->short_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">การสนับสนุน</label>
                <input type="text" name="support" class="form-control" placeholder="" value="{{ @$disaster->support }}">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">หมายเหตุ</label>
                <input type="text" name="remark" class="form-control" placeholder="" value="{{ @$disaster->remark }}">
            </div>
            <button type="submit" class="btn btn-primary">Save</button>
        </form>
    </div>
</div>

<script>
    var map;
    var markers = [];
    let latitude = "{{ @$disaster->latitude }}";
    let longtitude = "{{ @$disaster->longtitude }}";

    function initMap() {
        var haightAshbury = {lat: 13.75398, lng: 100.50144};

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: haightAshbury,
            mapTypeId: 'terrain'
        });

        // This event listener will call addMarker() when the map is clicked.
        map.addListener('click', function(event) {
            addMarker(event.latLng);
        });

        // Adds a marker at the center of the map.
        //addMarker(haightAshbury);
        if (latitude != '' && longtitude != '') {
            addMarker({
                lat: parseFloat(latitude),
                lng: parseFloat(longtitude)
            });
        }
    }

    // Adds a marker to the map and push to the array.
    function addMarker(location) {
        deleteMarkers();
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
        markers.push(marker);
        var lat_lng = location.toString().replace("(", "");
        lat_lng = lat_lng.replace(")", "");
        var latLng = lat_lng.split(", ");
        jQuery('#latitude').val(latLng[0]);
        jQuery('#longtitude').val(latLng[1]);
    }

    // Sets the map on all markers in the array.
    function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }

    // Removes the markers from the map, but keeps them in the array.
    function clearMarkers() {
        setMapOnAll(null);
    }

    // Shows any markers currently in the array.
    function showMarkers() {
        setMapOnAll(map);
    }

    // Deletes all markers in the array by removing references to them.
    function deleteMarkers() {
        clearMarkers();
        markers = [];
    }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9MzIIuCs1Fc7_zykSwg6C1ZDUaahaYdk&callback=initMap">
</script>
@endsection

@section('script')
<script>
    $(document).ready(function () {
        $('#department').select2({
            // placeholder: 'Select an option'
        });
    });
</script>
@endsection