@extends('layouts.master')

@section('title')
    Servicios
@endsection

@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

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

        <div class="card">
            <div class="card-body">
                <p class="text-muted mb-4">
                    Usa el siguiente formulario para mostrar los servicios registrados en la aplicación.
                </p>

                <div class="row align-items-end g-3">
                    <div class="col-md-6">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="tramite-servicio" class="form-label">Trámite o servicio</label>
                                <input type="text" class="form-control" id="tramite-servicio" name="tramite_servicio" placeholder="">
                            </div>
                            <div class="col-12">
                                <label for="clasificacion" class="form-label">Clasificación</label>
                                <select class="form-select" id="clasificacion" name="clasificacion">
                                    <option value="">-- Todos --</option>
                                    <option value="servicios-sistema">Servicios de sistema</option>
                                    <option value="colegiaturas">Colegiaturas</option>
                                    <option value="otros">Otros</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="plantel" class="form-label">Plantel</label>
                                <select class="form-select" id="plantel" name="plantel">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label for="estatus" class="form-label">Estatus</label>
                                <select class="form-select" id="estatus" name="estatus">
                                    <option value="activos">Activos</option>
                                    <option value="inactivos">Inactivos</option>
                                    <option value="ambos" selected>Ambos</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col-12 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-primary btn-sm px-4 rounded" id="btn-buscar">
                            <i class="ri-search-line align-middle me-1"></i> Buscar
                        </button>
                        <button type="button" class="btn btn-warning text-white btn-sm px-4 rounded" id="btn-registrar" data-bs-toggle="modal" data-bs-target="#modalNuevoServicio">
                            <i class="ri-add-line align-middle me-1"></i> Registrar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <div id="servicios-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-information-line text-white fs-1"></i>
                        </div>
                    </div>
                    <p class="text-muted mb-0">Usa los filtros y da clic en Buscar.</p>
                </div>
                <div id="servicios-results" class="d-none table-responsive">
                    <div class="d-flex justify-content-end gap-2 mb-3 flex-wrap">
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-imprimir" title="Próximamente"><i class="ri-printer-line me-1"></i> Imprimir</button>
                        <button type="button" class="btn btn-outline-danger btn-sm" id="btn-pdf" title="Próximamente"><i class="ri-file-pdf-line me-1"></i> PDF</button>
                        <button type="button" class="btn btn-outline-success btn-sm" id="btn-excel" title="Próximamente"><i class="ri-file-excel-2-line me-1"></i> Excel</button>
                    </div>
                    <table class="table table-striped table-hover align-middle mb-0">
                        <thead class="table-primary">
                            <tr>
                                <th class="text-white">Descripción</th>
                                <th class="text-white">Clasificación</th>
                                <th class="text-white">Unidad</th>
                                <th class="text-white">Activo</th>
                                <th class="text-white text-end">Opciones</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-servicios"></tbody>
                    </table>
                    <p class="text-muted small mt-2 mb-0" id="servicios-resumen"></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalNuevoServicio" tabindex="-1" aria-labelledby="modalNuevoServicioLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold" id="modalNuevoServicioLabel">Nuevo servicio</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <p class="mb-4 text-dark" id="modal-servicio-instruccion">Usa el siguiente formulario para <strong>REGISTRAR</strong> un nuevo servicio.</p>

                <form id="formNuevoServicio">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="nombre_tramite" class="form-label">* Nombre del trámite o servicio</label>
                            <input type="text" class="form-control" id="nombre_tramite" name="nombre_tramite" required>
                        </div>
                        <div class="col-md-6 d-flex align-items-end gap-3 pb-1 flex-wrap">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="servicio_activo" name="servicio_activo" checked>
                                <label class="form-check-label" for="servicio_activo">Servicio activo</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="desglose_factura" name="desglose_factura">
                                <label class="form-check-label" for="desglose_factura">Desglose en factura</label>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="abreviatura" class="form-label">* Abreviatura</label>
                            <input type="text" class="form-control" id="abreviatura" name="abreviatura" required maxlength="32">
                        </div>
                        <div class="col-md-4">
                            <label for="clasificacion_modal" class="form-label">* Clasificación</label>
                            <select class="form-select" id="clasificacion_modal" name="clasificacion_modal" required>
                                <option value="servicios-sistema" selected>Servicios de sistema</option>
                                <option value="colegiaturas">Colegiaturas</option>
                                <option value="inscripciones">Inscripciones</option>

                                <option value="otros">Otros servicios</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="unidad" class="form-label">Unidad</label>
                            <select class="form-select" id="unidad" name="unidad">
                                <option value="">— Ninguna —</option>
                                <option value="servicio">Servicio</option>
                                <option value="pieza">Pieza</option>
                                <option value="hora">Hora</option>
                                <option value="galon">Galón</option>
                                <option value="litro">Litro</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="escuela_id_modal" class="form-label">Plantel (opcional)</label>
                            <select class="form-select" id="escuela_id_modal" name="escuela_id_modal">
                                <option value="">— Aplica a todos los planteles —</option>
                            </select>
                            <p class="text-muted small mb-0 mt-1">Si eliges un plantel, la búsqueda por ese plantel incluirá este servicio y los marcados como “todos”.</p>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="duracion_tramite" class="form-label">* Duración del trámite (días)</label>
                            <input type="number" class="form-control" id="duracion_tramite" name="duracion_tramite" value="0" min="0" required>
                        </div>
                        <div class="col-md-4">
                            <label for="modalidad_recargos" class="form-label">* Modalidad de recargos</label>
                            <select class="form-select" id="modalidad_recargos" name="modalidad_recargos" required>
                                <option value="importe" selected>Importe</option>
                                <option value="porcentaje">Porcentaje</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="monto_recargo" class="form-label">Monto recargo</label>
                            <input type="number" class="form-control" id="monto_recargo" name="monto_recargo" value="0" min="0" step="0.01">
                        </div>
                    </div>

                    <h6 class="text-primary fw-bold mb-2">Impuestos</h6>
                    <div class="mb-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="iva" name="iva">
                            <label class="form-check-label" for="iva">IVA</label>
                        </div>
                    </div>

                    <h6 class="text-primary fw-bold mb-2">Precios</h6>
                    <div class="row mb-4">
                        @foreach ([
                            'precio_general' => 'General',
                            'precio_empleados' => 'Para empleados',
                            'precio_publico' => 'Para público',
                            'precio_paquetes' => 'Para paquetes',
                        ] as $id => $etiq)
                            <div class="col-6 col-md-3 mb-3">
                                <label for="{{ $id }}" class="form-label">* {{ $etiq }}</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" id="{{ $id }}" name="{{ $id }}" min="0" step="0.01" value="0" required>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <p class="text-dark small fw-bold mb-0">Nota: Llenar campos obligatorios (*).</p>
                </form>
            </div>
            <div class="modal-footer justify-content-end border-top gap-2">
                <button type="button" class="btn btn-dark rounded" data-bs-dismiss="modal">Regresar</button>
                <button type="button" class="btn btn-success rounded" id="btn-guardar-servicio">Guardar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
