@extends('layouts.app')

@section('custom-styles')
  <!-- Select2 -->
  <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="/css/tva-select2.css">
  <!-- dropzonejs -->
  <link rel="stylesheet" href="/plugins/dropzone/min/dropzone.min.css">  
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-file-signature fa-xs"></i> {{ __('Garantías') }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item">Garantías</li>
        <li class="breadcrumb-item active">Nueva Garantía</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">

    <!-- form start -->
    <form id="editForm" class="form-horizontal" action="{{ route('garantias.store') }}" method="POST">
        @csrf
        <div class="container-fluid">

            <div class="row">            

                    <div class="col-md-6">
                        
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Datos de la Garantía</h3>
                            </div>
                            <!-- /.card-header -->
                                            
                            <div class="card-body">

                                <div class="form-group row">
                                    <label for="tipo_id" class="col-sm-2 col-form-label">Tipo</label>
                                    <div class="col-sm-9">
                                        <select name="tipo_id" id="tipo_id" class="form-control" required>
                                            <option value="0" selected>Seleccione el tipo</option>
                                            @foreach($tipos as $id=>$descripcion )
                                                <option value="{{ $id }}" @selected(old("tipo_id") == $id) >{{ $descripcion }}</option>
                                            @endforeach
                                        </select>
                                        <span id="tipo_id-error" class="error invalid-feedback"></span>
                                    </div>
                                    <div class="col-sm-1">
                                        <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-tipo-add" title="Agregar nuevo tipo de garantía" style="cursor:pointer;">
                                            <i class="fas fa-plus-square"></i>
                                        </a>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="inquilino_id" class="col-sm-2 col-form-label">Inquilino</label>
                                    <div class="col-sm-10">
                                        <select class="select2bs4" data-placeholder="Seleccione el Inquilino" name="inquilino_id" id="inquilino_id">
                                            <option value="0" selected></option>
                                            @foreach($inquilinos as $inquilino )
                                                <option value="{{ $inquilino->id }}">{{ $inquilino->apellidos }}, {{ $inquilino->nombres }}</option>
                                            @endforeach
                                        </select>                            
                                        <span id="inquilino_id-error" class="error invalid-feedback"></span>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="fecha_vencimiento" class="col-sm-2 col-form-label">Fecha Venc.</label>
                                    <div class="col-sm-10">
                                        <div class="input-group date" id="fecha_vencimiento" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input" data-target="#fecha_vencimiento" name="fecha_vencimiento" id="fecha_vencimiento_campo">
                                            <div class="input-group-append" data-target="#fecha_vencimiento" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>                            
                                        <span id="fecha_vencimiento-error" class="error invalid-feedback"></span>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="nota" class="col-sm-2 col-form-label">Nota</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="nota" class="form-control @error('nota') is-invalid @enderror" id="nota" placeholder="Nota" value="{{ old('nota') }}">
                                        <span id="nota-error" class="error invalid-feedback"></span>
                                        @error('nota')
                                            <span class="error invalid-feedback is-invalid" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="form-group row">
                                    <label for="estado_id" class="col-sm-2 col-form-label">Estado</label>
                                    <div class="col-sm-10">
                                    <select name="estado_id" id="estado_id" class="form-control" required>                              
                                        @foreach(App\Enums\GarantiaEstadoEnum::cases() as $estado)
                                        <option value="{{ $estado->value }}"  {{ (old("estado_id") == $estado->value ? "selected":"") }}>
                                            {{ $estado->label() }}
                                        </option>
                                        @endforeach
                                    </select>                            
                                    <span id="estado_id-error" class="error invalid-feedback"></span>
                                    </div>
                                </div>

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

                            <div class="card-footer text-right">
                                
                            </div>
                            <!-- /.card-footer -->
                        
                        </div>
                        <!-- /.card -->

                    </div>
                    <!-- /.col -->

                    <div class="col-md-6">
                        <div class="card card-warning">
                            <div class="card-header">
                                <h3 class="card-title">Archivos de la Garantía</h3>
                            </div>
                            <!-- /.card-header -->
                                            
                            <div class="card-body">

                                <div class="files">
                                    
                                    @isset($garantia)

                                        <table class="table table-hover text-nowrap">
                                            <thead>
                                            <tr>                                            
                                                <th>Descripción</th>
                                                <th>Nombre</th>
                                                <th class="text-center">Acciones</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                @if (empty($garantia->archivos) || count($garantia->archivos) == 0)
                                                    <tr>
                                                        <td colspan="3" class="text-center">No existen archivos registrados.</td>
                                                    </tr>
                                                @endif
                                                @foreach($garantia->archivos as $archivo)
                                                <tr>
                                                    <td class="align-middle">{{ $archivo->descripcion }}</td>
                                                    <td class="align-middle">{{ $archivo->nombre }}</td>
                                                    <td class="text-center align-middle">                                                
                                                    <a class="btn btn-danger btn-sm delete-button" data-toggle="modal" data-target="#modal-servicio-delete" data-form-action="{{ route('garantia-archivos.destroy', $archivo->id) }}" title="Eliminar Archivo">
                                                        <i class="fas fa-trash-alt"></i> Borrar
                                                    </a>   
                                                    </td>
                                                </tr>                          
                                                @endforeach
                                            </tbody>
                                        </table>

                                    @endisset                                    
                                    
                                </div>
                                <!-- /.files -->

                                <div class="dropzone" id="document-dropzone">
                                    
                                </div>
                                <!-- /.drop-zone -->
                            </div>
                            <!-- /.card-body -->

                            <div class="card-footer text-right">
                            </div>
                            <!-- /.card-footer -->

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

                    </div>
                    <!-- /.col -->
                
            </div>
            <!-- /.row -->

            <div class="row">
                <a href="{{ route('garantias.index') }}" class="btn btn-default">Cancelar</a> &nbsp;
                                <button type="submit" class="btn btn-primary">Guardar</button>
            </div>

        </div>
        <!-- /.container-fluid -->

    </form>

  </section>
  <!-- /.content -->

  <div class="modal fade" id="modal-tipo-add" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <form id="tipo-add-form" action="" method="POST">
          @csrf
          @method('POST')

          <div class="overlay">
            <i class="fas fa-2x fa-sync fa-spin"></i>
          </div>
          <div class="modal-header">
            <h4 class="modal-title">Registrar nuevo Tipo de garantía</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body p-0">
                    <div class="form-group row">
                      <label for="tipo_descripcion" class="col-sm-2 col-form-label">Descripción</label>
                      <div class="col-sm-10">
                        <input type="text" name="tipo_descripcion" class="form-control" id="tipo_descripcion" placeholder="Descripción del tipo de garantía">
                        <span id="tipo_descripcion-error" class="error invalid-feedback"></span>
                      </div>
                    </div>
                    <input type="hidden" name="tipo_estado_id" id="tipo_estado_id" value="1">
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="submit" id="tipo-submit" class="btn btn-primary">Crear</button>
          </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

