@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Add New Location</div>

                <div class="card-body">


                    <form action="{{route('locations.store')}}" method="POST" class="row" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <input type="hidden" name="id" value="{{ $edit ? $locations->id:old('id')}}" />
                        <div class="form-group col-12">
                            <label for="">Project Name</label>
                            <input type="text" name="project_name" id="project_name" class="form-control" value="{{$edit ? $locations->project_name :  old('project_name') }}">
                        </div>
                        <div class="form-group col-12">
                            <label for="">Project Type</label>
                            <select name="project_type" id="project_type" class="form-control" onchange="projectType(this);">
                                @foreach(App\Filters\Common::$project_types as $key=>$type)
                                    <option value="{{$key}}">{{$type}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-12">
                            <label for="">Project Thematic Area</label>
                            <select name="thematic_id" id="thematic_id" class="form-control">
                                @foreach($thematics as $thematic)
                                    <option value="{{$thematic->id}}">{{$thematic->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-12 d-none" id="no_trees">
                            <label for="">No of Trees</label>
                            <input type="number" name="no_trees" class="form-control" value="{{$edit ? $locations->no_trees :  old('no_trees') }}">
                        </div>
                        <div class="form-group col-6 d-none" id="beneficiaries">
                            <label for="">Beneficiaries</label>
                            <input type="text" name="beneficiaries" class="form-control" value="{{$edit ? $locations->beneficiaries :  old('beneficiaries') }}">
                        </div>
                        <div class="form-group col-6 d-none" id="no_beneficiaries">
                            <label for="">No of Beneficiaries</label>
                            <input type="number" name="no_beneficiaries" class="form-control" value="{{$edit ? $locations->no_beneficiaries :  old('no_beneficiaries') }}">
                        </div>
                        <div class="form-group col-12" id="sample_size">
                            <label for="">Sample Size</label>
                            <input type="number" name="sample_size" class="form-control" value="{{$edit ? $locations->sample_size :  old('sample_size') }}">
                        </div>
                        <div class="form-group col-9">
                            <label for="">Money Invested</label>
                            <input type="number" name="money_invested" id="money_invested" class="form-control" value="{{$edit ? $locations->money_invested :  old('money_invested') }}">
                        </div>
                        <div class="form-group col-3">
                            <label for="">Currency</label>
                            <select name="currency" id="currency" class="form-control">
                                @foreach(App\Filters\Common::$currency as $key=>$val)
                                    <option value="{{$key}}">{{$val}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-12">
                        <label for="">Map</label>
                            <div id="map"></div>
                        </div>
                        <div class="form-group col-6">
                            <label for="">Latitude</label>
                            <input type="text" name="latitude" id="latitude" class="form-control" value="{{$edit ? $locations->latitude :  old('latitude') }}">
                        </div>
                        <div class="form-group col-6">
                            <label for="">Longitude</label>
                            <input type="text" name="longitude" id="longitude" class="form-control" value="{{$edit ? $locations->longitude :  old('longitude') }}">
                        </div>
                   
                        <div class="form-group col-12">
                            <label for="">Link</label>
                            <input type="text" name="link" id="link" class="form-control" value="{{$edit ? $locations->link :  old('link') }}">
                        </div>
                        <div class="form-group col-12">
                            <label for="">Description</label>
                            <textarea name="description" id="description" class="form-control" rows="3">{{$edit ? $locations->description :  old('description') }}</textarea>
                        </div>
                        <div class="form-group col-12">
                            <label for="image">Image</label><br>
                            @if($edit)
                            <img src="{{asset('images/projects/'.$locations->image)}}" alt="" class="img-fluid mb-2">
                            <input type="hidden" name="image_name" value="{{$locations->image}}">
                            @endif
                            <input type="file" name="image" id="image">
                        </div>
                        <div class="col-12 fomr-group">
                            <button class="btn btn-primary">Submit</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlwhiUhVEYszv9b8tWy453mwpn4N4io_4&callback=initMap" async defer></script>
    <script>
        var map; //Will contain map object.
        var marker = false; ////Has the user plotted their location marker? 

        //Function called to initialize / create the map.
        //This is called when the page has loaded.
        function initMap() {

            //The center location of our map.lat: 7.873, lng: 80.771
            var centerOfMap = new google.maps.LatLng(7.873, 80.771);

            //Map options.
            var options = {
                center: centerOfMap, //Set center.
                zoom: 7 //The zoom value.
            };

            //Create the map object.
            map = new google.maps.Map(document.getElementById('map'), options);

            //Listen for any clicks on the map.
            google.maps.event.addListener(map, 'click', function(event) {
                //Get the location that the user clicked.
                var clickedLocation = event.latLng;
                //If the marker hasn't been added.
                if (marker === false) {
                    //Create the marker.
                    marker = new google.maps.Marker({
                        position: clickedLocation,
                        map: map,
                        draggable: true //make it draggable
                    });
                    //Listen for drag events!
                    google.maps.event.addListener(marker, 'dragend', function(event) {
                        markerLocation();
                    });
                } else {
                    //Marker has already been added, so just change its location.
                    marker.setPosition(clickedLocation);
                }
                //Get the marker's location.
                markerLocation();
            });
        }

        //This function will get the marker's current location and then add the lat/long
        //values to our textfields so that we can save the location.
        function markerLocation() {
            //Get location.
            var currentLocation = marker.getPosition();
            //Add lat and lng values to a field that we can save.
            document.getElementById('latitude').value = currentLocation.lat(); //latitude
            document.getElementById('longitude').value = currentLocation.lng(); //longitude
        }


        //Load the map when the page has finished loading.
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
@endsection