@extends('layouts.app')
@section('title', 'Kumpulan Pengguna')
@section('content')
{{-- @include('layouts.sidebar') --}}

<div style="margin-left:261px; margin-top:107px; min-height:calc(100vh - 107px); background:#F4FFFF; padding:40px 0 0 0;">
    <div style="width:1179px; margin:auto; padding:0 46px 45px 46px; display:flex; flex-direction:column; gap:20px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:40px;">
            <h2 style="font-family:'Poppins',sans-serif; font-size:2.3rem; font-weight:600; color:#222; margin:0;">Kumpulan Pengguna</h2>
            @include('layouts.date-clock')
        </div>
        <div style="background:#fff; border-radius:12px; padding:40px 32px 32px 32px; box-shadow:0 2px 8px rgba(0,0,0,0.03);">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:32px;">
                <span style="font-family:'Poppins',sans-serif; font-size:1.7rem; font-weight:600;">Kod Kumpulan Pengguna</span>
                <button style="background:#176D74; color:#fff; border:none; border-radius:6px; padding:10px 28px; font-size:1rem; font-family:'Poppins',sans-serif; font-weight:500; display:flex; align-items:center; gap:8px; cursor:pointer; height:35px; width:248px;">
                    <span style="font-size:1.3rem; font-weight:bold; ">+</span> Tambah Kumpulan Pengguna
                </button>
            </div>
            <form style="display:flex; gap:24px; align-items:center; margin-bottom:24px;">
                <div>
                    <label style="font-family:'Poppins',sans-serif; font-size:1rem; color:#222;">Kod :</label>
                    <input type="text" style="width:60px; margin-left:8px; background:#fff; border:1.5px solid #C7C7C7; border-radius:6px; padding:6px 10px; font-size:1rem;">
                </div>
                <div>
                    <label style="font-family:'Poppins',sans-serif; font-size:1rem; color:#222;">Kumpulan :</label>
                    <input type="text" style="width:180px; margin-left:8px; background:#fff; border:1.5px solid #C7C7C7; border-radius:6px; padding:6px 10px; font-size:1rem;">
                </div>
                <div>
                    <label style="font-family:'Poppins',sans-serif; font-size:1rem; color:#222;">Status :</label>
                    <select style="width:140px; margin-left:8px; background:#fff; border:1.5px solid #C7C7C7; border-radius:6px; padding:6px 10px; font-size:1rem;">
                        <option value=""> </option>
                        <option value="aktif">Aktif</option>
                        <option value="tidak_aktif">Tidak Aktif</option>
                    </select>
                </div>
                <button type="submit" style="background:#176D74; color:#fff; border:none; border-radius:6px; padding:8px 24px; font-size:1rem; font-family:'Poppins',sans-serif; font-weight:500; display:flex; align-items:center; gap:8px; cursor:pointer;">
                    <span class="fa fa-search"></span> Cari
                </button>
            </form>
            <div style="overflow-x:auto;">
                <table style="width:100%; border-collapse:collapse; font-family:'Poppins',sans-serif; font-size:1rem;">
                    <thead>
                        <tr style="background:#fff;">
                            <th style="text-align:left; padding:12px 8px; font-weight:600;">Kod</th>
                            <th style="text-align:left; padding:12px 8px; font-weight:600;">Kumpulan</th>
                            <th style="text-align:left; padding:12px 8px; font-weight:600;">Status</th>
                            <th style="text-align:left; padding:12px 8px; font-weight:600;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="border-top:1px solid #eee;">
                            <td style="padding:12px 8px;">1</td>
                            <td style="padding:12px 8px;">Administrator</td>
                            <td style="padding:12px 8px; color:#1DBA4C; font-weight:500;">Aktif</td>
                            <td style="padding:12px 8px; position:relative;">
                                <span style="font-size:1.5rem; cursor:pointer;" onclick="toggleDropdown(event, 1)">&#8942;</span>
                                <div id="dropdown-1" class="action-dropdown" style="display:none; position:absolute; left:40px; top:0; width:125px; height:87px; background:#fff; border:1px solid #D9D9D9; border-radius:2px; z-index:10; padding:7px 20px; display:flex; flex-direction:column; gap:5px; opacity:1;">
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Kemaskini</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">NyahAktif</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#FF3A3A; display:flex; align-items:center; gap:10px; cursor:pointer;">
                                        <span style="background:#FF3A3A; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">&#33;</span>
                                        Hapus
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="border-top:1px solid #eee;">
                            <td style="padding:12px 8px;">2</td>
                            <td style="padding:12px 8px;">PBB</td>
                            <td style="padding:12px 8px; color:#FF3A3A; font-weight:500;">Tidak Aktif</td>
                            <td style="padding:12px 8px; position:relative;">
                                <span style="font-size:1.5rem; cursor:pointer;" onclick="toggleDropdown(event, 2)">&#8942;</span>
                                <div id="dropdown-2" class="action-dropdown" style="display:none; position:absolute; left:40px; top:0; width:125px; height:87px; background:#fff; border:1px solid #D9D9D9; border-radius:2px; z-index:10; padding:7px 20px; display:flex; flex-direction:column; gap:5px; opacity:1;">
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Kemaskini</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Aktif</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#FF3A3A; display:flex; align-items:center; gap:10px; cursor:pointer;">
                                        <span style="background:#FF3A3A; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">&#33;</span>
                                        Hapus
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="border-top:1px solid #eee;">
                            <td style="padding:12px 8px;">3</td>
                            <td style="padding:12px 8px;">PBB/PPSK1</td>
                            <td style="padding:12px 8px; color:#FF3A3A; font-weight:500;">Tidak Aktif</td>
                            <td style="padding:12px 8px; position:relative;">
                                <span style="font-size:1.5rem; cursor:pointer;" onclick="toggleDropdown(event, 3)">&#8942;</span>
                                <div id="dropdown-3" class="action-dropdown" style="display:none; position:absolute; left:40px; top:0; width:125px; height:87px; background:#fff; border:1px solid #D9D9D9; border-radius:2px; z-index:10; padding:7px 20px; display:flex; flex-direction:column; gap:5px; opacity:1;">
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Kemaskini</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Aktif</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#FF3A3A; display:flex; align-items:center; gap:10px; cursor:pointer;">
                                        <span style="background:#FF3A3A; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">&#33;</span>
                                        Hapus
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="border-top:1px solid #eee;">
                            <td style="padding:12px 8px;">4</td>
                            <td style="padding:12px 8px;">Penguasa Bangunan</td>
                            <td style="padding:12px 8px; color:#1DBA4C; font-weight:500;">Aktif</td>
                            <td style="padding:12px 8px; position:relative;">
                                <span style="font-size:1.5rem; cursor:pointer;" onclick="toggleDropdown(event, 4)">&#8942;</span>
                                <div id="dropdown-4" class="action-dropdown" style="display:none; position:absolute; left:40px; top:0; width:125px; height:87px; background:#fff; border:1px solid #D9D9D9; border-radius:2px; z-index:10; padding:7px 20px; display:flex; flex-direction:column; gap:5px; opacity:1;">
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Kemaskini</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">NyahAktif</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#FF3A3A; display:flex; align-items:center; gap:10px; cursor:pointer;">
                                        <span style="background:#FF3A3A; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">&#33;</span>
                                        Hapus
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="border-top:1px solid #eee;">
                            <td style="padding:12px 8px;">5</td>
                            <td style="padding:12px 8px;">Kerani Zon</td>
                            <td style="padding:12px 8px; color:#1DBA4C; font-weight:500;">Aktif</td>
                            <td style="padding:12px 8px; position:relative;">
                                <span style="font-size:1.5rem; cursor:pointer;" onclick="toggleDropdown(event, 5)">&#8942;</span>
                                <div id="dropdown-5" class="action-dropdown" style="display:none; position:absolute; left:40px; top:0; width:125px; height:87px; background:#fff; border:1px solid #D9D9D9; border-radius:2px; z-index:10; padding:7px 20px; display:flex; flex-direction:column; gap:5px; opacity:1;">
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Kemaskini</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">NyahAktif</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#FF3A3A; display:flex; align-items:center; gap:10px; cursor:pointer;">
                                        <span style="background:#FF3A3A; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">&#33;</span>
                                        Hapus
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="border-top:1px solid #eee;">
                            <td style="padding:12px 8px;">6</td>
                            <td style="padding:12px 8px;">Kerani Admin</td>
                            <td style="padding:12px 8px; color:#1DBA4C; font-weight:500;">Aktif</td>
                            <td style="padding:12px 8px; position:relative;">
                                <span style="font-size:1.5rem; cursor:pointer;" onclick="toggleDropdown(event, 6)">&#8942;</span>
                                <div id="dropdown-6" class="action-dropdown" style="display:none; position:absolute; left:40px; top:0; width:125px; height:87px; background:#fff; border:1px solid #D9D9D9; border-radius:2px; z-index:10; padding:7px 20px; display:flex; flex-direction:column; gap:5px; opacity:1;">
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Kemaskini</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">NyahAktif</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#FF3A3A; display:flex; align-items:center; gap:10px; cursor:pointer;">
                                        <span style="background:#FF3A3A; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">&#33;</span>
                                        Hapus
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="border-top:1px solid #eee;">
                            <td style="padding:12px 8px;">7</td>
                            <td style="padding:12px 8px;">PPS</td>
                            <td style="padding:12px 8px; color:#1DBA4C; font-weight:500;">Aktif</td>
                            <td style="padding:12px 8px; position:relative;">
                                <span style="font-size:1.5rem; cursor:pointer;" onclick="toggleDropdown(event, 7)">&#8942;</span>
                                <div id="dropdown-7" class="action-dropdown" style="display:none; position:absolute; left:40px; top:0; width:125px; height:87px; background:#fff; border:1px solid #D9D9D9; border-radius:2px; z-index:10; padding:7px 20px; display:flex; flex-direction:column; gap:5px; opacity:1;">
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">Kemaskini</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#222; cursor:pointer;">NyahAktif</div>
                                    <div style="font-family:'Poppins',sans-serif; font-size:1.08rem; color:#FF3A3A; display:flex; align-items:center; gap:10px; cursor:pointer;">
                                        <span style="background:#FF3A3A; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">&#33;</span>
                                        Hapus
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="display:flex; justify-content:space-between; align-items:center; margin-top:32px;">
                <div style="font-family:'Poppins',sans-serif; font-size:1rem; color:#555;">
                    Rows per page:
                    <select style="border-radius:6px; border:1.5px solid #C7C7C7; padding:4px 12px; font-size:1rem;">
                        <option>10</option>
                        <option>25</option>
                        <option>50</option>
                    </select>
                </div>
                <div style="font-family:'Poppins',sans-serif; font-size:1rem; color:#555;">
                    1 - 3 of 3
                    <span style="margin-left:16px; color:#bbb; font-size:1.3rem; cursor:pointer;">&#60;</span>
                    <span style="margin-left:8px; color:#bbb; font-size:1.3rem; cursor:pointer;">&#62;</span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Always hide all dropdowns on page load
    document.querySelectorAll('.action-dropdown').forEach(el => el.style.display = 'none');

    // Prevent dropdown from closing when clicking inside it
    document.querySelectorAll('.action-dropdown').forEach(function(drop) {
        drop.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });

    // Hide dropdowns when clicking anywhere else
    document.addEventListener('click', function() {
        document.querySelectorAll('.action-dropdown').forEach(el => el.style.display = 'none');
    });
});

function toggleDropdown(e, idx) {
    e.stopPropagation();
    // Hide all dropdowns first
    document.querySelectorAll('.action-dropdown').forEach(el => el.style.display = 'none');
    // Show only the clicked one
    var dropdown = document.getElementById('dropdown-' + idx);
    if (dropdown) {
        dropdown.style.display = 'flex';
    }
}
</script>
@endsection