@extends('layouts.app', ['activePage' => 'importacion', 'menuParent' => 'importacion', 'titlePage' => __('Proyectos / Importación de proyectos')])

@section('content')

<style>
  #gridProyectos th {
    font-size: 10px;
  }


  table td {
    word-wrap: break-word;
    max-width: 300px;
  }

</style>
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-4">
                <h4 class="card-title">Importación de proyectos</h4>
                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
              </div>
            </div>
            <div class="row">
              <div class="col-12 mt-3 text-right">
                <button class="btn btn-primary " data-toggle="modal" data-target="#importarExcel">Importar</button>
              </div>
            </div>
            <div class="row ">
              <table class="table table-bordered table-hover display nowrap" width="100%" id="gridProyectos">
                <thead>
                  <!-- <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">
                                        </th> -->
                  <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Código</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Nombre</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Lider</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Cliente</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">F.E.P.</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">F.R.E.</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">F.E.E.</th>
                  <!-- <th class="text-white  text-xxs font-weight-bolder opacity-7">Prioridad / Alerta</th> -->
                  <!-- <th class="text-white  text-xxs font-weight-bolder opacity-7">Proyectista</th> -->
                  <!-- <th class="text-white  text-xxs font-weight-bolder opacity-7">Volumetria</th> -->
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Giro</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Estatus</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha de creación</th>
                  <!-- <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th> -->
                </thead>
                <tbody>

                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade draggable" id="importarExcel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog ">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal" id="titleModal">Importar archivo EXCEL</h5>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <i class="material-icons">clear</i>
        </button>
      </div>
      <div class="modal-body">
        <h5 class="text-center card-description" style="font-size: .98rem;">Selecciona tu archivo de proyectos a importar</h5>
        <!-- <h6 style="margin-top: -15px; font-size: .8rem;" class="text-center text-info"> -->
        <a href="{{asset('archivos/PlantillaProyectos.xlsx')}}" class="text-center text-info d-block" download>(Descargar plantilla)</a>
        <!-- <a href="{{asset('archivos/estaticos/guia_importar_ventas.docx')}}" download>(Descargar guia)</a> -->
        <!-- </h6> -->
        <form method="post" enctype="multipart/form-data" id="formImportExcel">
          @csrf
          <div class="row">
            <div class="col-md-6 mt-1">
              <input type="file" name="file" id="file" style="width:130%">
            </div>
            <div class="col-md-6 text-right">
              <button type="submit" id="btn_import" class="btn btn-sm btn-success" disabled="true">Importar</button>
              <button type="submit" id="btn_validate" class="btn btn-sm btn-primary" title="Validar proyectos antes de importar"><i class="material-icons">published_with_changes</i></button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade draggable" id="modalProyectosErr" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Validación de proyectos</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">
          <i class="material-icons">clear</i>
        </button>
      </div>
      <div class="modal-body">
        <h6 class="text-center card-description" style="margin-top: 10px;">Corrige los proyectos e importa tu archivo</h6>
        <div class="material-datatables">
          <table class="table table-bordered" width="100%" style="width:100%">
            <thead>
              <tr>
                <th width="20%">Fila</th>
                <th>Errores</th>
              </tr>
            </thead>
            <tbody id="listProyectosErr">

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<script>
  $(document).ready(function() {
    $('.dropify').dropify();

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $(".numeros").on('input', function(evt) {
      $(this).val($(this).val().replace(/[^0-9]/g, ''));
    });
    $('.correo').keyup(function() {

      //var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
      var validRegex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;

      if (this.value.match(validRegex)) {

        $(this).css('color', 'green');
        $(this).attr('valid', true);
        return true;

      } else {
        $(this).focus();
        $(this).css('color', 'red');
        $(this).attr('valid', false);
        return false;
      }

    })

    /*$('#modallistaInter').on('shown.bs.modal', function () {
        loadlistaInterlocutores()
    })*/
    loadGrid();
  });





  function blockSpecialChar(e) {
    var k;
    document.all ? k = e.keyCode : k = e.which;
    return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
  }



  function loadGrid() {
    //$('#').DataTable();
    $('#gridProyectos').dataTable().fnDestroy();
    $('#gridProyectos td').css('white-space', 'initial');
    var table = $('#gridProyectos').DataTable({
      lengthMenu: [10, 15, 20, 50, 100],
      dom: 'Bflrtip',
      processing: true,
      responsive: true,
      scrollY: '50vh',
      scrollCollapse: true,
      scrollX: true,
      ajax: {
        url: "{{url('proyectos/importacion/get_proyectos')}}",
        type: "POST",
  
      },
      columns: [
        // {
        //     "className": 'details-control',
        //     "orderable": false,
        //     "data": null,
        //     "defaultContent": ''
        // },
        {
          data: "Id",
          visible: false
        },
        {
          data: "CodigoProyecto"
        },
        {
          data: "Descripcion"
        },
        {
          data: "lider_nombre"
        },
        {
          data: "cliente_nombre"
        },
        {
          data: "FechaEnvioAProyectos"
        },
        {
          data: "FechaRequeridaEntrega"
        },
        {
          data: "FechaEstimadaEjecucion"
        },
        // {
        //   data: "prioridad_display"
        // },
        // {
        //   data: "proyectista_nombre"
        // },
        // {
        //   data: "num_versiones"
        // },
        {
          data: "giro_nombre"
        },
        {
          data: "Estatus"
        },
        {
          data: "created_at"
        },

      ],

      order: [
        [0, "desc"]
      ],
      buttons: [{
          extend: 'copyHtml5',
          text: '<i class="fa fa-files-o"></i>',
          titleAttr: 'Copiar'
        },
        {
          extend: 'excelHtml5',
          text: '<i class="fa fa-file-excel-o"></i>',
          titleAttr: 'Excel'
        },
        {
          extend: 'csvHtml5',
          text: '<i class="fa fa-file-text-o"></i>',
          titleAttr: 'CSV'
        },
        {
          extend: 'pdfHtml5',
          text: '<i class="fa fa-file-pdf-o"></i>',
          titleAttr: 'PDF'
        }

      ],
    });
  }


  $("#formImportExcel").on("submit", function(e) {
    e.preventDefault();
    var f = $(this);
    var formData = new FormData(document.getElementById("formImportExcel"));
    formData.append("dato", "valor");
    if ($('#file').val() == '') {
      // showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes seleccionar el archivo a importar.')
      showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes seleccionar el archivo a importar.', 3000)

      return false;
    }

    var tipo = 1;
    if ($(document.activeElement).attr('id') == 'btn_validate')
      tipo = 2;

    formData.append('tipo', tipo);

    $('#loadingLoad').modal('show');
    $.ajax({
        url: "{{ url('proyectos/importacion/importar-proyectos')}}",
        type: "post",
        data: formData,
        cache: false,
        contentType: false,
        processData: false
      })
      .done(function(resp) {
        setTimeout(() => {
          if (resp.result == 1) {

            $('#importarExcel').modal('hide');
            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
            $('#gridProyectos').DataTable().ajax.reload();
          } else if (resp.result == 2) {
            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
            $('#btn_import').prop('disabled', false);
          } else {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje, 3000)

            listProyectosErr(resp.data_err);
          }
        }, 2000);

      })
      .fail(function() {
        setTimeout(() => {
          showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Algo salio mal durante el proceso.', 300)
        }, 2000);
      })
      .always(function() {
        setTimeout(() => {
          $('#loadingLoad').modal('hide');
        }, 2000);
      });
  });

  function listProyectosErr(data) {
    $('#listProyectosErr').empty();
    var html = '';
    $.each(data, function(index, value) {

      html +=
        '<tr>' +
        '<td>' + value['fila'] + '</td>' +
        '<td>';

      $.each(value['message_err'], function(index_ms, value_ms) {
        html += (index_ms + 1) + '. ' + value_ms + '<br>';
      });
      html += '</td>' +
        '</tr>';

    })
    $('#listProyectosErr').append(html);
    $('#modalProyectosErr').modal('show');
  }
</script>
@endsection