@extends('layouts.app', ['activePage' => 'productos', 'menuParent' => 'consultas', 'titlePage' => __('Productos/Servicios')])

@section('content')
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-primary card-header-icon">
            <div class="card-icon ">
              <i class="material-icons">category</i>
            </div>
            <h4 class="card-title">Productos/Servicios</h4>

          </div>
          <div class="card-body">
            <div class="row ">

              <div class="col-md-3" id="content_cliente">
                <div class="form-group">
                  <label>Estatus:</label>
                  <select id="cliente" class="selectpicker" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                    <option value="x">Todos</option>
                    <option value="1">Activo</option>
                    <option value="0">Inactivo</option>
                  </select>
                </div>
              </div>
              <div class="col-md-7"></div>
                <div class="col-2" align="right">
                <!-- <button class="btn btn-primary btn-sm" onclick="getXmlsScrap();">Descargar</button> -->
                <!-- <button class="btn btn-primary btn-sm" onclick="loadGrid();">Consultar</button> -->
                
                <button class="btn btn-primary btn-sm" onclick="loadGrid();">Buscar</button>
                <button class="btn btn-success btn-sm" onclick="newCliente();">Nuevo</button>
              </div>
     
            </div>

            <hr>

            <!-- <div class="row"> -->
            <!-- <div class="col-4"> -->
            <!-- <button id="validarCon" class="btn btn-primary btn-sm" onclick="validateConceptos();">Validar conceptos</button> -->
            <!-- <button class="btn btn-primary btn-sm" id="btnDeposito" style="display:none;" onclick="generarDeposito();">Generar pago</button> -->
            <!-- </div> -->
            <!-- <div class="col-4 text-center mt-3" style="display: none;" id="contentConsulText">
                <h4 class="text-primary font-weight-bold" id="consultaText">
                  </h5>
              </div> -->
            <!-- <div class="col-4"></div> -->
            <!-- </div> -->
            <div class="material-datatables">
              <table class="table table-striped table-bordered table-sm table-hover display nowrap" cellspacing="0" width="100%" style="width:100%" id="gridFacturas">
                <thead>
                  <tr>
                    <th class="text-center" colspan="21" id="consultaText"></th>
                  </tr>
                  <tr>

                    <th width="5%">ID</th>
                    <th width="10%">Código</th>
                    <th>Descripción</th>
                    <th align="center">Clave Producto SAT</th>
                    <th align="center">Clave Unidad SAT</th>
                    <th>Subtotal</th>
                    
                    <th>Estatus</th>
                    <th width="10%">Acciones</th>

                  </tr>

                </thead>

                <tbody>

                </tbody>
                <tfoot>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tfoot>
              </table>
            </div>

          </div>
          <!-- end content-->
        </div>
        <!--  end card  -->
      </div>
      <!-- end col-md-12 -->
    </div>
    <!-- end row -->
  </div>
</div>
    

<div class="modal fade" id="modalNewCliente">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Nuevo Producto</h4>
        <input type="hidden" id="idproducto">
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-3">
            <div class="form-group filled">
              <label class="">Código: <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="codigo" required>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group filled">
              <label class="">Descripción: <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="descripcion" required>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3">
            <div class="form-group filled" style="padding-top: 2%">
              <label class="">Clave SAT: <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="clavesat" maxlength="8" required>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group filled">
              <label class="">Clave Unidad SAT: <span class="text-danger">*</span></label>
              <select id="unidadsat" class="selectpicker" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                @foreach ($data['unidad'] as $key => $i)
                  <option value="{{ $i->id }}">{{ $i->clave_unidad_sat }} - {{ $i->descripcion }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group filled"> 
            <button class="btn btn-primary btn-sm" onclick="nuevaUnidad()">+</button>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group filled">
              <label class="">Tipo de IVA: <span class="text-danger">*</span></label>
              <select id="tipoIva" class="selectpicker" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true"> 
                @foreach ($data['impuestos'] as $key => $i)
                  @if ($i->factor =='Exento')
                    <option value="{{ $i->id }}">Exento</option>
                  @else
                    <option value="{{ $i->id }}">{{ $i->descripcion }} {{ number_format($i->tasa,2) }}%</option>
                  @endif
                @endforeach
              </select>
            </div>
          </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <label class="p-0 m-0" for="totalHotel">Subtotal:</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text pl-0">
                            <i class="fa fa-dollar"></i>
                        </span>
                    </div>
                    <input type="number" class="form-control" id="subtotal" placeholder="0.00">
                </div>
            </div>
                        <div class="col-md-4" style="display: {{ $disp }};padding-top: 2%">
              <div class="form-group filled">
                <label class="">Predial: </label>
                <input type="text" class="form-control" id="predial">
              </div>
            </div>
        </div>  


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




<div class="modal fade" id="modalNuevaUnidad">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Nueva Unidad</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-12">
            <label>Unidad SAT:<span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="clave_unidadsat" maxlength="4">
          </div>
        </div>
         <div class="row">
          <div class="col-12">
            <label>Descripción:<span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="descUsat">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" onclick="guardaUnidadSAT();">Guardar</button>
      </div>
    </div>
  </div>
</div>
<style>
  td {
    font-size: .8em !important;
  }

  table>thead>tr>th {
    font-size: .95em !important;
  }

  /* #gridFacturas>tbody>tr {
    cursor: pointer;
  } */

  #gridFacturas {
    display: block;
    /* overflow-x: auto; */
    /* overflow-y: auto; */
    /* height: 500px; */
    overflow: scroll;
  }

  #gridFacturasPendientes {
    display: block;
    height: 400px;
    overflow: scroll;
  }

  #tableDeposito {
    display: block;
    height: 200px;
    overflow: scroll;
  }

  /* table>thead>tr>th {
    font-size: .8em !important;
  }

  table>tbody>tr>td {
    font-size: .8em !important;
  } */
  #swal2-content{
    color: red;
  }
