@extends('layouts.master')

@section('title')
    Conceptos de nómina
@endsection

@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/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; }
</style>
@endsection

@section('content')
<div class="row nominas-module">
    <div class="col-12">
        <h4 class="mb-0 text-primary fw-semibold" style="color: #020f82 !important;">Conceptos de nómina</h4>
        <hr class="my-3">

        <div class="card">
            <div class="card-body">
                <p class="text-muted mb-4">
                    Gestiona los conceptos de nómina: nombre, tipo de pago y monto. Para vincularlos al nivel del docente en <strong>Cálculo de nómina</strong>, incluye en el nombre
                    <strong>Licenciatura</strong>, <strong>Maestría</strong> (o Mestría) o <strong>Doctorado</strong> (ej. <em>Pago Nvl. Licenciatura</em>).
                </p>
                <div class="row align-items-end g-2 justify-content-center mb-0">
                    <div class="col-12 col-md-4">
                        <label for="filtro-nombre" class="form-label mb-0">Buscar por nombre</label>
                        <input type="text" class="form-control" id="filtro-nombre" placeholder="Escribe y pulsa Buscar">
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-primary btn-sm px-4 rounded btn-border" id="btn-buscar">
                            <i class="ri-search-line align-middle me-1"></i> Buscar
                        </button>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-outline-primary btn-sm px-4 rounded btn-border" id="btn-ensure-tabulador">
                            <i class="ri-tools-line align-middle me-1"></i> Activar tabulador
                        </button>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-outline-success btn-sm px-4 rounded btn-border" id="btn-seed-tabulador">
                            <i class="ri-database-2-line align-middle me-1"></i> Insertar tabulador UNII
                        </button>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-warning btn-sm px-4 rounded btn-border" id="btn-agregar" data-bs-toggle="modal" data-bs-target="#modalConcepto">
                            <i class="ri-add-line align-middle me-1"></i> Agregar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <div id="conceptos-empty-state" class="text-center py-5">
                    <div class="avatar-xl mx-auto mb-2">
                        <div class="avatar-title bg-dark-subtle rounded-circle d-inline-flex align-items-center justify-content-center">
                            <i class="ri-file-list-3-line text-white fs-1"></i>
                        </div>
                    </div>
                    <p class="text-muted mb-0">No hay conceptos registrados. Haz clic en <strong>Agregar</strong> para crear uno.</p>
                </div>

                <div id="conceptos-results" class="d-none">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover align-middle mb-0" id="tabla-conceptos">
                            <thead class="table-primary">
                                <tr>
                                    <th class="text-white">Nombre</th>
                                    <th class="text-white">Tipo de pago</th>
                                    <th class="text-white">Monto</th>
                                    <th class="text-white">Tabulador</th>
                                    <th class="text-white" style="width: 120px;">Opciones</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-conceptos">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Agregar / Editar concepto --}}
