@extends('layouts.app')
@section('title', 'Manajemen Pengguna')
@section('content')

@php $viewer = auth()->user(); @endphp

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-1">
            {{ $viewer->isMarketingAdmin() ? 'Pengguna Consumer Insight' : 'Manajemen Pengguna' }}
        </h4>
        <p class="text-muted mb-0">
            Total <strong id="totalCount">{{ $users->count() }}</strong> pengguna
            @if($viewer->isMarketingAdmin())
            — semua wilayah consumer insight
            @endif
        </p>
    </div>
    <a href="{{ route('users.create') }}" class="btn btn-primary">
        <i class="bi bi-person-plus"></i> Tambah User
    </a>
</div>

{{-- Search & Filter Bar --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <div class="row g-2 align-items-center">
            {{-- Search --}}
            <div class="col-md-4">
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-white">
                        <i class="bi bi-search text-muted"></i>
                    </span>
                    <input type="text" id="searchInput" class="form-control border-start-0"
                        placeholder="Cari nama, email, area...">
                </div>
            </div>

            {{-- Filter Role --}}
            <div class="col-md-2">
                <select id="filterRole" class="form-select form-select-sm">
                    <option value="">Semua Role</option>
                    <option value="manager">Manager</option>
                    <option value="spv">SPV</option>
                    <option value="spg">SPG</option>
                    @if($viewer->isSuperAdmin())
                    <option value="marketing_admin">Consumer Insight Admin</option>
                    <option value="super_admin">Super Admin</option>
                    @endif
                </select>
            </div>

            {{-- Filter Area Office --}}
            <div class="col-md-3">
                <select id="filterArea" class="form-select form-select-sm">
                    <option value="">Semua Area Office</option>
                    @foreach($users->pluck('area_office')->filter()->unique()->sort() as $area)
                    <option value="{{ $area }}">{{ $area }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Per Page --}}
            <div class="col-md-2">
                <select id="perPage" class="form-select form-select-sm">
                    <option value="10">10 per halaman</option>
                    <option value="25">25 per halaman</option>
                    <option value="50">50 per halaman</option>
                    <option value="100">100 per halaman</option>
                </select>
            </div>

            {{-- Reset --}}
            <div class="col-md-1">
                <button onclick="resetFilter()"
                    class="btn btn-outline-secondary btn-sm w-100" title="Reset filter">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Tabel --}}
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="userTable">
                <thead class="table-light">
                    <tr>
                        <th style="width:50px">#</th>
                        <th>Nama</th>
                        <th>No. Perner</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Area Office</th>
                        <th>Area Promotion</th>
                        <th>Status</th>
                        <th style="width:90px">Aksi</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    @forelse($users as $i => $user)
                    <tr class="user-row"
                        data-name="{{ strtolower($user->name) }}"
                        data-email="{{ strtolower($user->email) }}"
                        data-role="{{ $user->role }}"
                        data-area="{{ strtolower($user->area_office ?? '') }}"
                        data-promotion="{{ strtolower($user->area_promotion ?? '') }}">
                        <td class="row-number text-muted" style="font-size:13px">{{ $i + 1 }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div style="width:32px;height:32px;background:#e2e8f0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0">
                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                </div>
                                <div>
                                    <div class="fw-medium" style="font-size:14px">{{ $user->name }}</div>
                                    <small class="text-muted">{{ $user->phone ?: '-' }}</small>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:13px">{{ $user->perner_number ?: '-' }}</td>
                        <td style="font-size:13px">{{ $user->email }}</td>
                        <td>
                            @if($user->isSuperAdmin())
                                <span class="badge" style="background:#7c3aed;color:#fff;font-size:11px">SUPER ADMIN</span>
                            @elseif($user->isMarketingAdmin())
                                <span class="badge" style="background:#6d28d9;color:#fff;font-size:11px">MKT ADMIN</span>
                            @elseif($user->isManager())
                                <span class="badge bg-warning text-dark" style="font-size:11px">MANAGER</span>
                            @elseif($user->isSpv())
                                <span class="badge bg-success" style="font-size:11px">SPV</span>
                            @else
                                <span class="badge bg-primary" style="font-size:11px">SPG</span>
                            @endif
                        </td>
                        <td style="font-size:13px">
                            @if($user->area_office)
                            <span class="badge bg-light text-dark border" style="font-size:11px">
                                {{ $user->area_office }}
                            </span>
                            @else
                            <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td style="font-size:13px">{{ $user->area_promotion ?? '-' }}</td>
                        <td>
                            <span class="badge {{ $user->is_active ? 'bg-success' : 'bg-secondary' }}"
                                style="font-size:11px">
                                {{ $user->is_active ? 'Aktif' : 'Nonaktif' }}
                            </span>
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('users.edit', $user) }}"
                                   class="btn btn-sm btn-outline-warning" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @if($user->id !== auth()->id())
                                @if(!($viewer->isMarketingAdmin() && $user->isSuperAdmin()))
                                <form method="POST" action="{{ route('users.destroy', $user) }}"
                                    onsubmit="return confirm('Hapus user {{ addslashes($user->name) }}?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" title="Hapus">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endif
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-4 text-muted">
                            <i class="bi bi-people fs-2 d-block mb-2"></i>
                            Belum ada pengguna
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>

            {{-- Empty state saat filter tidak ada hasil --}}
            <div id="emptyState" class="text-center py-4 text-muted" style="display:none">
                <i class="bi bi-search fs-2 d-block mb-2"></i>
                Tidak ada user yang cocok dengan pencarian
            </div>
        </div>
    </div>

    {{-- Footer: info + pagination --}}
    <div class="card-footer bg-white d-flex justify-content-between align-items-center py-2 flex-wrap gap-2">
        <small class="text-muted" id="showingInfo">Menampilkan 0 dari 0 pengguna</small>
        <nav>
            <ul class="pagination pagination-sm mb-0" id="pagination"></ul>
        </nav>
    </div>
