@extends('layouts.app', ['activePage' => 'listado_cfdis', 'menuParent' => '', 'titlePage' => ''])

@section('content')
@include('includes.tailwind')

<div class="content">
  <div class="container-fluid mt-4">
    <input type="hidden" id="nomEmpresa" value="{{ $data['empresa']->nombreorganizacion }}">

    <div class="row gy-3 mb-3 align-items-stretch">
      <div class="col-lg-8 h-100">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm px-4 pt-4 pb-3">
          <div class="flex items-start justify-between mb-2">
            <div>
              <h6 class="text-lg font-semibold text-slate-900 mb-1">Listado de CFDIs de Retención</h6>
              <p class="text-sm text-slate-500 mb-0">Consulta rápida de comprobantes de retención por cliente, agente y rango de fechas.</p>
            </div>
          </div>

          <section class="bg-gray-25 rounded-lg border border-gray-200 p-3" id="tourRetencionesFiltros">
            <div class="flex items-center gap-3 mb-4">
              <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">&#128269;</span>
              <div>
                <h6 class="text-sm font-semibold text-slate-900 mb-0">PARAMETROS DE BUSQUEDA</h6>
                <p class="text-sm text-slate-700 mb-0">Filtra retenciones por cliente, agente y periodo para actualizar el listado.</p>
              </div>
            </div>

            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
              <div>
                <label class="block text-sm text-slate-700 mb-1">Cliente:</label>
                <select id="cliente" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado" onchange="loadGrid()">
                  <option value="0">Todos</option>
                  @foreach ($data['clientes'] as $c)
                  <option value="{{ $c->id }}">{{ $c->razon_social }}</option>
                  @endforeach
                </select>
              </div>

              <div>
                <label class="block text-sm text-slate-700 mb-1">Agente:</label>
                <select id="agente" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado" onchange="loadGrid()">
                  <option value="0">Todos</option>
                  @foreach ($data['vendedores'] as $c)
                  <option value="{{ $c->id }}">{{ $c->nombre }}</option>
                  @endforeach
                </select>
              </div>

              <div>
                <label class="block text-sm text-slate-700 mb-1">Fechas:</label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" id="fechas" placeholder="2022-01-10 - 2022-01-10" />
              </div>

              <div class="flex items-end">
                <button type="button" class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200 w-full justify-center" onclick="loadGrid()">
                  <i class="material-icons text-sm leading-none">refresh</i>
                  Actualizar listado
                </button>
              </div>
            </div>
          </section>
        </div>
      </div>

      <div class="col-lg-4 h-100">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 h-100" id="tourRetencionesResumen">
          <div class="flex items-center justify-between mb-4">
            <div>
              <h6 class="text-sm font-semibold text-slate-900 mb-0">Resumen</h6>
            </div>
            <span id="retencionesHistoryBadge" class="cfdi-history-badge neutral">Esperando datos</span>
          </div>

          <div class="grid grid-cols-2 gap-3 mb-4">
            <div class="bg-slate-50 rounded-lg p-3 border border-slate-100">
              <p class="text-xs text-slate-600 font-medium mb-1">Documentos</p>
              <p class="text-lg font-bold text-slate-900" id="retencionesTotalDocs">0</p>
            </div>
            <div class="bg-blue-50 rounded-lg p-3 border border-blue-100">
              <p class="text-xs text-blue-700 font-medium mb-1">Monto total</p>
              <p class="text-lg font-bold text-blue-700" id="retencionesMontoTotal">$0.00</p>
            </div>
          </div>

          <div class="grid grid-cols-2 gap-3 mb-4">
            <div class="bg-emerald-50 rounded-lg p-3 border border-emerald-100">
              <p class="text-xs text-emerald-700 font-medium mb-1">Monto gravado</p>
              <p class="text-lg font-bold text-emerald-700" id="retencionesMontoGravado">$0.00</p>
            </div>
            <div class="bg-amber-50 rounded-lg p-3 border border-amber-100">
              <p class="text-xs text-amber-700 font-medium mb-1">Monto exento</p>
              <p class="text-lg font-bold text-amber-700" id="retencionesMontoExento">$0.00</p>
            </div>
            <div class="bg-red-50 rounded-lg p-3 border border-red-100">
              <p class="text-xs text-red-700 font-medium mb-1">Monto retenido</p>
              <p class="text-lg font-bold text-red-700" id="retencionesMontoRetenido">$0.00</p>
              <p class="text-xs text-red-500 mt-1" id="retencionesPctRetenido">0% del total</p>
            </div>

            <div class="bg-slate-50 rounded-lg p-3 border border-slate-100">
              <p class="text-xs text-slate-600 font-medium mb-1">Promedio retenido por documento</p>
              <p class="text-lg font-bold text-slate-900" id="retencionesPromedioRetenido">$0.00</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4">
          <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-2 mb-3">
            <div>
              <h6 class="text-sm font-semibold text-slate-900 mb-1">Listado de Retenciones</h6>
              <p class="text-xs text-slate-500 mb-0">Detalle de montos gravados, exentos y retenidos por documento.</p>
            </div>
            <p class="text-xs font-semibold text-slate-600 bg-slate-50 border border-slate-200 rounded-md px-3 py-1 mb-0">Consulta dinámica</p>
          </div>

          <div class="table-scroll">
            <table class="min-w-full display nowrap table-striped table-bordered " cellspacing="0" width="100%" style="width:100%" id="gridFacturas">
              <thead class="sticky-top bg-gray-50 px-6 py-3 text-[10px] font-semibold text-left text-gray-500 uppercase tracking-wider">
                <tr>
                  <th width="5%" class="px-2 py-2">Fecha</th>
                  <th class="px-2 py-2">Serie</th>
                  <th class="px-2 py-2">Cliente</th>
                  <th class="px-2 py-2">CIF</th>
                  <th class="px-2 py-2">Total</th>
                  <th class="px-2 py-2">Gravado</th>
                  <th class="px-2 py-2">Excento</th>
                  <th class="px-2 py-2">Retenido</th>
                  <th class="px-2 py-2">Estatus</th>
                  <th class="px-2 py-2">Acciones</th>
                </tr>
              </thead>

              <tbody>
              </tbody>
            </table>
          </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 bg-gray-50 border-b border-gray-200 px-6 py-4">
        <h4 class="modal-title text-lg font-semibold text-gray-900">Cancelar factura</h4>
        <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">
          <i class="material-icons">close</i>
        </button>
      </div>
      <div class="modal-body px-6 py-4">
        <input type="hidden" id="idDocHv">
        <div class="mb-2">
          <label for="motivo_cancelacion" class="block text-sm font-medium text-gray-700">Motivo de cancelación:<span class="text-danger">*</span></label>
          <select class="select2 w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" 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 class="row mt-2" id="uuidRelaCancelRow" style="display: none;">
          <div class="col-6">
            <label class="block text-sm text-gray-700">Serie:<span class="text-danger">*</span></label>
            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" id="serieRelaCancel">
          </div>
          <div class="col-6">
            <label class="block text-sm text-gray-700">Folio:<span class="text-danger">*</span></label>
            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" id="folioRelaCancel">
          </div>
        </div>
      </div>
      <div class="modal-footer bg-gray-50 border-t border-gray-200 px-6 pt-4 pb-4 flex justify-end gap-2">
        <button type="button" class="px-4 py-2 bg-red-500 ml-1 text-white rounded-lg font-medium hover:bg-red-600 transition-colors text-sm" onclick="cancelaDocumento();">
          <i class="material-icons text-sm">check_circle</i>
          Cancelar factura
        </button>
      </div>
    </div>
  </div>
