@extends('master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('css/dropzone.min.css') }}">
    {{-- Jquery UI --}}
    <link rel="stylesheet" href="{{ asset('css/jquery-ui.css') }}">
    <style>
        .warehouse{
            color: red;
        }
        .service{
            color: green;
        }
        .dropzone{
            border-style: dashed;
        }
    </style>
@endsection
@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-12">
                <h1>Editar Contenedor</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 Contenedor</h3>
                </div>
                <div class="card-body">
                    <form action="{{ url('container/update') }}" method="POST" class="create-container">
                        @csrf
                        <input type="hidden" name="id_container" id="id_container" value="{{$container->id}}">
                        <input type="hidden" name="id_location" id="id_location" value="{{$container->id_location}}">

                        <div class="row">
                            <div class="col-lg-6 col-sm-12" >
                                <h4>Infomación general</h4>
                                <div class="form-group">
                                    <label>Número del contenedor</label>
                                    <input type="text" class="form-control @error('number') is-invalid @enderror" name="number" value="{{ old('number') != null ? old('number') : $container->number }}" placeholder="Ingresa el número de la contenedor" required>
                                    @error('number')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>Nombre del contenedor</label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') != null ? old('name') : $container->name }}" placeholder="Ingresa el nombre de la contenedor" required>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <h4>Locación</h4>
                                <span>Selecciona la locación solo si deseas cambiarla</span>
                                <ul>
                                    <li class="warehouse">Almacén</li>
                                    <li class="service">Servicio</li>
                                </ul>

                                <p><b>Locación actual: </b>{{$container->location->address.' en '.$container->location->type}}</p>
                        
                                <div id="googleMap" style="width:100%;height:400px;"></div><br>
                                <div class="">
                                    <h5>Detalles de la nueva locación</h5>
                                    {{-- <p><b>Latitud:</b> <span id="lat"></span></p>
                                    <p><b>Longitud:</b> <span id="lng"></span></p> --}}
                                    <p><b>Dirección:</b> <span id="address">--</span></p>
                                </div>
                                
                            </div>

                            <div class="col-lg-6 col-sm-12">
                                <h4>Estado inicial</h4>
                                <div class="form-group row">
                                    @foreach($partsArray as $key => $part)
                                        <div class="col-lg-6 col-md-6 col-sm-12">
                                            <label>{{$part['description']}}</label>
                                            <select name="part[{{$part['description']}}]" id="" class="form-control">
                                                @foreach($part['types'] as $condition)
                                                    <option value="{{$condition['id']}}" {{$condition['selected']}}>{{$condition['description']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endforeach

                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <label>Comentarios</label>
                                        <textarea class="form-control  @error('comments') is-invalid @enderror" id="comments" name="comments" cols="20" rows="5">{{ old('comments') != null ? old('comments') : $container->condition_description }}</textarea>
                                        @error('comments')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <hr>

                                <h4>Agregar evidencias</h4>
                                <div class="row">
                                    <div class="dropzone rounded col-12" id="document-dropzone"></div>
                                </div>
                                <br>
                                @if(count($container->images) > 0)
                                <h4>Galería de evidencias</h4>
                                    <div class="row">
                                        @foreach($container->images as $image)
                                            <div class="col-3">
                                                <div class="gallery-img text-center">
                                                    <img src="{{asset('storage/'.$image->image)}}" style="width: 100%; display: block; margin-bottom: 5px;" class="preview-image-{{$image->id}}">
                                                    <a 
                                                        class="btn btn-danger delete-image" 
                                                        href="#"
                                                        data-toggle="modal" 
                                                        data-target="#delete-image"
                                                        data-id="{{ $image->id }}"
                                                    ><i class="fa fa-times-circle"></i> Eliminar</a>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div> <br>
                                @endif
                            </div>
                        </div>

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

            </div>


        </div>
    </div>
        
    <!-- /.card -->

    {{-- Eliminar --}}
    <div class="modal fade" id="delete-image">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 clss="modal-title">Eliminar evidencia</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>¿Seguro que deseas eliminar la evidencia?</p>
                </div>
                <div class="modal-footer">
                    <form action="{{ url('container/file-remove') }}" method="POST">
                        @csrf
                        <input type="hidden" name="id_delete" id="id_delete">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-danger">Aceptar</button>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    </section>
@endsection
@section('scripts')
    <script src="{{ asset('js/jquery-ui.js') }}"></script>
    <script src="{{ asset('js/dropzone.min.js') }}"></script>
    <script src="{{ asset('js/zoomerang.js') }}"></script>
    <script>
        // Google maps
        function initMap() {
            var map;
            var bounds = new google.maps.LatLngBounds();
                                        
            // Display a map on the web page
            map = new google.maps.Map(document.getElementById("googleMap"));
                
            let markers = @json($locations);
                                
            // Add multiple markers to map
            var infoWindow = new google.maps.InfoWindow(), marker, i;

            // Place each marker on the map  
            for( i = 0; i < markers.length; i++ ) {
                let data = markers[i];
                let type = '';
                let icon = '';

                if(data.type == 'Servicio'){
                    type = 'service';
                    icon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png';
                } else {
                    type = 'warehouse';
                    icon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png';
                }
                let lat = parseFloat(data.lat);
                let lng = parseFloat(data.lng);
                let position = new google.maps.LatLng(lat,lng);
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: markers[i][0],
                    icon: {
                        url: icon
                    }
                });
                

                let infoWindowContent = '<div class="info_content '+type+'" data-id_location="'+data.id+'">'+
                    '<h4>' +data.client+ ' <small>(' +data.type+ ')</small></h4>'+
                    '<p><b> Dirección: </b>' +data.address+ '.</p>'+
                '</div>';

                // Add info window to marker    
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        // Seteamos el id de la locacion
                        i = data.id;
                        infoWindow.setContent(infoWindowContent);
                        infoWindow.open(map, marker);
                        // lat = 000000;
                        $.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

                                // $('#lat').text(lat);
                                // $('#lng').text(lng);
                                // $('#state').text(data.results[index].address_components[0].long_name);
                                // $('#city').text(data.results[index-1].address_components[0].long_name);
                                $('#address').text(data.results[0].formatted_address);
                                // https://www.google.com.mx/maps/dir/@32.5121204,-116.9970149,15z

                                $('#id_location').val(i);
                            } else {
                                var Toast = Swal.mixin({
                                    toast: true,
                                    position: 'top-end',
                                    showConfirmButton: false,
                                    timer: 3000,
                                    timerProgressBar: true
                                });
                                Toast.fire({
                                    icon: 'error',
                                    title: 'Dirección invalida',
                                    text: 'Selecciona otra dirección.'
                                });
                                // $('#lat').text('');
                                // $('#lng').text('');
                                // $('#state').val('');
                                // $('#city').val('');
                                $('#address').text('--');
                                $('#id_location').val('');
                            }

                        });
                    }
                })(marker, i));

                // Center the map to fit all markers on the screen
                map.fitBounds(bounds);
            }

            // Set zoom level
            // var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
            //     // this.setZoom(14);
            //     google.maps.event.removeListener(boundsListener);
            // });      
        }

        // Dropzone
        Dropzone.autoDiscover = false;
        $(document).ready(function(){
            let maxFilesize = 3;
            let maxFiles = 10;
            // Dropzone
            var myDropzone = new Dropzone('#document-dropzone', {
                url: "{{ url('container/files-save') }}",
                method: 'post',
                maxFiles: maxFiles,
                maxFilesize: maxFilesize, // MB
                addRemoveLinks: true,
                autoProcessQueue: false,
                dictDefaultMessage: "Arrasta los archivos aquí.",
                dictFallbackMessage: "Tu navegador no soporta el manejador de archivos.",
                dictFileTooBig: "El arvhico es muy pesado. El peso máximo es de "+maxFilesize+"mb.",
                dictInvalidFileType: "No puedes subir este tipo de archivos.",
                dictResponseError: "El servidor regresa el código statusCode.",
                dictCancelUpload: "Cancel subida.",
                dictCancelUploadConfirmation: "¿Deseas cancelar esta carga de archivos?",
                dictRemoveFile: "Remove archivo",
                dictMaxFilesExceeded: "No puedes cargar mas de "+maxFiles+" archivos.",
                parallelUploads: maxFilesize,
                acceptedFiles:'image/jpeg,image/png,image/jpg,application/pdf',
                headers: {
                  'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function (file, response) {
                    console.log('success', file, response);
                    // Si se logro subir el archivo
                    if(typeof response !== 'undefined'){
                        $('form.create-container').append('<input type="hidden" name="container_files[]" value="' + response + '">');
                    }
                },
                error: function(file, response){
                    console.log('error', file, response);
                    (new PNotify({
                        title: '¡Error!',
                        text: 'Ocurrió un error, inténtalo de nuevo',
                        type: 'error',
                        styling: 'bootstrap3',
                        delay: 3000
                    }));
                },

                // Eliminar Archivo
                removedfile: function (file) {
                    // console.log(file, 'removedfile');
                    file.previewElement.remove();
                },

                // Inicializamos Dropzone
                init: function () {
                    console.log('init');
                    var drop = this;
                    
                    // Cuando terminen de subirse todos los archivos
                    this.on("complete", function (file) {
                        if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                            if(file.status != 'error'){
                                $('form.create-container').submit();
                            }
                        }
                    });

                    // Maximo de megas excedido
                    this.on("error", function(file, message) { 
                        (new PNotify({
                            title: '¡Error!',
                            text: message,
                            type: 'error',
                            styling: 'bootstrap3',
                            delay: 3000
                        }));

                        this.removeFile(file); 
                    });
                }
            });

            // On submit
            $('.create-container [type="submit"]').on('click', function(e){
                // Si no se ha seleccionado la sucursal
                if($('#id_location').val() == ''){
                    e.stopPropagation();
                    e.preventDefault();

                    (new PNotify({
                        title: '¡Error!',
                        text: 'Favor de seleccionar una locación',
                        type: 'error',
                        styling: 'bootstrap3',
                        delay: 3000
                    }));
                }

                // Si tenemos mas de una imágen
                if(myDropzone.getQueuedFiles().length > 0){
                    e.stopPropagation();
                    e.preventDefault();
                    myDropzone.processQueue();
                }
            });

            //  Habilitar contenedor
            $('.delete-image').on('click', function(){
                var id = $(this).data('id');
                $('#id_delete').val(id);
            });

            Zoomerang.config({
                maxHeight: 800,
                maxWidth: 800,
                bgColor: '#000',
                bgOpacity: .85,
                onOpen: openCallback,
                onClose: closeCallback,
                onBeforeOpen: beforeOpenCallback,
                onBeforeClose: beforeCloseCallback
            }).listen('[class*="preview-image"]');

            function openCallback (el) {
                console.log('zoomed in on: ')
                console.log(el)
            }

            function closeCallback (el) {
                console.log('zoomed out on: ')
                console.log(el)
            }

            function beforeOpenCallback (el) {
                console.log('on before zoomed in on:')
                console.log(el)
            }

            function beforeCloseCallback (el) {
                console.log('on before zoomed out on:')
                console.log(el)
            }
        });
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_dUsGKRq13B62JZ0TiBuk0DAjsnnwuFY&callback=initMap" async defer></script>
@endsection