@php
            $depts = DB::table('content_directory_departments')->orderBy('directory_department_sort')->orderBy('directory_department_name')->get();
            $selectedDept = request()->query('dept');
            $staffQuery = DB::table('content_directory_staff')->where('directory_staff_status', 1);
            if ($selectedDept) {
                $staffQuery->where('directory_staff_department_id', $selectedDept);
            }
            $staffList = $staffQuery->orderBy('directory_staff_sort')->orderBy('directory_staff_name')->get();
            @endphp
            <section class="dir-section"><div class="container">
            <div class="dir-header">
            <span class="dir-badge">Direktori</span>
            <h1 class="dir-title">Direktori Kakitangan</h1>
            <p class="dir-subtitle">Senarai bahagian dan kakitangan jabatan.</p>
            </div>
            
            <div class="dir-filter">
            <form method="GET" action="{{ request()->url() }}">
            <select name="dept" onchange="this.form.submit()">
            <option value="">-- Pilih Bahagian --</option>
            @foreach($depts as $d)
            <option value="{{ $d->directory_department_id }}" {{ $selectedDept == $d->directory_department_id ? 'selected' : '' }}>{{ $d->directory_department_name }}</option>
            @endforeach
            </select>
            @if($selectedDept)
            <a href="{{ request()->url() }}" class="dir-reset">Set Semula</a>
            @endif
            </form>
            </div>
            
            @if($staffList->count())
            <div class="dir-table-wrap">
            <table class="dir-table">
            <thead>
            <tr>
            <th>Bil.</th>
            <th>Nama</th>
            <th>Jawatan</th>
            <th>Emel</th>
            <th>Telefon</th>
            </tr>
            </thead>
            <tbody>
            @foreach($staffList as $i => $s)
            <tr>
            <td class="dir-num">{{ $i + 1 }}</td>
            <td class="dir-name">
            <div class="dir-name-cell">
            <div class="dir-photo">
            @if($s->directory_staff_photo)
            <img src="{{ image_url($s->directory_staff_photo) }}" alt="{{ $s->directory_staff_name }}">
            @else
            <div class="dir-photo-placeholder"><i class="fas fa-user"></i></div>
            @endif
            </div>
            <span>{{ $s->directory_staff_name }}</span>
            </div>
            </td>
            <td class="dir-pos">{{ $s->directory_staff_position ?? '-' }}</td>
            <td class="dir-email">@if($s->directory_staff_email)<a href="mailto:{{ $s->directory_staff_email }}">{{ $s->directory_staff_email }}</a>@else - @endif</td>
            <td class="dir-phone">{{ $s->directory_staff_phone ?? '-' }}</td>
            </tr>
            @endforeach
            </tbody>
            </table>
            </div>
            @else
            <div class="dir-empty">
            <p>Tiada kakitangan dijumpai untuk bahagian yang dipilih.</p>
            </div>
            @endif
            
            <div class="dir-note">
            <p><strong>Nota:</strong></p>
            <ol>
            <li>Untuk menghantar emel, klik pada alamat emel yang berkenaan.</li>
            <li>TIDAK DIBENARKAN menggunakan maklumat ini untuk tujuan pengiklanan, pemasaran dan penjualan produk dan perkhidmatan serta menyebar maklumat pegawai tanpa kebenaran.</li>
            </ol>
            </div>
            
            </div></section>
            
            <style>
            .dir-section{padding:60px 0 80px;background:var(--gray-50);min-height:60vh;}
            .dir-header{text-align:center;margin-bottom:40px;}
            .dir-badge{display:inline-block;background:var(--accent-light);color:var(--accent);padding:6px 16px;border-radius:999px;font-size:.75rem;font-weight:600;margin-bottom:16px;}
            .dir-title{font-size:2rem;font-weight:700;color:var(--gray-900);margin:0 0 12px;}
            .dir-subtitle{color:var(--gray-400);font-size:1rem;margin:0;}
            .dir-filter{max-width:600px;margin:0 auto 30px;}
            .dir-filter form{display:flex;gap:10px;}
            .dir-filter select{flex:1;padding:10px 14px;border:1px solid var(--gray-200);border-radius:10px;font-size:.9rem;font-family:inherit;color:var(--gray-800);background:var(--white);outline:none;}
            .dir-filter select:focus{border-color:var(--primary);}
            .dir-reset{display:inline-flex;align-items:center;padding:10px 18px;background:var(--gray-100);color:var(--gray-600);border-radius:10px;text-decoration:none;font-size:.85rem;white-space:nowrap;}
            .dir-reset:hover{background:var(--gray-200);}
            .dir-table-wrap{max-width:950px;margin:0 auto;overflow-x:auto;border-radius:14px;border:1px solid var(--gray-200);background:var(--white);}
            .dir-table{width:100%;border-collapse:collapse;font-size:.88rem;}
            .dir-table th{padding:12px 16px;text-align:left;font-weight:600;color:var(--gray-700);background:var(--gray-50);border-bottom:2px solid var(--gray-200);white-space:nowrap;}
            .dir-table td{padding:11px 16px;border-bottom:1px solid var(--gray-100);color:var(--gray-600);}
            .dir-table tr:last-child td{border-bottom:none;}
            .dir-table tr:hover td{background:var(--gray-50);}
            .dir-num{width:50px;text-align:center;color:var(--gray-400);font-size:.8rem;}
            .dir-name{font-weight:500;color:var(--gray-800);}
            .dir-name-cell{display:flex;align-items:center;gap:10px;}
            .dir-photo{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;}
            .dir-photo img{width:100%;height:100%;object-fit:cover;display:block;}
            .dir-photo-placeholder{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gray-100);color:var(--gray-300);font-size:.85rem;}
            .dir-pos{color:var(--gray-500);}
            .dir-email a{color:var(--primary);text-decoration:none;}
            .dir-email a:hover{text-decoration:underline;}
            .dir-phone{color:var(--gray-500);}
            .dir-empty{max-width:600px;margin:30px auto 0;text-align:center;padding:30px;background:var(--white);border-radius:12px;border:1px solid var(--gray-200);color:var(--gray-400);}
            .dir-note{max-width:800px;margin:40px auto 0;padding:20px 24px;background:var(--white);border-radius:12px;border:1px solid var(--gray-200);font-size:.82rem;color:var(--gray-500);line-height:1.7;}
            .dir-note ol{padding-left:20px;margin:8px 0 0;}
            .dir-note li{margin-bottom:4px;}
            @media(max-width:768px){.dir-section{padding:30px 0 50px;}.dir-title{font-size:1.4rem;}.dir-filter select{font-size:.82rem;}.dir-table th,.dir-table td{padding:8px 10px;font-size:.8rem;}}
            @media(max-width:480px){.dir-title{font-size:1.2rem;}}
            </style>
            