</div>





<style>
  .cfdi-history-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #cbd5f5;
    transition: all 0.2s ease-in-out;
  }

  .cfdi-history-badge.neutral {
    background-color: #f8fafc;
    color: #475569;
    border-color: #cbd5f5;
  }

  .cfdi-history-badge.success {
    background-color: #dcfce7;
    color: #166534;
    border-color: #86efac;
  }

  .cfdi-history-badge.warning {
    background-color: #fef9c3;
    color: #854d0e;
    border-color: #fde68a;
  }

  .cfdi-history-badge.danger {
    background-color: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
  }

  .select2-container {
    width: 100% !important;
  }

  .select2-container .select2-selection--single {
    height: 40px !important;
  }

  .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
  }

  #gridFacturas {
    display: block;
    overflow: auto;
  }

  .table-scroll {
    max-height: 560px;
    overflow-y: auto;
  }

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

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

  #swal2-content {
    color: red;
  }


  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_processing,
  .dataTables_wrapper .dataTables_paginate {
    font-size: 10px;
  }

  .dataTables_wrapper .dataTables_length select,
  .dataTables_wrapper .dataTables_filter input {
    font-size: 10px !important;
  }

  table.dataTable thead th,
  table.dataTable thead td {
    font-size: 10px !important;
  }

  table.dataTable tfoot th,
  table.dataTable tfoot td {
    font-size: 11px !important;
  }

  table.dataTable tbody td {
    font-size: 10px !important;
  }


  table.dataTable tbody tr:hover {
    background-color: #f8f9fa;
    cursor: pointer;
  }

  .dataTables_wrapper .dataTables_filter input {
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    border: 1px solid #e2e8f0 !important;
  }

  .dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    border-color: #0A415F !important;
    box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
  }

  .table-scroll {
    max-height: 550px;
    overflow-y: auto;
  }


  .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>
  let $historyBadge;
  let $totalDocs;
  let $montoTotal;
  let $montoGravado;
  let $montoExento;
  let $montoRetenido;
  let $pctRetenido;
  let $promedioRetenido;
  const historyBadgeStates = ['neutral', 'success', 'warning', 'danger'];

  function parseMoney(value) {
    if (value === null || value === undefined || value === '') {
      return 0;
    }
    if (typeof value === 'number') {
      return value;
    }
    var cleaned = String(value).replace(/[^0-9.-]/g, '');
    var parsed = parseFloat(cleaned);
    return Number.isNaN(parsed) ? 0 : parsed;
  }

  function setHistoryBadgeState(statusText, statusClass) {
    if (!$historyBadge || !$historyBadge.length) {
      return;
    }
    var nextClass = statusClass || 'success';
    $historyBadge.removeClass(historyBadgeStates.join(' ')).addClass(nextClass);
    $historyBadge.text(statusText || 'Cargado');
  }

  function updateRetencionesSummary(rows) {
    var registros = Array.isArray(rows) ? rows : [];
    var totalDocs = registros.length;
    var total = 0;
    var gravado = 0;
    var exento = 0;
    var retenido = 0;

    registros.forEach(function(item) {
      total += parseMoney(item.monto_total);
      gravado += parseMoney(item.monto_gravado);
      exento += parseMoney(item.monto_excento);
      retenido += parseMoney(item.monto_retenido);
    });

    var porcentajeRetenido = total > 0 ? ((retenido / total) * 100) : 0;
    var promedio = totalDocs > 0 ? (retenido / totalDocs) : 0;

    if ($totalDocs && $totalDocs.length) {
      $totalDocs.text(totalDocs);
    }
    if ($montoTotal && $montoTotal.length) {
      $montoTotal.text(numberFormat(total));
    }
    if ($montoGravado && $montoGravado.length) {
      $montoGravado.text(numberFormat(gravado));
    }
    if ($montoExento && $montoExento.length) {
      $montoExento.text(numberFormat(exento));
    }
    if ($montoRetenido && $montoRetenido.length) {
      $montoRetenido.text(numberFormat(retenido));
    }
    if ($pctRetenido && $pctRetenido.length) {
      $pctRetenido.text(porcentajeRetenido.toFixed(2) + '% del total');
    }
    if ($promedioRetenido && $promedioRetenido.length) {
      $promedioRetenido.text(numberFormat(promedio));
    }

    if (totalDocs === 0) {
      setHistoryBadgeState('Sin resultados', 'warning');
      return;
    }

    setHistoryBadgeState('Cargado', 'success');
  }

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

    $historyBadge = $('#retencionesHistoryBadge');
    $totalDocs = $('#retencionesTotalDocs');
    $montoTotal = $('#retencionesMontoTotal');
    $montoGravado = $('#retencionesMontoGravado');
    $montoExento = $('#retencionesMontoExento');
    $montoRetenido = $('#retencionesMontoRetenido');
    $pctRetenido = $('#retencionesPctRetenido');
    $promedioRetenido = $('#retencionesPromedioRetenido');

    $('.select2').select2({
      width: '100%',
    });

    $('#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,
        },
        error: function() {
          setHistoryBadgeState('Error', 'danger');
        }
      },
      initComplete: function(settings, json) {
        var rows = (json && Array.isArray(json.data)) ? json.data : [];
        updateRetencionesSummary(rows);
      },
      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: "estatusDes",
          className: 'text-center',
        },
        {
          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',
          className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
          exportOptions: {
            footer: true
          }
        },
        {
          extend: 'pdfHtml5',
          text: 'PDF',
          titleAttr: 'PDF',
          className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
          exportOptions: {
            footer: true
          }
        },
      ],
    });

  }


  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