@extends('admin.layout.master')

@section('content')
<main>
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li><a href="{{ url('/admin') }}">Principal</a></li>
            <li>&nbsp;&nbsp;/ Administrador</li>
            <li>&nbsp;&nbsp;/ <a href="{{ route('user.index') }}">Usuarios Registrados</a></li>
        </ol>
    </div>

    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Consultar Registro de Usuarios</h3>
            <button class="btn btn-primary" onclick="openModal()">Crear Usuario</button>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table id="tblUser" class="table" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>N.</th>
                            <th>Nombre</th>
                            <th>Email</th>
                            <th>Rol</th>
                            <th>Estado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="userList">
                        @foreach ($users as $user)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->rol->nombre }}</td>
                                <td>{{ $user->estado == 1 ? 'Activo' : 'Deshabilitado' }}</td>
                                <td>
                                    <button class="btn btn-success btn-xs" onclick="openModal({{ $user->id }})"><i class="bx bx-pencil"></i></button>
                                    <button class="btn btn-danger btn-xs" onclick="deleteUser({{ $user->id }})"><i class="bx bx-trash"></i></button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal para crear/editar usuario -->
    <div class="modal fade" id="userModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Crear/Editar Usuario</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="userForm" method="post">
                        @csrf
                        <input type="hidden" name="id" id="user_id">

                        <div class="form-group">
                            <label for="nombre">Nombre:</label>
                            <input type="text" class="form-control" id="nombre" name="nombre" required>
                        </div>

                        <div class="form-group">
                            <label for="apellidos">Apellidos:</label>
                            <input type="text" class="form-control" id="apellidos" name="apellidos" required>
                        </div>

                        <div class="form-group">
                            <label for="email">Email:</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>

                        

                        <div class="form-group">
                            <label for="password">Contraseña:</label>
                            <input type="password" class="form-control" id="password" name="password">
                        </div>

                        <div class="form-group">
                            <label for="estado">Estado:</label>
                            <select class="form-control" id="estado" name="estado" required>
                                <option value="1">Activo</option>
                                <option value="2">Inactivo</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="role_id">Rol:</label>
                            <select class="form-control" id="role_id" name="role_id" onchange="gradoTelefonoFunction()" required>
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->nombre }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group" id="telefono_div" style="display:none;">
                            <label for="teléfono">Teléfono:</label>
                            <input type="text" class="form-control" id="teléfono" name="teléfono">
                        </div>

                        <!-- Dinámicamente solo si es Estudiante -->
                        <div class="form-group" id="pais_div" style="display:none;">
                            <label for="pais_id">País:</label>
                            <select class="form-control" id="pais_id" name="pais_id" onchange="loadNiveles()">
                                <option value="">Seleccione un país</option>
                                @foreach ($paises as $pais)
                                    <option value="{{ $pais->id }}">{{ $pais->nombre }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group" id="nivel_div" style="display:none;">
                            <label for="nivel_id">Nivel:</label>
                            <select class="form-control" id="nivel_id" name="nivel_id" onchange="loadGrados()">
                                <option value="">Seleccione un nivel</option>
                            </select>
                        </div>

                        <div class="form-group" id="grado_div" style="display:none;">
                            <label for="grado_id">Grado:</label>
                            <select class="form-control" id="grado_id" name="grado_id">
                                <option value="">Seleccione un grado</option>
                            </select>
                        </div>

                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-success" id="btnGuardar">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    function gradoTelefonoFunction() {
        const roleId = $('#role_id').val();

        // Mostrar campos adicionales solo si es Estudiante (role_id == 3)
        if (roleId == 3) {
            $('#pais_div').show();
            $('#nivel_div').show();
            $('#grado_div').show();
            $('#telefono_div').show();
        } else {
            $('#pais_div').hide();
            $('#nivel_div').hide();
            $('#grado_div').hide();
            $('#telefono_div').hide();
        }
    }

    
    const paises = @json($paises);

    function loadNiveles() {
        const paisId = $('#pais_id').val();
        $('#nivel_id').empty().append('<option value="">Seleccione un nivel</option>');
        console.log(paises); // Verifica que los países estén cargados correctamente en la consola

        if (paisId) {
            const pais = paises.find(p => p.id == paisId);
            if (pais && pais.niveles.length) {
                pais.niveles.forEach(nivel => {
                    $('#nivel_id').append(`<option value="${nivel.id}">${nivel.nombre}</option>`);
                });
            }
        }
    }



    function loadGrados() {
        const nivelId = $('#nivel_id').val();
        $('#grado_id').empty().append('<option value="">Seleccione un grado</option>');
        
        if (nivelId) {
            const nivel = @json($paises).flatMap(p => p.niveles).find(n => n.id == nivelId);
            if (nivel && nivel.grados.length) {
                nivel.grados.forEach(grado => {
                    $('#grado_id').append(`<option value="${grado.id}">${grado.nombre}</option>`);
                });
            }
        }
    }

    function openModal(id = null) {
    $('#userModal').modal('show');
    
    if (id) {
        // Obtener la información del usuario
        $.get("{{ url('/admin/usuario') }}/" + id, function(data) {
            // Rellenar los campos básicos
            $('#user_id').val(data.id);
            if (data.role_id == 3) {
            $('#nombre').val(data.estudiante.nombre);
            $('#apellidos').val(data.estudiante.apellidos);
            }else{
             $('#nombre').val(data.name.split(' ')[0]);
            $('#apellidos').val(data.name.split(' ').slice(1).join(' '));

            }
            $('#email').val(data.email);
            $('#role_id').val(data.role_id).trigger('change');

            
            if (data.role_id == 3) { // Si es Estudiante
                // Establecer el país
                const paisId = findPaisByGrado(data.estudiante.grado.id);
                $('#pais_id').val(paisId).trigger('change');

                // Cargar los niveles asociados al país
                loadNiveles(() => {
                    const nivelId = data.estudiante.grado.nivel_id;
                    $('#nivel_id').val(nivelId).trigger('change');

                    // Cargar los grados del nivel seleccionado
                    loadGrados(() => {
                        $('#grado_id').val(data.estudiante.grado.id).trigger('change');
                    });
                });

                // Cargar el teléfono del estudiante
                $('#teléfono').val(data.telefono);
            }

            $('#password').val(''); // Contraseña vacía al editar
        });
    } else {
        // Resetear el formulario al crear un nuevo usuario
        $('#userForm')[0].reset();
        $('#user_id').val('');
        $('#btnGuardar').text('Guardar');
        $('#pais_div').hide();
        $('#nivel_div').hide();
        $('#grado_div').hide();
        $('#telefono_div').hide();
    }
}

