@extends('layouts.app', ['activePage' => 'retenciones', 'menuParent' => 'reportes', 'titlePage' => __('Retenciones')])

@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">list</i>
            </div>
            <h4 class="card-title">Retenciones</h4>

          </div>
          <div class="card-body">
            <input type="hidden" id="nomEmpresa" value="{{ $data['empresa']->nombreorganizacion }}">
            <div class="row">
              <div class="col-md-3">
                <label>Cliente</label>
                <select id="cliente" class="selectpicker" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" onchange="loadGrid()">
                  <option value="0">Todos</option>
                   @foreach ($data['clientes'] as $c)
                    <option value="{{ $c->id }}">{{ $c->razon_social }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-3">
                <label>Agente</label>
                <select id="agente" class="selectpicker" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" onchange="loadGrid()">
                  <option value="0">Todos</option>
                  @foreach ($data['vendedores'] as $c)
                    <option value="{{ $c->id }}">{{ $c->nombre }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-3">
                <label>Fechas</label>
                 <input type="text" class="form-control datetime " id="fechas" placeholder="10/01/2022 - 10/01/2022 " />
              </div>
              <div class="col-md-1">
                <button class="btn btn-primary btn-sm" onclick="loadGrid()">Buscar</button>
              </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%">Fecha</th>
                    <th>Serie</th>
                    <th>Cliente</th>
                    <th>CIF</th>
                    <th>Total</th>
                    <th>Gravado</th>
                    <th>Excento</th>
                    <th>Retenido</th>
                    <th>Usuario</th>
                    <th>Estatus</th>


                  </tr>

                </thead>

                <tbody>

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

          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<div class="modal fade modalEsc" id="modalCancelacionFactura">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Cancelacion Factura</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="idDocHv">
        <div class="row">
          <div class="col-12">

            <label for="motivo_cancelacion" class="ms-0">Motivo Cancelacion</label>
            <select class="form-control form-control-sm" id="motivo_cancelacion" onchange="muestraRel();">
              <option value="01">(01) Comprobantes emitidos con errores con relación</option>
              <option value="02" selected>(02) Comprobantes emitidos con errores sin relación</option>
              <option value="03">(03) No se llevó a cabo la operación</option>
              <option value="04">(04) Operación nominativa relacionada en una factura global</option>
            </select>

          </div>
        </div>
        <div class="row" id="uuidRelaCancelRow" style="display: none;">
          <div class="col-6">
            <label>Serie</label>
            <input type="text" class="form-control form-control-sm" id="serieRelaCancel">
          </div>
          <div class="col-6">
            <label>Folio</label>
            <input type="text" class="form-control form-control-sm" id="folioRelaCancel">
          </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-danger" onclick="cancelaDocumento();">Cancelar</button>
      </div>
    </div>
  </div>
</div>





<style>
 
 
  #gridFacturas {
    display: block;
    overflow: scroll;
  }

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

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

  #swal2-content {
    color: red;
  }
.flag {
  display: inline-block;
  width: 6px;   /* tamaño de la bolita */
  height: 6px;
  border-radius: 50%; /* bolita */
  background-size: cover;
  background-position: center;
}

/* México */
.flag-mx {
  background-image: url('https://flagcdn.com/w40/mx.png');
}

/* USA */
.flag-us {
  background-image: url('https://flagcdn.com/w40/us.png');
}

/* Unión Europea */
.flag-eu {
  background-image: url('https://flagcdn.com/w40/eu.png');
}

</style>

@endsection

@push('js')
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
      $('#fechas').daterangepicker({
        startDate: moment().startOf('hour'),
        endDate: moment().startOf('hour').add(32, 'hour'),
        locale: {
          format: 'YYYY-MM-DD',
          applyLabel: "Aplicar",
          cancelLabel: "Cancelar",
        }
      });
       
    loadGrid();
  });
 


  function loadGrid() {
    var cliente = $('#cliente').val()
    var agente = $('#agente').val()
    var fechas = $('#fechas').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('retenciones/operaciones/get_retenciones')}}",
        type: "POST",
        data: {
          cliente : cliente,
          agente : agente,
          fechas : fechas,
        },
      },
      columns: [{
          data: "created_at",render: function(data, type, row){
            const fecha = new Date(row.created_at);
            const fechaCorta = fecha.toLocaleDateString("es-MX");
            return'<a href="'+row.urlview+'" title="Ver documento">'+fechaCorta+'</a>'
            
          }
        },
        {
          data: "folio",render:function (data, type, row){
               return'<a href="'+row.urlview+'" title="Ver documento">'+row.folio+'</a>'
            },className: 'text-center'
        },
        {
          data: "cliente.razon_social"
        },
          {
          data: "cliente.cif"
        },
        {
          data: "monto_total",render:function (data, type, row){
            return numberFormat(row.monto_total)
          }
        },
        {
          data: "monto_gravado",render:function (data, type, row){
            return numberFormat(row.monto_gravado)
          }
        },
        {
          data: "monto_excento",render:function (data, type, row){
            return numberFormat(row.monto_excento)
          }
        },
           {
          data: "monto_retenido",render:function (data, type, row){
            return numberFormat(row.monto_retenido)
          }
        },
         {
          data: "estatus",className: 'text-center',render:function (data, type, row){
              if(row.vendedor!=null){
                return '<p title="'+row.vendedor.nombre+'">'+row.vendedor.clave+'</p>'
              }else{
                return ''
              }
              
          },visible: false
        },
        {
          data: "acciones",className: 'text-center'
        },

        /*{
          data: "estatus",render: function ( data, type, row ) {
               
                  return '<div align="center"><span class="badge badge-success">Pagado</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 numberFormat(num){
    return new Intl.NumberFormat('en-US', {
                            style: 'currency',
                            currency: 'USD'
                        }).format(num)
  }

    function tipodoc(){
      var tipo = $('#tDocumento').val();
      if(tipo!=1 && tipo!=0){
        $('.inputsFact').show()
      }else{
        $('.inputsFact').hide()
      }
    }
    function verPnr(string){

      $('#areaPnr').val(atob(string))
      $('#modalPnr').modal('show')
    }
    function eliminarFactura(id) {
        $('#idDocHv').val(id)
        $('#modalCancelacionFactura').modal('show')
    }
    function muestraRel() {
        if ($('#motivo_cancelacion').val() == '01') {
        $('#uuidRelaCancelRow').show()
        } else {
        $('#uuidRelaCancelRow').hide()
        }
    }
    function cancelaDocumento() {
        var id = $('#idDocHv').val()
        var motivo = $('#motivo_cancelacion').val()
        var uuidRel = $('#uuidRelaCancel').val()
        var folioRel = $('#folioRelaCancel').val()
        $.ajax({
            url: "{{url('retenciones/operaciones/cancelar_retencion')}}",
            type: "POST",
            data: {
                id: id,
                motivo: motivo,
                uuidRel: uuidRel,
                folioRel: folioRel,
            },
            success: function (data) {
                $('#modalCancelacionFactura').modal('hide')
                if (data.estatus == '3') {
                    Swal.fire({
                        title: data.titulo,
                        type: 'error',
                        timer: 2000
                    })
                }else{
                    Swal.fire({
                        title: data.titulo,
                        type: 'success',
                        timer: 2000
                    })
                loadGrid()
                }
                setTimeout(function() {
                    $('#modalCancelacionFactura').modal('hide')

                }, 2000);
            }
        })
    }
</script>
@endpush