@extends('layouts.superadmin')
@section('title', 'Kelola Pengguna')

@section('header_title')
    <h1 class="text-2xl font-bold text-primary">Kelola Pengguna</h1>
@endsection

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <h1>Manajemen Pengguna Masjid</h1>
        <p>Daftar seluruh Amil, RT, dan Admin Masjid dari semua masjid terdaftar</p>
    </div>
</div>

{{-- Filter Bar --}}
<form method="GET" action="{{ url('/superadmin/kelola-user') }}">
<div class="card" style="padding:16px 20px; margin-bottom:20px;">
    <div class="filter-grid" style="grid-template-columns: 2fr 1fr 1fr 1fr;">
        {{-- Search --}}
        <div class="search-wrap">
            <i class="bi bi-search"></i>
            <input type="text" name="search" class="search-input" placeholder="Cari nama, username, email..." value="{{ request('search') }}">
        </div>
        {{-- Filter Masjid --}}
        <div class="select-wrap">
            <select name="masjid" class="form-ctrl" onchange="this.form.submit()">
                <option value="">— Semua Masjid —</option>
                @foreach($daftarMasjid as $m)
                    <option value="{{ $m->id_masjid }}" {{ request('masjid') == $m->id_masjid ? 'selected' : '' }}>
                        {{ $m->nama_masjid }}
                    </option>
                @endforeach
            </select>
        </div>
        {{-- Filter Role --}}
        <div class="select-wrap">
            <select name="role" class="form-ctrl" onchange="this.form.submit()">
                <option value="semua">— Semua Role —</option>
                <option value="admin_masjid" {{ request('role') == 'admin_masjid' ? 'selected' : '' }}>Admin Masjid</option>
                <option value="amil" {{ request('role') == 'amil' ? 'selected' : '' }}>Amil</option>
                <option value="rt" {{ request('role') == 'rt' ? 'selected' : '' }}>Ketua RT</option>
            </select>
        </div>
        {{-- Tombol Cari --}}
        <button type="submit" class="btn-primary-green">
            <i class="bi bi-search"></i> Cari
        </button>
    </div>
</div>
</form>

{{-- Tabel --}}
<div class="card">
    <div style="padding:16px 20px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center;">
        <div style="font-size:14px; font-weight:700;">
            <i class="bi bi-people-fill" style="color:var(--green-primary);"></i>
            Daftar Pengguna
        </div>
        <span style="font-size:12px; color:var(--text-muted);">Total: {{ $users->total() }} pengguna</span>
    </div>
    <div class="table-responsive">
    <form id="bulk-form" method="POST" action="{{ route('superadmin.user.bulk_toggle') }}">
        @csrf
    <table class="data-table">
        <thead>
            <tr>
                <th style="width:50px;">No</th>
                <th>Nama & Username</th>
                <th>Masjid</th>
                <th>Role</th>
                <th>Email</th>
                <th>Status</th>
                <th style="text-align:center;">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse($users as $i => $u)
            <tr>
                <td style="color:var(--text-muted);">{{ $users->firstItem() + $i }}</td>
                <td>
                    <div style="display:flex; align-items:center; gap:10px;">
                        <div class="avatar-initial">{{ strtoupper(substr($u->nama_user, 0, 1)) }}</div>
                        <div>
                            <div style="font-weight:600; font-size:13.5px;">{{ $u->nama_user }}</div>
                            <div style="font-size:12px; color:var(--text-muted);">@{{ $u->username }}</div>
                        </div>
                    </div>
                </td>
                <td style="font-size:13px;">
                    <span style="background:#f0fdf4; color:#166534; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600;">
                        <i class="bi bi-building"></i>
                        {{ $u->masjid->nama_masjid ?? '—' }}
                    </span>
                </td>
                <td>
                    @php
                        $roleStyle = match($u->int_role) {
                            'admin_masjid' => ['bg'=>'#ede9fe','color'=>'#6d28d9','label'=>'Admin Masjid'],
                            'amil'         => ['bg'=>'#e8f5ee','color'=>'#1a6b3c','label'=>'Amil'],
                            'rt'           => ['bg'=>'#eff6ff','color'=>'#2563eb','label'=>'Ketua RT'],
                            default        => ['bg'=>'#f3f4f6','color'=>'#374151','label'=>ucfirst($u->int_role)],
                        };
                    @endphp
                    <span class="badge-pill" style="background:{{ $roleStyle['bg'] }}; color:{{ $roleStyle['color'] }};">
                        {{ $roleStyle['label'] }}
                    </span>
                </td>
                <td style="font-size:12.5px; color:var(--text-muted);">{{ $u->email }}</td>
                <td>
                    <input type="hidden" name="displayed_users[]" value="{{ $u->id_user }}">
                    <label class="toggle-switch" title="{{ $u->status_aktif ? 'Nonaktifkan' : 'Aktifkan' }}">
                        <input type="checkbox" name="status_aktif[{{ $u->id_user }}]" {{ $u->status_aktif ? 'checked' : '' }}>
                        <span class="toggle-slider"></span>
                    </label>
                </td>
                <td style="text-align:center;">
                    <button type="button" class="action-icon-btn del" title="Hapus" onclick="confirmDelete({{ $u->id_user }}, '{{ addslashes($u->nama_user) }}')">
                        <i class="bi bi-trash3"></i>
                    </button>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" style="text-align:center; padding:40px; color:var(--text-muted);">
                    <i class="bi bi-people" style="font-size:32px; display:block; margin-bottom:10px; opacity:0.4;"></i>
                    Tidak ada data pengguna.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    @if($users->count() > 0)
    <div style="padding:16px 20px; background:#fafafa; border-top:1px solid var(--border-color); display:flex; justify-content:flex-end;">
        <button type="submit" class="btn-primary-green">
            <i class="bi bi-floppy"></i> Simpan Perubahan Status
        </button>
    </div>
    @endif
    </form>
    </div>

    {{-- Pagination --}}
    @if($users->hasPages())
    <div class="pagination-wrap">
        <span>Menampilkan {{ $users->firstItem() }}–{{ $users->lastItem() }} dari {{ $users->total() }}</span>
        <div class="pagination-btns">
            @if($users->onFirstPage())
                <button class="page-btn" disabled><i class="bi bi-chevron-left"></i></button>
            @else
                <a href="{{ $users->previousPageUrl() }}" class="page-btn"><i class="bi bi-chevron-left"></i></a>
            @endif
            @foreach($users->getUrlRange(max(1, $users->currentPage()-2), min($users->lastPage(), $users->currentPage()+2)) as $page => $url)
                <a href="{{ $url }}" class="page-btn {{ $users->currentPage() == $page ? 'active' : '' }}">{{ $page }}</a>
            @endforeach
            @if($users->hasMorePages())
                <a href="{{ $users->nextPageUrl() }}" class="page-btn"><i class="bi bi-chevron-right"></i></a>
            @else
                <button class="page-btn" disabled><i class="bi bi-chevron-right"></i></button>
            @endif
        </div>
    </div>
    @endif
</div>

<form id="delete-form" method="POST" action="" style="display:none;">
    @csrf
</form>
<script>
function confirmDelete(id, name) {
    if (confirm('Hapus akun ' + name + '?')) {
        let form = document.getElementById('delete-form');
        form.action = '{{ url("/superadmin/user/destroy") }}/' + id;
        form.submit();
    }
}
</script>
@endsection