@endsection

@section('custom-scripts')
    <!-- jquery-validation -->
    <script src="/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="/plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- Select2 -->
    <script src="/plugins/select2/js/select2.full.min.js"></script>
    <!-- dropzonejs -->
    <script src="/plugins/dropzone/min/dropzone.min.js"></script>

  <script>
    // DropzoneJS Demo Code Start
    var uploadedDocumentMap = {}
    
    Dropzone.options.documentDropzone = {
        url: '{{ route('garantias.store') }}',
        // maxFilesize: 2, // MB
        addRemoveLinks: true,        
        autoProcessQueue: false, // Make sure the files aren't queued until manually added
        uploadMultiple: true,
        // acceptedFiles: 'image/*,application/pdf',
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function (file, response) {
            $('form').append('<input type="hidden" name="documento[]" value="' + response.name + '">')
            uploadedDocumentMap[file.name] = response.name
            window.location = '{{ route('garantias.index') }}'
        },
        removedfile: function (file) {
            file.previewElement.remove()
            var name = ''
            if (typeof file.file_name !== 'undefined') {
                name = file.file_name
            } else {
                name = uploadedDocumentMap[file.name]
            }
            $('form').find('input[name="documento[]"][value="' + name + '"]').remove()
        },
        // The setting up of the dropzone
        init: function() {
            var myDropzoneInt = this;

            @if(isset($garantia) && $garantia->archivos)
                var files = {!! json_encode($garantia->archivos) !!}
                for (var i in files) {
                    var file = files[i]
                    this.options.addedfile.call(this, file)
                    file.previewElement.classList.add('dz-complete')
                    $('form').append('<input type="hidden" name="documento[]" value="' + file.file_name + '">')
                }
            @endif

            // First change the button to actually tell Dropzone to process the queue.
            document.querySelector("button[type=submit]").addEventListener("click", function(e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                myDropzoneInt.processQueue();
            });

            // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
            // of the sending event because uploadMultiple is set to true.
            this.on("sendingmultiple", function(file, xhr, formData) {
                // Gets triggered when the form is actually being sent.
                // Hide the success button or the complete form.
                
                formData.append("inquilino_id", $("#inquilino_id").val());
                formData.append("tipo_id", $("#tipo_id").val());
                formData.append("fecha_vencimiento", $("#fecha_vencimiento_campo").val());
                formData.append("nota", $("#nota").val());
                formData.append("estado_id", $("#estado_id").val());

                console.log(formData);

                console.log("sendingmultiple");
            });
            this.on("successmultiple", function(files, response) {
                // Gets triggered when the files have successfully been sent.
                // Redirect user or notify of success.
                console.log("successmultiple");
            });
            this.on("errormultiple", function(files, response) {
                // Gets triggered when there was an error sending the files.
                // Maybe show form again, and notify user of error
                console.log("errormultiple");
            });
        }
    }

