@extends('master', ['activePage' => 'locacion-crear'])
@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>Crear locación</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">Detalles de la locación</h3>
                </div>
                <div class="card-body">
                    <form action="{{ url('location/save') }}" method="POST" enctype= multipart/form-data>
                        @csrf

                        <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="{{ old('name') }}" placeholder="Ingresa el nombre de la locación" 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="{{ old('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}}" {{old('type_location') == $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>Selecciona un cliente ó agregalo:</label>
                                    <select id="id_client" required name="id_client" class="form-control  @error('id_client') is-invalid @enderror">
                                        <option value="" selected disabled>Selecciona un cliente ó agregalo</option>
                                        @foreach($clients as $key => $client)
                                            <option value="{{$client->id}}" {{old('id_client') == $client->id ? 'selected' : '' }}>{{$client->client}}</option>
                                        @endforeach
                                    </select>
                                    @error('id_client')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </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="{{ old('lat') }}" required readonly >
                                    
                                    @error('coordinates')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>Latitud</label>
                                    <input type="number" name="lng" id="lng" class="form-control @error('lng') is-invalid @enderror" value="{{ old('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="{{ old('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="{{ old('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>Dirección</label>
                                    <textarea class="form-control  @error('address') is-invalid @enderror" id="address" name="address" placeholder="Ingrese Direccion" required  cols="30" rows="10">{{ old('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">Guardar</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(){
            $('[data-mask]').inputmask()
            
            $("#id_client").select2({
                theme: 'bootstrap4',
                tags: true,
                createTag: function (params) {
                    var term = $.trim(params.term);
                    var count = 0
                    var existsVar = false;
                    //check if there is any option already
                    if($('#keywords option').length > 0){
                        $('#keywords option').each(function(){
                            if ($(this).text().toUpperCase() == term.toUpperCase()) {
                                existsVar = true
                                return false;
                            }else{
                                existsVar = false
                            }
                        });
                        if(existsVar){
                            return null;
                        }
                        return {
                            id: params.term,
                            text: params.term,
                            newTag: true
                        }
                    }
                    //since select has 0 options, add new without comparing
                    else{
                        return {
                            id: params.term,
                            text: params.term,
                            newTag: true
                        }
                    }
                },
                // maximumInputLength: 20, // only allow terms up to 20 characters long
                closeOnSelect: true
            });


        });
        
        // Google maps
        function initMap() {
            var mapProps = {
                center: new google.maps.LatLng(32.4968847,-117.0178467), // Centramos en tijuana
                zoom:13,
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProps);
            var markers = [];

            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);
                        console.log(data.results[index].address_components[0]);


                        $('#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