@extends('app')
@section('content')
    <div class="app-content">
        <div class="content-wrapper">

            <div class="page-heading">
                <div>
                    <h1 class="page-title">{{ $title }}</h1>
                    <p class="page-subtitle">Kelola akun pengguna sistem</p>
                </div>
                <a href="{{ route('admin.users.create') }}" class="btn-app-primary">
                    <i class="fa-solid fa-plus me-2"></i>Tambah User
                </a>
            </div>

            @if (session('success'))
                <div class="alert alert-success">
                    <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">
                    <i class="fa-solid fa-circle-exclamation me-2"></i>{{ session('error') }}
                </div>
            @endif

            <div class="app-card">
                <div class="app-card-header">
                    <span class="app-card-title">
                        <i class="fa-solid fa-users me-2"></i>Daftar Pengguna
                    </span>
                </div>

                <div class="table-toolbar">
                    <div class="table-search-wrap">
                        <i class="fa-solid fa-magnifying-glass table-search-icon"></i>
                        <input type="text" class="table-search-input" id="tableSearch"
                            placeholder="Cari nama, email, role...">
                    </div>
                    <div class="table-filters">
                        <select class="table-filter-select" id="roleFilter">
                            <option value="">Semua Role</option>
                            <option value="Admin">Admin</option>
                            <option value="Perawat">Perawat</option>
                            <option value="Kepala Ruangan">Kepala Ruangan</option>
                            <option value="Logistik">Logistik</option>
                            <option value="Kasie Pengembangan">Kasie Pengembangan</option>
                        </select>
                    </div>
                </div>

                <div class="app-card-body p-0">
                    <div class="table-responsive">
                        <table class="app-table" id="userTable">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Ruangan</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($data as $user)
                                    @php
                                        $roleIcon = match ($user->role) {
                                            'Admin' => 'fa-user-shield',
                                            'Perawat' => 'fa-user-nurse',
                                            'Kepala Ruangan' => 'fa-user-tie',
                                            'Logistik' => 'fa-boxes-stacked',
                                            'Kasie Pengembangan' => 'fa-user-gear',
                                            default => 'fa-user',
                                        };
                                    @endphp
                                    <tr data-role="{{ $user->role }}">
                                        <td class="td-muted">{{ $loop->iteration }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <div
                                                    style="width:32px; height:32px; border-radius:var(--radius-sm); background:var(--green-50); color:var(--green-600); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; border:1px solid var(--green-100)">
                                                    {{ strtoupper(substr($user->name, 0, 2)) }}
                                                </div>
                                                <span
                                                    style="font-weight:600; color:var(--text-base)">{{ $user->name }}</span>
                                            </div>
                                        </td>
                                        <td class="td-muted">{{ $user->email }}</td>
                                        <td>
                                            <span class="status-pill status-approved">
                                                <i class="fa-solid {{ $roleIcon }} me-1"></i>{{ $user->role }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="room-tag">{{ $user->ruangan->nama_ruangan ?? '-' }}</span>
                                        </td>
                                        <td>
                                            <div class="action-btns">
                                                <a href="{{ route('admin.users.edit', $user->id) }}"
                                                    class="action-btn action-btn-edit" title="Edit">
                                                    <i class="fa-solid fa-pen-to-square"></i>
                                                </a>
                                                <form action="{{ route('admin.users.reset-password', $user->id) }}"
                                                    method="POST" style="display:inline"
                                                    onsubmit="return confirm('Reset password user ini menjadi password default?')">
                                                    @csrf
                                                    <button type="submit" class="action-btn action-btn-view"
                                                        title="Reset Password">
                                                        <i class="fa-solid fa-key"></i>
                                                    </button>
                                                </form>
                                                <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST"
                                                    style="display:inline"
                                                    onsubmit="return confirm('Yakin ingin menghapus user ini?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="action-btn action-btn-delete"
                                                        title="Hapus">
                                                        <i class="fa-solid fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-5" style="color:var(--text-faint)">
                                            <i class="fa-regular fa-folder-open d-block mb-2" style="font-size:2rem"></i>
                                            Belum ada data pengguna
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.getElementById('tableSearch').addEventListener('input', filterTable);
        document.getElementById('roleFilter').addEventListener('change', filterTable);

        function filterTable() {
            const q = document.getElementById('tableSearch').value.toLowerCase();
            const role = document.getElementById('roleFilter').value;
            document.querySelectorAll('#userTable tbody tr[data-role]').forEach(tr => {
                const match = (!q || tr.innerText.toLowerCase().includes(q)) &&
                    (!role || tr.dataset.role === role);
                tr.style.display = match ? '' : 'none';
            });
        }
    </script>
@endpush