@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>
  .chq-page {
    --chq-border: #e7e7e9;
    --chq-muted: #697a8d;
    --chq-surface: #f8f9fa;
    --chq-accent: #696cff;
  }
  .chq-page .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
  }
  .chq-page .page-head h4 { margin: 0; }
  .chq-page .page-head .hint {
    margin: 0.3rem 0 0;
    color: var(--chq-muted);
    font-size: 0.875rem;
    max-width: 40rem;
  }
  .chq-panel {
    background: #fff;
    border: 1px solid var(--chq-border);
    border-radius: 0.625rem;
    overflow: hidden;
    margin-bottom: 1rem;
  }
  .chq-panel .chq-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.85rem 1.05rem;
    border-bottom: 1px solid var(--chq-border);
    background: var(--chq-surface);
  }
  .chq-panel .chq-head h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #566a7f;
  }
  .chq-panel .chq-body { padding: 1rem 1.05rem 1.15rem; }
  .chq-panel .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #566a7f;
    margin-bottom: 0.3rem;
  }
  .chq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: end;
  }
  .chq-table-wrap {
    border: 1px solid var(--chq-border);
    border-radius: 0.5rem;
    overflow: auto;
  }
  .chq-table-wrap table { margin-bottom: 0; }
  .chq-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f3f4f6 !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--chq-muted);
    white-space: nowrap;
  }
  .chq-table-wrap tbody td {
    vertical-align: middle;
    font-size: 0.875rem;
  }
  .chq-table-wrap tfoot th,
  .chq-table-wrap tfoot td {
    background: #f8f8ff !important;
    font-weight: 700;
    color: #566a7f;
  }
  .chq-empty td {
    text-align: center;
    color: var(--chq-muted);
    font-style: italic;
    padding: 1.5rem 0.75rem !important;
  }
  .chq-saldo-box {
    border: 1px solid #cfd0ff;
    background: #f8f8ff;
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    min-width: 160px;
  }
  .chq-saldo-box .lbl {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--chq-muted);
    font-weight: 650;
    margin-bottom: 0.2rem;
  }
</style>

