@extends('layouts.app', ['activePage' => 'formaspago', 'titlePage' => __('Formas de pago')])

@section('content')

<style>
	    .dataTables_scrollHeadInner {
        width: 100% !important;
    }

    .dataTables_scrollHeadInner table {
        width: 100% !important;
    }
</style>
<div class="content">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-md-8">
        <div class="card">


          <div class="card card-nav-tabs card-plain">
            <div class="card-header card-header-primary">
              <h4 class="card-title ">Atributos SAT</h4>
              <!--<p class="card-category"> Here is a subtitle for this table</p>-->

              <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
              <div class="nav-tabs-navigation">
                <div class="nav-tabs-wrapper">
                  <ul class="nav nav-pills nav-pills-primary" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#home" role="tablist" aria-expanded="true" onclick="loadGrid();">
                        Formas de pago
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#profile" role="tablist" aria-expanded="false" onclick="loadGridUnidadMedida();">
                        Unidades de medida
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <hr>
              <div class="card-body">
                <div class="tab-content tab-space">
                  <div class="tab-pane active" id="home" aria-expanded="true">
                    <div class="row">
                      <div class="col-4" align="left">
                        <h5>Formas de pago</h5>
                      </div>
                      <div class="col-8" align="right">
                        <button type="button" class="btn btn-primary " id="addC">
                          <i class="fa fa-user-plus" aria-hidden="true"></i>
                          Nueva forma de pago
                        </button>
                        <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">
                      <div class="col-12 table-responsive">
                        <table class="table table-bordered table-hover" id="gridFormaspago" width="100%">
                          <thead>
                            <tr>
                              <th class="text-white text-xxs font-weight-bolder opacity-7" width="15%">ID</th>
                              <th class="text-white text-xxs font-weight-bolder opacity-7" width="55%">Nombre</th>
                              <th class="text-white text-xxs font-weight-bolder opacity-7">Clave</th>
                              <th class="text-white text-xxs font-weight-bolder opacity-7" width="15%">Estatus</th>
                              <th class="text-white text-xxs font-weight-bolder opacity-7" width="15%">Acciones</th>
                            </tr>
                          </thead>
                          <tbody>

                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane" id="profile" aria-expanded="true">
                    <div class="row">
                      <div class="col-5" align="left">
                        <h5>Unidades de medida</h5>
                      </div>
                      <div class="col-7" align="right">
                        <button type="button" class="btn btn-primary" id="addU">
                          <i class="fa fa-user-plus" aria-hidden="true"></i>
                          Nueva unidad
                        </button>
                        <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">
                      <div class="col-12 table-responsive">
                        <table class="table table-bordered table-hover" id="gridUnidadmedida" width="100%">
                          <thead>
                            <tr>
                              <th class="text-white text-xxs font-weight-bolder opacity-7" width="15%">ID</th>
                              <th class="text-white text-xxs font-weight-bolder opacity-7" width="40%">Nombre</th>
                              <th class="text-white text-xxs font-weight-bolder opacity-7" width="15%">Clave</th>
                              <th class="text-white text-xxs font-weight-bolder opacity-7" width="15%">Estatus</th>
                              <th class="text-white text-xxs font-weight-bolder opacity-7" width="15%">Acciones</th>
                            </tr>
                          </thead>
                          <tbody>

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

<!-- FORMAS DE PAGO-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Agregar forma de pago</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <input type="hidden" id="idFormaPagoHidden">
      <div class="modal-body">
        <div class="row">
          <div class="col-6 ">
            <div class="input-group input-group-static mb-4">
              <label for="">Nombre</label>
              <input type="text" class="form-control" id="nombre">
            </div>
          </div>

          <div class="col-4">
            <div class="input-group input-group-static mb-4">
              <label for="">Estatus</label>
              <select id="activo" class="form-control">
                <option value="0" selected>InActivo</option>
                <option value="1">Activo</option>
              </select>
            </div>

          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <div class="input-group input-group-static mb-4">
              <label for="">Clave SAT</label>
              <input type="text" class="form-control" id="claveSat">
            </div>

          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" onclick="agregaForma();">Guardar</button>
      </div>
    </div>
  </div>
</div>



