@extends('layouts.master')

@section('title')
    Descuentos
@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;">Descuentos</h4>
        <hr class="my-3">

        <div class="card">
            <div class="card-body">
                <p class="text-muted mb-4">
                    Consulta y exporta descuentos/incidencias de nómina por periodo, ciclo y docente.
                </p>
                <div class="row g-2 align-items-end">
                    <div class="col-12 col-md-2">
                        <label class="form-label" for="f-anio">Año</label>
                        <input type="number" class="form-control" id="f-anio" min="2000" max="3000" value="{{ $anio }}">
                    </div>
                    <div class="col-12 col-md-2">
                        <label class="form-label" for="f-mes">Mes</label>
                        <select class="form-select" id="f-mes">
                            <option value="">—</option>
                            @for($m=1; $m<=12; $m++)
                                <option value="{{ $m }}" {{ (int)$mes === $m ? 'selected' : '' }}>{{ $m }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-12 col-md-4">
                        <label class="form-label" for="f-ciclo">Ciclo</label>
                        <select class="form-select" id="f-ciclo">
                            <option value="">—</option>
                            @foreach($ciclos as $c)
                                <option value="{{ $c['id'] }}">{{ $c['nombre'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-4">
                        <label class="form-label" for="f-docente">Docente</label>
                        <select class="form-select" id="f-docente">
                            <option value="">—</option>
                            @foreach($docentes as $d)
                                <option value="{{ $d['id'] }}">{{ $d['nombre'] }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 d-flex flex-wrap gap-2 justify-content-end mt-2">
                        <button type="button" class="btn btn-primary btn-sm px-4 rounded btn-border me-2" id="btn-buscar">
                            <i class="ri-search-line align-middle me-1"></i> Buscar
                        </button>
                        <a class="btn btn-outline-secondary btn-sm" id="btn-imprimir" target="_blank">
                            <i class="ri-printer-line me-1"></i> Imprimir
                        </a>
                        <a class="btn btn-outline-danger btn-sm" id="btn-pdf" target="_blank">
                            <i class="ri-file-pdf-line me-1"></i> PDF
                        </a>
                        <a class="btn btn-outline-success btn-sm" id="btn-excel" target="_blank">
                            <i class="ri-file-excel-2-line me-1"></i> Excel
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <div id="descuentos-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-percent-line text-white fs-1"></i>
                        </div>
                    </div>
                    <p class="text-muted mb-0">No hay descuentos/ incidencias para los filtros seleccionados.</p>
                </div>

                <div id="descuentos-results" class="d-none">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover align-middle mb-0" id="tabla-descuentos">
                            <thead class="table-primary">
                                <tr>
                                    <th class="text-white">ID</th>
                                    <th class="text-white">Docente ID</th>
                                    <th class="text-white">Docente</th>
                                    <th class="text-white">Ciclo</th>
                                    <th class="text-white">Fecha</th>
                                    <th class="text-white">Concepto</th>
                                    <th class="text-white">Aplica</th>
                                    <th class="text-white">Monto</th>
                                    <th class="text-white">Horas descontadas</th>
                                    <th class="text-white">Tarifa hora</th>
                                    <th class="text-white">Año</th>
                                    <th class="text-white">Mes</th>
                                    <th class="text-white">Creado</th>
                                    <th class="text-white text-end">Opciones</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-descuentos"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
(function() {
    var emptyState = document.getElementById('descuentos-empty-state');
    var resultsDiv = document.getElementById('descuentos-results');
    var tbody = document.getElementById('tbody-descuentos');
    var urlListado = @json(route('nominas.descuentos.listado'));
    var urlPrint = @json(route('nominas.descuentos.export.print'));
    var urlPdf = @json(route('nominas.descuentos.export.pdf'));
    var urlExcel = @json(route('nominas.descuentos.export.excel'));
    var urlDestroyTpl = @json(route('nominas.descuentos.destroy', ['id' => '__ID__']));
    var csrf = @json(csrf_token());

    function qs() {
        var anio = document.getElementById('f-anio').value;
        var mes = document.getElementById('f-mes').value;
        var ciclo = document.getElementById('f-ciclo').value;
        var docente = document.getElementById('f-docente').value;
        var p = new URLSearchParams();
        if (anio) p.set('anio', anio);
        if (mes) p.set('mes', mes);
        if (ciclo) p.set('ciclo_id', ciclo);
        if (docente) p.set('docente_id', docente);
        return p.toString();
    }

    function money(v) {
        var n = parseFloat(v);
        if (isNaN(n)) return '';
        return n.toFixed(2);
    }

    function render(items) {
        tbody.innerHTML = '';
        items.forEach(function(r) {
            var tr = document.createElement('tr');
            tr.innerHTML =
                '<td>' + (r.id ?? '') + '</td>' +
                '<td>' + (r.docente_id ?? '') + '</td>' +
                '<td>' + ((r.docente_nombre && r.docente_nombre.trim()) ? r.docente_nombre : ('Docente #' + (r.docente_id ?? ''))) + '</td>' +
                '<td>' + (r.ciclo_id ?? '') + '</td>' +
                '<td>' + (r.fecha ?? '') + '</td>' +
                '<td>' + (r.concepto ?? '') + '</td>' +
                '<td>' + (r.aplica ?? '') + '</td>' +
                '<td>' + money(r.monto) + '</td>' +
                '<td>' + money(r.horas_descontadas) + '</td>' +
                '<td>' + money(r.tarifa_hora) + '</td>' +
                '<td>' + (r.anio ?? '') + '</td>' +
                '<td>' + (r.mes ?? '') + '</td>' +
                '<td>' + (r.created_at ?? '') + '</td>' +
                '<td class="text-end text-nowrap">' +
                    '<button type="button" class="btn btn-sm btn-outline-danger btn-eliminar" data-id="' + (r.id ?? '') + '" title="Eliminar">' +
                        '<i class="ri-delete-bin-line"></i>' +
                    '</button>' +
                '</td>';
            tbody.appendChild(tr);
        });

        if (items.length) {
            emptyState.classList.add('d-none');
            resultsDiv.classList.remove('d-none');
        } else {
            emptyState.classList.remove('d-none');
            resultsDiv.classList.add('d-none');
        }
    }

    function refreshExports() {
        var query = qs();
        document.getElementById('btn-imprimir').href = urlPrint + (query ? ('?' + query) : '');
        document.getElementById('btn-pdf').href = urlPdf + (query ? ('?' + query) : '');
        document.getElementById('btn-excel').href = urlExcel + (query ? ('?' + query) : '');
    }

    document.getElementById('btn-buscar').addEventListener('click', function() {
        refreshExports();
        fetch(urlListado + (qs() ? ('?' + qs()) : ''), { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
            .then(function(r) { if (!r.ok) throw new Error(); return r.json(); })
            .then(function(d) { render(d.items || []); })
            .catch(function() { Swal.fire({ icon: 'error', text: 'No se pudo cargar el listado.' }); });
    });

    tbody.addEventListener('click', function(e) {
        var btn = e.target.closest('.btn-eliminar');
        if (!btn) return;
        var id = btn.getAttribute('data-id');
        if (!id) return;

        Swal.fire({
            icon: 'warning',
            title: '¿Eliminar este registro?',
            text: 'Esta acción no se puede deshacer.',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then(function(res) {
            if (!res.isConfirmed) return;
            fetch(urlDestroyTpl.replace('__ID__', encodeURIComponent(id)), {
                method: 'DELETE',
                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) {
                    Swal.fire({ icon: 'success', text: b.message || 'Eliminado.' });
                    return fetch(urlListado + (qs() ? ('?' + qs()) : ''), { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
                }).then(function(r2) {
                    if (!r2) return;
                    return r2.json().then(function(d) { render(d.items || []); });
                });
                return r.json().then(function(b) {
                    Swal.fire({ icon: 'error', text: b.message || 'No se pudo eliminar.' });
                });
            }).catch(function() {
                Swal.fire({ icon: 'error', text: 'Error de red.' });
            });
        });
    });

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