// Nueva función para encontrar el país a partir del grado
function findPaisByGrado(gradoId) {
    // Buscar el país que tiene el nivel asociado al grado
    const pais = paises.find(pais => 
        pais.niveles.some(nivel => nivel.grados.some(grado => grado.id == gradoId))
    );
    return pais ? pais.id : null;
}

// Modificación de loadNiveles para aceptar un callback
function loadNiveles(callback) {
    const paisId = $('#pais_id').val();
    $('#nivel_id').empty().append('<option value="">Seleccione un nivel</option>');

    if (paisId) {
        const pais = paises.find(p => p.id == paisId);
        if (pais && pais.niveles.length) {
            pais.niveles.forEach(nivel => {
                $('#nivel_id').append(`<option value="${nivel.id}">${nivel.nombre}</option>`);
            });
            if (callback) callback();
        }
    }
}

// Modificación de loadGrados para aceptar un callback
function loadGrados(callback) {
    const nivelId = $('#nivel_id').val();
    $('#grado_id').empty().append('<option value="">Seleccione un grado</option>');

    if (nivelId) {
        const nivel = paises.flatMap(p => p.niveles).find(n => n.id == nivelId);
        if (nivel && nivel.grados.length) {
            nivel.grados.forEach(grado => {
                $('#grado_id').append(`<option value="${grado.id}">${grado.nombre}</option>`);
            });
            if (callback) callback();
        }
    }
}


    $('#userForm').submit(function(e) {
        e.preventDefault();
        let formData = new FormData(this);
        let id = $('#user_id').val();

        if (id) {
            updateUser(formData, id);
        } else {
            storeUser(formData);
        }
    });

    function storeUser(formData) {
        $.ajax({
            url: "{{ route('user.store') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                alert('Usuario creado exitosamente');
                $('#userModal').modal('hide');
                location.reload();
            },
            error: function(response) {
                alert('Error al crear el usuario');
            }
        });
    }

    function updateUser(formData, id) {
        $.ajax({
            url: "{{ url('/admin/usuario/edit/') }}/" + id,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                alert('Usuario actualizado exitosamente');
                $('#userModal').modal('hide');
                location.reload();
            },
            error: function(response) {
                alert('Error al actualizar el usuario');
            }
        });
    }

    function deleteUser(id) {
        if (confirm('¿Estás seguro de que deseas eliminar este usuario?')) {
            $.ajax({
                url: "{{ url('/admin/usuario') }}/" + id,
                type: 'POST',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    alert('Usuario eliminado exitosamente');
                    location.reload();
                },
                error: function(response) {
                    alert('Error al eliminar el usuario');
                }
            });
        }
    }
</script>
@endsection