</style>

@endsection 

@push('js')
<script>
$(document).ready(function() {
    loadGrid();
});
function guardaProd(){
  
  var codigo = $('#codigo').val()
  var desc = $('#descripcion').val()
  var clavesat = $('#clavesat').val()
  var unidadsat = $('#unidadsat').val()
  var subtotal = $('#subtotal').val()
  var id = $('#idproducto').val()
  var tipoIva = $('#tipoIva').val()
  var predial = $('#predial').val()

  if(codigo==''){
     $('#codigo').focus();
      Swal.fire({
          title: 'El Código esta vacio.',
          type: 'warning',
          timer: 2000
      })
     return false;
  }
  if(desc==''){
     $('#descripcion').focus();
      Swal.fire({
          title: 'La Descripción esta vacia.',
          type: 'warning',
          timer: 2000
      })
     return false;
  }
  if(clavesat==''){
     $('#clavesat').focus();
      Swal.fire({
          title: 'La clave producto SAT esta vacia.',
          type: 'warning',
          timer: 2000
      })
     return false;
  }
  if(clavesat.length < 8){
    Swal.fire({
          title: 'La clave producto SAT debe contenter 8 dígitos.',
          type: 'warning',
          timer: 2000
      })
     return false;
  }


  $.ajax({
    url: '{{ url('catalogo/guarda_producto') }}',
    type: 'POST',
    dataType: 'json',
    data: {
      id: id,
      codigo: codigo,
      desc: desc,
      clavesat: clavesat,
      unidadsat: unidadsat,
      subtotal: subtotal,
      tipoIva: tipoIva,
      predial: predial,
    },
  })
  .done(function(resp) {
    console.log("success");
    if(resp.estatus > 0){
      loadGrid();
        Swal.fire({
                title: 'Producto guardado con éxito.',
                type: 'success',
                timer: 2000
            })
      $('#modalNewCliente').modal('hide')
      return false;
    }else{
      Swal.fire({
                title: resp.msj,
                type: 'warning',
                timer: 2000
            })
      //$('#modalNewCliente').modal('hide')
      return false;
    }
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    console.log("complete");
  });
  

}
function loadGrid(){
    //var cliente = $('#cliente').val();
 

    $('#gridFacturas').dataTable().fnDestroy();
    var table = $('#gridFacturas').DataTable({
      lengthMenu: [10, 20, 50, 100, 200, 500],
      // processing: true,
      dom: 'Blfrtip',
      // scrollX: true,
      language: {
        url: "{{asset('material/datatable_sp.json')}}"
      },
      ajax: {
        url: "{{url('catalogo/get_productos')}}",
        type: "POST",
        data: {
          cliente: '',

        },
      },
      columns: [{
          data: "id"
        },
        {
          data: "codigo"
        },
        {
          data: "descripcion"
        },
        {
          data: "clave_sat"
        },
         {
          data: "clave_sat",render: function( data, type, row){
            return row.unidad.clave_unidad_sat
          }
        },
        {
          data: "subtotal",render: function( data, type, row){
              return new Intl.NumberFormat('en-US', {
                            style: 'currency',
                            currency: 'USD'
                        }).format(row.subtotal)
          }
        },

        {
          data: "estatus",render: function ( data, type, row ) {
               if(row.estatus=='1'){
                  return '<div align="center"><span class="badge badge-success">Activo</span></div>'
               }else{
                  return '<div align="center"><span class="badge badge-danger">Inactivo</span></div>'
               }
            }
        },
        {
          data: "estatus",render: function ( data, type, row ) {
               if(row.estatus=='1'){
                  return '<div align="center"><button class="btn btn-secondary btn-xsm mr-1" onclick="edita('+row.id+')"><i class="material-icons">edit</i></button><button class="btn btn-secondary btn-xsm" onclick="desactivar('+row.id+');"><i class="fa fa-times" aria-hidden="true"></i></button></div>'
               }else{
                  return '<div align="center"><span class="badge badge-danger">Inactivo</span></div>'
               }
            }
        },

      ],
      order: [
        [0, "desc"]
      ],
      buttons: [{
          extend: 'excelHtml5',
          text: 'EXCEL',
          titleAttr: 'Excel',
        },
        {
          extend: 'csvHtml5',
          text: 'CSV',
          titleAttr: 'CSV',
        },
        {
          extend: 'pdfHtml5',
          text: 'PDF',
          titleAttr: 'PDF',
        },
        {
          extend: 'copyHtml5',
          text: 'COPIAR',
          titleAttr: 'Copiar',
        },

      ]
    });
} 
function newCliente(){
    $('#idproducto').val('');
    $('#descripcion').val('');
    $('#codigo').val('');
    $('#subtotal').val('');
    $('#clavesat').val('');
    $('.impuescheck').prop( "checked", false )

  $('#modalNewCliente').modal('show')
}
function nuevaUnidad(){
  $('#modalNuevaUnidad').modal()
}
function guardaUnidadSAT(){

  var  desc = $('#descUsat').val()
  var  unidad = $('#clave_unidadsat').val()
  if(desc=='' || unidad==''){
      Swal.fire({
          title: 'Existen campos vacios.',
          type: 'warning',
          timer: 2000
      })
     return false;
  }
  $.ajax({
    url: '{{ url('catalogo/guarda_unidad_sat') }}',
    type: 'POST',
    dataType: 'json',
    data: {
      desc: desc,
      unidad: unidad,
    },
  })
  .done(function(resp) {
    console.log(resp);
    if(resp.estatus > 0){
       Swal.fire({
                title: 'Guardado Correctamente.',
                type: 'success',
                timer: 2000
            })
        option = '<option value="'+resp.estatus+'">'+unidad+' - '+desc+'</option>'
        $('#unidadsat').append(option)
        $('#unidadsat').val(resp.estatus)
        $('#unidadsat').selectpicker("refresh");
        $('#modalNuevaUnidad').modal('hide')
        return false
    }else{
            Swal.fire({
                title: 'Ya existe una unidad con ese codigo.',
                type: 'warning',
                timer: 2000
            })
       return false;
    }
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    console.log("complete");
  });
  
}
function edita(id){
  $.ajax({
    url: '{{ url('catalogo/get_producto') }}',
    type: 'POST',
    dataType: 'json',
    data: {id: id},
  })
  .done(function(resp) {
    console.log("success");
    $('#idproducto').val(resp.info.id)
    $('#codigo').val(resp.info.codigo)
    $('#descripcion').val(resp.info.descripcion)
    $('#clavesat').val(resp.info.clave_sat)
    $('#unidadsat').val(resp.info.id_unidad)
    $('#subtotal').val(resp.info.subtotal)
    $('#tipoIva').val(resp.impuestos)
    $('#predial').val(resp.info.predial)
    $('.selectpicker').selectpicker("refresh");
    $('#modalNewCliente').modal('show')
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    console.log("complete");
  });
  
}
function desactivar(id){
  Swal.fire({
    title: "Deseas desactivar el producto/servicio?",
     showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: "Sí",
  cancelButtonText: "No",
  denyButtonText: `No`
  }).then((result) => {

    /* Read more about isConfirmed, isDenied below */
    if (result.value) {
        $.ajax({
          url: '{{ url('catalogo/desactivar_producto') }}',
          type: 'POST',
          dataType: 'json',
          data: {id: id},
        })
        .done(function(resp) {
          console.log("success");
          if(resp.estatus > 0){
            loadGrid();
            Swal.fire({
                title: 'Desactivado Correctamente.',
                type: 'success',
                timer: 2000
            })
          }
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
        
    } else if (result.isDenied) {
      
    }
  });
}
</script>
@endpush