@extends('layouts.master')

@section('title')
    Cálculo de nómina
@endsection

@section('css')
<style>
.nominas-module .card-title { font-size: 1rem; }
.nominas-module .form-label { font-size: 0.8rem; }
.nominas-module .form-control,
.nominas-module .form-select { font-size: 0.85rem; padding: 0.35rem 0.65rem; }
.nominas-module .btn { font-size: 0.85rem; padding: 0.35rem 0.75rem; }
.nominas-module p.text-muted { font-size: 0.85rem; }
.nominas-module h4 { font-size: 1.1rem; }
.nominas-module .table { font-size: 0.85rem; }
.calendar-nomina table { table-layout: fixed; width: 100%; }
.calendar-nomina th, .calendar-nomina td { text-align: center; padding: 0.4rem; vertical-align: middle; }
.calendar-nomina .dia-clase { background-color: rgba(94, 163, 203, 0.2); font-weight: 600; }
.calendar-nomina .quincena-1 { border-left: 3px solid #0d6efd; }
.calendar-nomina .quincena-2 { border-left: 3px solid #198754; }
.calendar-nomina td > .d-block { display: block !important; }
.calendar-nomina .horas-wrap { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.35rem; }
.calendar-nomina .horas-sufijo { font-size: 0.7rem; color: #6c757d; font-weight: 700; text-transform: lowercase; }
.calendar-nomina input.horas-dia {
    width: 2.5rem; margin: 0 auto; display: block; text-align: center; font-weight: 600;
    border: none; border-bottom: 1px solid #adb5bd; border-radius: 0; background: transparent;
    box-shadow: none; padding: 0.2rem 0;
}
.calendar-nomina input.horas-dia:focus { border-bottom-color: #1a73e8; outline: none; box-shadow: none; }
.reporte-encabezado-institucion { border-bottom: 2px solid #1a73e8; padding-bottom: 1rem; margin-bottom: 1rem; }
.reporte-encabezado-institucion .logo-escudo { width: 72px; height: 72px; }
.reporte-encabezado-institucion .nombre-institucion { color: #1a73e8; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; }
.reporte-encabezado-institucion .nombre-institucion-sub { color: #333; font-size: 0.75rem; }
.dropdown-menu .dropdown-item { padding: 0.5rem 1rem; }
@media print {
    /* Evitar visibility:hidden global porque en algunos navegadores queda "pegado" tras cerrar imprimir */
    .no-print { display: none !important; }
    #area-reporte-nomina { display: block !important; position: absolute; left: 0; top: 0; width: 100%; background: #fff; padding: 0; }
    .card { border: 1px solid #dee2e6; box-shadow: none; background: #fff !important; }
    .card-header { background: #f8f9fa !important; }
    .table th, .table td { border-color: #dee2e6 !important; }
    .table-primary th { background: #0d6efd !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .dia-clase { background: rgba(94, 163, 203, 0.25) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .reporte-encabezado-institucion { border-bottom: 2px solid #1a73e8 !important; padding-bottom: 0.75rem !important; }
    #area-reporte-nomina .card-body { padding: 0.75rem 1rem !important; }
    .btn-quitar-incidencia { display: none !important; }
    #tabla-descuentos-nomina th:last-child, #tabla-descuentos-nomina td:last-child { display: none !important; }
}
</style>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
@endsection

@section('content')
@php
    // Priorizar datos enviados desde controlador (BD), con fallback a config de ejemplo.
    $maestros = $maestros ?? config('nomina_ejemplo.maestros', []);
    $ciclos = $ciclos ?? config('nomina_ejemplo.ciclos', []);
    $horariosEjemplo = $horariosEjemplo ?? config('nomina_ejemplo.horariosEjemplo', []);
    $tarifasDocente = $tarifasDocente ?? [];
    $nivelesDocente = $nivelesDocente ?? [];
    $conceptosNomina = $conceptosNomina ?? [];
    $mesActual = $mesActual ?? (int) request('mes', 3);
    $anioActual = $anioActual ?? (int) request('anio', 2026);
    $mesesNombre = $mesesNombre ?? ['', 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
@endphp
<div class="row nominas-module">
    <div class="col-12">
        <h4 class="mb-0 text-primary fw-semibold" style="color: #020f82 !important;">Cálculo de nómina</h4>
        <hr class="my-3">

        <div class="card no-print">
            <div class="card-body">
                <p class="text-muted mb-4">
                    Selecciona el maestro o maestra y el ciclo al que imparte clase. Se mostrará el calendario del mes con las horas por día, el desglose por quincena y los descuentos por incidencias para obtener el monto total a pagar.
                </p>
                <div class="row align-items-end g-3">
                    <div class="col-md-4">
                        <label for="select-maestro" class="form-label">Maestro / Maestra</label>
                        <select class="form-select" id="select-maestro" name="maestro">
                            <option value="">-- Seleccione --</option>
                            @foreach($maestros as $m)
                                <option value="{{ $m['id'] }}">{{ $m['nombre'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="select-ciclo" class="form-label">Ciclo</label>
                        <select class="form-select" id="select-ciclo" name="ciclo" disabled>
                            <option value="">-- Seleccione maestro primero --</option>
                            @foreach($ciclos as $c)
                                <option value="{{ $c['id'] }}">{{ $c['nombre'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="select-grado" class="form-label">Grado (nivel al que imparte)</label>
                        <select class="form-select" id="select-grado" name="grado" disabled>
                            <option value="">-- Seleccione maestro primero --</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Tabulador neto por hora clase</label>
                        <div class="alert alert-info py-2 px-3 mb-0 small" id="info-concepto-nomina" role="status">
                            Seleccione un maestro y un grado para ver la tarifa por hora (según el tabulador) configurada en <strong>Conceptos de nómina</strong>.
                        </div>
                        <p class="text-muted small mb-0 mt-2">
                            La tarifa se elige por el <strong>nombre</strong> del concepto: debe incluir el <strong>nivel del docente</strong> (Licenciatura/Maestría/Doctorado) y el <strong>grado</strong> (Bachillerato/Licenciatura/Maestría/Doctorado).
                            Ejemplos: <em>Tabulador hora Licenciatura - Bachillerato</em>, <em>Tabulador hora Maestría - Licenciatura</em>, <em>Tabulador hora Doctorado - Doctorado</em>.
                        </p>
                    </div>
                    <div class="col-12 d-flex gap-2 align-items-end">
                        <button type="button" class="btn btn-primary btn-sm px-4 rounded" id="btn-ver-calendario">
                            <i class="ri-calendar-2-line align-middle me-1"></i> Ver calendario
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="area-reporte-nomina" class="d-none">
        <div class="reporte-encabezado-institucion">
            <div class="d-flex align-items-center gap-3">
                <div class="logo-escudo flex-shrink-0">
                    <img src="{{ asset('images/logo-unii.png') }}" alt="Universidad Internacional de Innovación" class="w-100 h-100" style="object-fit: contain;">
                </div>
                <div>
                    <div class="nombre-institucion-sub text-uppercase">Universidad Internacional</div>
                    <div class="nombre-institucion text-uppercase">de Innovación</div>
                </div>
            </div>
        </div>
        <div class="card mt-2 mb-0 border-0 bg-transparent">
            <div class="card-body py-2">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="mb-0" style="color: #020f82;">Recibo de nómina</h3>
                        <p class="text-muted small mb-0 mt-1" id="reporte-subtitulo">Maestro — Ciclo — Periodo</p>
                        <p class="small text-muted mb-0 mt-1"><span id="reporte-fecha-impresion"></span></p>
                    </div>
                </div>
            </div>
        </div>

        <div id="seccion-calendario" class="card mt-2">
            <div class="card-header bg-light d-flex flex-wrap align-items-center justify-content-between gap-2">
                <h5 class="card-title mb-0 text-dark">Calendario de clases</h5>
                <div class="d-flex align-items-center gap-2 no-print">
                    <label for="select-mes" class="form-label mb-0 small">Mes:</label>
                    <select class="form-select form-select-sm" id="select-mes" style="width: auto;">
                        @for($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}" {{ (int)$mesActual === $m ? 'selected' : '' }}>{{ $mesesNombre[$m] }}</option>
                        @endfor
                    </select>
                    <label for="select-quincena" class="form-label mb-0 small">Quincena:</label>
                    <select class="form-select form-select-mb" id="select-quincena" style="min-width: 8rem">
                        <option value="1" selected>1 (días 1–15)</option>
                        <option value="2">2 (días 16–fin)</option>
                    </select>
                    <label for="select-anio" class="form-label mb-0 small">Año:</label>
                    <select class="form-select form-select-mb" id="select-anio" style="min-width: 6rem;">
                        @for($a = $anioActual - 1; $a <= $anioActual + 1; $a++)
                            <option value="{{ $a }}" {{ (int)$anioActual === $a ? 'selected' : '' }}>{{ $a }}</option>
                        @endfor
                    </select>
                </div>
            </div>
            <div class="card-body calendar-nomina">
                <p class="text-muted small mb-2" id="texto-maestro-ciclo"></p>
                <div class="table-responsive">
                    <table class="table table-bordered mb-0" id="tabla-calendario">
                        <thead class="table-primary">
                            <tr>
                                <th class="text-white">Dom</th>
                                <th class="text-white">Lun</th>
                                <th class="text-white">Mar</th>
                                <th class="text-white">Mié</th>
                                <th class="text-white">Jue</th>
                                <th class="text-white">Vie</th>
                                <th class="text-white">Sáb</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-calendario"></tbody>
                    </table>
                </div>
                <p class="small text-muted mt-2 mb-0">Indique las horas de clase por día (0 = sin clase). Puede modificar cualquier día. Quincena 1: días 1–15; Quincena 2: días 16–fin de mes.</p>
            </div>
        </div>

        <div id="seccion-quincenas" class="card mt-3 d-none">
            <div class="card-header bg-light">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <h5 class="card-title mb-0 text-dark">Desglose por quincena</h5>
                    <div class="d-flex align-items-center gap-2 no-print">
                        <label for="select-desglose-quincena" class="form-label mb-0 small">Mostrar:</label>
                        <select class="form-select form-select-mb" id="select-desglose-quincena" style="min-width: 10rem">
                            <option value="all" selected>Ambas quincenas</option>
                            <option value="1">Solo quincena 1</option>
                            <option value="2">Solo quincena 2</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6" id="bloque-quincena-1">
                        <h6 class="text-primary">Primera quincena (días 1–15)</h6>
                        <ul class="list-unstyled small" id="lista-quincena-1"></ul>
                        <p class="mb-0"><strong>Total horas Q1:</strong> <span id="total-horas-q1">0</span></p>
                        <p class="mb-0"><strong>Sueldo Q1:</strong> $<span id="sueldo-q1">0.00</span></p>
                    </div>
                    <div class="col-md-6" id="bloque-quincena-2">
                        <h6 class="text-success">Segunda quincena (días 16–fin)</h6>
                        <ul class="list-unstyled small" id="lista-quincena-2"></ul>
                        <p class="mb-0"><strong>Total horas Q2:</strong> <span id="total-horas-q2">0</span></p>
                        <p class="mb-0"><strong>Sueldo Q2:</strong> $<span id="sueldo-q2">0.00</span></p>
                    </div>
                </div>
                <hr>
                <p class="mb-0"><strong id="label-total-horas-vista">Total horas en el mes:</strong> <span id="total-horas-mes">0</span></p>
                <p class="mb-0"><strong id="label-sueldo-vista">Sueldo bruto del mes:</strong> $<span id="sueldo-mes">0.00</span></p>
                <p class="small text-muted mb-0 mt-1 d-none" id="nota-desglose-parcial">El resumen de abajo se calcula con la quincena seleccionada.</p>
            </div>
        </div>

        <div id="seccion-descuentos" class="card mt-3 d-none">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0 text-dark">Descuentos por incidencias</h5>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">Registre las incidencias a mano: fecha, concepto, si aplica por hora o por día, y monto. Los descuentos se restan del salario bruto.</p>
                <div class="row g-2 mb-3 no-print">
                    <div class="col-md-2">
                        <label class="form-label small mb-0">Fecha</label>
                        <input type="date" class="form-control form-control-sm" id="incidencia-fecha">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small mb-0">Concepto</label>
                        <input type="text" class="form-control form-control-sm" id="incidencia-concepto" placeholder="Ej. Falta, Retardo">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small mb-0">Aplica</label>
                        <select class="form-select form-select-sm" id="incidencia-aplica">
                            <option value="Por hora">Por hora</option>
                            <option value="Por día">Por día</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small mb-0">Monto ($)</label>
                        <input type="number" class="form-control form-control-sm" id="incidencia-monto" min="0" step="0.01" placeholder="0.00">
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" class="btn btn-primary btn-sm w-100" id="btn-agregar-incidencia">
                            <i class="ri-add-line align-middle me-1"></i> Agregar
                        </button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-striped align-middle mb-0" id="tabla-descuentos-nomina">
                        <thead class="table-light">
                            <tr>
                                <th>Fecha</th>
                                <th>Concepto</th>
                                <th>Aplica</th>
                                <th class="text-end">Monto</th>
                                <th class="no-print text-center" style="width: 2rem;"> </th>
                            </tr>
                        </thead>
                        <tbody id="tbody-descuentos-nomina">
                            <tr id="descuentos-empty-row"><td colspan="5" class="text-muted text-center py-3">No hay descuentos. Agregue incidencias arriba.</td></tr>
                        </tbody>
                    </table>
                </div>
                <p class="mb-0 mt-2"><strong>Total descuentos:</strong> $<span id="total-descuentos">0.00</span></p>
            </div>
        </div>

        <div id="seccion-total" class="card mt-3">
            <div class="card-body bg-primary bg-opacity-10 border border-primary">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <p class="mb-1 text-muted small">Sueldo bruto (horas × tarifa) − descuentos</p>
                        <p class="mb-1"><strong>Salario normal sin incidencias:</strong> $<span id="salario-sin-incidencias">0.00</span></p>
                        <p class="mb-2"><strong>Salario con incidencias aplicadas:</strong> $<span id="monto-total">0.00</span></p>
                        <h4 class="mb-0 text-primary" style="color: #020f82 !important;">Monto total a pagar: $<span id="monto-total-display">0.00</span></h4>
                    </div>
                    <div class="col-md-4 text-md-end no-print">
                        <div class="dropdown">
                            <button type="button" class="btn btn-success btn-sm px-4 rounded dropdown-toggle" id="btn-generar-recibo" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="ri-file-text-line align-middle me-1"></i> Generar recibo
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="btn-generar-recibo">
                                <li><button type="button" class="dropdown-item" id="btn-imprimir-nomina"><i class="ri-printer-line me-2"></i> Imprimir</button></li>
                                <li><button type="button" class="dropdown-item" id="btn-pdf-nomina"><i class="ri-file-pdf-line me-2"></i> PDF</button></li>
                                <li><button type="button" class="dropdown-item" id="btn-excel-nomina"><i class="ri-file-excel-2-line me-2"></i> Excel</button></li>
                            </ul>
                        </div>
                        <div class="mt-2">
                            <button type="button" class="btn btn-warning btn-sm px-4 rounded" id="btn-excel-masivo-zip">
                                <i class="ri-download-line align-middle me-1"></i> Excel masivo (Resumen)
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

<script>
(function() {
    var horariosEjemplo = @json($horariosEjemplo);
    var tarifasDocente = @json($tarifasDocente);
    var conceptosNomina = @json($conceptosNomina ?? []);
    var nivelesDocente = @json($nivelesDocente);
    var csrfToken = @json(csrf_token());
    var tarifaPorHora = 120;
    var gradoActual = '';
    var incidencias = [];
    var currentAnio = 2026, currentMes = 3;
    var currentQuincena = 1;
    var horasMapState = {}; // dia -> horas (persistente aunque se oculte la quincena)

    function actualizarTarifaPorDocente(docenteId) {
        var id = String(docenteId || '');
        var t = parseFloat(tarifasDocente[id]);
        tarifaPorHora = isNaN(t) ? 120 : t;
    }

    function tipoPagoTextoCalc(val) {
        var map = { hora: 'Por hora', dia: 'Por día', semana: 'Por semana', quincena: 'Quincena', mensual: 'Mensual' };
        return map[val] || val;
    }

    /** Detecta nivel solo por el nombre del concepto (sin campos extra en BD). */
    function inferirNivelDesdeNombreConcepto(nombre) {
        var n = String(nombre || '').toLowerCase();
        try {
            n = n.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
        } catch (e) {}
        if (n.indexOf('doctor') !== -1) return 'doctorado';
        if (n.indexOf('maestr') !== -1 || n.indexOf('mestr') !== -1) return 'maestria';
        if (n.indexOf('licenc') !== -1) return 'licenciatura';
        return null;
    }

    /** Detecta grado (nivel al que imparte) por el nombre del concepto. */
    function inferirGradoDesdeNombreConcepto(nombre) {
        var n = String(nombre || '').toLowerCase();
        try {
            n = n.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
        } catch (e) {}
        if (n.indexOf('bachiller') !== -1) return 'bachillerato';
        if (n.indexOf('doctor') !== -1) return 'doctorado';
        if (n.indexOf('maestr') !== -1 || n.indexOf('mestr') !== -1) return 'maestria';
        if (n.indexOf('licenc') !== -1) return 'licenciatura';
        return null;
    }

    function nombreGrado(gr) {
        var map = { bachillerato: 'Bachillerato', licenciatura: 'Licenciatura', maestria: 'Maestría', doctorado: 'Doctorado' };
        return map[String(gr || '')] || String(gr || '');
    }

    function nivelDocenteDisplay(nv) {
        var map = { licenciatura: 'Licenciatura', ingenieria: 'Ingeniería', maestria: 'Maestría', doctorado: 'Doctorado' };
        return map[String(nv || '')] || String(nv || '');
    }

    function gradosPermitidosPorNivel(nivel) {
        if (nivel === 'doctorado') return ['bachillerato', 'licenciatura', 'maestria', 'doctorado'];
        if (nivel === 'maestria') return ['bachillerato', 'licenciatura', 'maestria'];
        if (nivel === 'ingenieria') return ['bachillerato', 'licenciatura'];
        if (nivel === 'licenciatura') return ['bachillerato', 'licenciatura'];
        return [];
    }

    function findConceptoTabulador(nivel, grado) {
        var nv = String(nivel || '');
        var gr = String(grado || '');
        if (!nv || !gr) return null;

        // Preferir nuevas columnas (si existen en el JSON).
        var cand = conceptosNomina.filter(function(c) {
            if (String(c.tipo_pago) !== 'hora') return false;
            if (c.es_tabulador) {
                return String(c.nivel_docente || '') === nv && String(c.grado_imparte || '') === gr;
            }
            // Fallback: por nombre (retrocompatibilidad)
            return inferirNivelDesdeNombreConcepto(c.nombre) === nv && inferirGradoDesdeNombreConcepto(c.nombre) === gr;
        });

        return cand.length ? cand[0] : null;
    }

    function findConceptoPorNivel(maestroId) {
        var mid = String(maestroId || '').trim();
        if (!mid) return null;
        var nivel = nivelesDocente[mid];
        if (!nivel) return null;
        var cand = conceptosNomina.filter(function(c) {
            return inferirNivelDesdeNombreConcepto(c.nombre) === nivel;
        });
        if (!cand.length) return null;
        var prio = { quincena: 1, mensual: 2, semana: 3, dia: 4, hora: 5 };
        cand.sort(function(a, b) {
            var pa = prio[a.tipo_pago] || 99;
            var pb = prio[b.tipo_pago] || 99;
            if (pa !== pb) return pa - pb;
            return a.id - b.id;
        });
        return cand[0];
    }

    function actualizarEtiquetaConcepto() {
        var el = document.getElementById('info-concepto-nomina');
        if (!el) return;
        var mid = document.getElementById('select-maestro').value;
        if (!mid) {
            el.textContent = 'Seleccione un maestro para ver la tarifa por hora según el tabulador.';
            return;
        }
        var nv = nivelesDocente[String(mid)];
        var gr = (document.getElementById('select-grado') && document.getElementById('select-grado').value) ? document.getElementById('select-grado').value : '';
        var c = nv && gr ? findConceptoTabulador(nv, gr) : null;
        if (!nv) {
            el.textContent = 'Este maestro no tiene nivel reconocido (use Licenciatura, Maestría o Doctorado en el registro). Se usará tarifa por defecto.';
            return;
        }
        if (!gr) {
            el.textContent = 'Nivel del docente: ' + nivelDocenteDisplay(nv) + '. Seleccione un grado para ver la tarifa por hora.';
            return;
        }
        if (!c) {
            el.textContent = 'Nivel del docente: ' + nivelDocenteDisplay(nv) + ' — Grado: ' + nombreGrado(gr) + '. No hay concepto de tabulador por hora configurado para esta combinación. Se usa tarifa por defecto.';
            return;
        }
        el.textContent = 'Tabulador aplicado: «' + c.nombre + '» — $' + parseFloat(c.monto).toFixed(2) + ' (Por hora).';
    }

    /** Tarifa auxiliar para sugerir incidencias cuando el pago es fijo (quincena/mensual). */
    function aplicarTarifaParaIncidencias(maestroId, concepto) {
        var tipo = concepto ? String(concepto.tipo_pago) : '';
        var m = concepto ? (parseFloat(concepto.monto) || 0) : 0;
        if (concepto && tipo === 'hora') {
            tarifaPorHora = m > 0 ? m : 120;
            return;
        }
        if (concepto && ['quincena', 'mensual', 'semana', 'dia'].indexOf(tipo) !== -1) {
            tarifaPorHora = Math.max(1, m / 45);
            return;
        }
        actualizarTarifaPorDocente(maestroId);
    }

    function actualizarSelectGrado() {
        var sel = document.getElementById('select-grado');
        var mid = document.getElementById('select-maestro').value;
        if (!sel) return;
        if (!mid) {
            sel.disabled = true;
            sel.innerHTML = '<option value=\"\">-- Seleccione maestro primero --</option>';
            gradoActual = '';
            return;
        }
        var nv = nivelesDocente[String(mid)];
        var permitidos = gradosPermitidosPorNivel(nv);
        sel.disabled = !permitidos.length;
        sel.innerHTML = '<option value=\"\">-- Seleccione --</option>';
        permitidos.forEach(function(g) {
            var opt = document.createElement('option');
            opt.value = g;
            opt.textContent = nombreGrado(g);
            sel.appendChild(opt);
        });
        // Auto-seleccionar el primer grado permitido para dejar tarifa lista.
        if (permitidos.length) {
            sel.value = permitidos[0];
            gradoActual = permitidos[0];
        } else {
            gradoActual = '';
        }
    }

    function actualizarTarifaDesdeTabulador() {
        var mid = document.getElementById('select-maestro').value;
        var sel = document.getElementById('select-grado');
        var gr = sel ? sel.value : '';
        gradoActual = gr || '';
        var nv = nivelesDocente[String(mid)];
        var c = nv && gr ? findConceptoTabulador(nv, gr) : null;
        if (c) {
            tarifaPorHora = Math.max(1, parseFloat(c.monto) || 0);
            return;
        }
        // Fallback: intentar concepto por nivel (si existe) o tarifa interna.
        var cNivel = findConceptoPorNivel(mid);
        aplicarTarifaParaIncidencias(mid, cNivel);
    }

    function recalcularMontosSiVisible() {
        if (document.getElementById('area-reporte-nomina').classList.contains('d-none')) return;
        var res = calcularQuincenasDesdeMapa(currentAnio, currentMes, getHorasDesdeCalendario());
        var totalDesc = parseFloat(document.getElementById('total-descuentos').textContent) || 0;
        actualizarMontoTotal(res.brutoVista, totalDesc);
    }

    function getModoDesgloseQuincena() {
        var sel = document.getElementById('select-desglose-quincena');
        return sel ? sel.value : 'all';
    }

    function getHorario(maestroId, cicloId) {
        var key = maestroId + '_' + cicloId;
        return horariosEjemplo[key] || { 1: 2, 3: 1 };
    }

    function getHorasDesdeCalendario() {
        // devolvemos el estado completo (todas las quincenas)
        return Object.assign({}, horasMapState);
    }

    function buildCalendar(anio, mes, horario, quincena) {
        currentAnio = anio;
        currentMes = mes;
        currentQuincena = parseInt(quincena || currentQuincena || 1, 10) || 1;
        var startDay = (currentQuincena === 2) ? 16 : 1;
        var daysInMonth = new Date(anio, mes, 0).getDate();
        var endDay = (currentQuincena === 2) ? daysInMonth : 15;
        var first = new Date(anio, mes - 1, startDay);
        var startDow = first.getDay();
        var tbody = document.getElementById('tbody-calendario');
        tbody.innerHTML = '';
        var row = document.createElement('tr');
        for (var i = 0; i < startDow; i++) {
            var cell = document.createElement('td');
            row.appendChild(cell);
        }
        for (var d = startDay; d <= endDay; d++) {
            var dayOfWeek = new Date(anio, mes - 1, d).getDay();
            var horasInicial = (typeof horasMapState[d] !== 'undefined') ? horasMapState[d] : (horario[dayOfWeek] || 0);
            horasMapState[d] = horasInicial;
            var cell = document.createElement('td');
            cell.className = 'align-middle';
            if (d <= 15) cell.classList.add('quincena-1'); else cell.classList.add('quincena-2');
            var inp = document.createElement('input');
            inp.type = 'number';
            inp.min = 0;
            inp.max = 12;
            inp.step = 0.5;
            inp.value = horasInicial;
            inp.className = 'form-control form-control-sm horas-dia';
            inp.setAttribute('data-dia', d);
            inp.addEventListener('input', function() {
                var dia = parseInt(this.getAttribute('data-dia'), 10);
                horasMapState[dia] = parseFloat(this.value) || 0;
                recalcularDesdeCalendario();
            });
            inp.addEventListener('focus', function() { this.select(); });
            cell.innerHTML = '<span class="d-block small mb-1">' + d + '</span>';
            var wrap = document.createElement('div');
            wrap.className = 'horas-wrap';
            wrap.appendChild(inp);
            var suf = document.createElement('span');
            suf.className = 'horas-sufijo';
            suf.textContent = 'hrs';
            wrap.appendChild(suf);
            cell.appendChild(wrap);
            if (horasInicial > 0) cell.classList.add('dia-clase');
            row.appendChild(cell);
            if (row.children.length === 7) {
                tbody.appendChild(row);
                row = document.createElement('tr');
            }
        }
        if (row.children.length > 0) {
            while (row.children.length < 7) {
                row.appendChild(document.createElement('td'));
            }
            tbody.appendChild(row);
        }
    }

    function recalcularDesdeCalendario() {
        var anio = currentAnio, mes = currentMes;
        var horasMap = getHorasDesdeCalendario();
        document.querySelectorAll('#tbody-calendario td').forEach(function(td) {
            var inp = td.querySelector('input.horas-dia');
            if (inp) {
                var h = parseFloat(inp.value) || 0;
                td.classList.toggle('dia-clase', h > 0);
            }
        });
        var res = calcularQuincenasDesdeMapa(anio, mes, horasMap);
        var totalDescuentos = actualizarTotalDescuentos();
        actualizarMontoTotal(res.brutoVista, totalDescuentos);
    }

    function calcularQuincenasDesdeMapa(anio, mes, horasMap) {
        var maestroId = document.getElementById('select-maestro').value;
        var gradoSel = document.getElementById('select-grado') ? document.getElementById('select-grado').value : '';
        var nvDoc = nivelesDocente[String(maestroId || '')];
        var conceptoTab = (nvDoc && gradoSel) ? findConceptoTabulador(nvDoc, gradoSel) : null;
        var conceptoNivel = findConceptoPorNivel(maestroId);

        // Prioridad: tabulador por grado (por hora) -> concepto por nivel -> tarifa interna.
        var concepto = conceptoTab || conceptoNivel;
        var tipo = concepto ? String(concepto.tipo_pago) : '';
        var montoC = concepto ? (parseFloat(concepto.monto) || 0) : 0;

        if (conceptoTab) {
            tarifaPorHora = Math.max(1, montoC || 0);
        } else {
            aplicarTarifaParaIncidencias(maestroId, conceptoNivel);
        }

        var q1 = [], q2 = [], h1 = 0, h2 = 0;
        var diasNombre = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
        var daysInMonth = new Date(anio, mes, 0).getDate();
        for (var d = 1; d <= 15; d++) {
            var horas = parseFloat(horasMap[d]) || 0;
            if (horas > 0) {
                var dow = new Date(anio, mes - 1, d).getDay();
                q1.push('Día ' + d + ' (' + diasNombre[dow] + '): ' + horas + ' h');
                h1 += horas;
            }
        }
        for (var d = 16; d <= daysInMonth; d++) {
            var horas = parseFloat(horasMap[d]) || 0;
            if (horas > 0) {
                var dow = new Date(anio, mes - 1, d).getDay();
                q2.push('Día ' + d + ' (' + diasNombre[dow] + '): ' + horas + ' h');
                h2 += horas;
            }
        }
        var l1 = document.getElementById('lista-quincena-1');
        var l2 = document.getElementById('lista-quincena-2');
        l1.innerHTML = q1.length ? q1.map(function(x) { return '<li>' + x + '</li>'; }).join('') : '<li class="text-muted">Sin clases en esta quincena</li>';
        l2.innerHTML = q2.length ? q2.map(function(x) { return '<li>' + x + '</li>'; }).join('') : '<li class="text-muted">Sin clases en esta quincena</li>';
        document.getElementById('total-horas-q1').textContent = h1;
        document.getElementById('total-horas-q2').textContent = h2;

        var sueldoQ1, sueldoQ2;
        if (concepto && tipo === 'quincena') {
            sueldoQ1 = montoC;
            sueldoQ2 = montoC;
        } else if (concepto && tipo === 'mensual') {
            sueldoQ1 = montoC / 2;
            sueldoQ2 = montoC / 2;
        } else if (concepto && (tipo === 'semana' || tipo === 'dia')) {
            sueldoQ1 = montoC / 2;
            sueldoQ2 = montoC / 2;
        } else if (concepto && tipo === 'hora') {
            sueldoQ1 = h1 * montoC;
            sueldoQ2 = h2 * montoC;
        } else {
            sueldoQ1 = h1 * tarifaPorHora;
            sueldoQ2 = h2 * tarifaPorHora;
        }

        var elS1 = document.getElementById('sueldo-q1');
        var elS2 = document.getElementById('sueldo-q2');
        if (elS1) elS1.textContent = sueldoQ1.toFixed(2);
        if (elS2) elS2.textContent = sueldoQ2.toFixed(2);

        var modo = getModoDesgloseQuincena();
        var totalVistaHoras = 0;
        var sueldoVista = 0;
        var labelHoras = 'Total horas en el mes:';
        var labelSueldo = 'Sueldo bruto del mes:';

        if (modo === '1') {
            totalVistaHoras = h1;
            sueldoVista = sueldoQ1;
            labelHoras = 'Total horas en quincena 1:';
            labelSueldo = 'Sueldo bruto de quincena 1:';
        } else if (modo === '2') {
            totalVistaHoras = h2;
            sueldoVista = sueldoQ2;
            labelHoras = 'Total horas en quincena 2:';
            labelSueldo = 'Sueldo bruto de quincena 2:';
        } else {
            totalVistaHoras = h1 + h2;
            sueldoVista = sueldoQ1 + sueldoQ2;
            labelHoras = 'Total horas en el mes:';
            labelSueldo = 'Sueldo bruto del mes:';
        }

        var elLabelHoras = document.getElementById('label-total-horas-vista');
        if (elLabelHoras) elLabelHoras.textContent = labelHoras;

        var elLabelSueldo = document.getElementById('label-sueldo-vista');
        if (elLabelSueldo) elLabelSueldo.textContent = labelSueldo;

        var elSM = document.getElementById('sueldo-mes');
        if (elSM) elSM.textContent = sueldoVista.toFixed(2);

        document.getElementById('total-horas-mes').textContent = totalVistaHoras;
        return { totalVistaHoras: totalVistaHoras, brutoVista: sueldoVista };
    }

    function actualizarQuincenas(anio, mes, horario) {
        var horasMap = {};
        var daysInMonth = new Date(anio, mes, 0).getDate();
        for (var d = 1; d <= daysInMonth; d++) {
            var dow = new Date(anio, mes - 1, d).getDay();
            horasMap[d] = horario[dow] || 0;
        }
        return calcularQuincenasDesdeMapa(anio, mes, horasMap);
    }

    function renderDescuentosTable() {
        var tbody = document.getElementById('tbody-descuentos-nomina');
        if (incidencias.length === 0) {
            tbody.innerHTML = '<tr id="descuentos-empty-row"><td colspan="5" class="text-muted text-center py-3">No hay descuentos. Agregue incidencias arriba.</td></tr>';
            return;
        }
        tbody.innerHTML = incidencias.map(function(inc, idx) {
            return '<tr data-idx="' + idx + '"><td>' + inc.fecha + '</td><td>' + (inc.concepto || '') + '</td><td>' + (inc.aplica || '') + '</td><td class="text-end">$' + (parseFloat(inc.monto) || 0).toFixed(2) + '</td><td class="no-print text-center"><button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 btn-quitar-incidencia" data-idx="' + idx + '" title="Quitar"><i class="ri-close-line"></i></button></td></tr>';
        }).join('');
        tbody.querySelectorAll('.btn-quitar-incidencia').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var idx = parseInt(this.getAttribute('data-idx'), 10);
                var inc = incidencias[idx];
                var borrarLocal = function() {
                    incidencias.splice(idx, 1);
                    renderDescuentosTable();
                    recalcularDesdeCalendario();
                };
                if (inc && inc.id) {
                    fetch('{{ route("nominas.incidencias-docente.delete", ["id" => "__ID__"]) }}'.replace('__ID__', encodeURIComponent(inc.id)), {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    }).then(function() {
                        borrarLocal();
                    }).catch(function() {
                        borrarLocal();
                    });
                } else {
                    borrarLocal();
                }
            });
        });
    }

    function actualizarTotalDescuentos() {
        var total = incidencias.reduce(function(s, inc) { return s + (parseFloat(inc.monto) || 0); }, 0);
        document.getElementById('total-descuentos').textContent = total.toFixed(2);
        return total;
    }

    function estimarMontoIncidencia(fecha, aplica) {
        if (!fecha) return 0;
        var d = new Date(fecha + 'T00:00:00');
        if (isNaN(d.getTime())) return 0;
        var day = d.getDate();
        var horasMap = getHorasDesdeCalendario();
        var horasDia = parseFloat(horasMap[day]) || 0;
        // Siempre tomar como base las horas del día seleccionado en el calendario.
        // Si el día marca 2 horas y la tarifa es 300, sugerirá 600.
        var horasAplicadas = horasDia > 0 ? horasDia : 1;
        return horasAplicadas * tarifaPorHora;
    }

    function sugerirMontoIncidencia() {
        var fecha = (document.getElementById('incidencia-fecha').value || '').trim();
        var aplica = document.getElementById('incidencia-aplica').value;
        var montoInput = document.getElementById('incidencia-monto');
        if (!montoInput) return;
        var sugerido = estimarMontoIncidencia(fecha, aplica);
        // Mantener editable: solo autocompleta cuando está vacío o cero.
        var actual = parseFloat(montoInput.value);
        if (montoInput.value.trim() === '' || isNaN(actual) || actual === 0) {
            montoInput.value = sugerido > 0 ? sugerido.toFixed(2) : '';
        }
    }

    function actualizarMontoTotal(brutoSinIncidencias, totalDescuentos) {
        var bruto = parseFloat(brutoSinIncidencias) || 0;
        var neto = Math.max(0, bruto - totalDescuentos);
        document.getElementById('salario-sin-incidencias').textContent = bruto.toFixed(2);
        document.getElementById('monto-total').textContent = neto.toFixed(2);
        document.getElementById('monto-total-display').textContent = neto.toFixed(2);
    }

    document.getElementById('select-maestro').addEventListener('change', function() {
        var cicloSelect = document.getElementById('select-ciclo');
        cicloSelect.disabled = !this.value;
        if (!this.value) cicloSelect.value = '';
        actualizarSelectGrado();
        actualizarTarifaDesdeTabulador();
        actualizarEtiquetaConcepto();
        // Si el reporte ya está visible, reconstruir calendario con el nuevo maestro.
        // (Evita que se quede el calendario del maestro anterior.)
        if (!document.getElementById('area-reporte-nomina').classList.contains('d-none')) {
            var maestroId = document.getElementById('select-maestro').value;
            var cicloId = document.getElementById('select-ciclo').value;
            var gradoSel = document.getElementById('select-grado') ? document.getElementById('select-grado').value : '';
            if (maestroId && cicloId && gradoSel) {
                // Reset de estado (horas e incidencias) al cambiar maestro
                horasMapState = {};
                incidencias = [];
                renderDescuentosTable();
                actualizarTotalDescuentos();

                var horario = getHorario(maestroId, cicloId);
                var mes = parseInt(document.getElementById('select-mes').value, 10);
                var anio = parseInt(document.getElementById('select-anio').value, 10);
                var q = parseInt(document.getElementById('select-quincena').value, 10) || 1;

                var maestroNombre = document.getElementById('select-maestro').options[document.getElementById('select-maestro').selectedIndex].text;
                var cicloNombre = document.getElementById('select-ciclo').options[document.getElementById('select-ciclo').selectedIndex].text;
                var gradoTxt = gradoSel ? (' — Grado: ' + nombreGrado(gradoSel)) : '';
                document.getElementById('texto-maestro-ciclo').textContent = 'Maestro: ' + maestroNombre + ' — Ciclo: ' + cicloNombre + gradoTxt;
                var mesNombre = document.getElementById('select-mes').options[document.getElementById('select-mes').selectedIndex].text;
                var subtGr = gradoSel ? (' — ' + nombreGrado(gradoSel)) : '';
                document.getElementById('reporte-subtitulo').textContent = maestroNombre + ' — ' + cicloNombre + subtGr + ' — ' + mesNombre + ' ' + anio;

                buildCalendar(anio, mes, horario, q);
                recalcularDesdeCalendario();
                actualizarVistaDesgloseQuincena();
            } else {
                // Si falta ciclo o grado, solo recalcular montos visibles
                recalcularMontosSiVisible();
            }
        } else {
            recalcularMontosSiVisible();
        }
    });

    var selGrado = document.getElementById('select-grado');
    if (selGrado) {
        selGrado.addEventListener('change', function() {
            actualizarTarifaDesdeTabulador();
            actualizarEtiquetaConcepto();
            recalcularMontosSiVisible();
        });
    }

    document.getElementById('btn-ver-calendario').addEventListener('click', function() {
        var maestroId = document.getElementById('select-maestro').value;
        var cicloId = document.getElementById('select-ciclo').value;
        var gradoSel = document.getElementById('select-grado') ? document.getElementById('select-grado').value : '';
        if (!maestroId || !cicloId || !gradoSel) return;
        var maestroNombre = document.getElementById('select-maestro').options[document.getElementById('select-maestro').selectedIndex].text;
        var cicloNombre = document.getElementById('select-ciclo').options[document.getElementById('select-ciclo').selectedIndex].text;
        var gradoTxt = gradoSel ? (' — Grado: ' + nombreGrado(gradoSel)) : '';
        document.getElementById('texto-maestro-ciclo').textContent = 'Maestro: ' + maestroNombre + ' — Ciclo: ' + cicloNombre + gradoTxt;
        actualizarTarifaDesdeTabulador();
        actualizarEtiquetaConcepto();
        var horario = getHorario(maestroId, cicloId);
        var mes = parseInt(document.getElementById('select-mes').value, 10);
        var anio = parseInt(document.getElementById('select-anio').value, 10);
        document.getElementById('area-reporte-nomina').classList.remove('d-none');
        document.getElementById('seccion-calendario').classList.remove('d-none');
        document.getElementById('seccion-quincenas').classList.remove('d-none');
        document.getElementById('seccion-descuentos').classList.remove('d-none');
        document.getElementById('seccion-total').classList.remove('d-none');
        var mesNombre = document.getElementById('select-mes').options[document.getElementById('select-mes').selectedIndex].text;
        var subtGr = gradoSel ? (' — ' + nombreGrado(gradoSel)) : '';
        document.getElementById('reporte-subtitulo').textContent = maestroNombre + ' — ' + cicloNombre + subtGr + ' — ' + mesNombre + ' ' + anio;
        document.getElementById('reporte-fecha-impresion').textContent = 'Documento generado: ' + new Date().toLocaleString('es-MX', { dateStyle: 'long', timeStyle: 'short' });
        incidencias = [];
        var q = parseInt(document.getElementById('select-quincena').value, 10) || 1;
        buildCalendar(anio, mes, horario, q);
        var resCalc = calcularQuincenasDesdeMapa(anio, mes, getHorasDesdeCalendario());
        renderDescuentosTable();
        var totalDescuentos = actualizarTotalDescuentos();
        actualizarMontoTotal(resCalc.brutoVista, totalDescuentos);
        actualizarVistaDesgloseQuincena();
    });

    document.getElementById('select-mes').addEventListener('change', function() {
        if (document.getElementById('area-reporte-nomina').classList.contains('d-none')) return;
        var maestroId = document.getElementById('select-maestro').value;
        var cicloId = document.getElementById('select-ciclo').value;
        var horario = getHorario(maestroId, cicloId);
        var mes = parseInt(document.getElementById('select-mes').value, 10);
        var anio = parseInt(document.getElementById('select-anio').value, 10);
        var q = parseInt(document.getElementById('select-quincena').value, 10) || 1;
        buildCalendar(anio, mes, horario, q);
        var resMes = calcularQuincenasDesdeMapa(anio, mes, getHorasDesdeCalendario());
        var totalDescuentos = parseFloat(document.getElementById('total-descuentos').textContent) || 0;
        actualizarMontoTotal(resMes.brutoVista, totalDescuentos);
    });
    document.getElementById('select-anio').addEventListener('change', document.getElementById('select-mes').onchange);

    document.getElementById('select-quincena').addEventListener('change', function() {
        if (document.getElementById('area-reporte-nomina').classList.contains('d-none')) return;
        var maestroId = document.getElementById('select-maestro').value;
        var cicloId = document.getElementById('select-ciclo').value;
        var horario = getHorario(maestroId, cicloId);
        var mes = parseInt(document.getElementById('select-mes').value, 10);
        var anio = parseInt(document.getElementById('select-anio').value, 10);
        var q = parseInt(this.value, 10) || 1;
        buildCalendar(anio, mes, horario, q);
        var resQ = calcularQuincenasDesdeMapa(anio, mes, getHorasDesdeCalendario());
        var totalDescuentos = parseFloat(document.getElementById('total-descuentos').textContent) || 0;
        actualizarMontoTotal(resQ.brutoVista, totalDescuentos);
    });

    function actualizarVistaDesgloseQuincena() {
        var sel = document.getElementById('select-desglose-quincena');
        if (!sel) return;
        var val = sel.value;
        var b1 = document.getElementById('bloque-quincena-1');
        var b2 = document.getElementById('bloque-quincena-2');
        var nota = document.getElementById('nota-desglose-parcial');
        if (!b1 || !b2) return;
        if (val === '1') {
            b1.style.display = '';
            b2.style.display = 'none';
            if (nota) nota.classList.remove('d-none');
        } else if (val === '2') {
            b1.style.display = 'none';
            b2.style.display = '';
            if (nota) nota.classList.remove('d-none');
        } else {
            b1.style.display = '';
            b2.style.display = '';
            if (nota) nota.classList.add('d-none');
        }

        // Actualizar resumen (salario y total) según la quincena mostrada
        var resDes = calcularQuincenasDesdeMapa(currentAnio, currentMes, getHorasDesdeCalendario());
        var totalDescuentos = actualizarTotalDescuentos();
        actualizarMontoTotal(resDes.brutoVista, totalDescuentos);
    }

    var selDesglose = document.getElementById('select-desglose-quincena');
    if (selDesglose) {
        selDesglose.addEventListener('change', actualizarVistaDesgloseQuincena);
    }

    document.getElementById('btn-agregar-incidencia').addEventListener('click', function() {
        var fecha = document.getElementById('incidencia-fecha').value;
        var concepto = document.getElementById('incidencia-concepto').value.trim();
        var aplica = document.getElementById('incidencia-aplica').value;
        var montoInput = document.getElementById('incidencia-monto');
        var monto = montoInput.value;
        if (!fecha || !concepto) return;

        if (monto === '' || isNaN(parseFloat(monto))) {
            var sug = estimarMontoIncidencia(fecha, aplica);
            if (sug > 0) {
                monto = sug.toFixed(2);
                montoInput.value = monto;
            }
        }
        if (monto === '' || parseFloat(monto) < 0) return;

        var fechaObj = new Date(fecha + 'T00:00:00');
        var dia = fechaObj.getDate();
        var horasMap = getHorasDesdeCalendario();
        var horasDiaAntes = parseFloat(horasMap[dia]) || 0;

        var maestroId = parseInt(document.getElementById('select-maestro').value || '0', 10);
        var cicloId = (document.getElementById('select-ciclo').value || '').trim();
        var anio = parseInt(document.getElementById('select-anio').value || '0', 10);
        var mes = parseInt(document.getElementById('select-mes').value || '0', 10);
        if (!maestroId || !cicloId || !anio || !mes) {
            alert('Selecciona maestro, ciclo, mes y año antes de registrar incidencia.');
            return;
        }

        // Al agregar la incidencia, el día queda en 0 hrs en calendario.
        var inputDia = document.querySelector('#tbody-calendario input.horas-dia[data-dia="' + dia + '"]');
        if (inputDia) {
            inputDia.value = '0';
            horasMapState[dia] = 0;
        }

        var payload = {
            docente_id: maestroId,
            ciclo_id: cicloId,
            fecha: fecha,
            concepto: concepto,
            aplica: aplica,
            monto: parseFloat(monto) || 0,
            horas_descontadas: horasDiaAntes,
            tarifa_hora: tarifaPorHora,
            anio: anio,
            mes: mes
        };

        var guardarYRefrescar = function(dbId) {
            incidencias.push({
                id: dbId || null,
                fecha: fecha,
                concepto: concepto,
                aplica: aplica,
                monto: parseFloat(monto) || 0
            });
            document.getElementById('incidencia-concepto').value = '';
            document.getElementById('incidencia-monto').value = '';
            renderDescuentosTable();
            recalcularDesdeCalendario();
        };

        fetch('{{ route("nominas.incidencias-docente.store") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: JSON.stringify(payload)
        })
        .then(function(r) {
            if (!r.ok) return r.text().then(function(t) { throw new Error(t || 'Error al guardar incidencia'); });
            return r.json();
        })
        .then(function(resp) {
            guardarYRefrescar(resp && resp.id ? resp.id : null);
        })
        .catch(function(err) {
            console.error(err);
            alert(err && err.message ? err.message : 'No se pudo guardar la incidencia en BD. Revisa el servidor y vuelve a intentar.');
        });
    });

    document.getElementById('incidencia-fecha').addEventListener('change', sugerirMontoIncidencia);
    document.getElementById('incidencia-aplica').addEventListener('change', sugerirMontoIncidencia);

    function actualizarFechaImpresion() {
        var el = document.getElementById('reporte-fecha-impresion');
        if (el) el.textContent = 'Documento generado: ' + new Date().toLocaleString('es-MX', { dateStyle: 'long', timeStyle: 'short' });
    }

    function abrirVentanaImpresion(tituloDoc) {
        var reporte = document.getElementById('area-reporte-nomina');
        if (!reporte) return null;

        // Clonamos el reporte para no afectar el DOM principal.
        var clone = reporte.cloneNode(true);
        clone.classList.remove('d-none');
        clone.style.display = 'block';
        // En la ventana nueva, cualquier d-none interna puede dejar secciones ocultas.
        clone.querySelectorAll('.d-none').forEach(function(el) { el.classList.remove('d-none'); });

        // Tomar solo hojas de estilo (sin scripts) para evitar efectos colaterales.
        var estilos = '';
        document.querySelectorAll('link[rel="stylesheet"], style').forEach(function(el) {
            estilos += el.outerHTML;
        });

        var w = window.open('', '_blank');
        if (!w) return null;

        var bodyHtml = clone.outerHTML;
        w.document.open();
        w.document.write(
            '<!doctype html><html><head><meta charset="utf-8"><title>' + (tituloDoc || 'Recibo') + '</title>' +
            estilos +
            '<style>#area-reporte-nomina{display:block !important;position:static !important;left:auto !important;top:auto !important;width:100% !important;visibility:visible !important;} body{margin:0;padding:12px;background:#fff;} .d-none{display:block !important;} @page{margin:10mm;}</style>' +
            '</head><body>' + bodyHtml + '</body></html>'
        );
        w.document.close();

        // Esperar carga real de la ventana para evitar impresión en blanco.
        var printed = false;
        var triggerPrint = function() {
            if (printed) return;
            printed = true;
            setTimeout(function() {
                try { w.focus(); w.print(); } catch (err) {}
            }, 500);
        };
        w.onload = triggerPrint;
        // Fallback por si onload no dispara
        setTimeout(triggerPrint, 900);

        w.addEventListener('afterprint', function() {
            try { w.close(); } catch (err) {}
        });
        return w;
    }

    document.getElementById('btn-imprimir-nomina').addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (document.getElementById('area-reporte-nomina').classList.contains('d-none')) return;
        actualizarFechaImpresion();
        abrirVentanaImpresion('Recibo de nómina');
    });

    document.getElementById('btn-pdf-nomina').addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (document.getElementById('area-reporte-nomina').classList.contains('d-none')) return;
        actualizarFechaImpresion();
        var filename = 'calculo-nomina-' + (document.getElementById('reporte-subtitulo').textContent || 'reporte').replace(/\s*—\s*/g, '-').replace(/[^\w\-]/g, '').substring(0, 40);
        abrirVentanaImpresion(filename);
    });

    document.getElementById('btn-excel-nomina').addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (document.getElementById('area-reporte-nomina').classList.contains('d-none')) return;
        var maestro = document.getElementById('select-maestro').options[document.getElementById('select-maestro').selectedIndex].text;
        var ciclo = document.getElementById('select-ciclo').options[document.getElementById('select-ciclo').selectedIndex].text;
        var mes = document.getElementById('select-mes').options[document.getElementById('select-mes').selectedIndex].text;
        var anio = document.getElementById('select-anio').value;
        var calendario = [];
        document.querySelectorAll('#tbody-calendario tr').forEach(function(tr) {
            var row = [];
            tr.querySelectorAll('td').forEach(function(td) {
                var inp = td.querySelector('input.horas-dia');
                if (!inp) { row.push(null); return; }
                var val = inp.value.trim();
                var num = parseFloat(val);
                row.push(val === '' ? null : (isNaN(num) ? 0 : num));
            });
            if (row.length) calendario.push(row);
        });
        var payload = {
            empleado: maestro,
            ciclo: ciclo,
            periodo: mes + ' ' + anio,
            calendario: calendario,
            totalHorasMes: parseFloat(document.getElementById('total-horas-mes').textContent) || 0,
            salarioSinIncidencias: parseFloat(document.getElementById('salario-sin-incidencias').textContent) || 0,
            totalDescuentos: parseFloat(document.getElementById('total-descuentos').textContent) || 0,
            salarioConIncidencias: parseFloat(document.getElementById('monto-total').textContent) || 0,
            montoTotal: parseFloat(document.getElementById('monto-total').textContent) || 0,
            incidencias: incidencias.map(function(i) { return { fecha: i.fecha, concepto: i.concepto, aplica: i.aplica, monto: parseFloat(i.monto) || 0 }; })
        };
        var headers = { 'Content-Type': 'application/json', 'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'X-Requested-With': 'XMLHttpRequest' };
        headers['X-CSRF-TOKEN'] = csrfToken;
        fetch('{{ route("nominas.export-excel") }}', { method: 'POST', headers: headers, body: JSON.stringify(payload), credentials: 'same-origin' })
            .then(function(r) {
                if (r.ok) return r.blob();
                return r.text().then(function(text) {
                    var msg = 'Error ' + r.status + ': ';
                    if (r.status === 419) msg += 'Sesión o token CSRF inválido. Recarga la página e intenta de nuevo.';
                    else if (r.status === 422) {
                        try { var j = JSON.parse(text); var first = j.errors && Object.values(j.errors)[0]; msg += first ? (Array.isArray(first) ? first[0] : first) : (j.message || text); } catch (e) { msg += text || 'Datos no válidos.'; }
                    } else if (r.status >= 500) {
                        try { var j = JSON.parse(text); msg += j.message || text; } catch (e) { msg += text || 'Error del servidor. Revisa storage/logs/laravel.log'; }
                    } else msg += text || 'Error desconocido.';
                    throw new Error(msg);
                });
            })
            .then(function(blob) {
                var a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = 'recibo-nomina-' + maestro.replace(/\s+/g, '-').substring(0, 25) + '-' + mes + '-' + anio + '.xlsx';
                a.click();
                URL.revokeObjectURL(a.href);
            })
            .catch(function(err) {
                console.error(err);
                alert(err.message || 'No se pudo generar el Excel.');
            });
    });

    var btnMasivo = document.getElementById('btn-excel-masivo-zip');
    if (btnMasivo) {
        btnMasivo.addEventListener('click', function() {
            if (document.getElementById('area-reporte-nomina').classList.contains('d-none')) return;
            var cicloId = document.getElementById('select-ciclo').value;
            var mes = document.getElementById('select-mes').value;
            var anio = document.getElementById('select-anio').value;
            var modo = 'all';
            var selModo = document.getElementById('select-desglose-quincena');
            if (selModo) modo = selModo.value;

            var url = '{{ route("nominas.export-excel-masivo-zip") }}'
                + '?cicloId=' + encodeURIComponent(cicloId)
                + '&anio=' + encodeURIComponent(anio)
                + '&mes=' + encodeURIComponent(mes)
                + '&modo=' + encodeURIComponent(modo);

            // Descargar sin navegar (para no "romper" el estado de la página)
            var a = document.createElement('a');
            a.style.display = 'none';
            document.body.appendChild(a);
            fetch(url, { method: 'GET', credentials: 'same-origin' })
                .then(function(r) {
                    if (!r.ok) return r.text().then(function(t) { throw new Error('Error al generar el Excel masivo: ' + t); });
                    return r.blob();
                })
                .then(function(blob) {
                    var nombre = 'nominas-masivo-resumen-' + cicloId + '-' + mes + '-' + anio + '-' + modo + '.xlsx';
                    var href = URL.createObjectURL(blob);
                    a.href = href;
                    a.download = nombre;
                    a.click();
                    setTimeout(function() { URL.revokeObjectURL(href); }, 1000);
                })
                .catch(function(err) {
                    console.error(err);
                    alert(err.message || 'No se pudo generar el Excel masivo.');
                })
                .finally(function() {
                    try { document.body.removeChild(a); } catch (e) {}
                });
        });
    }

    // Si el navegador deja "pegado" un backdrop/backdrop de dropdown tras imprimir,
    // recuperamos la UI sin necesidad de recargar.
    window.addEventListener('afterprint', function() {
        try {
            document.querySelectorAll('.modal-backdrop').forEach(function(el) { el.remove(); });
            document.querySelectorAll('.dropdown-menu.show').forEach(function(el) { el.classList.remove('show'); });
            document.body.classList.remove('modal-open');
        } catch (e) {}
    });
})();
</script>
@endsection