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

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

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

    <div class="row gy-3 align-items-start">
      <div class="col-md-9 h-100">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm px-4 pt-4 pb-3 h-100">
          <div class="flex flex-wrap items-start justify-between gap-2 mb-3">
            <div>
              <h6 class="text-lg font-semibold text-slate-900 mb-1">Depósito</h6>
              <p class="text-sm text-slate-500 mb-0">Registra depósitos, relaciona facturas pendientes y genera CFDI de pago.</p>
            </div>
          </div>

          <section class="bg-gray-25 rounded-lg border border-gray-200 p-3 mb-3" id="tourDepositoFiltros">
            <div class="flex items-center gap-3 mb-3">
              <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">
                <i class="material-icons text-sm">payments</i>
              </span>
              <div>
                <h6 class="text-sm font-semibold text-slate-900 mb-0">DATOS DEL DEPÓSITO</h6>
                <p class="text-sm text-slate-700 mb-0">Define cliente, forma de pago, fecha y moneda para armar el complemento.</p>
              </div>
            </div>

            <div class="row gx-3 gy-2">
              <div class="col-md-4" id="content_cliente">
                <label class="block text-sm text-slate-700 mb-1">Cliente:<span class="text-danger">*</span></label>
                <select id="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" data-width="100%" data-style="select-with-transition" data-live-search="true">
                  <option value="0">-Selecciona una opción-</option>
                  @foreach ($data['clientes'] as $c)
                  <option value="{{ $c->id }}">{{ $c->razon_social }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-4">
                <label class="block text-sm text-slate-700 mb-1">Forma de pago:<span class="text-danger">*</span></label>
                <select id="fpp" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-width="100%" data-style="select-with-transition" data-live-search="true">
                  <option value="0">-Selecciona una opción-</option>
                  @foreach ($data['formapago'] as $fp)
                  <option value="{{ $fp->idFormapago }}">{{ $fp->claveSat }} - {{ $fp->nombre }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-4">
                <label class="block text-sm text-slate-700 mb-1">Fecha:</label>
                <input type="text" id="fecha" class="datetimepicker 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" value="">
              </div>
            </div>
            <div class="row gx-3 gy-2 mt-2">
              <div class="col-md-4">
                <label class="block text-sm text-slate-700 mb-1">Moneda:<span class="text-danger">*</span></label>
                <select id="moneda" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-width="100%" data-style="select-with-transition" data-live-search="true">
                  @foreach ($data['monedas'] as $u)

                  <option value="{{ $u->id }}" displaymoneda="{{ $u->nombre }}" @if ($u->nombre == 'MXN') selected @endif>{{ $u->nombre }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-4">
                <label class="block text-sm text-slate-700 mb-1">Tipo de cambio:</label>
                <input type="number" step="any" 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="tipo_cambioPago" />
              </div>

              <div class="col-md-4 mt-4">
                <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="verNotasCredito();" id="btnAgregaFact">
                  <i class="material-icons text-sm leading-none">playlist_add</i>
                  Agregar factura
                </button>
              </div>
            </div>
          </section>

          <div class="mb-2">
            <div class="overflow-x-auto rounded-lg border border-gray-200 shadow-sm" style="height: 40vh;overflow: auto;border-bottom: 0px solid gray;">
              <table class="w-full text-sm">
                <thead class="sticky-top" style="font-size: 12px;">
                  <tr class="bg-gradient-to-r from-gray-50 to-gray-100 border-b-2 border-gray-200">
                    <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide" style="width: 10%;">Factura</th>
                    <th class="px-4 py-2 text-center font-semibold text-gray-700 uppercase tracking-wide" style="width: 30%;">UUID</th>
                    <th class="px-4 py-2 text-center font-semibold text-gray-700 uppercase tracking-wide" style="width: 3%;">Moneda</th>
                    <th class="px-4 py-2 text-center font-semibold text-gray-700 uppercase tracking-wide" style="width: 10%;">Monto</th>
                    <th class="px-4 py-2 text-center font-semibold text-gray-700 uppercase tracking-wide" style="width: 10%;">Saldo</th>
                    <th class="px-4 py-2 text-center font-semibold text-gray-700 uppercase tracking-wide" style="width: 15%;">Pago</th>
                    <th class="px-4 py-2 text-center font-semibold text-gray-700 uppercase tracking-wide" style="width: 2%;">Acciones</th>
                  </tr>
                </thead>
                <tbody id="bodyItems"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 self-start md:sticky md:top-5 h-fit z-20">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-3">
          <div class="cardsEstatus" id="estatusNueva">
            <div class="status-card status-primary">
              <p class="status-title">Estatus: Nuevo</p>
              <p class="status-subtitle mb-0">Nuevo</p>
            </div>
          </div>

          <div class="cardsEstatus" id="estatusActivo" style="display:none;">
            <div class="status-card status-success">
              <p class="status-title">Estatus: Activo</p>
              <p class="status-subtitle mb-0">Sin Timbrar</p>
              <p class="status-subtitle idDocumento mb-0"></p>
            </div>
          </div>

          <div class="cardsEstatus" id="estatusTimbrado" style="display:none;">
            <div class="status-card status-success">
              <p class="status-title">Estatus: Timbrado</p>
              <p class="status-subtitle mb-0">Timbrado</p>
              <p class="status-subtitle serieFolioLabel mb-0"></p>
              <p class="status-subtitle uuidLabel mb-0"></p>
            </div>
          </div>

          <div class="cardsEstatus" id="estatusCancelada" style="display:none;">
            <div class="status-card status-danger">
              <p class="status-title mb-0">Estatus: Cancelado</p>
            </div>
          </div>

          <div class="bg-slate-50 border border-slate-200 rounded-lg p-3 mt-3">
            <div class="flex items-center justify-between">
              <p class="text-sm font-semibold text-slate-700 mb-0" id="totalMoneda">Total</p>
              <p class="text-lg font-bold text-slate-900 mb-0" id="totalLabel">$0.00</p>
              <input type="hidden" id="totaltotal">
            </div>
          </div>

          <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mt-2" id="divTotalMonedaExtranjera" style="display: none;">
            <div class="flex items-center justify-between">
              <p class="text-sm font-semibold text-blue-700 mb-0">Total MX</p>
              <p class="text-sm font-bold text-blue-800 mb-0" id="totalLabelMoneda">$0.00</p>
            </div>
          </div>

          <div class="mt-3 border border-slate-200 rounded-lg p-3" id="tourDepositoAcciones">
            <h6 class="text-sm font-semibold text-slate-900 mb-3 text-center">Acciones</h6>

            <div class="grid gap-2">
              <button class="inline-flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200 w-full" id="btn_timbrarPago" style="display:none;">
                <i class="material-icons text-sm leading-none">verified</i>
                Timbrar
              </button>

              <button class="inline-flex items-center justify-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" id="btn_generarPago">
                <i class="material-icons text-sm leading-none">save</i>
                Guardar
              </button>
            </div>

            <div class="grid grid-cols-3 gap-2 mt-3" id="divArchivos" style="display: none;">
              <button class="border border-slate-300 rounded-md py-2 text-slate-700 hover:bg-slate-100 transition-colors" title="Enviar" onclick="enviabutton()"><i class="fa fa-envelope" aria-hidden="true"></i></button>
              <a class="border border-slate-300 rounded-md py-2 text-center text-slate-700 hover:bg-slate-100 transition-colors" href="" id="btnXmlView" target="_blank"><i class="fa fa-file-code" aria-hidden="true"></i></a>
              <a class="border border-slate-300 rounded-md py-2 text-center text-slate-700 hover:bg-slate-100 transition-colors" href="" id="btnPdfView" target="_blank"><i class="fa fa-file-pdf" aria-hidden="true"></i></a>
            </div>

            <div class="grid gap-2 mt-3" id="divCancelar" style="display:none;">
              <button class="inline-flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200 w-full" id="btnCancelarDeposito" onclick="cancelaDeposito();">Cancelar</button>
              <button class="inline-flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200 w-full" id="btnCancelarDepositoTimbrado" onclick="cancelarModal();">Cancelar</button>
            </div>

            <div class="grid gap-2 mt-3">
              <button class="inline-flex items-center justify-center gap-2 bg-slate-700 hover:bg-slate-800 text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200 w-full" onclick="restaura();">Nuevo</button>
              <button class="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200 w-full" onclick="relaciones();">UUID Relacionado</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="modalReenviar">
  <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">Enviar Factura</h4>
        <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body px-6 py-4">
        <div class="row">
          <div class="col-12">
            <label>Correo</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="correoReenvio">
            <input type="hidden" id="idFactReenv">
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <label>Asunto</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="asuntoReenvio">
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <label>Cuerpo</label>
            <textarea id="cuerpoReenvio" cols="12" rows="3" 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"></textarea>
          </div>
        </div>
      </div>
      <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
        <button type="button" class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">Cerrar</button>
        <button type="button" class="flex items-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white border border-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="enviar();">Enviar</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalAplicacionNotas">
  <div class="modal-dialog modal-lg">
    <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">Facturas</h4>
        <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body px-4 py-2">
        <div class="mb-6" style="height: 40vh;overflow: auto;border-bottom: 0px solid gray;">
          <div class="overflow-x-auto rounded-lg border border-gray-200 shadow-sm">
            <table class="w-full text-sm table-fixed">
              <thead class="sticky-top" style="font-size: 12px;">
                <tr class="bg-gradient-to-r from-gray-50 to-gray-100 border-b-2 border-gray-200 ">
                  <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px]">Serie</th>
                  <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px]">Folio</th>
                  <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px]">Fecha</th>
                  <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px]">Moneda</th>
                  <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px]">F. Pago</th>
                  <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px]">M. Pago</th>
                  <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px]">Importe</th>
                  <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px]">Saldo</th>
                  <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide text-[11px]"><input class="checkAll float-left" type="checkbox" name="prods" id="checkAll" onclick="selectAll();"></th>
                </tr>
              </thead>
              <tbody id="bodyFacAplicadas">

              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
        <button type="button" class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">Cerrar</button>
        <button type="button" class="flex items-center gap-2 bg-gradient-to-r from-emerald-600 to-green-600 text-white border border-emerald-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="agregarNota();">Agregar</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="modalComprobante2">
  <div class="modal-dialog modal-lg">
    <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">Enviar Correo</h4>
        <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body px-6 py-4">
        <div class="row">
          <div class="col-8">
            <div class="row">
              <div class="col-sm-2">
                <label>Para:<span class="text-danger">*</span></label>
              </div>
              <div class="col-sm-10">
                <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="emailClienteM">
              </div>
            </div>
            <br>
            <div class="row">
              <div class="col-sm-2">
                <label>CC:</label>
              </div>
              <div class="col-sm-10">
                <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="cc">
              </div>
            </div>
            <br>
            <div class="row">
              <div class="col-sm-2">
                <label>Asunto:<span class="text-danger">*</span></label>
              </div>
              <div class="col-sm-10">
                <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="asuntoModal">
              </div>
            </div>
            <br>
            <div class="row">
              <textarea class="summernote" id="notasfacturaModal" style="width: 100%;" cols="12" rows="6"></textarea>
            </div>
          </div>
          <div class="col-4">
            <div class="row" style="height: 100px;">
              <div class="col-12 d-flex justify-content-center">
                <div class="d-flex align-items-center">
                  <span class="text-center">
                    <a href="" id="downloadPdf" download>
                      <i class="fa-regular fa-file-pdf fa-2xl"></i><br>
                      Descargar PDF
                    </a>
                  </span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 d-flex justify-content-center">
                <div class="d-flex align-items-center">
                  <span class="text-center">
                    <a href="" id="downloadXml" download>
                      <i class="fa-regular fa-file-code fa-2xl"></i><br>
                      Descargar XML
                    </a>
                  </span>
                </div>
              </div>
            </div>

          </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 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition-colors text-sm" data-dismiss="modal">Cerrar</button>
        <button type="button" class="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg font-medium hover:from-blue-700 hover:to-blue-800 transition-all shadow-sm text-sm" onclick="enviarFactura();">Enviar</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade modalEsc" id="modalCancelar">
  <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">Cancelacion Factura</h4>
        <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body px-6 py-4">
        <!--<input type="hidden" id="idDocHv">
        <input type="hidden" id="idVentaHv">-->
        <div class="row">
          <div class="col-12">

            <label for="motivo_cancelacion" class="ms-0">Motivo Cancelacion:<span class="text-danger">*</span></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-3">
            <label>Serie:<span class="text-danger">*</span></label>
            <input type="text" class="form-control form-control-sm" id="serieRelaCancel">
          </div>
          <div class="col-3">
            <label>Folio:<span class="text-danger">*</span></label>
            <input type="text" class="form-control form-control-sm" 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 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition-colors text-sm" data-dismiss="modal">Cerrar</button>
        <button type="button" class="px-4 py-2 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors text-sm" onclick="agregaFacturaCancelacion();" id="btnMuestraFacRelaCancel" style="display: none;">Agregar Factura</button>
        <button type="button" class="px-4 py-2 bg-red-500 text-white rounded-lg font-medium hover:bg-red-600 transition-colors text-sm" onclick="cancelaDocumento();">Cancelar</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalRelaciones">
  <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" id="titleRelaciones">Relaciones</h4>
        <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body px-4 py-2">
        <input type="hidden" id="tipoAccion">
        <div class="row">
          <div class="col-12">
            <label>Relacion:</label>
            <select id="tipoRelacion" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-width="100%" data-style="select-with-transition" data-live-search="true">
              <option value="0">-Selecciona-</option>
              @foreach ($data['tipos_relacion'] as $key => $i)
              <option value="{{ $i->c_tiporelacion }}">{{ $i->c_tiporelacion }} - {{ $i->descripcion }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>

                    <th>Serie</th>
                    <th>Folio</th>
                    <th>UUID</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody id="divBodyRelacionados">

                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
        <button type="button" class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white border border-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="verFacturas();">Agregar Complemento</button>
        <button type="button" class="flex items-center gap-2 bg-gradient-to-r from-emerald-600 to-green-600 text-white border border-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">Guardar</button>
        <button type="button" class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">Cerrar</button>

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



<div class="modal fade" id="modalFacturasRelacion">
  <div class="modal-dialog modal-lg">
    <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">Facturas</h4>
        <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body px-4 py-2">
        <div class="row" style="height: 50vh;overflow: auto;">
          <div class="col-12">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>Serie</th>
                    <th>Folio</th>
                    <th>Fecha</th>
                    <th>Importe</th>
                    <th>Saldo</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody id="bodyFacturas">

                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
        <button type="button" class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">Cerrar</button>
        <button type="button" class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white border border-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="agregarFact();" id="btnAgregaFact">Agregar</button>
        <button type="button" class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white border border-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="agregarFact2();" id="btnAgregaFactCancelacion">Agregar</button>
      </div>
    </div>
  </div>
</div>



<style>
  .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;
  }

  .table-scroll {
    max-height: 62vh;
    overflow-y: auto;
  }

  .status-card {
    border-radius: 0.75rem;
    padding: 0.85rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
  }

  .status-primary {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
  }

  .status-success {
    background: linear-gradient(135deg, #10b981, #059669);
  }

  .status-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
  }

  .status-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
  }

  .status-subtitle {
    font-size: 0.8rem;
    opacity: 0.95;
  }

  td {
    font-size: .8em !important;
  }

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

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

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

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

  #swal2-content {
    color: red;
  }

  .swal2-popup.swal2-modern {
    width: 24rem !important;
    max-width: calc(100vw - 2rem) !important;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
    padding: 1.05rem 1rem 0.95rem;
  }

  .swal2-popup.swal2-modern .swal2-title {
    font-size: 1.04rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.3rem;
  }

  .swal2-popup.swal2-modern .swal2-html-container,
  .swal2-popup.swal2-modern #swal2-content {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.4;
    margin-top: 0;
  }

  .swal2-popup.swal2-modern .swal2-actions {
    gap: 0.45rem;
    margin-top: 0.8rem;
  }

  .swal2-popup.swal2-modern .swal2-styled.swal2-confirm,
  .swal2-popup.swal2-modern .swal2-modern-confirm {
    border-radius: 9px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
  }

  .swal2-popup.swal2-modern .swal2-styled.swal2-cancel,
  .swal2-popup.swal2-modern .swal2-modern-cancel {
    border-radius: 9px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    background: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: none;
  }

  .swal2-popup.swal2-modern .swal2-icon {
    margin: 0.2rem auto 0.65rem;
    transform: scale(0.9);
  }

  .swal2-popup.swal2-modern .swal2-icon.swal2-warning {
    border-color: #f59e0b;
    color: #f59e0b;
  }

  .swal2-popup.swal2-modern .swal2-icon.swal2-success {
    border-color: #16a34a;
    color: #16a34a;
  }

  .swal2-popup.swal2-modern .swal2-icon.swal2-error {
    border-color: #dc2626;
    color: #dc2626;
  }