</div>

@endsection

@push('scripts')
<script>
let allRows     = [];
let filtered    = [];
let currentPage = 1;
let perPage     = 10;

document.addEventListener('DOMContentLoaded', () => {
    allRows  = Array.from(document.querySelectorAll('.user-row'));
    filtered = [...allRows];
    perPage  = parseInt(document.getElementById('perPage').value);
    render();

    document.getElementById('searchInput').addEventListener('input', applyFilter);
    document.getElementById('filterRole').addEventListener('change', applyFilter);
    document.getElementById('filterArea').addEventListener('change', applyFilter);
    document.getElementById('perPage').addEventListener('change', () => {
        perPage      = parseInt(document.getElementById('perPage').value);
        currentPage  = 1;
        render();
    });
});

function applyFilter() {
    const search = document.getElementById('searchInput').value.toLowerCase().trim();
    const role   = document.getElementById('filterRole').value.toLowerCase();
    const area   = document.getElementById('filterArea').value.toLowerCase();

    filtered = allRows.filter(row => {
        const matchSearch = !search ||
            row.dataset.name.includes(search) ||
            row.dataset.email.includes(search) ||
            row.dataset.area.includes(search) ||
            row.dataset.promotion.includes(search);

        const matchRole = !role || row.dataset.role === role;
        const matchArea = !area || row.dataset.area === area;

        return matchSearch && matchRole && matchArea;
    });

    currentPage = 1;
    render();
}

function render() {
    const total     = filtered.length;
    const totalPage = Math.ceil(total / perPage);
    const start     = (currentPage - 1) * perPage;
    const end       = Math.min(start + perPage, total);

    // Sembunyikan semua row
    allRows.forEach(r => r.style.display = 'none');

    // Tampilkan row yang sesuai halaman & filter
    const pageRows = filtered.slice(start, end);
    pageRows.forEach((row, i) => {
        row.style.display = '';
        row.querySelector('.row-number').textContent = start + i + 1;
    });

    // Empty state
    document.getElementById('emptyState').style.display = total === 0 ? 'block' : 'none';

    // Info
    document.getElementById('showingInfo').textContent =
        total === 0
            ? 'Tidak ada pengguna ditemukan'
            : `Menampilkan ${start + 1}–${end} dari ${total} pengguna`;

    // Pagination
    renderPagination(totalPage);
}

function renderPagination(totalPage) {
    const ul = document.getElementById('pagination');
    ul.innerHTML = '';

    if (totalPage <= 1) return;

    const mkLi = (label, page, disabled = false, active = false) => {
        const li  = document.createElement('li');
        li.className = `page-item ${disabled ? 'disabled' : ''} ${active ? 'active' : ''}`;
        const a   = document.createElement('a');
        a.className = 'page-link';
        a.href      = '#';
        a.innerHTML = label;
        if (!disabled) {
            a.addEventListener('click', e => {
                e.preventDefault();
                currentPage = page;
                render();
                document.getElementById('userTable').scrollIntoView({ behavior: 'smooth', block: 'start' });
            });
        }
        li.appendChild(a);
        return li;
    };

    // Prev
    ul.appendChild(mkLi('<i class="bi bi-chevron-left"></i>', currentPage - 1, currentPage === 1));

    // Pages — tampilkan max 5 nomor di tengah
    let startP = Math.max(1, currentPage - 2);
    let endP   = Math.min(totalPage, startP + 4);
    if (endP - startP < 4) startP = Math.max(1, endP - 4);

    if (startP > 1) {
        ul.appendChild(mkLi('1', 1));
        if (startP > 2) {
            const li = document.createElement('li');
            li.className = 'page-item disabled';
            li.innerHTML = '<span class="page-link">…</span>';
            ul.appendChild(li);
        }
    }

    for (let p = startP; p <= endP; p++) {
        ul.appendChild(mkLi(p, p, false, p === currentPage));
    }

    if (endP < totalPage) {
        if (endP < totalPage - 1) {
            const li = document.createElement('li');
            li.className = 'page-item disabled';
            li.innerHTML = '<span class="page-link">…</span>';
            ul.appendChild(li);
        }
        ul.appendChild(mkLi(totalPage, totalPage));
    }

    // Next
    ul.appendChild(mkLi('<i class="bi bi-chevron-right"></i>', currentPage + 1, currentPage === totalPage));
}

function resetFilter() {
    document.getElementById('searchInput').value = '';
    document.getElementById('filterRole').value  = '';
    document.getElementById('filterArea').value  = '';
    applyFilter();
}
</script>
@endpush