@endsection

@section('script-bottom')
<script>
(function() {
    var TIPO = 'servicio';
    var urlPlanteles = @json(url('api/escuelas/list'));
    var urlBuscar = @json(route('conceptos-venta.buscar'));
    var urlStore = @json(route('conceptos-venta.store'));
    var urlShowTpl = @json(route('conceptos-venta.show', ['concepto' => '__ID__']));
    var urlUpdateTpl = @json(route('conceptos-venta.update', ['concepto' => '__ID__']));
    var urlDeleteTpl = @json(route('conceptos-venta.destroy', ['concepto' => '__ID__']));
    var csrf = @json(csrf_token());

    var clasifLabels = { 'servicios-sistema': 'Servicios de sistema', 'colegiaturas': 'Colegiaturas', 'otros': 'Otros' };
    var editId = null;
    var modalEl = document.getElementById('modalNuevoServicio');
    var modalTitle = document.getElementById('modalNuevoServicioLabel');
    var modalInstr = document.getElementById('modal-servicio-instruccion');

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

    function llenarSelectPlanteles(selectEl, modalSelect) {
        return fetch(urlPlanteles + '?activa=true', { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
            .then(function(r) { if (!r.ok) throw new Error(); return r.json(); })
            .then(function(list) {
                var selF = document.getElementById('plantel');
                var vF = selF.value;
                selF.innerHTML = '<option value="">-- Todos --</option>';
                list.forEach(function(p) {
                    var o = document.createElement('option');
                    o.value = String(p.id);
                    o.textContent = p.nombre;
                    selF.appendChild(o);
                });
                if (vF) selF.value = vF;

                modalSelect.innerHTML = '<option value="">— Aplica a todos los planteles —</option>';
                list.forEach(function(p) {
                    var o = document.createElement('option');
                    o.value = String(p.id);
                    o.textContent = p.nombre;
                    modalSelect.appendChild(o);
                });
            });
    }

    function limpiarModal() {
        editId = null;
        document.getElementById('formNuevoServicio').reset();
        document.getElementById('servicio_activo').checked = true;
        document.getElementById('duracion_tramite').value = '0';
        document.getElementById('monto_recargo').value = '0';
        ['precio_general','precio_empleados','precio_publico','precio_paquetes'].forEach(function(id) {
            document.getElementById(id).value = '0';
        });
        modalTitle.textContent = 'Nuevo servicio';
        modalInstr.innerHTML = 'Usa el siguiente formulario para <strong>REGISTRAR</strong> un nuevo servicio.';
    }

    document.getElementById('btn-registrar').addEventListener('click', limpiarModal);
    modalEl.addEventListener('hidden.bs.modal', limpiarModal);

    function renderTabla(items) {
        var tbody = document.getElementById('tbody-servicios');
        tbody.innerHTML = '';
        items.forEach(function(row) {
            var tr = document.createElement('tr');
            var chk = row.activo ? 'checked' : '';
            var id = parseInt(row.id, 10);
            var clas = clasifLabels[row.clasificacion] || row.clasificacion;
            var unidad = row.unidad ? row.unidad : 'Sin asignar';
            tr.innerHTML =
                '<td>' + escapeHtml(row.nombre) + '</td>' +
                '<td>' + escapeHtml(clas) + '</td>' +
                '<td>' + escapeHtml(unidad) + '</td>' +
                '<td><input type="checkbox" class="form-check-input" disabled ' + chk + '></td>' +
                '<td class="text-end text-nowrap">' +
                '<button type="button" class="btn btn-sm btn-outline-primary btn-editar-sv me-1" data-id="' + id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                '<button type="button" class="btn btn-sm btn-outline-danger btn-eliminar-sv" data-id="' + id + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                '</td>';
            tbody.appendChild(tr);
        });
        document.getElementById('servicios-resumen').textContent = items.length ? ('Mostrando ' + items.length + ' registro(s).') : '';
    }

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

    document.getElementById('btn-buscar').addEventListener('click', function() {
        var p = new URLSearchParams();
        p.set('tipo', TIPO);
        var q = (document.getElementById('tramite-servicio').value || '').trim();
        var cl = document.getElementById('clasificacion').value;
        var pl = document.getElementById('plantel').value;
        var est = document.getElementById('estatus').value;
        if (q) p.set('q', q);
        if (cl) p.set('clasificacion', cl);
        if (pl) p.set('escuela_id', pl);
        if (est) p.set('estatus', est);

        fetch(urlBuscar + '?' + p.toString(), { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
            .then(function(r) { if (!r.ok) throw new Error(); return r.json(); })
            .then(function(data) {
                var items = data.items || [];
                document.getElementById('servicios-empty-state').classList.add('d-none');
                document.getElementById('servicios-results').classList.remove('d-none');
                if (!items.length) {
                    document.getElementById('tbody-servicios').innerHTML =
                        '<tr><td colspan="5" class="text-center text-muted py-4">Sin resultados.</td></tr>';
                    document.getElementById('servicios-resumen').textContent = '';
                    return;
                }
                renderTabla(items);
            })
            .catch(function() { Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo buscar.' }); });
    });

    function payloadDesdeFormulario() {
        var esc = document.getElementById('escuela_id_modal').value;
        return {
            tipo: TIPO,
            nombre: (document.getElementById('nombre_tramite').value || '').trim(),
            activo: document.getElementById('servicio_activo').checked,
            clasificacion: document.getElementById('clasificacion_modal').value,
            unidad: document.getElementById('unidad').value || null,
            escuela_id: esc ? parseInt(esc, 10) : null,
            desglose_factura: document.getElementById('desglose_factura').checked,
            abreviatura: (document.getElementById('abreviatura').value || '').trim(),
            duracion_dias: parseInt(document.getElementById('duracion_tramite').value, 10) || 0,
            modalidad_recargos: document.getElementById('modalidad_recargos').value,
            monto_recargo: parseFloat(document.getElementById('monto_recargo').value) || 0,
            aplica_iva: document.getElementById('iva').checked,
            precio_general: parseFloat(document.getElementById('precio_general').value) || 0,
            precio_empleados: parseFloat(document.getElementById('precio_empleados').value) || 0,
            precio_publico: parseFloat(document.getElementById('precio_publico').value) || 0,
            precio_paquetes: parseFloat(document.getElementById('precio_paquetes').value) || 0
        };
    }

    document.getElementById('btn-guardar-servicio').addEventListener('click', function() {
        var pl = payloadDesdeFormulario();
        if (!pl.nombre) { Swal.fire({ icon: 'warning', text: 'Indica el nombre del servicio.' }); return; }
        if (!pl.abreviatura) { Swal.fire({ icon: 'warning', text: 'Indica la abreviatura.' }); return; }

        var btn = document.getElementById('btn-guardar-servicio');
        btn.disabled = true;
        var url = editId ? urlUpdateTpl.replace('__ID__', encodeURIComponent(editId)) : urlStore;
        var method = editId ? 'PUT' : 'POST';

        fetch(url, {
            method: method,
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin',
            body: JSON.stringify(pl)
        }).then(function(r) {
            if (r.ok) return r.json().then(function(b) {
                Swal.fire({ icon: 'success', text: b.message || 'Guardado.' });
                var m = bootstrap.Modal.getInstance(modalEl);
                if (m) m.hide();
                document.getElementById('btn-buscar').click();
            });
            return mensajeError(r, 'No se pudo guardar.').then(function(msg) { Swal.fire({ icon: 'error', text: msg }); });
        }).catch(function() { Swal.fire({ icon: 'error', text: 'Error de red.' }); }).finally(function() { btn.disabled = false; });
    });

    document.getElementById('tbody-servicios').addEventListener('click', function(e) {
        var ed = e.target.closest('.btn-editar-sv');
        if (ed) {
            var id = parseInt(ed.getAttribute('data-id'), 10);
            fetch(urlShowTpl.replace('__ID__', encodeURIComponent(id)), { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
                .then(function(r) { if (!r.ok) throw new Error(); return r.json(); })
                .then(function(d) {
                    editId = d.id;
                    document.getElementById('nombre_tramite').value = d.nombre || '';
                    document.getElementById('servicio_activo').checked = !!d.activo;
                    document.getElementById('desglose_factura').checked = !!d.desglose_factura;
                    document.getElementById('abreviatura').value = d.abreviatura || '';
                    document.getElementById('clasificacion_modal').value = d.clasificacion || 'servicios-sistema';
                    document.getElementById('unidad').value = d.unidad || '';
                    document.getElementById('escuela_id_modal').value = d.escuela_id ? String(d.escuela_id) : '';
                    document.getElementById('duracion_tramite').value = String(d.duracion_dias != null ? d.duracion_dias : 0);
                    document.getElementById('modalidad_recargos').value = d.modalidad_recargos || 'importe';
                    document.getElementById('monto_recargo').value = String(d.monto_recargo != null ? d.monto_recargo : 0);
                    document.getElementById('iva').checked = !!d.aplica_iva;
                    document.getElementById('precio_general').value = String(d.precio_general != null ? d.precio_general : 0);
                    document.getElementById('precio_empleados').value = String(d.precio_empleados != null ? d.precio_empleados : 0);
                    document.getElementById('precio_publico').value = String(d.precio_publico != null ? d.precio_publico : 0);
                    document.getElementById('precio_paquetes').value = String(d.precio_paquetes != null ? d.precio_paquetes : 0);
                    modalTitle.textContent = 'Editar servicio';
                    modalInstr.innerHTML = 'Modifica los datos y presiona <strong>GUARDAR</strong>.';
                    bootstrap.Modal.getOrCreateInstance(modalEl).show();
                })
                .catch(function() { Swal.fire({ icon: 'error', text: 'No se pudo cargar el registro.' }); });
            return;
        }
        var el = e.target.closest('.btn-eliminar-sv');
        if (el) {
            var idDel = parseInt(el.getAttribute('data-id'), 10);
            Swal.fire({ title: '¿Eliminar servicio?', showCancelButton: true, confirmButtonText: 'Sí' }).then(function(res) {
                if (!res.isConfirmed) return;
                fetch(urlDeleteTpl.replace('__ID__', encodeURIComponent(idDel)), {
                    method: 'DELETE',
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
                    credentials: 'same-origin'
                }).then(function(r) {
                    if (r.ok) return r.json().then(function(b) {
                        Swal.fire({ icon: 'success', text: b.message || 'Eliminado.' });
                        document.getElementById('btn-buscar').click();
                    });
                    return r.json().then(function(b) { Swal.fire({ icon: 'error', text: b.message }); });
                });
            });
        }
    });

    ['btn-imprimir','btn-pdf','btn-excel'].forEach(function(id) {
        document.getElementById(id).addEventListener('click', function() {
            Swal.fire({ icon: 'info', title: 'Próximamente', text: 'Exportación no configurada aún.' });
        });
    });

    llenarSelectPlanteles(null, document.getElementById('escuela_id_modal')).catch(function() {});
})();
</script>
@endsection