$(function () {
    //Initialize Select2 Elements
    $('.select2').select2();

    //Initialize Select2 Elements
    $('.select2bs4').select2({
    theme: 'bootstrap4'
    });

    //Date picker
    $('#fecha_vencimiento').datetimepicker({
        format: 'DD/MM/YYYY',
        autoclose:true,
        language: 'es',
    });

    /*
    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg !== value;
    }, "Value must not equal arg.");
    
    $('#editForm').validate({
        rules: {
            bloque_id:{
                valueNotEquals: "0"
            },
            numero: {
                required: true,
            },
            nombre: {
                required: true,
            },
            estado_id:{
                    valueNotEquals: "0"
                },
            },
        messages: {
            bloque_id:{
                valueNotEquals: "Por favor indica el Bloque",
            },
            numero: {
                required: "Por favor ingresa el número del Local",
            },
            nombre: {
                required: "Por favor ingresa el nombre del Local",
            },
            bloque_id:{
                valueNotEquals: "Por favor indica el Estado",
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.col-sm-10').append(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            // e.preventDefault();
            // e.stopPropagation();
            console.log("validate >> submitHandler");
            myDropzone.options.url = 'http://localhost:8000/garantias';
            console.log("myDropzone", myDropzone);
            myDropzone.processQueue();
            // form.submit();
        }
    });
    */
   $('#tipo-add-form').validate({
    rules: {
      tipo_descripcion: {
        required: true,
        maxlength: 50,
      },
    },
    messages: {
        tipo_descripcion: {
        required: "Por favor ingresa el identificador del tipo de garnatía",
        maxlength: "El largo máximo es de 50.",
      },
    },
    errorElement: 'span',
    errorPlacement: function (error, element) {
      error.addClass('invalid-feedback');
      element.closest('.col-sm-10').append(error);
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    },
    submitHandler: function(form) {
        createTipo();
    }
  });

  $('#modal-tipo-add').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    $('.overlay').css("display", "none");
  });

  $("#tipo-submit").click(function() {
    // createTipo();
  });

});

function createTipo(){

  var $dropdown = $("#tipo_id");
  var $descripcion = $('#tipo_descripcion').val();
  var $estado_id = $('#tipo_estado_id').val();
  // $dropdown.append($("<option />").val(0).text(''));

  var parameters = {descripcion:$descripcion, estado_id:$estado_id};

  $('.overlay').css("display", "flex");

  $.ajax({
      url:'{{route("garantia-tipos.storeJSON")}}',
      type: 'POST',
      headers:{
        "content-type" : "application/json",
        "X-CSRF-TOKEN": "{{ csrf_token() }}"
      },
      data: JSON.stringify(parameters),
      success: function(response) {
        console.log(response);
        $dropdown.append($("<option />").val(response.id).text(response.descripcion));
        $dropdown.val(response.id);
        $('.overlay').css("display", "none");
        $('#modal-tipo-add').modal('hide');
        $('#tipo_descripcion').val('');
      },
      error: function(error) {
        $('.overlay').css("display", "none");
        console.error('Error fetching data:', error);
      }
  });            

}

  </script>
@endsection