<div class="modal fade" id="modalConcepto" tabindex="-1" aria-labelledby="modalConceptoLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalConceptoLabel">Agregar concepto de nómina</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <form id="form-concepto">
                    <input type="hidden" id="concepto-id" name="concepto_id" value="">
                    <div class="mb-3 form-check">
                        <input class="form-check-input" type="checkbox" id="concepto-es-tabulador">
                        <label class="form-check-label" for="concepto-es-tabulador">Es tabulador (tarifa por hora clase)</label>
                    </div>
                    <div class="row g-2 mb-3" id="bloque-tabulador" style="display:none;">
                        <div class="col-6">
                            <label for="concepto-nivel-docente" class="form-label">Nivel del docente</label>
                            <select class="form-select" id="concepto-nivel-docente">
                                <option value="">Seleccione...</option>
                                <option value="licenciatura">Licenciatura</option>
                                <option value="maestria">Maestría</option>
                                <option value="doctorado">Doctorado</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label for="concepto-grado-imparte" class="form-label">Grado al que imparte</label>
                            <select class="form-select" id="concepto-grado-imparte">
                                <option value="">Seleccione...</option>
                                <option value="bachillerato">Bachillerato</option>
                                <option value="licenciatura">Licenciatura</option>
                                <option value="maestria">Maestría</option>
                                <option value="doctorado">Doctorado</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <div class="alert alert-light py-2 px-3 mb-0 small">
                                El nombre y el tipo de pago se generan automáticamente como: <strong>Tabulador hora {Nivel} - {Grado}</strong> (Por hora).
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="concepto-nombre" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="concepto-nombre" name="nombre" placeholder="Ej. Pago Nvl. Licenciatura" required>
                    </div>
                    <div class="mb-3">
                        <label for="concepto-tipo-pago" class="form-label">Tipo de pago</label>
                        <select class="form-select" id="concepto-tipo-pago" name="tipo_pago" required>
                            <option value="">Seleccione...</option>
                            <option value="hora">Por hora</option>
                            <option value="dia">Por día</option>
                            <option value="semana">Por semana</option>
                            <option value="quincena">Quincena</option>
                            <option value="mensual">Mensual</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="concepto-monto" class="form-label">Monto</label>
                        <input type="number" class="form-control" id="concepto-monto" name="monto" step="0.01" min="0" placeholder="0.00" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-secondary btn-sm"data-bs-dismiss="modal">
                    <i class="ri-close-fill align-middle me-1"></i>Cancelar
                </button>

                <button type="button" class="btn btn-primary btn-sm" id="btn-guardar-concepto">
                    <i class="ri-save-line align-middle me-1"></i> Guardar
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
(function() {
    var conceptos = [];
    var editId = null;

    var urls = {
        list: @json(route('nominas.conceptos-nomina.list')),
        store: @json(route('nominas.conceptos-nomina.store')),
        ensureTabulador: @json(route('nominas.conceptos-nomina.ensure-tabulador')),
        seedTabulador: @json(route('nominas.conceptos-nomina.seed-tabulador')),
        updateTpl: @json(route('nominas.conceptos-nomina.update', ['concepto' => '__ID__'])),
        deleteTpl: @json(route('nominas.conceptos-nomina.destroy', ['concepto' => '__ID__']))
    };
    var csrf = @json(csrf_token());

    var emptyState = document.getElementById('conceptos-empty-state');
    var resultsDiv = document.getElementById('conceptos-results');
    var tbody = document.getElementById('tbody-conceptos');
    var modal = document.getElementById('modalConcepto');
    var modalTitle = document.getElementById('modalConceptoLabel');
    var inputId = document.getElementById('concepto-id');
    var inputNombre = document.getElementById('concepto-nombre');
    var inputTipoPago = document.getElementById('concepto-tipo-pago');
    var inputMonto = document.getElementById('concepto-monto');
    var inputEsTab = document.getElementById('concepto-es-tabulador');
    var bloqueTab = document.getElementById('bloque-tabulador');
    var inputNivel = document.getElementById('concepto-nivel-docente');
    var inputGrado = document.getElementById('concepto-grado-imparte');
    var btnGuardar = document.getElementById('btn-guardar-concepto');
    var filtroNombre = document.getElementById('filtro-nombre');

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

    function renderLista() {
        tbody.innerHTML = '';
        conceptos.forEach(function(c) {
            var tr = document.createElement('tr');
            var tabTxt = (c.es_tabulador ? ('Sí (' + (c.nivel_docente || '') + ' → ' + (c.grado_imparte || '') + ')') : 'No');
            tr.innerHTML =
                '<td>' + escapeHtml(c.nombre || '') + '</td>' +
                '<td>' + escapeHtml(tipoPagoTexto(c.tipo_pago)) + '</td>' +
                '<td>' + (c.monto != null ? parseFloat(c.monto).toFixed(2) : '') + '</td>' +
                '<td>' + escapeHtml(tabTxt) + '</td>' +
                '<td>' +
                '<button type="button" class="btn btn-sm btn-outline-primary btn-editar-concepto me-1" data-id="' + c.id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                '<button type="button" class="btn btn-sm btn-outline-danger btn-eliminar-concepto" data-id="' + c.id + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                '</td>';
            tbody.appendChild(tr);
        });
        if (conceptos.length > 0) {
            emptyState.classList.add('d-none');
            resultsDiv.classList.remove('d-none');
        } else {
            emptyState.classList.remove('d-none');
            resultsDiv.classList.add('d-none');
        }
    }

    function escapeHtml(s) {
        var d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }

    function limpiarForm() {
        editId = null;
        inputId.value = '';
        inputNombre.value = '';
        inputTipoPago.value = '';
        inputMonto.value = '';
        inputEsTab.checked = false;
        if (bloqueTab) bloqueTab.style.display = 'none';
        if (inputNivel) inputNivel.value = '';
        if (inputGrado) inputGrado.value = '';
        inputNombre.disabled = false;
        inputTipoPago.disabled = false;
        modalTitle.textContent = 'Agregar concepto de nómina';
    }

    function aplicarModoTabuladorUI() {
        var es = !!inputEsTab.checked;
        if (bloqueTab) bloqueTab.style.display = es ? '' : 'none';
        inputNombre.disabled = es;
        inputTipoPago.disabled = es;
        if (es) {
            inputTipoPago.value = 'hora';
            inputNombre.value = '';
        }
    }

    if (inputEsTab) {
        inputEsTab.addEventListener('change', function() {
            aplicarModoTabuladorUI();
        });
    }

    function mensajeError(res, fallback) {
        return res.json().then(function(body) {
            if (body.errors) {
                var msgs = [];
                Object.keys(body.errors).forEach(function(k) {
                    msgs = msgs.concat(body.errors[k]);
                });
                return msgs.join('\n') || fallback;
            }
            return body.message || fallback;
        }).catch(function() { return fallback; });
    }

    function cargarLista() {
        var q = (filtroNombre.value || '').trim();
        var u = urls.list + (q ? ('?q=' + encodeURIComponent(q)) : '');
        return fetch(u, {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function(r) {
            if (!r.ok) throw new Error('No se pudo cargar el listado.');
            return r.json();
        }).then(function(data) {
            conceptos = data;
            renderLista();
        }).catch(function(err) {
            Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'Error de red.' });
        });
    }

    document.getElementById('btn-agregar').addEventListener('click', function() {
        limpiarForm();
    });

    btnGuardar.addEventListener('click', function() {
        var nombre = (inputNombre.value || '').trim();
        var tipoPago = inputTipoPago.value;
        var monto = parseFloat(inputMonto.value);
        var esTabulador = !!(inputEsTab && inputEsTab.checked);
        var nivelDoc = inputNivel ? inputNivel.value : '';
        var gradoImp = inputGrado ? inputGrado.value : '';
        if (esTabulador) {
            if (!nivelDoc) { inputNivel.focus(); return; }
            if (!gradoImp) { inputGrado.focus(); return; }
            tipoPago = 'hora';
        } else {
            if (!nombre) { inputNombre.focus(); return; }
            if (!tipoPago) { inputTipoPago.focus(); return; }
        }
        if (isNaN(monto) || monto < 0) {
            inputMonto.focus();
            return;
        }

        var payload = JSON.stringify({
            es_tabulador: esTabulador,
            nombre: esTabulador ? null : nombre,
            tipo_pago: esTabulador ? null : tipoPago,
            monto: monto,
            nivel_docente: esTabulador ? nivelDoc : null,
            grado_imparte: esTabulador ? gradoImp : null
        });
        var isEdit = editId !== null;
        var url = isEdit ? urls.updateTpl.replace('__ID__', encodeURIComponent(editId)) : urls.store;
        var method = isEdit ? 'PUT' : 'POST';

        btnGuardar.disabled = true;
        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: payload
        }).then(function(r) {
            if (r.ok) {
                var bsModal = bootstrap.Modal.getInstance(modal);
                if (bsModal) bsModal.hide();
                limpiarForm();
                return cargarLista();
            }
            return mensajeError(r, 'No se pudo guardar.').then(function(msg) {
                Swal.fire({ icon: 'error', title: 'No se pudo guardar', text: msg });
            });
        }).catch(function() {
            Swal.fire({ icon: 'error', title: 'Error', text: 'Error de red al guardar.' });
        }).finally(function() {
            btnGuardar.disabled = false;
        });
    });

    tbody.addEventListener('click', function(e) {
        var btnEd = e.target.closest('.btn-editar-concepto');
        if (btnEd) {
            var id = parseInt(btnEd.getAttribute('data-id'), 10);
            var c = conceptos.find(function(x) { return x.id === id; });
            if (!c) return;
            editId = c.id;
            inputId.value = c.id;
            inputNombre.value = c.nombre;
            inputTipoPago.value = c.tipo_pago;
            inputMonto.value = c.monto;
            inputEsTab.checked = !!c.es_tabulador;
            if (inputNivel) inputNivel.value = c.nivel_docente || '';
            if (inputGrado) inputGrado.value = c.grado_imparte || '';
            aplicarModoTabuladorUI();
            modalTitle.textContent = 'Editar concepto de nómina';
            var bsModal = new bootstrap.Modal(modal);
            bsModal.show();
            return;
        }
        var btnEl = e.target.closest('.btn-eliminar-concepto');
        if (btnEl) {
            var idDel = parseInt(btnEl.getAttribute('data-id'), 10);
            Swal.fire({
                icon: 'warning',
                title: '¿Eliminar concepto?',
                text: 'Esta acción no se puede deshacer.',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then(function(res) {
                if (!res.isConfirmed) return;
                fetch(urls.deleteTpl.replace('__ID__', encodeURIComponent(idDel)), {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                }).then(function(r) {
                    if (r.ok) return cargarLista();
                    return r.json().then(function(b) { throw new Error(b.message || 'No se pudo eliminar.'); });
                }).catch(function(err) {
                    Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'Error de red.' });
                });
            });
        }
    });

    document.getElementById('btn-buscar').addEventListener('click', function() {
        cargarLista();
    });

    var btnSeed = document.getElementById('btn-seed-tabulador');
    if (btnSeed) {
        btnSeed.addEventListener('click', function() {
            Swal.fire({
                icon: 'question',
                title: 'Insertar tabulador UNII',
                text: 'Esto insertará los 9 montos del tabulador (si no existen).',
                showCancelButton: true,
                confirmButtonText: 'Continuar',
                cancelButtonText: 'Cancelar'
            }).then(function(res) {
                if (!res.isConfirmed) return;
                btnSeed.disabled = true;
                fetch(urls.seedTabulador, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                }).then(function(r) {
                    if (!r.ok) return r.json().then(function(b) { throw new Error(b.message || 'No se pudo insertar.'); });
                    return r.json();
                }).then(function(resp) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Listo',
                        text: (resp && resp.message ? resp.message : 'Insertado') + ' Nuevos: ' + (resp.created || 0)
                    });
                    return cargarLista();
                }).catch(function(err) {
                    Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'Error.' });
                }).finally(function() {
                    btnSeed.disabled = false;
                });
            });
        });
    }

    var btnEnsure = document.getElementById('btn-ensure-tabulador');
    if (btnEnsure) {
        btnEnsure.addEventListener('click', function() {
            btnEnsure.disabled = true;
            fetch(urls.ensureTabulador, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            }).then(function(r) {
                if (!r.ok) return r.json().then(function(b) { throw new Error(b.message || 'No se pudo activar.'); });
                return r.json();
            }).then(function(resp) {
                Swal.fire({ icon: 'success', title: 'Tabulador activado', text: (resp && resp.message) ? resp.message : 'OK' });
                return cargarLista();
            }).catch(function(err) {
                Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'Error.' });
            }).finally(function() {
                btnEnsure.disabled = false;
            });
        });
    }
    filtroNombre.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            cargarLista();
        }
    });

    modal.addEventListener('hidden.bs.modal', limpiarForm);

    cargarLista();
})();
</script>
@endsection