@extends('layouts.app')
@section('title', 'Tim Wilayah')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-1">Tim {{ auth()->user()->area_office ?? 'Wilayah Saya' }}</h4>
        <p class="text-muted mb-0">Kelola SPV dan SPG di wilayah Anda</p>
    </div>
    <a href="{{ route('users.region.create') }}" class="btn btn-primary">
        <i class="bi bi-person-plus"></i> Tambah Anggota Tim
    </a>
</div>

{{-- Search & Filter --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <div class="row g-2 align-items-center">
            <div class="col-md-5">
                <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...">
                </div>
            </div>
            <div class="col-md-3">
                <select id="filterRole" class="form-select form-select-sm">
                    <option value="">Semua Role</option>
                    <option value="spv">SPV</option>
                    <option value="spg">SPG</option>
                </select>
            </div>
            <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>
                </select>
            </div>
            <div class="col-md-2">
                <button onclick="resetFilter()" class="btn btn-outline-secondary btn-sm w-100">
                    <i class="bi bi-x-lg"></i> Reset
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="regionTable">
                <thead class="table-light">
                    <tr>
                        <th style="width:50px">#</th>
                        <th>Nama</th>
                        <th>No. Perner</th>
                        <th>No. HP</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Area Promotion</th>
                        <th>Status</th>
                        <th style="width:100px">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 }}">
                        <td class="row-number text-muted" style="font-size:13px">{{ $i + 1 }}</td>

                        {{-- Nama --}}
                        <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 class="fw-medium" style="font-size:14px">{{ $user->name }}</div>
                            </div>
                        </td>

                        {{-- No. Perner --}}
                        <td style="font-size:13px">{{ $user->perner_number ?: '-' }}</td>

                        {{-- No. HP --}}
                        <td style="font-size:13px">{{ $user->phone ?: '-' }}</td>

                        {{-- Email --}}
                        <td style="font-size:13px">{{ $user->email }}</td>

                        {{-- Role --}}
                        <td>
                            @if($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>

                        {{-- Area Promotion --}}
                        <td style="font-size:13px">{{ $user->area_promotion ?? '-' }}</td>

                        {{-- Status --}}
                        <td>
                            <span class="badge {{ $user->is_active ? 'bg-success' : 'bg-secondary' }}"
                                style="font-size:11px">
                                {{ $user->is_active ? 'Aktif' : 'Nonaktif' }}
                            </span>
                        </td>

                        {{-- Aksi: Edit + Hapus --}}
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('users.region.edit', $user) }}"
                                    class="btn btn-sm btn-outline-warning" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form method="POST" action="{{ route('users.region.destroy', $user) }}"
                                    onsubmit="return confirm('Hapus {{ addslashes($user->name) }}?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" title="Hapus">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-4 text-muted">
                            <i class="bi bi-people fs-2 d-block mb-2"></i>
                            Belum ada anggota tim
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>

            <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>

    <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"></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];
    render();

    document.getElementById('searchInput').addEventListener('input', applyFilter);
    document.getElementById('filterRole').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;

    filtered = allRows.filter(row => {
        const matchSearch = !search ||
            row.dataset.name.includes(search) ||
            row.dataset.email.includes(search);
        const matchRole = !role || row.dataset.role === role;
        return matchSearch && matchRole;
    });

    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);

    allRows.forEach(r => r.style.display = 'none');
    filtered.slice(start, end).forEach((row, i) => {
        row.style.display = '';
        row.querySelector('.row-number').textContent = start + i + 1;
    });

    document.getElementById('emptyState').style.display = total === 0 ? 'block' : 'none';
    document.getElementById('showingInfo').textContent = total === 0
        ? 'Tidak ada user ditemukan'
        : `Menampilkan ${start + 1}–${end} dari ${total} anggota tim`;

    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('regionTable').scrollIntoView({ behavior: 'smooth', block: 'start' });
            });
        }
        li.appendChild(a);
        return li;
    };

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

    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));
    }

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

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