@extends('layouts.admin')

@section('content')
<div class="admin-users-container" style="font-family: 'Inter', sans-serif; padding: 2rem; max-width: 1200px; margin: auto;">
    <h1 class="title" style="font-size: 2rem; font-weight: 600; margin-bottom: 1rem; color: #2c3e50;">
        Gestion des utilisateurs
    </h1>

    {{-- Onglets --}}
    <div class="tabs" style="display: flex; border-bottom: 2px solid #e0e0e0; margin-bottom: 1.5rem;">
        <button class="tab" data-target="import-tab"
            style="padding: 0.75rem 1.5rem; cursor: pointer; background: none; border: none; font-size: 1rem; color: #7f8c8d; transition: color 0.3s;">
            À importer
        </button>
        <button class="tab active" data-target="list-tab"
            style="padding: 0.75rem 1.5rem; cursor: pointer; background: none; border: none; font-size: 1rem; color: #34495e; font-weight: 600; border-bottom: 2px solid #2c3e50; transition: color 0.3s;">
            Comptes désactivés
        </button>
    </div>

    {{-- Onglet Import --}}
    <div id="import-tab" class="tab-content" style="display: none;">
        <form action="{{ route('admin.users.import') }}" method="POST" enctype="multipart/form-data" style="margin-bottom: 1rem;">
            @csrf
            <label for="file" style="font-weight: 500; color: #2c3e50;">Fichier à importer (CSV ou XLSX) :</label><br>
            <input type="file" name="file" id="file" accept=".csv,.xlsx" required
                style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #bdc3c7; border-radius: 4px;" />
            <button type="submit" class="import-btn"
                style="margin-left: 1rem; padding: 0.5rem 1rem; background: #27ae60; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s;">
                Importer les utilisateurs sélectionnés
            </button>
        </form>
        @if(session('import_result'))
            <div class="alert" style="margin-top: 1rem; padding: 0.75rem; background: #e8f5e9; border-left: 4px solid #27ae60; color: #2e7d32;">
                {{ session('import_result') }}
            </div>
        @endif
    </div>

    {{-- Onglet Comptes désactivés --}}
    <div id="list-tab" class="tab-content" style="display: block;">

        {{-- Alertes --}}
        @if(session('success'))
            <div style="margin-bottom: 1rem; padding: 0.75rem 1rem; background: #e8f5e9; border-left: 4px solid #27ae60; color: #2e7d32; border-radius: 4px;">
                ✅ {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div style="margin-bottom: 1rem; padding: 0.75rem 1rem; background: #fdecea; border-left: 4px solid #e74c3c; color: #c0392b; border-radius: 4px;">
                ⚠️ {{ session('error') }}
            </div>
        @endif

        {{-- Actions groupées --}}
        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0.75rem 1rem; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px;">
            <span style="font-weight: 600; color: #2c3e50; font-size: 0.95rem;">Actions groupées :</span>

            <button type="button" id="reactivateBtn"
                style="display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; background: #27ae60; color: white; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.2s;"
                onmouseover="this.style.background='#1e8449'" onmouseout="this.style.background='#27ae60'">
                ♻️ Réactivation
            </button>

            <button type="button" id="batchDeleteBtn"
                style="display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; background: #c0392b; color: white; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.2s;"
                onmouseover="this.style.background='#922b21'" onmouseout="this.style.background='#c0392b'">
                🗑️ Suppression définitive
            </button>
        </div>

        {{-- Tableau --}}
        <div style="overflow-x: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
            <table style="width: 100%; border-collapse: collapse; background: white;">
                <thead>
                    <tr style="background: #ecf0f1;">
                        <th style="padding: 0.75rem; text-align: center; width: 40px;">
                            <input type="checkbox" id="masterUserCheckbox"
                                style="width: 1rem; height: 1rem; cursor: pointer;" />
                        </th>
                        <th style="padding: 0.75rem; text-align: left;">Nom</th>
                        <th style="padding: 0.75rem; text-align: left;">Prénom</th>
                        <th style="padding: 0.75rem; text-align: left;">Email</th>
                        <th style="padding: 0.75rem; text-align: left;">Service</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $user)
                    <tr style="border-top: 1px solid #ecf0f1; transition: background 0.15s;"
                        onmouseover="this.style.background='#f9f9f9'"
                        onmouseout="this.style.background='white'">
                        <td style="padding: 0.75rem; text-align: center;">
                            <input type="checkbox"
                                class="row-user-checkbox"
                                value="{{ $user->id }}"
                                style="width: 1rem; height: 1rem; cursor: pointer;" />
                        </td>
                        <td style="padding: 0.75rem; font-weight: 500;">{{ $user->name }}</td>
                        <td style="padding: 0.75rem;">{{ $user->firstname }}</td>
                        <td style="padding: 0.75rem; color: #555;">{{ $user->email }}</td>
                        <td style="padding: 0.75rem; color: #7f8c8d; font-size: 0.9rem;">
                            {{ $user->profileAgent?->serviceActuel?->service?->libelle_service ?? '—' }}
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" style="padding: 2rem; text-align: center; color: #95a5a6; font-style: italic;">
                            Aucun compte désactivé trouvé.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── Gestion des onglets ──────────────────────────────────────────────────
    const tabs = document.querySelectorAll('.tab');
    const tabContents = document.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // Activer l'onglet cliqué
            tabs.forEach(t => {
                t.style.fontWeight = '';
                t.style.borderBottom = '';
                t.style.color = '#7f8c8d';
                t.classList.remove('active');
            });
            tab.style.fontWeight = '600';
            tab.style.borderBottom = '2px solid #2c3e50';
            tab.style.color = '#34495e';
            tab.classList.add('active');

            // Afficher le bon contenu
            const target = tab.dataset.target;
            tabContents.forEach(tc => tc.style.display = 'none');
            const targetEl = document.getElementById(target);
            if (targetEl) targetEl.style.display = 'block';

            // Réinitialiser les sélections
            if (masterCb) masterCb.checked = false;
            rowCheckboxes.forEach(cb => cb.checked = false);
        });
    });

    // ── Checkboxes ───────────────────────────────────────────────────────────
    const masterCb = document.getElementById('masterUserCheckbox');
    const rowCheckboxes = document.querySelectorAll('.row-user-checkbox');

    if (masterCb) {
        masterCb.addEventListener('change', () => {
            rowCheckboxes.forEach(cb => cb.checked = masterCb.checked);
        });
    }

    rowCheckboxes.forEach(cb => {
        cb.addEventListener('change', () => {
            const total   = rowCheckboxes.length;
            const checked = document.querySelectorAll('.row-user-checkbox:checked').length;
            if (masterCb) {
                masterCb.checked = (checked === total);
                masterCb.indeterminate = (checked > 0 && checked < total);
            }
        });
    });

    // ── Réactivation groupée ─────────────────────────────────────────────────
    const reactivateBtn = document.getElementById('reactivateBtn');
    if (reactivateBtn) {
        reactivateBtn.addEventListener('click', () => {
            const selected = document.querySelectorAll('.row-user-checkbox:checked');
            if (selected.length === 0) {
                openConfirmModal({
                    icon        : 'ℹ️',
                    headerClass : 'from-gray-500 to-gray-400',
                    title       : 'Aucune sélection',
                    body        : '<p>Veuillez cocher au moins un compte à réactiver.</p>',
                    confirmText : 'OK',
                    confirmClass: 'bg-gray-600 hover:bg-gray-700',
                    onConfirm   : () => {}
                });
                return;
            }

            openConfirmModal({
                icon        : '♻️',
                headerClass : 'from-green-600 to-emerald-500',
                title       : `Réactiver ${selected.length} compte(s)`,
                subtitle    : 'Réactivation de comptes utilisateurs',
                body        : `<p>Vous êtes sur le point de réactiver <strong>${selected.length} compte(s)</strong> sélectionné(s).<br>Ces comptes pourront à nouveau se connecter à l'application.</p>`,
                confirmText : '♻️ Oui, réactiver',
                confirmClass: 'bg-green-600 hover:bg-green-700',
                onConfirm   : () => {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '{{ route("admin.users.batch-reactivate") }}';
                    form.innerHTML = `<input type="hidden" name="_token" value="{{ csrf_token() }}"><`;
                    selected.forEach(cb => {
                        const inp = document.createElement('input');
                        inp.type = 'hidden';
                        inp.name = 'selected_users[]';
                        inp.value = cb.value;
                        form.appendChild(inp);
                    });
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    }

    // ── Suppression définitive groupée ────────────────────────────────────────
    const deleteBtn = document.getElementById('batchDeleteBtn');
    if (deleteBtn) {
        deleteBtn.addEventListener('click', () => {
            const selected = document.querySelectorAll('.row-user-checkbox:checked');
            if (selected.length === 0) {
                openConfirmModal({
                    icon        : 'ℹ️',
                    headerClass : 'from-gray-500 to-gray-400',
                    title       : 'Aucune sélection',
                    body        : '<p>Veuillez cocher au moins un compte à supprimer.</p>',
                    confirmText : 'OK',
                    confirmClass: 'bg-gray-600 hover:bg-gray-700',
                    onConfirm   : () => {}
                });
                return;
            }

            const listHtml = Array.from(selected).map(cb => {
                const row    = cb.closest('tr');
                const nom    = row ? row.cells[1]?.textContent.trim() : cb.value;
                const prenom = row ? row.cells[2]?.textContent.trim() : '';
                return `<li class="font-mono text-xs">• ${prenom} ${nom}</li>`;
            }).join('');

            openConfirmModal({
                icon        : '🗑️',
                headerClass : 'from-red-700 to-rose-600',
                title       : `Supprimer définitivement ${selected.length} compte(s)`,
                subtitle    : 'Suppression irréversible',
                body        : `
                    <p>Vous allez supprimer <strong>${selected.length} compte(s)</strong> ainsi que <strong>toutes leurs saisies</strong> (heures, astreintes, récupérations…) :</p>
                    <ul class="bg-red-50 border border-red-200 rounded-lg p-3 space-y-1 max-h-40 overflow-y-auto">${listHtml}</ul>
                    <div class="flex items-start gap-2 bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-800">
                        <span class="shrink-0">⚠️</span>
                        <span>Cette action est <strong>irréversible</strong>. Les données ne pourront pas être récupérées.</span>
                    </div>
                `,
                confirmText : '🗑️ Oui, supprimer définitivement',
                confirmClass: 'bg-red-600 hover:bg-red-700',
                onConfirm   : () => {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '{{ route("admin.users.batch-delete") }}';
                    form.innerHTML = `<input type="hidden" name="_token" value="{{ csrf_token() }}">`;
                    selected.forEach(cb => {
                        const inp = document.createElement('input');
                        inp.type = 'hidden';
                        inp.name = 'selected_users[]';
                        inp.value = cb.value;
                        form.appendChild(inp);
                    });
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    }

});
</script>
@endsection