@extends('layouts.theme_selector')

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header border-bottom d-flex justify-content-between align-items-center py-3"
                        style="background-color: var(--bs-body-tertiary);">
                        <div class="d-flex align-items-center">
                            <a href="{{ url()->previous() }}" class="text-body-emphasis me-3">
                                <i class="bi bi-arrow-left-circle fs-4"></i>
                            </a>
                            <h5 class="mb-0 text-body-emphasis fw-bold">
                                <i class="bi bi-people-fill me-2"></i>
                                Gestión de Usuarios API
                            </h5>
                        </div>
                        <a href="{{ route('ApiUsersCreate') }}" class="btn btn-primary btn-sm shadow-sm">
                            <i class="bi bi-plus-circle me-1"></i>
                            Nuevo Usuario
                        </a>
                    </div>

                    <div class="card-body p-4">
                        @include('layouts.alerts.error')
                        @include('layouts.alerts.success')

                        <div class="table-responsive">
                            <table class="table table-hover align-middle" id="usersTable">
                                <thead class="bg-body-secondary">
                                    <tr>
                                        <th class="text-center" style="width: 60px;">ID</th>
                                        <th>Nombre</th>
                                        <th>Email</th>
                                        <th class="text-center">Código</th>
                                        <th class="text-center" style="width: 100px;">Estado</th>
                                        <th class="text-center" style="width: 200px;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($users as $user)
                                        <tr class="{{ $user->activo == 0 ? 'table-secondary opacity-75' : '' }}">
                                            <td class="text-center">
                                                <span class="badge bg-secondary">{{ $user->id }}</span>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-circle me-2">
                                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                                    </div>
                                                    <span class="fw-medium">{{ $user->name }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="text-body-secondary">
                                                    <i class="bi bi-envelope me-1"></i>
                                                    {{ $user->email }}
                                                </span>
                                            </td>
                                            <td class="text-center">
                                                <code class="text-primary fw-bold bg-body-secondary px-2 py-1 rounded"
                                                    style="font-size: 0.85rem;">{{ $user->config->codigo ?? 'N/A' }}</code>
                                            </td>
                                            <td class="text-center">
                                                @if($user->activo == 1)
                                                    <span class="badge bg-success-subtle text-success px-3 py-2">
                                                        <i class="bi bi-check-circle me-1"></i>Activo
                                                    </span>
                                                @else
                                                    <span class="badge bg-danger-subtle text-danger px-3 py-2">
                                                        <i class="bi bi-x-circle me-1"></i>Inactivo
                                                    </span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <div class="d-flex justify-content-center">
                                                    {{-- Toggle Active --}}
                                                    <form action="{{ route('ApiUsersToggleActive', $user->id) }}" method="post"
                                                        class="d-inline">
                                                        @csrf
                                                        <button type="submit"
                                                            class="btn btn-sm btn-action mx-1 {{ $user->activo == 1 ? 'btn-outline-secondary' : 'btn-outline-success' }}"
                                                            title="{{ $user->activo == 1 ? 'Desactivar' : 'Activar' }}">
                                                            <i class="bi {{ $user->activo == 1 ? 'bi-pause' : 'bi-play' }}"></i>
                                                        </button>
                                                    </form>

                                                    {{-- Edit --}}
                                                    <a href="{{ route('ApiUsersEdit', $user->id) }}"
                                                        class="btn btn-sm btn-action mx-1 btn-outline-primary" title="Editar">
                                                        <i class="bi bi-pencil"></i>
                                                    </a>

                                                    {{-- Reset Password --}}
                                                    <button type="button"
                                                        class="btn btn-sm btn-action mx-1 btn-outline-danger btn-reset-password"
                                                        data-user-id="{{ $user->id }}" data-user-name="{{ $user->name }}"
                                                        title="Cambiar Clave">
                                                        <i class="bi bi-key"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-5">
                                                <div class="text-muted">
                                                    <i class="bi bi-inbox fs-1 d-block mb-3"></i>
                                                    No hay usuarios registrados
                                                </div>
                                                <a href="{{ route('ApiUsersCreate') }}" class="btn btn-primary mt-3">
                                                    <i class="bi bi-plus-circle me-1"></i>
                                                    Crear primer usuario
                                                </a>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('modals')
    {{-- Modal de confirmación para reset de password --}}
    <div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="resetPasswordModalLabel">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        Confirmar cambio de contraseña
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <i class="bi bi-key-fill text-danger" style="font-size: 3rem;"></i>
                    <p class="mt-3 mb-0">
                        ¿Estás seguro de que deseas generar una nueva contraseña para <strong id="resetUserName"></strong>?
                    </p>
                    <small class="text-body-secondary">Se enviará un email con las nuevas credenciales.</small>
                </div>
                <div class="modal-footer border-0 justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <form id="resetPasswordForm" method="post" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-danger">
                            <i class="bi bi-key me-1"></i>
                            Generar nueva contraseña
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal de credenciales generadas --}}
    @if(session('show_credentials'))
        <div class="modal fade" id="credentialsModal" tabindex="-1" aria-labelledby="credentialsModalLabel" aria-hidden="true"
            data-bs-backdrop="static">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title" id="credentialsModalLabel">
                            <i class="bi bi-shield-check me-2"></i>
                            Credenciales generadas
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body py-4">
                        <div class="alert alert-warning mb-4">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <strong>¡Importante!</strong> Guarda estas credenciales. La contraseña no se mostrará nuevamente.
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold text-body-secondary small">EMAIL</label>
                            <div class="input-group">
                                <input type="text" class="form-control bg-body-tertiary"
                                    value="{{ session('credential_email') }}" readonly id="credEmail">
                                <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('credEmail')">
                                    <i class="bi bi-clipboard"></i>
                                </button>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold text-body-secondary small">CONTRASEÑA</label>
                            <div class="input-group">
                                <input type="text" class="form-control bg-body-tertiary font-monospace fs-5 fw-bold text-center"
                                    value="{{ session('credential_password') }}" readonly id="credPassword">
                                <button class="btn btn-outline-secondary" type="button"
                                    onclick="copyToClipboard('credPassword')">
                                    <i class="bi bi-clipboard"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 justify-content-center">
                        <button type="button" class="btn btn-success px-4" data-bs-dismiss="modal">
                            <i class="bi bi-check-lg me-1"></i>
                            Entendido
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endpush