<div class="chq-page">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Gestión de</span> Cheques</h4>
      <p class="hint">Seleccione el mes, revise el saldo y registre cargos o abonos. Puede descargar el PDF del período.</p>
    </div>
  </div>

  <div class="chq-panel">
    <div class="chq-head">
      <h6>Período y saldo</h6>
    </div>
    <div class="chq-body">
      <div class="row g-3 align-items-end">
        <div class="col-6 col-md-3 col-xl-2">
          <label class="form-label" for="fecha_cheque">Mes</label>
          <input type="month" class="form-control" id="fecha_cheque" name="fecha_cheque" value="{{ date('Y-m'); }}" onchange="generar()"/>
          <input type="hidden" id="id_cheque">
        </div>
        <div class="col-6 col-md-3 col-xl-2">
          <label class="form-label" for="saldo_cheque">Saldo</label>
          <input type="number" class="form-control" id="saldo_cheque" name="saldo_cheque" value="" onchange="actualizar($('#id_cheque').val(),'saldo_cheque',this.value)"/>
        </div>
        <div class="col-12 col-md-6 col-xl-8">
          <div class="chq-actions">
            <button type="button" class="btn btn-primary" onclick="agregar()">
              <i class="bx bx-plus"></i> Agregar movimiento
            </button>
            <button type="button" class="btn btn-outline-secondary" onclick="descargar()">
              <i class="bx bx-download"></i> Descargar PDF
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="chq-panel">
    <div class="chq-head">
      <h6>Movimientos del mes</h6>
    </div>
    <div class="chq-body">
      <div class="chq-table-wrap table-responsive">
        <table class="table table-sm table-striped table-hover text-center mb-0">
          <thead>
            <tr>
              <th>Fecha</th>
              <th>Detalle</th>
              <th>Nº cheque</th>
              <th>Cargos</th>
              <th>Abonos</th>
              <th>Saldos</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="listado">
            <tr class="chq-empty"><td colspan="7">Seleccione un mes para cargar los movimientos.</td></tr>
          </tbody>
          <tfoot id="listado_total"></tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
  $.validator.setDefaults({
    ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input'
  });

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

  cargar_validaciones_custom();

  const formato = {
    minimumFractionDigits: 0,
    maximumFractionDigits: 3,
  };

  function generar(procesar = false){
    var fecha_cheque = $('#fecha_cheque').val();
    var saldo_cheque = $('#saldo_cheque').val();
    if(fecha_cheque == ''){
      $('#listado').html(`<tr class="chq-empty"><td colspan="7"><div class="spinner-border spinner-border-sm text-primary" role="status"></div> Cargando…</td></tr>`);
      return;
    }

    $.ajax({
      url: '{{ URL::to('/') }}/cheques/crear',
      type: 'POST',
      data: { fecha_cheque, saldo_cheque },
      success: function(response){
        if(response.response){
          if(!procesar){
            Swal.fire({
              position: 'top-end',
              icon: 'success',
              title: '¡Excelente! Estamos cargando la información…',
              showConfirmButton: false,
              timer: 2000
            });
          }
          $('#id_cheque').val(response.data.id);
          $('#saldo_cheque').val(response.data.saldo_cheque);
          dibujar(response.data.id);
        }else{
          Swal.fire({
            position: 'top-end',
            icon: 'error',
            title: response.message,
            showConfirmButton: false,
            timer: 1500
          });
        }
      },
      error: function(xhr) {
        console.error(xhr.responseText);
      }
    });
  }

  function dibujar(id){
    $.ajax({
      url: '{{ URL::to('/') }}/cheques/dibujar',
      type: 'POST',
      data: { id },
      beforeSend: function(){
        $('#listado').html(`<tr class="chq-empty"><td colspan="7"><div class="spinner-border spinner-border-sm text-primary" role="status"></div> Cargando movimientos…</td></tr>`);
      },
      success: function(response){
        if(response.response){
          var saldo_cheque = isNan(response.data.saldo_cheque);
          var cargos = 0;
          var abonos = 0;
          var html = "";

          html += `<tr class="table-light">
            <td colspan="5" class="text-start fw-semibold">Saldo anterior</td>
            <td class="fw-bold">${ isNaN(parseFloat(response.saldo_mes_anterior)) ? '0' : parseFloat(response.saldo_mes_anterior).toLocaleString("es-ES", formato).replace(',', '.') }</td>
            <td>&nbsp;</td>
          </tr>`;

          saldo_cheque = parseFloat(response.saldo_mes_anterior);

          if (!response.detalles || !response.detalles.length) {
            html += `<tr class="chq-empty"><td colspan="7">Sin movimientos en este mes. Use <strong>Agregar movimiento</strong>.</td></tr>`;
          }

          $.each(response.detalles, function(key, value) {
            let cargosItem = parseFloat(value.cargos);
            let abonosItem = parseFloat(value.abonos);

            cargosItem = isNaN(cargosItem) ? 0 : cargosItem;
            abonosItem = isNaN(abonosItem) ? 0 : abonosItem;

            if (cargosItem > 0) {
              value.saldo = saldo_cheque - cargosItem;
              cargos += cargosItem;
            } else if (abonosItem > 0) {
              value.saldo = saldo_cheque + abonosItem;
              abonos += abonosItem;
            }
            saldo_cheque = value.saldo;

            const cargosFormatted = cargosItem.toLocaleString("es-ES", formato).replace(',', '.');
            const abonosFormatted = abonosItem.toLocaleString("es-ES", formato).replace(',', '.');
            const saldoFormatted = value.saldo.toLocaleString("es-ES", formato).replace(',', '.');

            html += `<tr>
              <td>${value.fecha ? value.fecha : ""}</td>
              <td class="text-start">${value.detalle ? value.detalle : ""}</td>
              <td>${value.numero_cheque ? value.numero_cheque : ""}</td>
              <td class="text-danger">${cargosItem > 0 ? cargosFormatted : ''}</td>
              <td class="text-success">${abonosItem > 0 ? abonosFormatted : ''}</td>
              <td class="fw-semibold">${saldoFormatted}</td>
              <td>
                <button type="button" class="btn btn-sm btn-icon btn-outline-danger" title="Eliminar" onclick="eliminar(${value.id})">
                  <i class='bx bx-trash'></i>
                </button>
              </td>
            </tr>`;
          });

          $("#listado").html(html);
          $("#listado_total").html(`<tr>
            <td class="text-end" colspan="3">Totales</td>
            <td>${isNaN(parseFloat(cargos)) ? '0' : parseFloat(cargos).toLocaleString("es-ES", formato).replace(',', '.')}</td>
            <td>${isNaN(parseFloat(abonos)) ? '0' : parseFloat(abonos).toLocaleString("es-ES", formato).replace(',', '.')}</td>
            <td>${isNaN(parseFloat(saldo_cheque)) ? '0' : parseFloat(saldo_cheque).toLocaleString("es-ES", formato).replace(',', '.')}</td>
            <td></td>
          </tr>`);
        }
      },
      error: function(xhr) {
        console.error(xhr.responseText);
      }
    });
  }

  function agregar(){
    let min_max_mes = obtenerPrimerYUltimoDia();
    Swal.fire({
      title: 'Ingresar movimiento',
      html:
        '<input id="fecha" type="date" class="swal2-input" placeholder="Fecha" min="'+min_max_mes[0]+'" max="'+min_max_mes[1]+'">' +
        '<input id="detalle" type="text" class="swal2-input" placeholder="Detalle">' +
        '<input id="numeroCheque" type="text" class="swal2-input" placeholder="Número de cheque">' +
        '<select id="tipoMovimiento" class="swal2-input">' +
        '<option value="abono">Abono</option>' +
        '<option value="cargo">Cargo</option>' +
        '</select>' +
        '<input id="valor" type="number" class="swal2-input" placeholder="Valor">',
      focusConfirm: false,
      confirmButtonText: 'Guardar',
      showCancelButton: true,
      cancelButtonText: 'Cancelar',
      preConfirm: () => {
        const fecha = document.getElementById('fecha').value;
        const detalle = document.getElementById('detalle').value;
        const numeroCheque = document.getElementById('numeroCheque').value;
        const tipoMovimiento = document.getElementById('tipoMovimiento').value;
        const valor = document.getElementById('valor').value;

        if (!fecha || !detalle || !valor) {
          Swal.showValidationMessage('Complete fecha, detalle y valor.');
          return false;
        }

        return {
          fecha: fecha,
          detalle: detalle,
          numeroCheque: numeroCheque,
          tipoMovimiento: tipoMovimiento,
          valor: valor,
        };
      },
    }).then((result) => {
      if (result.isConfirmed) {
        const { fecha, detalle, numeroCheque, tipoMovimiento, valor } = result.value;

        if (isNaN(valor)) {
          Swal.fire('Error', 'El valor ingresado no es válido. Debe ser numérico.', 'error');
          return;
        }

        let movimiento = {};
        let id_cheque = $('#id_cheque').val();
        if (tipoMovimiento === 'abono') {
          movimiento = {
            id_cheques : id_cheque,
            fecha: fecha,
            detalle: detalle,
            numero_cheque: numeroCheque,
            abonos: valor,
            cargos: null
          };
        } else if (tipoMovimiento === 'cargo') {
          movimiento = {
            id_cheques : id_cheque,
            fecha: fecha,
            detalle: detalle,
            numero_cheque: numeroCheque,
            abonos: null,
            cargos: valor
          };
        }

        $.ajax({
          url: '{{ URL::to('/') }}/cheques/agregar',
          type: 'POST',
          data: movimiento,
          success: function(response){
            Swal.fire({ position: 'top-end', icon: 'success', title: 'Movimiento guardado', showConfirmButton: false, timer: 1200 });
            $('#saldo_cheque').val(response.data.saldo_cheque);
            dibujar(response.data.id);
          },
          error: function(xhr) {
            console.error(xhr.responseText);
          }
        });
      }
    });
  }

  function actualizar(id,tipo,valor){
    $.ajax({
      url: '{{ URL::to('/') }}/cheques/actualizar',
      type: 'POST',
      data: { id, tipo, valor },
      success: function(response){
        console.log(response);
      },
      error: function(xhr) {
        console.error(xhr.responseText);
      }
    });
  }

  function eliminar(id){
    Swal.fire({
      title: '¿Está seguro?',
      text: 'No podrá revertir esto.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sí, eliminar',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.isConfirmed){
        $.ajax({
          url: '{{ URL::to('/') }}/cheques/eliminar',
          type: 'POST',
          data: { id },
          success: function(){
            Swal.fire({ position: 'top-end', icon: 'success', title: 'Eliminado', showConfirmButton: false, timer: 1200 });
            generar(true);
          },
          error: function(xhr) {
            console.error(xhr.responseText);
          }
        });
      }
    });
  }

  function descargar(){
    var id_cheque = $('#id_cheque').val();
    if(id_cheque == '') {
      Swal.fire({ position: 'top-end', icon: 'error', title: 'Seleccione un mes primero', showConfirmButton: false, timer: 1500 });
      return;
    }
    window.open(`{{ URL::to('/') }}/pdf_cheque/${id_cheque}`, '_blank');
  }

  function isNan(value){
    if ((typeof value === 'number' && isNaN(value)) || value == ''){
      return 0;
    }
    return parseFloat(value);
  }

  function obtenerPrimerYUltimoDia(){
    const inputFecha = $('#fecha_cheque').val();
    const fechaSeleccionada = new Date(inputFecha);
    const year = fechaSeleccionada.getFullYear();
    const month = (fechaSeleccionada.getMonth() + 1);
    const firstDayOfMonth = new Date(year, month, 1);
    const lastDayOfMonth = new Date(year, month + 1, 0);

    const primerDiaFormatted = formatDate(firstDayOfMonth);
    const ultimoDiaFormatted = formatDate(lastDayOfMonth);

    return [primerDiaFormatted,ultimoDiaFormatted];
  }

  function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  generar(true);
</script>
@endsection