</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 src="https://cdn.jsdelivr.net/npm/jquery.numeric@1.0.0/jquery.numeric.min.js"></script>

<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $('#fecha').datetimepicker({
      "defaultDate": new Date(),
      format: 'YYYY-MM-DD',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    })
    if ($.fn.select2) {
      $('.select2').select2({
        width: '100%'
      });
    }

  });
  (function initModernSwalTheme() {
    if (typeof Swal === 'undefined' || typeof Swal.fire !== 'function' || Swal.__retencionesModernized) {
      return;
    }

    const originalFire = Swal.fire.bind(Swal);

    function normalizeSwalArgs(args) {
      if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null) {
        return Object.assign({}, args[0]);
      }

      return {
        title: args[0] || '',
        text: args[1] || '',
        icon: args[2] || undefined
      };
    }

    function mergePopupClass(customClass) {
      const safeClass = customClass || {};
      const popupClass = safeClass.popup ? String(safeClass.popup) : '';

      return Object.assign({}, safeClass, {
        popup: ('swal2-modern ' + popupClass).trim(),
        confirmButton: ('swal2-modern-confirm ' + (safeClass.confirmButton || '')).trim(),
        cancelButton: ('swal2-modern-cancel ' + (safeClass.cancelButton || '')).trim()
      });
    }

    Swal.fire = function() {
      const config = normalizeSwalArgs(Array.prototype.slice.call(arguments));

      if (config.type && !config.icon) {
        config.icon = config.type;
      }

      config.customClass = mergePopupClass(config.customClass);

      if (typeof config.allowOutsideClick === 'undefined') {
        config.allowOutsideClick = true;
      }

      if (typeof config.allowEscapeKey === 'undefined') {
        config.allowEscapeKey = true;
      }

      if (Number.isFinite(config.timer)) {
        config.timer += 2000;
      }

      return originalFire(config);
    };

    Swal.__retencionesModernized = true;
  })();

  let activeSwalLoadings = 0;

  function renderLoadingSwal(text = 'Procesando, por favor espera...') {
    Swal.fire({
      title: 'Cargando',
      text: text,
      allowOutsideClick: false,
      allowEscapeKey: false,
      showConfirmButton: false,
      timer: 1200,
      timerProgressBar: true,
      didOpen: () => {
        Swal.showLoading();
      },
      willClose: () => {
        // Si la petición sigue activa al terminar el timer, volvemos a mostrar el loader.
        if (activeSwalLoadings > 0) {
          setTimeout(() => {
            if (activeSwalLoadings > 0 && (!Swal.isVisible() || !Swal.isLoading())) {
              renderLoadingSwal(text);
            }
          }, 60);
        }
      }
    });
  }

  function showLoadingSwal(text = 'Procesando, por favor espera...') {
    activeSwalLoadings += 1;

    if (Swal.isVisible() && Swal.isLoading()) {
      return;
    }

    renderLoadingSwal(text);
  }

  function hideLoadingSwal() {
    activeSwalLoadings = Math.max(0, activeSwalLoadings - 1);

    if (activeSwalLoadings === 0 && Swal.isVisible() && Swal.isLoading()) {
      Swal.close();
    }
  }

  $.ajaxSetup({
    beforeSend: function() {
      showLoadingSwal();
    },
    complete: function() {
      setTimeout(function() {
        hideLoadingSwal();
      }, 1000);
    }
  });


  // $('#fecha_cons').datetimepicker('refresh')

  let clicando = false
  $('#btn_generarPago').click(function() {
    if (clicando == false) {
      let clicando = true
      var cliente = $('#id_cliente').val()
      var fp = $('#fpp').val()
      var fecha = $('#fecha').val()

      var facturas = new Array
      var error = 0;
      var moneda = $('#moneda').val()
      var tipo_cambio = $('#tipo_cambioPago').val()
      $('.facts_apagar').each(function(index, el) {
        idfact = $(this).attr('idfact')
        saldo = $(this).attr('saldo')
        if ($('#pago_' + idfact).val() != '') {
          if (parseFloat($('#pago_' + idfact).val()) > parseFloat(saldo)) {
            error++;
          }
          dat = {
            id_fact: idfact,
            monto: $('#pago_' + idfact).val(),
          }
          facturas.push(dat)
        }
      });
      if (facturas.length == 0) {
        Swal.fire({
          title: 'Agrega una factura a pagar.',
          type: 'warning',
          timer: 2000
        })
        clicando = false
        return false;
      }
      if (parseFloat(error) > 0) {
        Swal.fire({
          title: 'Existen pagos mayores al saldo.',
          type: 'warning',
          timer: 2000
        })
        clicando = false
        return false;
      }
      if (fp == '0') {
        Swal.fire({
          title: 'Selecciona forma de pago.',
          type: 'warning',
          timer: 2000
        })
        clicando = false
        return false;
      }
      
      $.ajax({
          url: "{{ url('facturacion/operaciones/aplicar_pago') }}",
          type: 'POST',
          dataType: 'json',
          data: {
            fecha: fecha,
            fp: fp,
            facturas: facturas,
            cliente: cliente,
            moneda: moneda,
            tipo_cambio: tipo_cambio,
          },
        })
        .done(function(resp) {
          console.log("success");
          if (resp.estatus > 0) {
            /*if(gcp==1){
              
              timbrarPago(resp.estatus);
            }else{*/
            $('#btnAgregaFact').hide()
            $('#btn_generarPago').hide()
            $('#btn_timbrarPago').show()

            $('#idPagoRealizado').val(resp.estatus)
            $('.cardsEstatus').hide()
            $('#estatusActivo').show()
            $('#idDocumento').html(resp.estatus)
            $('#divCancelar').show()
            $('#btnCancelarDeposito').show()
            $('#btnCancelarDepositoTimbrado').hide()
            $('.numeros').attr('readonly', true);
            $('.btnRemoveitem').hide()


            Swal.fire({
              title: 'Guardado con Éxito.',
              type: 'success',
              timer: 2000
            })
            setTimeout(function() {
              
            }, 1000);

            return false;
            //}

          }
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });



    }
  });
  let clicando2 = false
  $('#btn_timbrarPago').click(function() {
    if (clicando2 == false) {
      clicando2 = true
      var idPago = $('#idPagoRealizado').val()
      if (idPago == '') {
        Swal.fire({
          title: 'Erro con Pago',
          type: 'error',
          timer: 10000
        })
        clicando2 = false
        return false;
      }
      var tipoRelacionCfdi = $('#tipoRelacion').val()
      var relaciones = new Array()
      if (tipoRelacionCfdi != '0') {
        $(".agregadas_relacionadas").each(function() {
          if ($(this).attr('uuid') != '') {
            relaciones.push($(this).attr('uuid'))
          }
        })
      }
      if (tipoRelacionCfdi != '0') {
        if (relaciones.length == 0) {
          Swal.fire({
            title: 'Agrega al menos una factura para relacionar',
            type: 'error',
            timer: 7000
          })
          return false;
        }
      }
      
      $.ajax({
          url: "{{ url('facturacion/operaciones/timbrar_pago') }}",
          type: 'POST',
          dataType: 'json',
          data: {
            id_pago: idPago,
            tiporelacionRel: tipoRelacionCfdi,
            relaciones: relaciones
          },
        })
        .done(function(res) {
          console.log("success");
          if (res.success == 1) {
            $(".agregadas_relacionadas").remove()
            $('#tipoRelacion').val('0').selectpicker('refresh');
            $('#btn_timbrarPago').hide()
            guardarFacturaPago(res)
            $('#modalAplicaDeposito').modal('hide')
            
            $('.btnSavePago').attr('disable', false)
            clicando2 = false
          } else {
            clicando2 = false

            setTimeout(function() {
              
            }, 1000);
            $('#modalPagos').modal('show')
            Swal.fire({
              title: res.mensaje,
              type: 'error',
              timer: 10000
            })
            $('.btnSavePago').attr('disable', false)

            return false;
          }
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
    }
  })



  function eliminarFactura(id, idVenta) {
    $('#idDocHv').val(id)
    $('#idVentaHv').val(idVenta)
    $('#modalCancelacionFactura').modal('show')
  }

  function muestraRel() {
    if ($('#motivo_cancelacion').val() == '01') {
      $('#uuidRelaCancelRow').show()
    } else {
      $('#uuidRelaCancelRow').hide()
    }
  }

  function cancelaDocumento() {
    var id = $('#idDocHv').val()
    var idVenta = $('#idVentaHv').val()
    var motivo = $('#motivo_cancelacion').val()
    var serie = $('#serieRelaCancel').val()
    var folio = $('#folioRelaCancel').val()
    $.ajax({
        url: '../operaciones/cancel_verifica',
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
          serie: serie,
          folio: folio,
          motivo: motivo
        },
      })
      .done(function(ress) {
        console.log("success");
        if (ress.estatus == '3') {
          Swal.fire({
            title: ress.titulo,
            type: 'error',
            timer: 2000
          })
        } else {
          Swal.fire({
            title: ress.titulo,
            text: ress.msj,
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Si',
            cancelButtonText: 'No',
          }).then((result) => {
            console.log(result)
            if (result.value) {
              $('#modalVentas').modal('hide')
              $('#modalCancelacionFactura').modal('hide')
              $('#modalCargando').modal('show')
              $.ajax({
                  url: '../operaciones/cancel_factura',
                  type: 'POST',
                  dataType: 'json',
                  data: {
                    id: id,
                    motivo: motivo,
                    serie: serie,
                    folio: folio,
                  },
                })
                .done(function(resp) {
                  $('#modalCargando').modal('hide')
                  console.log(resp)

                  if (resp[0].strStatus == '1') {
                    Swal.fire(
                      'Cancelacion Procesada',
                      resp[0].strResult,
                      'success'
                    )
                    loadGrid();
                    if (resp[0].strStatus == '1') {
                      src = window.location + "/../../facturacion/acuse/" + id;
                      window.open(src, "_blank");
                      Swal.fire({
                        title: resp[0].strResult,
                        text: '¿Deseas cancelar la venta? la factura ya fue cancelada',
                        type: 'success',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Si',
                        cancelButtonText: 'No',
                      }).then((result2) => {
                        if (result2.value) {
                          $.ajax({
                              url: '../operaciones/cancelar_venta',
                              type: 'POST',
                              dataType: 'json',
                              data: {
                                id: $('#idVentaHv').val()
                              },
                            })
                            .done(function(respx) {
                              console.log("success");
                              if (respx.re > 0) {
                                Swal.fire(
                                  'Cancelacion correcta',
                                  'Se cancelo la venta correctamente',
                                  'success'
                                )
                              }
                            })
                            .fail(function() {
                              console.log("error");
                            })
                            .always(function() {
                              console.log("complete");
                            });

                        }
                      })

                    }

                    /*$.ajax({
                        url: '../operaciones/cancel_venta',
                        type: 'POST',
                        dataType: 'json',
                        data: {id: id},
                    })
                    .done(function(res) {
                        console.log("success");

                            Swal.fire(
                              'Cancelado!',
                              'Se cancelo correctamente!',
                              'success'
                            )
                            src = window.location+"/../../operaciones/acuse/"+id;
                            window.open(src, "_blank"); 
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });*/

                  } else {
                    $('#modalCargando').modal('hide')
                    $('#modalVentas').modal('show')
                    Swal.fire(
                      'Error al cancelar',
                      resp[0].strResult,
                      'error'
                    )
                  }

                  cerrarModales();
                })
                .fail(function() {
                  console.log("error");
                })
                .always(function() {
                  console.log("complete");
                });

            }
          })
        }


      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function enviarModal(id, correo = '') {
    $('#correoReenvio').val(correo)
    $('#asuntoReenvio').val('')
    $('#cuerpoReenvio').val('')
    $('#idFactReenv').val(id)
    $('#modalReenviar').modal();
  }

  function enviar() {

    var correo = $('#correoReenvio').val()
    var asunto = $('#asuntoReenvio').val()
    var cuerpo = $('#cuerpoReenvio').val()
    if (correo == '') {
      Swal.fire({
        title: 'Agrega un correo',
        type: 'error',
        timer: 2000
      })
      return false;
    }
    if (asunto == '') {
      Swal.fire({
        title: 'Agrega un asunto',
        type: 'error',
        timer: 2000
      })
      return false;
    }
    $.ajax({
        url: '../facturacion/enviar_factura',
        type: 'POST',
        dataType: 'json',
        data: {
          id: $('#idFactReenv').val(),
          correo: correo,
          cuerpo: cuerpo,
          asunto: asunto
        },
      })
      .done(function(resp) {
        console.log("success");
        Swal.fire({
          title: 'Enviado correctamente',
          type: 'success',
          timer: 2000
        })
        $('#modalReenviar').modal('hide');
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function verNotasCredito() {
    var cliente = $('#id_cliente').val()
    var fp = $('#fpp').val()
    if (cliente == '0' || cliente == '') {
      Swal.fire({
        title: 'Selecciona un cliente.',
        type: 'warning',
        timer: 2000
      })
      return false;
    }
    if (fp == '0' || fp == '') {
      Swal.fire({
        title: 'Selecciona forma de pago.',
        type: 'warning',
        timer: 2000
      })
      return false;
    }
    $.ajax({
        url: "{{ url('facturacion/operaciones/get_notas_cliente_depositos') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          id_cliente: cliente
        },
      })
      .done(function(resp) {
        console.log(resp);
        var html = ''
        $('#bodyFacAplicadas').html(html)
        $.each(resp.facturas, function(index, val) {
          if (parseFloat(val.saldo) > 0) {
            html += '<tr>'
            html += '<td class="px-4 py-2">' + val.serie + '</td>'
            html += '<td class="px-4 py-2">' + val.folio + '</td>'
            html += '<td class="px-4 py-2">' + val.fecha_emision + '</td>'
            html += '<td class="text-center px-4 py-2">' + val.moneda + '</td>'
            html += '<td class="text-center px-4 py-2">' + val.metodo_pago + '</td>'
            html += '<td class="text-center px-4 py-2">' + val.forma_pago + '</td>'

            if (val.tipo == 'I') {
              html += '<td class="px-4 py-2">' + numberFormat(val.monto) + '</td>'
              html += '<td class="px-4 py-2">' + numberFormat(val.saldo) + '</td>'

              html += '<td class="px-4 py-2"><input class="rrela_nota" type="checkbox" id="che_' + val.id + '"  value="' + val.id + '" serie="' + val.serie + '" folio="' + val.folio + '" uuid="' + val.uuid + '" monto="' + val.monto + '" tipocambio="' + val.tipo_cambio + '" moneda="' + val.moneda + '" saldo="' + val.saldo + '"></td>'
            } else {

              html += '<td class="px-4 py-2">' + numberFormat(-val.monto) + '</td>'
              html += '<td class="px-4 py-2">' + numberFormat(val.saldo) + '</td>'
              html += '<td class="px-4 py-2"><input class="rrela_nota" type="checkbox" id="che_' + val.id + '"  value="' + val.id + '" serie="' + val.serie + '" folio="' + val.folio + '" uuid="' + val.uuid + '" monto="-' + val.monto + '" tipocambio="' + val.tipo_cambio + '" moneda="' + val.moneda + '" saldo="' + val.saldo + '"></td>'
            }

            html += '</tr>'
          }
        });
        $('#bodyFacAplicadas').append(html)
        $('#modalAplicacionNotas').modal()
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
  }

  function agregarNota() {
    var html = ''
    var agregadas = new Array
    $('.facts_apagar').each(function(index, el) {
      idfact = $(this).attr('idfact')
      agregadas.push(idfact)
    });
    var error = false
    console.log(agregadas)
    $('.rrela_nota').each(function(index, el) {
      if ($(this).is(':checked')) {
        exists = agregadas.indexOf($(this).val()) !== -1;
        console.log('Existe=' + exists);
        if (exists == false) {

          html += '<tr class="facts_apagar text-center" idfact="' + $(this).val() + '" id="factPag_' + $(this).val() + '" saldo="' + $(this).attr('saldo') + '" moneda="' + $(this).attr('moneda') + '">'
          html += '<td class="px-4 py-2 ">' + $(this).attr('serie') + '-' + $(this).attr('folio') + '</td>'
          html += '<td class="px-4 py-2 ">' + $(this).attr('uuid') + '</td>'
          html += '<td class="px-4 py-2 ">' + $(this).attr('moneda') + '</td>'
          html += '<td class="px-4 py-2 ">' + numberFormat($(this).attr('monto')) + '</td>'
          html += '<td class="px-4 py-2 ">' + numberFormat($(this).attr('saldo')) + '</td>'
          html += '<td class="px-4 py-2 "><input type="text" id="pago_' + $(this).val() + '" width="100%" value="' + $(this).attr('saldo') + '" onkeyup="calculatotalPagado();validaSaldo(' + $(this).val() + ')" class="numeros 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"></td>'
          html += '<td class="px-4 py-2 "> <button class="btn btn-link btn-xsm mr-1 btnRemoveitem" onclick="removeItem(' + $(this).val() + ');"><i class="material-icons">close</i></button></td>'
          html += '</tr>'
        } else {
          error = true
        }
      }

    });
    if (error) {
      Swal.fire({
        title: 'Existen facturas que ya se encuentran agregadas.',
        type: 'warning',
        timer: 6000
      })
      return false
    } else {
      $('#bodyItems').append(html)
      $('#modalAplicacionNotas').modal('hide')
      calculatotalPagado();
      $('.numeros').numeric();
    }

  }

  function numberFormat(num) {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(num)
  }

  function eliminaFacPago(id) {
    $('#factPag_' + id).remove()
    calculatotalPagado();
  }

  function calculatotalPagado() {
    var total = 0;
    var dispmoneda = $('#moneda option:selected').attr('displaymoneda');
    $('.facts_apagar').each(function(index, el) {
      idfact = $(this).attr('idfact')
      monedaFact = $(this).attr('moneda')
      if ($('#pago_' + idfact).val() != '') {
        if (monedaFact == dispmoneda) {
          total += parseFloat($('#pago_' + idfact).val())
        } else {
          if (monedaFact == 'MXN' && dispmoneda != 'MXN') {
            totalPorFac = parseFloat($('#pago_' + idfact).val()) / parseFloat($('#tipo_cambioPago').val())
            total += parseFloat(totalPorFac)
          } else {
            totalPorFac = parseFloat($('#pago_' + idfact).val()) * parseFloat($('#tipo_cambioPago').val())
            total += parseFloat(totalPorFac)
          }
        }


      }
    });
    if ($('#moneda').val() != 1) {

      console.log('ajajajajaj')
      totalPesos = parseFloat(total) * parseFloat($('#tipo_cambioPago').val())
      $('#totalLabelMoneda').html(numberFormat(totalPesos))
      $('#divTotalMonedaExtranjera').show()
    } else {
      $('#divTotalMonedaExtranjera').hide()
    }
    $('#totalLabel').html(numberFormat(total))
    $('#totalMoneda').html('Total ' + dispmoneda)
  }

  function validaSaldo(id) {
    console.log('estoo=' + id)
    var pago = $('#pago_' + id).val()
    var saldo = $('#factPag_' + id).attr('saldo')

    if (pago == '') {
      pago = 0
    }
    /*if(parseFloat(pago) < 0){
      Swal.fire({
            title: 'No puedes hacer pagos en negativo.',
            type: 'warning',
            timer: 2000
          })
      return false
    }*/

    if (parseFloat(pago) > parseFloat(saldo)) {

      Swal.fire({
        title: 'No puedes superar el saldo de la factura.',
        type: 'warning',
        timer: 2000
      })
      return false;
    }
    calculatotalPagado();
  }

  function removeItem(id) {
    $('#factPag_' + id).remove()
    calculatotalPagado();
  }

  function guardarFacturaPago(respuesta) {
    console.log(respuesta)
    $.ajax({
        url: '{{url("facturacion/operaciones/guardar_factura_deposito")}}',
        type: 'POST',
        dataType: 'json',
        data: {
          respuesta: respuesta
        },
      })
      .done(function(resp) {
        console.log("success");
        $('#emailClienteM').val('');
        if (resp.id > 0) {
          $('#idDocHv').val(resp.id)
          $('#btnCancelarDeposito').hide()
          $('#btnCancelarDepositoTimbrado').show()
          

          $('.cardsEstatus').hide()
          $('#estatusTimbrado').show()
          $('.serieFolioLabel').html(respuesta.datos['Serie'] + '-' + respuesta.datos['Folio'])
          //$('.uuidLabel').html(respuesta.datos['UUID'])


          Swal.fire({
            title: '¡Se guardo correctamente!',
            type: 'success',
            timer: 2000
          })
          $('#emailClienteM').val(resp.correo);

          makePdf(respuesta.datos['xmlNameFile'], respuesta.datos['idVenta'], 'CP', 0, '', 0, respuesta.datos['Serie'] + '-' + respuesta.datos['Folio']);
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function makePdf(nameXml, idventa, concoche = 0, ine = 0, comentarios = '', prefactura = 0, seriefolio = '') {

    nameXml = nameXml + '.xml'
    $.ajax({
        url: "{{ url('facturacion/operaciones/xml_pdf') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          nameXml: nameXml,
          idventa: idventa,
          concoche: concoche,
          ine: ine,
          comentarios: comentarios,
          prefactura: prefactura,
        },
      })
      .done(function(resp) {
        console.log(resp);

        if (resp.estatus > 0) {
          $('#urlPdfFact').val(resp.urlPdf)
          $('#btnFactView').show()
          modalComprobanteFact2(resp.urlPdf, idventa, 0, seriefolio)
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function modalComprobanteFact2(src, idventa, tipo = 0, seriefolio) {



    $('#idDocComprobante').val(idventa)
    $('#modalFactura').modal('hide')
    $('#modalFactura').modal('hide')
    $('#loadingSave').modal('hide')
    $('#btnPdfView').prop('href', src)
    $('#downloadPdf').prop('href', src)

    $('#divArchivos').show()
    result = src.replace(".pdf", ".xml");
    $('#btnXmlView').prop('href', result)
    $('#downloadXml').prop('href', result)

    asdocu = 'Complemento de Pago'

    $('#asuntoModal').val('Asunto: ' + asdocu + ' ' + seriefolio + ' - ' + $('#nomEmpresa').val())

    $("#notasfacturaModal").summernote("code", 'Estimado/a ' + $("#buscaCliente option:selected").text() + ',<br><br>Adjunto te envío CFDI Pago ' + seriefolio + '.<br><br>Para cualquier consulta, estoy a tu disposición.<br><br>Saludos.<br>' + $('#nomEmpresa').val());
    //$('#notasfacturaModal').val()
    $('#modalComprobante2').modal('show')
  }

  function cancelaDeposito() {

    Swal.fire({
      title: '¿Deseas cancelar este depósito?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      cancelButtonText: 'No.',
      confirmButtonText: 'Sí, Cancelar.'
    }).then((result) => {
      if (result.value) {


        $.ajax({
            url: "{{ url('facturacion/operaciones/cancela_deposito') }}",
            type: 'POST',
            dataType: 'json',
            data: {
              id_deposito: $('#idPagoRealizado').val()
            },
          })
          .done(function(resp) {
            console.log("success");
            if (resp.estatus > 0) {
              Swal.fire({
                title: 'Cancelado Correctamente.',
                type: 'success',
                timer: 7000
              })
              $('.cardsEstatus').hide()
              $('#estatusCancelada').show()
              $('#divCancelar').hide()
              $('#btnCancelarDeposito').hide()
              $('#btnCancelarDepositoTimbrado').hide()
              $('#btn_timbrarPago').hide()
            }
          })
          .fail(function() {
            console.log("error");
          })
          .always(function() {
            console.log("complete");
          });

      }
    })



    /*Swal.fire({
      title: "Deseas cancelar el Depósito?",
      showDenyButton: true,
      showCancelButton: false,
      confirmButtonText: "Si",
      denyButtonText: `No`
    }).then((result) => {

      if (result.isConfirmed) {

    
        
      } 
    });*/
  }

  function enviabutton() {
    $('#modalComprobante2').modal('show')
  }

  function enviarFactura() {
    var idfactura = $('#idDocHv').val()
    var correo = $('#emailClienteM').val()
    var cc = $('#cc').val()
    var asunto = $('#asuntoModal').val()
    var cuerpo = $('#notasfacturaModal').val()
    $.ajax({
        url: "{{ url('facturacion/operaciones/enviar_factura') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          correo: correo,
          cc: cc,
          asunto: asunto,
          cuerpo: cuerpo,
          idfactura: idfactura,
        },
      })
      .done(function(resp) {
        console.log(resp);
        Swal.fire({
          title: 'Enviado correctamente.',
          type: 'success',
          timer: 7000
        })
        return false;
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function restaura() {
    $('#bodyItems').html('')
    $('#btnAgregaFact').show()
    $('.cardsEstatus').hide()
    $('#estatusNueva').show()
    $('#btn_generarPago').show()
    $('#btn_timbrarPago').hide()
    $('#idDocumento').html('')
    $('#divCancelar').hide()
    $('#btnCancelarDeposito').hide()
    $('#btnCancelarDepositoTimbrado').hide()
    $('#idDocHv').val('')
    $('#idPagoRealizado').val('')
    $('#idDocComprobante').val('')
    $('#divArchivos').hide()
    $('#id_cliente').val(0).selectpicker("refresh");
    $('#fpp').val(0).selectpicker("refresh");

    calculatotalPagado();
  }

  function selectAll() {
    if ($('#checkAll').is(':checked')) {
      $('.rrela_nota').prop('checked', true);
      //$('#btnEliminarPoliza').show('slow')

    } else {
      $('.rrela_nota').prop('checked', false);
      //$('#btnEliminarPoliza').hide('slow')

    }
    // $('#checkAll').hide();
  }

  function cancelarModal() {
    $('#modalCancelar').modal('show')
  }

  function muestraRel() {
    if ($('#motivo_cancelacion').val() == '01') {
      $('#uuidRelaCancelRow').show()
      $('#btnMuestraFacRelaCancel').show()
    } else {
      $('#uuidRelaCancelRow').hide()
      $('#btnMuestraFacRelaCancel').hide()
    }
  }

  function agregaFacturaCancelacion() {
    verFacturas(1)
  }

  function verFacturas(cancelacion = 0) {
    var cliente = $('#id_cliente').val()
    var tipo = $('#tipoAccion').val();
    $.ajax({
        url: "{{ url('facturacion/operaciones/get_facturas_cliente') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          id_cliente: cliente,
          tipo: tipo,
          tipo2: 1
        },
      })
      .done(function(resp) {
        console.log(resp);
        var html = ''
        if (cancelacion == 0) {
          tipoinput = 'checkbox'
          nameinput = ''
          $('#btnAgregaFact').show()
          $('#btnAgregaFactCancelacion').hide()
        } else {
          tipoinput = 'radio'
          nameinput = ' name="ceccanecl"'
          $('#btnAgregaFact').hide()
          $('#btnAgregaFactCancelacion').show()
        }
        $('#bodyFacturas').html(html)
        $.each(resp.facturas, function(index, val) {
          html += '<tr>'
          html += '<td>' + val.serie + '</td>'
          html += '<td>' + val.folio + '</td>'
          html += '<td>' + val.fecha_emision + '</td>'
          html += '<td>' + numberFormat(val.monto) + '</td>'
          html += '<td>' + numberFormat(val.saldo) + '</td>'
          html += '<td><input class="form-check-input rrela" type="' + tipoinput + '" id="che_' + val.id + '"  value="' + val.id + '" serie="' + val.serie + '" folio="' + val.folio + '" uuid="' + val.uuid + '"' + nameinput + '></td>'
          html += '</tr>'
        });
        $('#bodyFacturas').append(html)
        $('#modalFacturasRelacion').modal()
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function agregarFact2() {
    $('.rrela').each(function(index, el) {
      if ($(this).is(':checked')) {
        $('#serieRelaCancel').val($(this).attr('serie'))
        $('#folioRelaCancel').val($(this).attr('folio'))
      }

    });
    $('#modalFacturasRelacion').modal('hide')
  }

  function relaciones() {
    $('#tipoRelacion').val('0')
    $('#tipoAccion').val(1)
    $('#tipoRelacion').selectpicker("refresh");
    $('#modalRelaciones').modal('show')
  }

  function agregarFact() {
    var html = ''
    $('.rrela').each(function(index, el) {
      if ($(this).is(':checked')) {
        html += '<tr id="facrel_' + $(this).val() + '" uuid="' + $(this).attr('uuid') + '" class="agregadas_relacionadas">'
        html += '<td>' + $(this).attr('serie') + '</td>'
        html += '<td>' + $(this).attr('folio') + '</td>'
        html += '<td>' + $(this).attr('uuid') + '</td>'
        html += '<td><button class="btn btn-link btn-xsm mr-1" onclick="removeFact(' + $(this).val() + ')"><i class="material-icons">close</i></button></td>'
        html += '</tr>'
      }

    });
    $('#divBodyRelacionados').html(html)
    $('#modalFacturasRelacion').modal('hide')
  }
</script>
@endpush