@extends('layouts.app', ['activePage' => 'clientes', 'titlePage' => __('Matenimiento a Clientes')])

@section('content')

<style>
  #gridClientes th {
    font-size: 12px;
  }
</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">Clientes</h4>
                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
              </div>
              <div class="col-8" align="right">
                <a href="{{ url('catalogo/clientes/altacliente') }}" class="btn btn-primary"><i class="fa fa-user-plus" aria-hidden="true"></i>Nuevo cliente</a>
                <button type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target="#md_importar" style="display: none;">
                  <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                  Importar
                </button>
              </div>
            </div>
            <div class="row ">
              <table class="table table-bordered table-hover" id="gridClientes">
                <thead>
                  <th class="text-white text-xxs font-weight-bolder opacity-7" width="12%">ID</th>
                  <th class="text-white text-xxs font-weight-bolder opacity-7">Cuenta</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">RFC</th>
                  <th class="text-white text-xxs font-weight-bolder opacity-7" width="5%">Estatus</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>

<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    loadGrid();
  });

  function loadGrid() {

    //$('#').DataTable();
    $('#gridClientes').dataTable().fnDestroy();
    $('#gridClientes').DataTable({
      lengthMenu: [10, 15, 20, 50, 100],
      dom: 'Bfrtip',
      processing: true,
      responsive: true,
      scrollY: '50vh',
      scrollCollapse: true,
      ajax: {
        url: "{{url('catalogo/clientes/get_clientes')}}",
        type: "POST",
      },
      columns: [{
          data: "Id"
        },
        {
          data: "Cuenta"
        },
        {
          data: "Nombre"
        },
        {
          data: "RFC"
        },

        {
          data: "estatus"
        },
        {
          data: "acciones"
        },

      ],
      order: [
        [0, "asc"]
      ],
      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'
        }
      ]
    });

  }

  function desactivar(estatus, id) {
    if (estatus == 0) {
      txt = '¿Estas seguro de descativar el cliente?'
      txt2 = '¡Se desactivo el cliente correctamente!'
    }
    if (estatus == 1) {
      txt = '¿Estas seguro activar de a el cliente?'
      txt2 = '¡Se activo el cliente correctamente!'
    }

    var r = confirm(txt);
    if (r == true) {
      //$('#cargandoModal').modal()
      $.ajax({
          url: "{{url('catalogo/clientes/update_estatus')}}",
          type: 'POST',
          dataType: 'json',
          data: {
            estatus: estatus,
            id: id,
          }
        })
        .done(function(resp) {
          console.log("success");
          if (resp.estatus > 0) {
            //$('#cargandoModal').modal('hide')
            Swal.fire({
              type: 'success',
              title: txt2,
              showConfirmButton: false,
              timer: 2500
            });
            loadGrid();
          }
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });

    } else {
      return false;
    }
  }
</script>
@endsection