@extends('layouts.boxes')

@section('content')
<div class="card my-4">
    <div class="card-header bg-dark text-light">
        <ul class="nav nav-tabs card-header-tabs" id="templateTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="form-tab" data-bs-toggle="tab" data-bs-target="#formulario" type="button" role="tab">
                    Crear Usuario
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="list-tab" data-bs-toggle="tab" data-bs-target="#lista" type="button" role="tab">
                    Ver Usuarios
                </button>
            </li>
        </ul>
    </div>

    <div class="card-body">
        {{-- Mensajes de éxito --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        {{-- Errores de validación --}}
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                       <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="tab-content" id="templateTabsContent">
            {{-- TAB FORMULARIO --}}
            <div class="tab-pane fade show active" id="formulario" role="tabpanel" aria-labelledby="form-tab">
                <div class="container mt-4">
                    <div class="row justify-content-center">
                        <div class="col-md-6">
                            <div class="card shadow">
                                <div class="card-header bg-dark text-white text-center">
                                    <h4>Registro de Usuario</h4>
                                </div>
                                <div class="card-body">

                                    <!-- Mostrar errores de validación -->
                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <ul class="mb-0">
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    <form method="POST" action="{{ route('register') }}">
                                        @csrf

                                        <!-- Nombre -->
                                        <div class="mb-3">
                                            <label for="name" class="form-label">Nombre</label>
                                            <input type="text" id="name" name="name" class="form-control"
                                                value="{{ old('name') }}" required autofocus>
                                        </div>

                                        <!-- Correo -->
                                        <div class="mb-3">
                                            <label for="email" class="form-label">Correo electrónico</label>
                                            <input type="email" id="email" name="email" class="form-control"
                                                value="{{ old('email') }}" required>
                                        </div>

                                        <!-- Contraseña -->
                                        <div class="mb-3">
                                            <label for="password" class="form-label">Contraseña</label>
                                            <input type="password" id="password" name="password" class="form-control"
                                                required autocomplete="new-password">
                                        </div>

                                        <!-- Confirmar contraseña -->
                                        <div class="mb-3">
                                            <label for="password_confirmation" class="form-label">Confirmar contraseña</label>
                                            <input type="password" id="password_confirmation" name="password_confirmation"
                                                class="form-control" required>
                                        </div>

                                        <div class="d-flex justify-content-between align-items-center">
                                            <button type="submit" class="btn btn-primary">
                                                Registrar
                                            </button>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- TAB LISTA --}}
            <div class="tab-pane fade" id="lista" role="tabpanel" aria-labelledby="list-tab">
                <h5 class="mb-3">Usuarios existentes</h5>
                <table class="table table-striped table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>correo</th>
                            <th>Accion</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $user)
                        <script>
                            
                        </script>
                            <tr>
                                <td>{{ $user->id }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <button 
                                        class="btn btn-sm btn-primary edit-btn" 
                                        data-id="{{ $user->id }}"
                                        data-nombre="{{ $user->name }}"
                                        data-email="{{ $user->email }}">
                                        Editar
                                    </button>
                                    {{-- Botón Eliminar --}}
                                    <form action="{{ route('users.destroy', $user->id) }}" method="POST" style="display:inline-block;" 
                                        onsubmit="return confirm('¿Seguro que deseas eliminar este template?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger">Eliminar</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center">No hay templates creados aún</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const editButtons = document.querySelectorAll(".edit-btn");
    const editModal = new bootstrap.Modal(document.getElementById("editTemplateModal"));

    // Campos del formulario dentro del modal
    const editId = document.getElementById("edit_id");
    const editNombre = document.getElementById("edit_nombre");
    const editEmail = document.getElementById("edit_email");
    const editForm = document.getElementById("editTemplateForm");

    // Cuando se hace clic en un botón "Editar"
    editButtons.forEach(button => {
        button.addEventListener("click", function() {
            const userId = this.dataset.id;
            const userNombre = this.dataset.nombre;
            const userEmail = this.dataset.email;

            // Rellenar los campos del modal
            editId.value = userId;
            editNombre.value = userNombre;
            editEmail.value = userEmail;

            // Cambiar la acción del formulario (ruta PUT)
            editForm.action = `/users/${userId}`;

            // Mostrar el modal
            editModal.show();
        });
    });
});
</script>

<!-- Modal de edición -->
<div class="modal fade" id="editTemplateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <form method="POST" id="editTemplateForm">
            @csrf

            <input type="hidden" name="id" id="edit_id">

            <div class="form-group mb-3">
                <label>Nombre</label>
                <input type="text" name="name" id="edit_nombre" class="form-control" required>
            </div>

            <div class="form-group mb-3">
                <label>Email</label>
                <input type="text" name="email" id="edit_email" class="form-control" disabled required>
            </div>

            <!-- Switch -->
            <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox" id="togglePasswordChange" name="reemplazar_password">
                <label class="form-check-label" for="togglePasswordChange">Reemplazar contraseña</label>
            </div>

            <div id="passwordFields" style="display: none;">
                <div class="form-group mb-3">
                    <label>Nueva contraseña</label>
                    <input type="password" name="password" id="new_password" class="form-control" placeholder="Ingrese nueva contraseña">
                </div>
                <div class="form-group mb-3">
                    <label>Confirmar nueva contraseña</label>
                    <input type="password" name="password_confirmation" id="confirm_password" class="form-control" placeholder="Confirme la nueva contraseña">
                </div>
                <div id="passwordError" class="text-danger small" style="display: none;">Las contraseñas no coinciden.</div>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-dark">Actualizar</button>
            </div>
        </form>
    </div>
  </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const togglePasswordChange = document.getElementById("togglePasswordChange");
        const passwordFields = document.getElementById("passwordFields");
        const newPassword = document.getElementById("new_password");
        const confirmPassword = document.getElementById("confirm_password");
        const passwordError = document.getElementById("passwordError");
        const form = document.getElementById("editTemplateForm");

        // Mostrar/ocultar campos de contraseña
        togglePasswordChange.addEventListener("change", function() {
            if (this.checked) {
                passwordFields.style.display = "block";
                newPassword.required = true;
                confirmPassword.required = true;
            } else {
                passwordFields.style.display = "none";
                newPassword.required = false;
                confirmPassword.required = false;
                newPassword.value = "";
                confirmPassword.value = "";
                passwordError.style.display = "none";
            }
        });

    });
</script>


@endsection