@push('scripts')
    <style>
        .avatar-circle {
            width: 36px;
            height: 36px;
            background-color: #125368;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        .bg-success-subtle {
            background-color: rgba(25, 135, 84, 0.15) !important;
        }

        .bg-danger-subtle {
            background-color: rgba(220, 53, 69, 0.15) !important;
        }

        .table>tbody>tr:hover {
            background-color: rgba(var(--bs-primary-rgb), 0.075);
        }

        .btn-action {
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 0.375rem !important;
        }

        .btn-action i {
            line-height: 1;
            font-size: 1.1rem;
        }

        code {
            color: #1c93b9;
        }

        /* Fix modal z-index */
        .modal {
            z-index: 1060 !important;
        }

        .modal-backdrop {
            z-index: 1050 !important;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            // Modal de reset password
            $('.btn-reset-password').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();

                var userId = $(this).data('user-id');
                var userName = $(this).data('user-name');

                $('#resetUserName').text(userName);
                $('#resetPasswordForm').attr('action', '{{ url("ApiUsers/ResetPassword") }}/' + userId);

                var modalEl = document.getElementById('resetPasswordModal');
                var modal = new bootstrap.Modal(modalEl);
                modal.show();
            });

            // Mostrar modal de credenciales si existe
            @if(session('show_credentials'))
                setTimeout(function () {
                    var credModalEl = document.getElementById('credentialsModal');
                    var credModal = new bootstrap.Modal(credModalEl);
                    credModal.show();
                }, 300);
            @endif
                });

        function copyToClipboard(elementId) {
            var copyText = document.getElementById(elementId);
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);

            // Mostrar feedback
            var btn = copyText.nextElementSibling;
            btn.innerHTML = '<i class="bi bi-check text-success"></i>';
            setTimeout(function () {
                btn.innerHTML = '<i class="bi bi-clipboard"></i>';
            }, 2000);
        }
    </script>
@endpush