@section('title', 'Administradores')
@include('admin/includes/header')
@section('head')
@endsection

<style>
    .tr-sites td {
        padding-top: 0 !important;
        border-top: none !important;
        background: #f8f9fa;
    }
    .sites-box {
        border-left: 3px solid #0d6efd;
        padding: 10px 14px;
        border-radius: 0 4px 4px 0;
        background: #fff;
    }
    .site-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .site-item:last-child { border-bottom: none; }
    .badge-server {
        font-size: 0.68rem;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 20px;
        white-space: nowrap;
    }
    .srv-1 { background: #e7f1ff; color: #0d6efd; }
    .srv-2 { background: #e6f9f0; color: #198754; }
    .srv-3 { background: #fff3cd; color: #856404; }

    .spinner-sites {
        width: 16px; height: 16px;
        border: 2px solid #dee2e6;
        border-top-color: #0d6efd;
        border-radius: 50%;
        animation: spin .7s linear infinite;
        display: inline-block;
        vertical-align: middle;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .btn-sites .bi-chevron-down {
        transition: transform .2s ease;
        display: inline-block;
    }
    .btn-sites.open .bi-chevron-down {
        transform: rotate(180deg);
    }

    /* ===== TEMA ESCURO (especifico desta tela) ===== */
    [data-bs-theme="dark"] .tr-sites td { background: #20242d; }
    [data-bs-theme="dark"] .sites-box { background: #1b1f27; }
    [data-bs-theme="dark"] .site-item { border-bottom-color: rgba(255,255,255,.07); }
    [data-bs-theme="dark"] .srv-1 { background: rgba(59,130,246,.16); color: #6aa8ff; }
    [data-bs-theme="dark"] .srv-2 { background: rgba(16,185,129,.16); color: #34d399; }
    [data-bs-theme="dark"] .srv-3 { background: rgba(251,191,36,.16); color: #fbd66a; }
    [data-bs-theme="dark"] .spinner-sites { border-color: #3a4150; border-top-color: #6aa8ff; }
</style>

<main class="flex-shrink-0 mt-3">
    <div class="container">

        @if (\Session::has('success'))
            <div class="alert alert-success alert-icon alert-dismissible fade show fw-semibold" role="alert">
                {!! \Session::get('success') !!}
            </div>
            @php Session::forget('success'); @endphp
        @endif
        @if (\Session::has('error'))
            <div class="alert alert-danger alert-icon alert-dismissible fade show fw-semibold" role="alert">
                {!! \Session::get('error') !!}
            </div>
            @php Session::forget('error'); @endphp
        @endif

        <div class="row mb-3">
            <div class="col-md-12 d-flex align-items-center">
                <h4 class="mb-0">Lista de administradores</h4>
                <div class="ms-auto">
                    <form method="GET" action="{{ route('admin.adminUsers') }}" class="d-flex gap-2">
                        <input
                            type="text"
                            name="search"
                            class="form-control"
                            placeholder="Buscar por nome ou e-mail..."
                            value="{{ $search }}"
                            autocomplete="off"
                            style="min-width: 280px"
                        >
                        <button class="btn btn-outline-secondary" type="submit">Buscar</button>
                        @if($search !== '')
                            <a href="{{ route('admin.adminUsers') }}" class="btn btn-outline-danger">Limpar</a>
                        @endif
                    </form>
                </div>
            </div>
        </div>

        @if($users->count() == 0)
            <div class="py-4 text-center text-muted">Nenhum administrador encontrado.</div>
        @else
            <table class="table table-vcenter">
                <thead>
                    <tr>
                        <th scope="col">Nome</th>
                        <th scope="col">E-mail</th>
                        <th class="pe-1 text-end" scope="col">Ações</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($users as $user)
                    <tr class="tr-main">
                        <td class="fw-semibold">
                            @if($user->name_display !== 'Sem nome')
                                {{ $user->name_display }}
                            @else
                                <span class="text-muted fst-italic">Sem nome</span>
                            @endif
                        </td>
                        <td>
                            @if($user->email_display !== 'Sem e-mail')
                                <span class="text-muted">{{ $user->email_display }}</span>
                            @else
                                <span class="text-muted fst-italic">Sem e-mail</span>
                            @endif
                        </td>
                        <td class="pe-1 text-end" style="white-space: nowrap">
                            <button
                                class="btn btn-outline-info btn-sm btn-sites me-1"
                                type="button"
                                data-user-id="{{ $user->id }}"
                                title="Ver serviços"
                            >
                                <i class="bi bi-diagram-3 align-top"></i>
								<span class="ms-1">Ver Serviços</span>
                                <i class="bi bi-chevron-down align-top ms-1" style="font-size:.7rem"></i>
                            </button>
                            <button
                                class="btn btn-secondary btn-sm"
                                type="button"
                                title="Alterar senha"
                                data-bs-toggle="modal"
                                data-bs-target="#modalPassword"
                                data-user-id="{{ $user->id }}"
                                data-user-name="{{ $user->name_display }}"
                                data-search="{{ $search }}"
                            >
                                <i class="bi bi-key align-top"></i>
                            </button>
                        </td>
                    </tr>

                    <tr class="tr-sites d-none" id="sites-row-{{ $user->id }}">
                        <td colspan="3">
                            <div class="sites-box">
                                <div class="sites-loading-{{ $user->id }}">
                                    <span class="spinner-sites"></span>
                                    <span class="ms-2 text-muted small">Carregando serviços...</span>
                                </div>
                                <div class="sites-content-{{ $user->id }} d-none"></div>
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            {{ $users->links('vendor.pagination.default') }}
        @endif

    </div>
</main>


<div class="modal fade" id="modalPassword" tabindex="-1" aria-labelledby="modalPasswordLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.adminUsers.password') }}" id="formPassword" novalidate>
                @csrf
                <input type="hidden" name="user_id" id="modalUserId">
                <input type="hidden" name="search"  id="modalSearch">

                <div class="modal-header">
                    <h5 class="modal-title" id="modalPasswordLabel">
                        <i class="bi bi-key me-1"></i> Alterar senha
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>

                <div class="modal-body">
                    <p class="mb-3 text-muted">
                        Administrador: <strong id="modalUserNameDisplay" class="text-dark"></strong>
                    </p>

                    <div class="mb-3">
                        <label for="newPassword" class="form-label">Nova senha</label>
                        <div class="input-group">
                            <input
                                type="password"
                                class="form-control"
                                id="newPassword"
                                name="password"
                                minlength="6"
                                required
                                autocomplete="new-password"
                                placeholder="Mínimo 6 caracteres"
                            >
                            <button class="btn btn-outline-secondary" type="button" id="togglePassword" tabindex="-1">
                                <i class="bi bi-eye" id="togglePasswordIcon"></i>
                            </button>
                        </div>
                        <div class="invalid-feedback" id="feedbackPassword"></div>
                    </div>

                    <div class="mb-1">
                        <label for="confirmPassword" class="form-label">Confirmar senha</label>
                        <div class="input-group">
                            <input
                                type="password"
                                class="form-control"
                                id="confirmPassword"
                                autocomplete="new-password"
                                placeholder="Repita a senha"
                                required
                            >
                            <button class="btn btn-outline-secondary" type="button" id="toggleConfirm" tabindex="-1">
                                <i class="bi bi-eye" id="toggleConfirmIcon"></i>
                            </button>
                        </div>
                        <div class="invalid-feedback" id="feedbackConfirm"></div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary" id="btnSavePassword">
                        <i class="bi bi-floppy me-1"></i> Salvar senha
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


@include('admin/includes/footer')

<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script>
document.getElementById('modalPassword').addEventListener('show.bs.modal', function (e) {
    const btn = e.relatedTarget;
    document.getElementById('modalUserId').value               = btn.dataset.userId;
    document.getElementById('modalSearch').value               = btn.dataset.search || '';
    document.getElementById('modalUserNameDisplay').textContent = btn.dataset.userName;
    ['newPassword','confirmPassword'].forEach(function (id) {
        const el = document.getElementById(id);
        el.value = '';
        el.classList.remove('is-valid','is-invalid');
    });
    document.getElementById('togglePasswordIcon').className = 'bi bi-eye';
    document.getElementById('toggleConfirmIcon').className  = 'bi bi-eye';
    document.getElementById('newPassword').type     = 'password';
    document.getElementById('confirmPassword').type = 'password';
});

document.getElementById('togglePassword').addEventListener('click', function () {
    toggleVis('newPassword','togglePasswordIcon');
});
document.getElementById('toggleConfirm').addEventListener('click', function () {
    toggleVis('confirmPassword','toggleConfirmIcon');
});
function toggleVis(inputId, iconId) {
    const inp  = document.getElementById(inputId);
    const icon = document.getElementById(iconId);
    if (inp.type === 'password') {
        inp.type = 'text';
        icon.className = 'bi bi-eye-slash';
    } else {
        inp.type = 'password';
        icon.className = 'bi bi-eye';
    }
}

document.getElementById('formPassword').addEventListener('submit', function (e) {
    e.preventDefault();

    const pw   = document.getElementById('newPassword');
    const conf = document.getElementById('confirmPassword');
    const fbPw = document.getElementById('feedbackPassword');
    const fbCf = document.getElementById('feedbackConfirm');
    let valid  = true;

    pw.classList.remove('is-invalid', 'is-valid');
    conf.classList.remove('is-invalid', 'is-valid');

    if (pw.value.trim().length < 6) {
        pw.classList.add('is-invalid');
        fbPw.textContent = 'A senha deve ter no mínimo 6 caracteres.';
        valid = false;
    } else {
        pw.classList.add('is-valid');
    }

    if (conf.value.trim() === '') {
        conf.classList.add('is-invalid');
        fbCf.textContent = 'Por favor, confirme a senha.';
        valid = false;
    } else if (conf.value !== pw.value) {
        conf.classList.add('is-invalid');
        fbCf.textContent = 'As senhas não coincidem.';
        valid = false;
    } else if (valid) {
        conf.classList.add('is-valid');
    }

    if (!valid) return;

    const btn  = document.getElementById('btnSavePassword');
    const form = this;

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Salvando...';

    fetch(form.action, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: new FormData(form),
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
        bootstrap.Modal.getInstance(document.getElementById('modalPassword')).hide();

        const alertClass = data.success ? 'alert-success' : 'alert-danger';
        const alertHtml  = `<div class="alert ${alertClass} alert-icon alert-dismissible fade show fw-semibold" role="alert">
            ${data.message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>`;

        document.querySelector('.container').insertAdjacentHTML('afterbegin', alertHtml);
    })
    .catch(function () {
        bootstrap.Modal.getInstance(document.getElementById('modalPassword')).hide();

        const alertHtml = `<div class="alert alert-danger alert-icon alert-dismissible fade show fw-semibold" role="alert">
            Erro inesperado ao salvar a senha. Tente novamente.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>`;

        document.querySelector('.container').insertAdjacentHTML('afterbegin', alertHtml);
    })
    .finally(function () {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-floppy me-1"></i> Salvar senha';
    });
});


const loadedUsers = {};
const sitesUrl = '{{ route("admin.adminUsers.sites", ["userId" => "USERID"]) }}';

document.querySelectorAll('.btn-sites').forEach(function (btn) {
    btn.addEventListener('click', function () {
        const userId  = this.dataset.userId;
        const row     = document.getElementById('sites-row-' + userId);
        const loading = document.querySelector('.sites-loading-' + userId);
        const content = document.querySelector('.sites-content-' + userId);
        const isOpen  = !row.classList.contains('d-none');

        if (isOpen) {
            row.classList.add('d-none');
            this.classList.remove('open');
            return;
        }

        row.classList.remove('d-none');
        this.classList.add('open');

        if (loadedUsers[userId]) return;
        loadedUsers[userId] = true;

        fetch(sitesUrl.replace('USERID', userId), {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function (r) { return r.json(); })
        .then(function (sites) {
            loading.classList.add('d-none');
            content.classList.remove('d-none');

            if (!sites || sites.length === 0) {
                content.innerHTML = '<span class="text-muted small fst-italic">Nenhum serviço encontrado para este administrador.</span>';
                return;
            }

            const serverClass = { 1: 'srv-1', 2: 'srv-2', 3: 'srv-3' };

            let html = '';
            sites.forEach(function (s) {
                html += '<div class="site-item">'
                      +   '<span class="badge-server ' + (serverClass[s.server] || '') + '">' + s.server_label + '</span>'
                      +   '<a href="https://' + s.domain + '" target="_blank" rel="noopener" class="fw-semibold text-decoration-none">' + s.domain + '</a>'
                      +   '<i class="bi bi-box-arrow-up-right text-muted ms-1" style="font-size:.7rem"></i>'
                      + '</div>';
            });
            content.innerHTML = html;
        })
        .catch(function () {
            loading.classList.add('d-none');
            content.classList.remove('d-none');
            content.innerHTML = '<span class="text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>Erro ao carregar serviços.</span>';
        });
    });
});
</script>