@extends('master', ['activePage' => 'locacion-editar'])
@section('styles')
    <!-- Select2 -->
  <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
@endsection
@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-12">
                <h1>Editar locacion</h1>
              </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
    <!-- Default box -->
    <div class="row">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header">
                    <h3 class="card-title">Formulario</h3>
                </div>
                <div class="card-body">
                    <form action="{{ url('location/update') }}" method="POST" enctype= multipart/form-data>
                        @csrf
                        <input type="hidden" value="{{ $location->id }}" name="id">

                        <div class="row">
                            <div class="col-lg-6 col-sm-12" >
                                <h4>Infomación general</h4>
                                <div class="form-group">
                                    <label>Nombre de la locación</label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ $location->location }}" placeholder="Ingresa el nombre de la locacion" required>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>Teléfono:</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                        </div>
                                        <input type="text" class="form-control" name="phone" data-inputmask='"mask": "(999) 999-9999"' value="{{ $location->phone }}" data-mask required>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Tipo de locación:</label>
                                    <select id="type_location" required name="type_location" class="form-control  @error('type_location') is-invalid @enderror" required>
                                        <option value="" selected disabled>Selecciona un tipo de locación</option>
                                        @foreach($type_locations as $key => $type)
                                            <option value="{{$type->id}}" {{$location->id_location_type == $type->id ? 'selected' : '' }}>{{$type->type}}</option>
                                        @endforeach
                                    </select>
                                    @error('type_location')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>Cliente</label>
                                    <input type="text" readonly class="form-control" value="{{$location->client}}">
                                </div>
                            </div>
                            
                            <div class="col-lg-6 col-sm-12">
                                <h4>Ubicación</h4>
                        
                                <div id="googleMap" style="width:100%;height:400px;"></div><br>
                                
                                <div class="form-group">
                                    <label>Latitud</label>
                                    <input type="number" name="lat" id="lat" class="form-control @error('lat') is-invalid @enderror" value="{{ $location->lat}}" required readonly >
                                    
                                    @error('coordinates')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>Longitud</label>
                                    <input type="number" name="lng" id="lng" class="form-control @error('lng') is-invalid @enderror" value="{{ $location->lng}}" required readonly>
                                    
                                    @error('lng')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>Ciudad</label>
                                    <input type="text" class="form-control  @error('city') is-invalid @enderror" id="city" name="city" value="{{ $location->city}}" placeholder="Ingrese coordenadas" required readonly>
                                    @error('city')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>Estado</label>
                                    <input type="text" class="form-control  @error('state') is-invalid @enderror" id="state" name="state" value="{{ $location->state}}" placeholder="Ingrese coordenadas" required readonly>
                                    @error('state')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>Direccion</label>
                                    <textarea class="form-control  @error('address') is-invalid @enderror" id="address" name="address" placeholder="Ingrese Direccion" required  cols="30" rows="10">{{ $location->address}}</textarea>
                                    @error('address')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group text-right">
                            <a href="{{ url('/locaciones') }}" class="btn btn-warning text-white">Regresar</a>
                            <button type="submit" class="btn btn-primary">Actualizar</button>
                        </div>
                    </form>
                    
                </div>

            </div>


        </div>
    </div>
        
    <!-- /.card -->
    </section>
@endsection
@section('scripts')
<!-- Select2 -->
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/inputmask/jquery.inputmask.min.js') }}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_dUsGKRq13B62JZ0TiBuk0DAjsnnwuFY&callback=initMap" async defer></script>
    <script>

        $(function () {
        $('.products-select').select2({
          theme: 'bootstrap4'
        })

        $('[data-mask]').inputmask()
      })
    </script>

    <script>
    // Google maps
    function initMap() {
        // Seteamos el marcador
        var markerLatLng = new google.maps.LatLng($('#lat').val(), $('#lng').val());
        var mapOptions = {
            zoom: 13,
            center: markerLatLng
        }

        var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
        var markers = [];

        var marker = new google.maps.Marker({
            position: markerLatLng,
            title: $('#address').val()
        });
        
        // To add the marker to the map, call setMap();
        marker.setMap(map);
        markers.push(marker);

        google.maps.event.addListener(map, 'click', function( event ){
            var lat = event.latLng.lat();
            var lng = event.latLng.lng();
            // Limpiamos
            clearMarkers();
            $('input[name="lat"]').val();
            $('input[name="lng"]').val();
            

            // Creamos
            $('input[name="lat"]').val(lat);
            $('input[name="lng"]').val(lng);
            var markerLatLng = {lat: event.latLng.lat(), lng: event.latLng.lng()};
            
            var marker = new google.maps.Marker({
                position: markerLatLng,
                title:$('input[name="address"]').val()
            });

            // To add the marker to the map, call setMap();
            marker.setMap(map);
            markers.push(marker);

            $.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&key=AIzaSyBNflFpIAWHjXJtfV1uM9XQAvk_cDQSg3o', function( data ) {
                if(data.status == 'OK'){
                    var index = data.results.length - 3

                    $('#state').val(data.results[index].address_components[0].long_name);
                    $('#city').val(data.results[index-1].address_components[0].long_name);

                    $('#address').val(data.results[0].formatted_address);
                } else {
                    alert('Selecciona una dirección válida');
                    clearMarkers();
                    $('input[name="lat"]').val();
                    $('input[name="lng"]').val();
                }

            });
        });

        // Removes the markers from the map, but keeps them in the array.
        function clearMarkers() {
            for (var i = 0; i < markers.length; i++ ) {
               markers[i].setMap(null);
            }
            markers.length = 0;
        }
    }
    </script>
@endsection