@extends('layouts.app')

@section('titulo_sub_modulo')
    <div class="mb-0 h5 no-wrap" id="pageTitle">
        <small style="font-size:13px;">ADMINISTRACIÓN DE USUARIOS</small>
    </div>
@endsection

@section('content')
    <div class="container-fluid" id="vue_app">
        @include('M_Usuarios.create')
        @include('M_Usuarios.delete')
        @include('M_Usuarios.edit')
        @include('pages.paginacion')

        <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
            data-scroll="false">
            <div class="container-fluid py-1 px-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                        <li class="breadcrumb-item text-sm text-white"><a class="opacity-5 text-white"
                                href="javascript:;">Pages</a></li>
                        <li class="breadcrumb-item text-sm text-white active" aria-current="page">Usuarios</li>
                    </ol>
                    <h6 class="font-weight-bolder text-white mb-0">Usuarios</h6>
                </nav>
                <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                    <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                        <div class="input-group">
                        </div>
                    </div>
                    <ul class="navbar-nav  justify-content-end">
                        <li class="nav-item d-flex align-items-center">
                            <form role="form" method="post" action="{{ route('logout') }}" id="logout-form">
                                @csrf
                                <input type="hidden" name="redirect_to" value="{{ url('/') }}">
                                <a href="{{ route('logout') }}"
                                    onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                                    class="nav-link text-white font-weight-bold px-0">
                                    <i class="fa fa-user me-sm-1"></i>
                                    <span class="d-sm-inline d-none"></span>cerrar sesion
                                </a>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <br><br><br>

        <div class="card shadow mb-4">
            <!-- Encabezado con el mismo estilo que categorías -->
            <div class="card-header py-3 d-flex justify-content-between align-items-center bg-primary text-danger">
                <h4 class="m-0 font-weight-bold">
                    <i class="fas fa-users mr-2"></i>
                    LISTADO DE USUARIOS
                </h4>
                <button @click="createUsuario" class="btn btn-light">
                    <i class="fas fa-plus text-primary">Nuevo Usuario</i>
                </button>
            </div>

            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="input-group">

                            <input type="text" class="form-control" placeholder="Buscar usuarios..." v-model="searchQuery">
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover table-striped table-bordered">
                        <thead class="thead-dark text-uppercase">
                            <tr>
                                <th width="5%" class="text-center">N°</th>
                                <th width="20%">Nombres</th>
                                <th width="20%">Apellidos</th>
                                <th width="25%">Email</th>
                                <th width="15%" class="text-center">Estado</th>
                                <th width="15%" class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-if="filteredUsuarios.length === 0">
                                <td colspan="4" class="text-center text-muted py-4">
                                    <i class="fas fa-exclamation-circle fa-2x mb-2"></i><br>
                                    No se encontraron usuarios
                                </td>
                            </tr>
                            <tr v-for="(usuario, index) in filteredUsuarios" :key="usuario . id">
                                <td class="text-center">@{{ index + 1 }}</td>
                                <td class="font-weight-bold">@{{ usuario.nombres }}</td>
                                <td>@{{ usuario.apellidos }}</td>
                                <td>
                                    <a :href="'mailto:' + usuario . email" class="text-dark">
                                        <i class="fas fa-envelope mr-1"></i> @{{ usuario.email }}
                                    </a>
                                </td>
                                <td class="text-center">
                                    <span v-if="usuario.estado_usuario == 'activo'" class="badge bg-success">Activo</span>
                                    <span v-else-if="usuario.estado_usuario == 'bloqueado'"
                                        class="badge bg-danger">Bloqueado</span>
                                    <span v-else class="badge bg-warning">Suspendido</span>
                                </td>
                                <td class="text-center nowrap">
                                    <button @click="editarUsuario(usuario)" class="btn btn-sm btn-outline-danger mx-1"
                                        title="Editar">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button @click="eliminarUsuario(usuario)" class="btn btn-sm btn-outline-danger mx-1"
                                        title="Eliminar">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footers.auth.footer')

    @section('scripts')
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                new Vue({
                    el: '#vue_app',
                    data: {
                        searchQuery: '',
                        usuarios: [],
                        new_usuario: {
                            nombres: '',
                            apellidos: '',
                            email: '',
                            password: '',
                            estado_usuario: 'activo'
                        },
                        edit_usuario: {
                            id: '',
                            nombres: '',
                            apellidos: '',
                            email: '',
                            password: '',
                            estado_usuario: 'activo'
                        }
                    },
                    computed: {
                        filteredUsuarios() {
                            if (!this.searchQuery) return this.usuarios;
                            const query = this.searchQuery.toLowerCase();
                            return this.usuarios.filter(usuario => {
                                return (
                                    (usuario.nombres && usuario.nombres.toLowerCase().includes(query)) ||
                                    (usuario.apellidos && usuario.apellidos.toLowerCase().includes(query)) ||
                                    (usuario.email && usuario.email.toLowerCase().includes(query))
                                );
                            });
                        }
                    },
                    mounted() {
                        this.getUsuarios();
                    },
                    methods: {
                        getUsuarios() {
                            axios.get('/getUsuarios')
                                .then(response => {
                                    this.usuarios = response.data;
                                })
                                .catch(error => {
                                    console.error("Error:", error);
                                    this.showError('Error al cargar usuarios');
                                });
                        },
                        createUsuario() {
                            this.new_usuario = {
                                nombres: '',
                                apellidos: '',
                                email: '',
                                password: '',
                                estado_usuario: 'activo'
                            };
                            $('#createUsuarioModal').modal('show');
                        },
                        storeUsuario() {
                            axios.post('/usuarios', this.new_usuario)
                                .then(response => {
                                    if (response.data.success) {
                                        this.getUsuarios();
                                        $('#createUsuarioModal').modal('hide');
                                        this.showSuccess('Usuario creado exitosamente');
                                    } else {
                                        this.showError(response.data.message);
                                    }
                                })
                                .catch(error => {
                                    this.showError('Error al crear usuario', error);
                                });
                        },
                        editarUsuario(usuario) {
                            this.edit_usuario = { ...usuario };
                            $('#editUsuarioModal').modal('show');
                        },
                        updateUsuario() {
                            const dataToSend = { ...this.edit_usuario };
                            if (!dataToSend.password) {
                                delete dataToSend.password;
                            }

                            axios.put(`/usuarios/${this.edit_usuario.id}`, dataToSend)
                                .then(response => {
                                    if (response.data.success) {
                                        this.getUsuarios();
                                        $('#editUsuarioModal').modal('hide');
                                        this.showSuccess('Usuario actualizado correctamente');
                                    } else {
                                        this.showError(response.data.message);
                                    }
                                })
                                .catch(error => {
                                    this.showError('Error al actualizar usuario', error);
                                });
                        },
                        eliminarUsuario(usuario) {
                            this.edit_usuario = { ...usuario };
                            this.showDeleteConfirmation(usuario.nombres + ' ' + usuario.apellidos);
                        },
                        deleteUsuario() {
                            axios.delete(`/usuarios/${this.edit_usuario.id}`)
                                .then(response => {
                                    if (response.data.success) {
                                        this.getUsuarios();
                                        $('#deleteUsuarioModal').modal('hide');
                                        this.showSuccess('Usuario eliminado correctamente');
                                    } else {
                                        this.showError(response.data.message);
                                    }
                                })
                                .catch(error => {
                                    this.showError('Error al eliminar usuario', error);
                                });
                        },
                        showSuccess(message) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Éxito',
                                text: message,
                                timer: 3000
                            });
                        },
                        showError(message, error = null) {
                            let errorMessage = message;
                            if (error && error.response && error.response.data) {
                                if (error.response.data.message) {
                                    errorMessage = error.response.data.message;
                                } else if (error.response.data.errors) {
                                    errorMessage = Object.values(error.response.data.errors).join('<br>');
                                }
                            }
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                html: errorMessage
                            });
                        },
                        showDeleteConfirmation(nombre) {
                            Swal.fire({
                                title: '¿Estás seguro?',
                                text: `Vas a eliminar al usuario "${nombre}"`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#d33',
                                cancelButtonColor: '#3085d6',
                                confirmButtonText: 'Sí, eliminar',
                                cancelButtonText: 'Cancelar'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    this.deleteUsuario();
                                }
                            });
                        }
                    }
                });
            });
        </script>
    @endsection
@endsection