@extends('master', ['activePage' => 'contenedor-crear'])
@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <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>Crear 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/save') }}" method="POST" class="create-container">
                        @csrf

                        <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') }}" 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') }}" 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>
                                <div class="form-group">
                                    <label>Selecciona una locación:</label>
                                    <select id="location" required name="id_location" style="width: 100%" class="form-control @error('id_location') is-invalid @enderror">
                                        <option value="" selected disabled>Ingresa el nombre</option>
                                        @foreach($locations as $key => $location)
                                            <option value="{{$location->id}}" {{old('id_location') == $location->id ? 'selected' : '' }}>[{{$location->location}}] {{$location->address}}</option>
                                        @endforeach
                                    </select>
                                    @error('id_location')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-lg-6 col-sm-12">
                                <h4>Estado inicial</h4>
                                <div class="form-group row">
                                    @foreach($parts as $key => $part)
                                        <div class="col-lg-6 col-md-6 col-sm-12">
                                            <label>{{$part->part}}</label>
                                            <select name="part[{{$part->part}}]" id="" class="form-control">
                                                @foreach($conditions as $condition)
                                                    <option value="{{$condition->id}}">{{$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') }}</textarea>
                                        @error('comments')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <hr>

                                <h4>Galería de evidencias</h4>
                                <div class="row">
                                    <div class="dropzone rounded col-12" id="document-dropzone"></div>
                                </div><br> 
                            </div>
                        </div>

                        <div class="form-group text-right">
                            <a href="{{ url('/contenedores') }}" 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')
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('js/jquery-ui.js') }}"></script>
    <script src="{{ asset('js/dropzone.min.js') }}"></script>
    <script>
        

        // 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($('#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();
                }
            });
        });

        // Select de locaciones
        $("#location").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
        });
    </script>
@endsection