<!-- UNIDAD DE MEDIDA-->
<div class="modal fade" id="modalUnidad" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Agregar unidad de medida</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <input type="hidden" id="idUnidadHidden">
      <div class="modal-body">
        <div class="row">
          <div class="col-6 ">
            <div class="input-group input-group-static mb-4">
              <label for="">Nombre</label>
              <input type="text" class="form-control" id="Nombre">
            </div>
          </div>

          <div class="col-4">
            <div class="input-group input-group-static mb-4">
              <label for="">Estatus</label>
              <select id="Activo" class="form-control">
                <option value="0" selected>InActivo</option>
                <option value="1">Activo</option>
              </select>
            </div>

          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <div class="input-group input-group-static mb-4">
              <label for="">Clave SAT</label>
              <input type="text" class="form-control" id="ClaveUnidadSAT">
            </div>

          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" onclick="agregaUnidad();">Guardar</button>
      </div>
    </div>
  </div>
</div>


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

  function loadGrid() {
    //$('#').DataTable();
    $('#gridFormaspago').dataTable().fnDestroy();
    $('#gridFormaspago').DataTable({
      processing: true,
      responsive: true,
      dom: 'Bfrtip',
      scrollY: '37vh',
      scrollCollapse: true,
      //serverSide: true,
      ajax: {
        url: '{{url("catalogo/atributos-sat/get_formaspagos")}}',
        type: "POST",
      },
      columns: [{
          data: "id"
        },

        {
          data: "nombre"
        },
        {
          data: "claveSat"
        },
        {
          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 activarDes(id) {
    //console.log(val,id)
    var act_des = 0

    if ($('#actdes_' + id).prop('checked')) {
      act_des = 1
    } else {
      act_des = 0

    }
    $.ajax({
        url: "{{ url('catalogo/atributos-sat/updateFormapago')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          activo: act_des,
          id: id
        },
      })
      .done(function(resp) {
        console.log("success");
        if (resp.result == 1) {
          Swal.fire({
            type: 'success',
            title: '¡Se ha actualizado con éxito!',
            showConfirmButton: false,
            timer: 2500
          });
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }
  $('#addC').click(function() {
    $('#claveSat').val('');
    $('#nombre').val('');
    $('#idFormaPagoHidden').val('');
    $('#activo').val('0');
    $('#exampleModal').modal('show');
  })

  function agregaForma() {

    var id = $('#idFormaPagoHidden').val();
    var nombre = $('#nombre').val();
    var activo = $('#activo option:selected').val();
    var claveSat = $('#claveSat').val();
    if (nombre == "" || activo == 0 || claveSat == "") {
      Swal.fire({
        type: 'error',
        title: 'Oops...',
        text: 'Debes ingresar el toda la información de la forma de pago',

      })
      return false;
    }
    $.ajax({
        url: "{{ url('catalogo/atributos-sat/guardar_formapago')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
          nombre: nombre,
          activo: activo,
          claveSat: claveSat,

        },
      })
      .done(function(resp) {
        console.log("success");
        if (resp.result == 1) {
          loadGrid();
          $('#exampleModal').modal('hide')

          Swal.fire({
            type: 'success',
            title: '¡Se ha guardado con éxito!',
            showConfirmButton: false,
            timer: 2500
          });

        } else {
          alert('Error al guardar')
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function eliminar(id) {
    Swal.fire({
      title: '¿Está seguro de eliminar la forma de pago con el ID #' + id + '?',
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#43586b',
      cancelButtonColor: '#f54337',
      confirmButtonText: '¡Sí, elimínalo!',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.value) {
        //$('#cargandoModal').modal()
        $.ajax({
            url: "{{url('catalogo/atributos-sat/deleteFormapago')}}",
            type: 'POST',
            dataType: 'json',
            data: {
              id: id,
            }
          })
          .done(function(resp) {
            console.log("success");
            if (resp.result == 1) {
              loadGrid();
              Swal.fire({
                type: 'success',
                title: '¡Se ha eliminado con éxito!',
                showConfirmButton: false,
                timer: 2500
              });
            }
          })
          .fail(function() {
            console.log("error");
          })
          .always(function() {
            console.log("complete");
          });

      }
    })
  }

  function editar(id) {

    $.ajax({
        url: "{{url('catalogo/atributos-sat/get_forma')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
        }
      })
      .done(function(resp) {
        console.log("success");
        if (resp.result == 1) {
          $('#exampleModal').modal('show')
          console.log(resp.data)

          $('#idFormaPagoHidden').val(resp.data['id']);
          $('#nombre').val(resp.data['nombre']);
          $('#claveSat').val(resp.data['claveSat']);
          var activo = resp.data['activo']
          $('#activo option[value=' + activo + ']').prop('selected', true);
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
  }

  //UNIDADES DE MEDIDA
  function loadGridUnidadMedida() {
    $('#gridUnidadmedida').dataTable().fnDestroy();
    $('#gridUnidadmedida').DataTable({
      processing: true,
      responsive: true,
      dom: 'Bfrtip',
      scrollY: '37vh',
      scrollCollapse: true,
      //serverSide: true,
      ajax: {
        url: '{{url("catalogo/atributos-sat/get_unidadmedida")}}',
        type: "POST",
      },
      columns: [{
          data: "IdClaveUnidad"
        },

        {
          data: "Nombre"
        },
        {
          data: "ClaveUnidadSAT"
        },
        {
          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 activarDesU(id) {
    var act_des = 0
    if ($('#actdes' + id).prop('checked')) {
      act_des = 1
    } else {
      act_des = 0
    }
    $.ajax({
        url: "{{ url('catalogo/atributos-sat/updateUnidadmedida')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          activo: act_des,
          id: id
        },
      })
      .done(function(resp) {
        console.log("success");
        if (resp.result == 1) {
          Swal.fire({
            type: 'success',
            title: '¡Se ha actualizado con éxito!',
            showConfirmButton: false,
            timer: 2500
          });
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }
  $('#addU').click(function() {
    $('#ClaveUnidadSAT').val('');
    $('#Nombre').val('');
    $('#idUnidadHidden').val('');
    $('#Activo').val('0');
    $('#modalUnidad').modal('show')

  })
  		
  function agregaUnidad() {

    var IdClaveUnidad = $('#idUnidadHidden').val();
    var Nombre = $('#Nombre').val();
    var Activo = $('#Activo option:selected').val();
    var ClaveUnidadSAT = $('#ClaveUnidadSAT').val();
    if (Nombre == "" || Activo == 0 || ClaveUnidadSAT == "") {
      Swal.fire({
        type: 'error',
        title: 'Oops...',
        text: 'Debes ingresar el toda la información de la unidad',

      })
      return false;
    }
    $.ajax({
        url: "{{ url('catalogo/atributos-sat/guardar_unidadmedida')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          IdClaveUnidad: IdClaveUnidad,
          Nombre: Nombre,
          Activo: Activo,
          ClaveUnidadSAT: ClaveUnidadSAT,

        },
      })
      .done(function(resp) {
        console.log("success");
        if (resp.result == 1) {
          loadGridUnidadMedida();
          $('#modalUnidad').modal('hide')
          Swal.fire({
            type: 'success',
            title: '¡Se ha guardado con éxito!',
            showConfirmButton: false,
            timer: 2500
          });

        } else {
          alert('Error al guardar')
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function eliminarU(id) {
    Swal.fire({
      title: '¿Está seguro de eliminar la unidad de medida con el ID #' + id + '?',
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#43586b',
      cancelButtonColor: '#f54337',
      confirmButtonText: '¡Sí, elimínalo!',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.value) {
        $.ajax({
            url: "{{url('catalogo/atributos-sat/deleteUnidadmedida')}}",
            type: 'POST',
            dataType: 'json',
            data: {
              IdClaveUnidad: id,
            }
          })
          .done(function(resp) {
            console.log("success");
            if (resp.result == 1) {
              loadGridUnidadMedida();
              Swal.fire({
                type: 'success',
                title: '¡Se ha eliminado con éxito!',
                showConfirmButton: false,
                timer: 2500
              });
            }
          })
          .fail(function() {
            console.log("error");
          })
          .always(function() {
            console.log("complete");
          });

      }
    })
  }

  function editarU(id) {

    $.ajax({
        url: "{{url('catalogo/atributos-sat/get_unidad')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          IdClaveUnidad: id,
        }
      })
      .done(function(resp) {
        console.log("success");
        if (resp.result == 1) {
          $('#modalUnidad').modal('show')
          console.log(resp.data)

          $('#idUnidadHidden').val(resp.data['IdClaveUnidad']);
          $('#Nombre').val(resp.data['Nombre']);
          $('#ClaveUnidadSAT').val(resp.data['ClaveUnidadSAT']);
          var Activo = resp.data['Activo']
          $('#Activo option[value=' + Activo + ']').prop('selected', true);
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
  }
</script>
@endsection