@extends('layouts.app')
@section('title', 'Kawalan Akses 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="max-width:1200px; margin:auto;">
        <div style="background:#fff; border-radius:8px; padding:48px 40px 48px 40px; box-shadow:0 2px 8px rgba(0,0,0,0.03);">
            <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;">Kawalan Akses Pengguna</h2>
                @include('layouts.date-clock')
            </div>
            <form>
                <div style="display:flex; align-items:center; margin-bottom:40px;">
                    <label for="jenis_pengguna" style="font-family:'Poppins',sans-serif; font-size:1.1rem; color:#222; margin-right:24px; min-width:160px;">Jenis Pengguna :</label>
                    <input id="jenis_pengguna" type="text" placeholder="Sila Masukkan Jenis Pengguna" style="flex:1; background:#fff; border:1.5px solid #C7C7C7; border-radius:6px; padding:12px 16px; font-size:16px; color:#555; min-width:320px;">
                </div>
                <div style="margin-bottom:48px;">
                    <div id="butiran-permohonan-toggle" style="display:flex; align-items:center; gap:18px; cursor:pointer; user-select:none;" onclick="toggleButiranPermohonan()">
                        <img id="butiran-chevron" src="{{ asset('images/icon/chevron-down.svg') }}" style="width:28px; height:28px; transition:transform 0.2s; transform:rotate(0deg);">
                        <span style="font-family:'Poppins',sans-serif; font-size:1.18rem; color:#222;">Butiran Pemohon</span>
                    </div>
                    <div id="butiran-permohonan-list" style="display:none; margin-top:24px; margin-left:46px;">
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Nombor Fail</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Pegawai Penyemak</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Status</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Kategori</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Nama Pemohon</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Terima Fail</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Lulus</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Kawasan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tempoh Piagam Permohonan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tajuk Permohonan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Akhir Permohonan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Countdown Ulasan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Ulasan OSC 3.0 Plus</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tempoh Piagam</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Ulasan Jabatan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Kategori Bangunan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Jumlah SPAH Unit Berkembar</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Jumlah SPAH Unit Sesebuah</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Jumlah Unit Bangunan Keperluan OKU</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Latitude</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between;">
                            <span style="font-family:'Poppins',sans-serif;">Longitude</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom:48px;">
                    <div id="penyelaras-osc-toggle" style="display:flex; align-items:center; gap:18px; cursor:pointer; user-select:none;" onclick="togglePenyelarasOSC()">
                        <img id="penyelaras-chevron" src="{{ asset('images/icon/chevron-down.svg') }}" style="width:28px; height:28px; transition:transform 0.2s; transform:rotate(0deg);">
                        <span style="font-family:'Poppins',sans-serif; font-size:1.18rem; color:#222;">Penyelaras OSC</span>
                    </div>
                    <div id="penyelaras-osc-list" style="display:none; margin-top:24px; margin-left:46px;">
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Mesyuarat Pemantauan Kali Pertama</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Bilangan Mesyuarat Pemantauan Kali Pertama</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Keputusan Akhir Mesyuarat</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Keputusan Akhir</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between;">
                            <span style="font-family:'Poppins',sans-serif;">Bilangan Mesyuarat Keputusan Akhir</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom:48px;">
                    <div id="pemantauan-kerja-toggle" style="display:flex; align-items:center; gap:18px; cursor:pointer; user-select:none;" onclick="togglePemantauanKerja()">
                        <img id="pemantauan-chevron" src="{{ asset('images/icon/chevron-down.svg') }}" style="width:28px; height:28px; transition:transform 0.2s; transform:rotate(0deg);">
                        <span style="font-family:'Poppins',sans-serif; font-size:1.18rem; color:#222;">Pemantauan Kerja Tapak</span>
                    </div>
                    <div id="pemantauan-kerja-list" style="display:none; margin-top:24px; margin-left:46px;">
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Status</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Akhir Kelulusan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Jumlah Tahun Pembaharuan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Countdown Tarikh Akhir Pelan</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Borang B</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Akhir Permit</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Countdown Tarikh Akhir Permit</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Borang F/F1</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom:48px;">
                    <div id="cagaran-bangunan-toggle" style="display:flex; align-items:center; gap:18px; cursor:pointer; user-select:none;" onclick="toggleCagaranBangunan()">
                        <img id="cagaran-chevron" src="{{ asset('images/icon/chevron-down.svg') }}" style="width:28px; height:28px; transition:transform 0.2s; transform:rotate(0deg);">
                        <span style="font-family:'Poppins',sans-serif; font-size:1.18rem; color:#222;">Cagaran Bangunan</span>
                    </div>
                    <div id="cagaran-bangunan-list" style="display:none; margin-top:24px; margin-left:46px;">
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Status Cagaran</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Akhir Permohonan Cagaran</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Permohonan Cagaran</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
                            <span style="font-family:'Poppins',sans-serif;">Tarikh Pemulangan Cagaran</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between;">
                            <span style="font-family:'Poppins',sans-serif;">Pembinaan Mematuhi Syarat</span>
                            <label class="switch"><input type="checkbox"><span class="slider"></span></label>
                        </div>
                    </div>
                </div>
                <button type="submit" style="background:#23697A; color:#fff; border:none; border-radius:6px; padding:12px 40px; font-size:1.1rem; font-family:'Poppins',sans-serif; font-weight:500; cursor:pointer;">Simpan</button>
            </form>
        </div>
    </div>
</div>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  vertical-align: middle;
}
.switch input { display:none; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #f4f4f4;
  border: 2px solid #23697A;
  border-radius: 22px;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px; width: 16px;
  left: 2px; bottom: 2px;
  background-color: #23697A;
  border-radius: 50%;
  transition: .4s;
}
.switch input:checked + .slider {
  background-color: #e6f7f7;
}
.switch input:checked + .slider:before {
  transform: translateX(16px);
}
</style>
<script>
function toggleButiranPermohonan() {
    const list = document.getElementById('butiran-permohonan-list');
    const chevron = document.getElementById('butiran-chevron');
    if (list.style.display === 'none') {
        list.style.display = 'block';
        chevron.style.transform = 'rotate(-180deg)';
    } else {
        list.style.display = 'none';
        chevron.style.transform = 'rotate(0deg)';
    }
}
function togglePenyelarasOSC() {
    const list = document.getElementById('penyelaras-osc-list');
    const chevron = document.getElementById('penyelaras-chevron');
    if (list.style.display === 'none') {
        list.style.display = 'block';
        chevron.style.transform = 'rotate(-180deg)';
    } else {
        list.style.display = 'none';
        chevron.style.transform = 'rotate(0deg)';
    }
}
function togglePemantauanKerja() {
    const list = document.getElementById('pemantauan-kerja-list');
    const chevron = document.getElementById('pemantauan-chevron');
    if (list.style.display === 'none') {
        list.style.display = 'block';
        chevron.style.transform = 'rotate(-180deg)';
    } else {
        list.style.display = 'none';
        chevron.style.transform = 'rotate(0deg)';
    }
}
function toggleCagaranBangunan() {
    const list = document.getElementById('cagaran-bangunan-list');
    const chevron = document.getElementById('cagaran-chevron');
    if (list.style.display === 'none') {
        list.style.display = 'block';
        chevron.style.transform = 'rotate(-180deg)';
    } else {
        list.style.display = 'none';
        chevron.style.transform = 'rotate(0deg)';
    }
}
</script>
@endsection