@extends('master', ['activePage' => 'movimiento-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>Registrar Movimiento</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 del Movimiento</h3>
                </div>
                <div class="card-body">
                    <form action="{{ url('container/movement-save') }}" method="POST" class="create-movement">
                        @csrf
                        <input type="hidden" name="id_location" id="id_location">

                        <div class="row">
                            <div class="col-lg-6 col-sm-12" >
                                <h4>Infomación general</h4>
                                <div class="form-group">
                                    <label>Selecciona un contenedor:</label>
                                    <select id="id_container" required name="id_container" class="form-control  @error('id_container') is-invalid @enderror">
                                        <option value="" selected disabled>Ingresa el número</option>
                                        @foreach($containers as $key => $container)
                                            <option value="{{$container->id}}" {{old('id_container') == $container->id ? 'selected' : '' }}>{{$container->number.' ('.$container->name.')'}}</option>
                                        @endforeach
                                    </select>
                                    @error('id_container')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>Referencia</label>
                                    <input type="text" class="form-control @error('reference') is-invalid @enderror" name="reference" value="{{ old('reference') }}" placeholder="Ingresa el número de referencia" required>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>Tipo de material</label>
                                    <select name="material" class="form-control @error('material') is-invalid @enderror" required>
                                        @foreach($material as $type)
                                            <option value="{{$type->id}}">{{$type->description}}</option>
                                        @endforeach
                                    </select>
                                    @error('material')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>Selecciona un chofer:</label>
                                    <select id="id_driver" required name="id_driver" class="form-control  @error('id_driver') is-invalid @enderror">
                                        <option value="" selected disabled>Ingresa el nombre</option>
                                        @foreach($drivers as $key => $driver)
                                            <option value="{{$driver->id}}" {{old('id_driver') == $driver->id ? 'selected' : '' }}>{{$driver->employee_number.' ('.$driver->name.' '.$driver->lastname.')'}}</option>
                                        @endforeach
                                    </select>
                                    @error('id_driver')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>Selecciona el tipo de movimiento</label>
                                    <select name="type_movement" id="type-movement" class="form-control" required>
                                        @foreach($movement_types as $type)
                                            <option value="{{$type->id}}">{{$type->movement_type}}</option>
                                        @endforeach
                                    </select>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <h4>Locación</h4>
                                <div class="form-group">
                                    <label>Selecciona un cliente:</label>
                                    <select id="id_client" required name="id_client" class="form-control  @error('id_client') is-invalid @enderror">
                                        <option value="" selected disabled>Ingresa el nombre</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 class="form-group">
                                    <label>Selecciona una locación:</label>
                                    <select id="location" required name="id_location" 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}}]" 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="dz-default dz-message dropzone rounded col-12" id="document-dropzone"></div>
                                </div><br> 
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-6 col-sm-12">
                                <h4>Costo de Reparaciones</h4>
                                <div class="form-group text-left">
                                    <a href="javascript:;" class="btn btn-info repeat-button-repair"><i class="fa fa-plus"></i> Agregar Refacción</a>
                                    <a href="javascript:;" class="btn btn-danger delete-button-repair"><i class="fa fa-minus"></i> Eliminar Refacción</a>
                                </div>
                                <div class="row">
                                    <div class="col-12 repair_types"></div>
                                </div>
                            </div>
                        </div>

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


    <div class="row clone-container" style="display: none;">
        <div class="col-8 repair_type">
            <div class="form-group">
                <label>Refacción</label>
                <select name="repair[]" class="form-control repair" required>
                    <option value="" class="not-this">Selecciona una refacción</option>
                    @foreach($parts_inventory as $inventory)
                        <option value="{{ $inventory->id }}" data-max="{{$inventory->stock}}">{{ $inventory->piece.' ('.$inventory->stock.' Pzs.)' }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-4 repair_qty">
            <div class="form-group">
                <label>Cantidad</label>
                <input type="number" name="repair_qty[]" class="form-control repair-qty" value="0" max="{{$parts_inventory[0]->stock}}" min="1">
                <small>Ingresa un máximo de <span>0</span> Pzs.</small>
            </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>
        $(document).on('change', '.repair', function(){
            max = $(this).find('option:selected').data('max');
            $(this).closest('.row').find('.repair-qty').attr('max', max);
            $(this).closest('.row').find('.repair-qty').siblings('small').find('span').text(max);
        });

        // 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: true,
                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',
                // capture: null,
                capture: 'camera',
                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'){
                        console.log('entró aqui');
                        $('form.create-movement').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) {
                    file.previewElement.remove();
                },

                // Inicializamos Dropzone
                init: function () {
                    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-movement').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); 
                    });
                }
            });


            // Select de contenedors
            $("#id_container").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
            });

            // Select de choferes
            $("#id_driver").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
            });

            // Select de clientes
            $("#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
            });

            // 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
            });

            // Al cambiar a entrada o salida
            $('#type-movement').on('change', function(){
                $('#id_client').prop("disabled", true);
                $('#location').prop("disabled", true);
                let id_type_movement = $(this).find('option:selected').val();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{url('getclientoftype')}}",
                    type: "GET",
                    data: {
                        id_type_movement: id_type_movement
                    },
                    success: function(response){
                        // Cliente
                        $('#id_client').empty();
                        $('#id_client').append('<option value="" selected>Ingresa el nombre</option>');
                        for (var i = 0; i < response.length; i++) {
                            $('#id_client').append('<option value="'+response[i].id+'">'+response[i].client+'</option>');
                        }

                        // Locacion
                        $('#location').empty();
                        $('#location').append('<option value="" selected>Ingresa el nombre</option>');
                        $('#id_client').prop("disabled", false);
                        $('#location').prop("disabled", false);
                    },
                    error: function(response){
                        console.log(response);
                    }
                });
            });


            // Al cambiar el cliente
            $('#id_client').on('change', function(){
                $('#location').prop("disabled", true);
                let id_client = $(this).find('option:selected').val();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{url('getlocationsbyclient')}}",
                    type: "GET",
                    data: {
                        id_client: id_client
                    },
                    success: function(response){
                        
                        $('#location').empty();
                        $('#location').append('<option value="" selected>Ingresa el nombre</option>');
                        for (var i = 0; i < response.length; i++) {
                            $('#location').append('<option value="'+response[i].id+'">['+response[i].location+'] '+response[i].address+'</option>');
                        }
                        $('#location').prop("disabled", false);
                    },
                    error: function(response){
                        console.log(response);
                    }
                });
            });

            // Repetir refacción
            $('.repeat-button-repair').on('click', function(){
                let $clone = $('.clone-container').clone();
                $clone.css('display', 'flex').removeClass('clone-container');

                $('.repair_types').append($clone);
            });

            // Repetir refacción
            $('.delete-button-repair').on('click', function(){
                $('.repair_types .row').last().remove();
            });
        });
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_dUsGKRq13B62JZ0TiBuk0DAjsnnwuFY" async defer></script>
@endsection