@extends('layouts.master')

@section('title')
    Registro de usuarios
@endsection

@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<style>
.config-module .card-title { font-size: 1rem; }
.config-module .form-label { font-size: 0.8rem; }
.config-module .table { font-size: 0.85rem; }
.config-module h4 { font-size: 1.1rem; }
</style>
@endsection

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

        <div class="row">
            <div class="col-12 col-md-4 col-lg-3 mb-3 mb-md-0">
                <div class="card h-70">
                    <div class="card-body p-0">
                        <div class="p-3 bg-primary text-white fw-semibold">Mi institución</div>
                        <nav class="nav flex-column">
                            <a href="{{ url('configuracion/mi-institucion/planteles') }}" class="nav-link py-2 px-3 border-start border-3 border-transparent">Planteles</a>
                            <a href="{{ url('configuracion/mi-institucion/ofertas-educativas') }}" class="nav-link py-2 px-3 border-start border-3 border-transparent">Ofertas educativas</a>
                            <a href="{{ url('configuracion/mi-institucion/ciclos-periodos') }}" class="nav-link py-2 px-3 border-start border-3 border-transparent">Ciclos/periodos</a>
                            <a href="{{ url('configuracion/mi-institucion/grupos') }}" class="nav-link py-2 px-3 border-start border-3 border-transparent">Grupos</a>
                            <a href="{{ route('config.usuarios') }}" class="nav-link py-2 px-3 border-start border-3 border-primary bg-light text-dark">Registro de usuarios</a>
                        </nav>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-8 col-lg-9">
                <div class="card">
                    <div class="card-body d-flex flex-wrap align-items-center justify-content-between gap-2">
                        <p class="text-muted mb-0">Crea cuentas nuevas en la tabla <strong>users</strong> para que puedan acceder al sistema con el mismo formulario de inicio de sesión.</p>
                        <button type="button" class="btn btn-warning text-white btn-sm px-4 rounded btn-border" data-bs-toggle="modal" data-bs-target="#modalRegistrarUsuario">
                            <i class="ri-user-add-line align-middle me-1"></i> Registrar usuario
                        </button>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-body">
                        <div id="usuarios-empty" class="text-center text-muted py-4 d-none">No hay usuarios registrados.</div>
                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle mb-0">
                                <thead class="table-primary">
                                    <tr>
                                        <th class="text-white">ID</th>
                                        <th class="text-white">Nombre</th>
                                        <th class="text-white">Correo</th>
                                        <th class="text-white">Activo</th>
                                        <th class="text-white">Registrado</th>
                                        <th class="text-white text-end">Opciones</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-usuarios"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalRegistrarUsuario" tabindex="-1" aria-labelledby="modalRegistrarUsuarioLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="modalRegistrarUsuarioLabel">Nuevo usuario</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <form id="form-usuario">
                    <div class="mb-3">
                        <label for="u-name" class="form-label">* Nombre completo</label>
                        <input type="text" class="form-control" id="u-name" required maxlength="255" autocomplete="name">
                    </div>
                    <div class="mb-3">
                        <label for="u-email" class="form-label">* Correo electrónico</label>
                        <input type="email" class="form-control" id="u-email" required maxlength="255" autocomplete="email">
                    </div>
                    <div class="mb-3">
                        <label for="u-password" class="form-label">* Contraseña</label>
                        <input type="password" class="form-control" id="u-password" required minlength="6" autocomplete="new-password">
                        <p class="small text-muted mb-0 mt-1">Mínimo 6 caracteres (igual que el inicio de sesión).</p>
                    </div>
                    <div class="mb-0">
                        <label for="u-password-confirm" class="form-label">* Confirmar contraseña</label>
                        <input type="password" class="form-control" id="u-password-confirm" required minlength="6" autocomplete="new-password">
                    </div>
                </form>
            </div>
            <div class="modal-footer border-0 gap-2">
                <button type="button" class="btn btn-dark rounded" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success rounded" id="btn-guardar-usuario"><i class="ri-save-line me-1"></i> 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 urlListado = @json(route('config.usuarios.listado'));
    var urlStore = @json(route('config.usuarios.store'));
    var urlActivoTpl = @json(route('config.usuarios.activo', ['user' => '__ID__']));
    var urlDeleteTpl = @json(route('config.usuarios.destroy', ['user' => '__ID__']));
    var csrf = @json(csrf_token());
    var modalEl = document.getElementById('modalRegistrarUsuario');

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

    function cargarTabla() {
        fetch(urlListado, { 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 || [];
                var tbody = document.getElementById('tbody-usuarios');
                var empty = document.getElementById('usuarios-empty');
                tbody.innerHTML = '';
                if (!items.length) {
                    empty.classList.remove('d-none');
                    return;
                }
                empty.classList.add('d-none');
                items.forEach(function(row) {
                    var tr = document.createElement('tr');
                    var sw = '<div class="form-check form-switch m-0">' +
                        '<input class="form-check-input usuario-switch-activo" type="checkbox" data-id=\"' + row.id + '\" ' + (row.activo ? 'checked' : '') + '>' +
                        '</div>';
                    tr.innerHTML =
                        '<td>' + row.id + '</td>' +
                        '<td>' + escapeHtml(row.name || '') + '</td>' +
                        '<td>' + escapeHtml(row.email || '') + '</td>' +
                        '<td>' + sw + '</td>' +
                        '<td>' + escapeHtml(row.created_at || '') + '</td>' +
                        '<td class=\"text-end text-nowrap\">' +
                            '<button type=\"button\" class=\"btn btn-sm btn-outline-danger btn-eliminar-usuario\" data-id=\"' + row.id + '\">' +
                                '<i class=\"ri-delete-bin-line\"></i>' +
                            '</button>' +
                        '</td>';
                    tbody.appendChild(tr);
                });
            })
            .catch(function() { Swal.fire({ icon: 'error', text: 'No se pudo cargar el listado de usuarios.' }); });
    }

    document.getElementById('btn-guardar-usuario').addEventListener('click', function() {
        var name = document.getElementById('u-name').value.trim();
        var email = document.getElementById('u-email').value.trim();
        var password = document.getElementById('u-password').value;
        var password_confirmation = document.getElementById('u-password-confirm').value;
        if (!name) {
            Swal.fire({ icon: 'warning', text: 'Indica el nombre.' });
            return;
        }
        if (!email) {
            Swal.fire({ icon: 'warning', text: 'Indica el correo.' });
            return;
        }
        if (password.length < 6) {
            Swal.fire({ icon: 'warning', text: 'La contraseña debe tener al menos 6 caracteres.' });
            return;
        }
        if (password !== password_confirmation) {
            Swal.fire({ icon: 'warning', text: 'Las contraseñas no coinciden.' });
            return;
        }

        var btn = document.getElementById('btn-guardar-usuario');
        btn.disabled = true;
        fetch(urlStore, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: JSON.stringify({ name: name, email: email, password: password, password_confirmation: password_confirmation })
        }).then(function(r) {
            if (r.ok) return r.json().then(function(b) {
                Swal.fire({ icon: 'success', text: b.message || 'Usuario creado.' });
                document.getElementById('form-usuario').reset();
                var m = bootstrap.Modal.getInstance(modalEl);
                if (m) m.hide();
                cargarTabla();
            });
            return r.json().then(function(b) {
                var msg = b.message || 'No se pudo guardar.';
                if (b.errors) {
                    var k = Object.keys(b.errors)[0];
                    if (k && b.errors[k][0]) msg = b.errors[k][0];
                }
                Swal.fire({ icon: 'error', text: msg });
            });
        }).catch(function() { Swal.fire({ icon: 'error', text: 'Error de red.' }); }).finally(function() { btn.disabled = false; });
    });

    modalEl.addEventListener('hidden.bs.modal', function() {
        document.getElementById('form-usuario').reset();
    });

    document.getElementById('tbody-usuarios').addEventListener('change', function(e) {
        var sw = e.target.closest('.usuario-switch-activo');
        if (!sw) return;
        var id = sw.getAttribute('data-id');
        var activo = sw.checked;
        fetch(urlActivoTpl.replace('__ID__', encodeURIComponent(id)), {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: JSON.stringify({ activo: activo })
        }).then(function(r) {
            if (!r.ok) {
                sw.checked = !activo;
                Swal.fire({ icon: 'error', text: 'No se pudo actualizar el estatus.' });
            }
        }).catch(function() {
            sw.checked = !activo;
            Swal.fire({ icon: 'error', text: 'Error de red.' });
        });
    });

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

        Swal.fire({
            icon: 'warning',
            title: '¿Eliminar este usuario?',
            text: 'Esta acción no se puede deshacer.',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then(function(res) {
            if (!res.isConfirmed) return;
            fetch(urlDeleteTpl.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.' });
                    cargarTabla();
                });
                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.' });
            });
        });
    });

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