@extends('layouts.app')
@section('ibams', true)
@section('hide_footer', true)
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/iBuilding/applicationlist.css') }}">

<style>
/* Status Filter Dropdown Styles - Enhanced visibility for small tables */
.status-filter-dropdown, .filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 99999 !important;
    min-width: 200px;
    padding: 0;
    margin-top: 5px;
    display: none;
    overflow: visible !important;
}

/* Kategori dropdown is wider */
#kategori-fail-dropdown {
    min-width: 320px;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.filter-content {
    padding: 16px;
}

.filter-option {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 4px 0;
}

.filter-option:last-child {
    margin-bottom: 0;
}

.filter-option input[type="radio"], .filter-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: #0AD1C8;
}

.filter-option label {
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    flex: 1;
}

.filter-option:hover {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 8px;
    margin: -4px;
}

/* Kategori grid layout */
.kategori-grid .filter-option {
    margin-bottom: 8px !important;
}

/* Make sure table headers have relative positioning for dropdown - Enhanced for small tables */
#status-fail-header, #sort-file-number, #sort-category, #countdown-ulasan-header, #tempoh-header, #countdown-permit-header, #countdown-cagaran-header {
    position: relative !important;
    overflow: visible !important;
    z-index: 100 !important;
}

/* Table container needs to allow overflow for dropdown */
.table-container {
    overflow: visible !important;
}

/* Show dropdown when active */
.status-filter-dropdown.show, .filter-dropdown.show {
    display: block !important;
}

/* Caret rotation when dropdown is open */
.sort-caret.rotated, #status-fail-caret.rotated, #countdown-caret.rotated, #tempoh-caret.rotated, #countdown-permit-caret.rotated, #countdown-cagaran-caret.rotated {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.sort-caret, #status-fail-caret, #countdown-caret, #tempoh-caret, #countdown-permit-caret, #countdown-cagaran-caret {
    transition: transform 0.2s ease;
}

/* Ensure table doesn't clip the dropdown */
#application-table {
    position: relative;
    background: white;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
}

#application-table thead {
    position: relative;
    z-index: 10;
}

#application-table thead th {
    position: relative;
    background: #f8f9fa;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 12px;
    border-bottom: 1px solid #e9ecef;
    border-left: none;
    border-right: none;
    border-top: none;
    white-space: nowrap;
}

#application-table tbody tr {
    border-bottom: 1px solid #f1f3f4;
    border-left: none;
    border-right: none;
    transition: background-color 0.2s ease;
}

#application-table tbody tr:hover {
    background-color: #f8f9fa;
}

#application-table tbody td {
    padding: 16px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    vertical-align: middle;
    border-left: none;
    border-right: none;
}

/* Status styling - Updated to match exact design specs */
.status-tolak {
    color: #E74C3C !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1%;
    text-transform: uppercase;
}

.status-lulus {
    color: #03902D !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1%;
    text-transform: uppercase;
}

.status-sedang {
    color: #FFAE00 !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1%;
    text-transform: uppercase;
}

.status-batal {
    color: #E74C3C !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1%;
    text-transform: uppercase;
}

/* Nombor Fail styling - Updated to black color as per design specs */
.nombor-fail {
    color: #000000 !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0%;
}

/* Kategori badge styling - Updated to match exact design specs */
.kategori-badge {
    background: #D3FFD2 !important;
    color: #333 !important;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-family: 'Poppins', sans-serif;
}

/* Klasifikasi badge styling */
.klasifikasi-badge {
    margin-left: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0%;
}

.klasifikasi-a {
    color: #FF6F00;
}

.klasifikasi-b {
    color: #000000;
}

/* Countdown styling */
.countdown-red {
    color: #E74C3C;
    font-weight: 600;
}

.countdown-orange {
    color: #F5A623;
    font-weight: 600;
}

.countdown-green {
    color: #00B96B;
    font-weight: 600;
}

.countdown-selesai {
    color: #666;
    font-style: italic;
    text-transform: uppercase;
    font-size: 11px;
}

/* Status pembinaan styling */
.status-pembinaan {
    color: #666;
    font-style: italic;
    font-size: 12px;
}

.status-pembinaan.berlangsung {
    color: #00B96B;
    font-weight: 500;
}

/* Action menu styling */
.action-menu {
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.action-menu:hover {
    color: #333;
    background-color: #f1f3f4;
}

/* Action Menu Dropdown */
.action-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 99999 !important;
    min-width: 150px;
    padding: 8px 0;
    margin-top: 5px;
    overflow: visible !important;
}

.action-menu-dropdown.show {
    display: block !important;
}

.action-menu-item {
    padding: 10px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.action-menu-item:last-child {
    border-bottom: none;
}

.action-menu-item:hover {
    background-color: #f8f9fa;
}

/* Column widths for better layout */
#application-table th:nth-child(1), #application-table td:nth-child(1) { width: 12%; }
#application-table th:nth-child(2), #application-table td:nth-child(2) { width: 15%; }
#application-table th:nth-child(3), #application-table td:nth-child(3) { width: 12%; }
#application-table th:nth-child(4), #application-table td:nth-child(4) { width: 12%; }
#application-table th:nth-child(5), #application-table td:nth-child(5) { width: 20%; }
#application-table th:nth-child(6), #application-table td:nth-child(6) { width: 12%; }
#application-table th:nth-child(7), #application-table td:nth-child(7) { width: 12%; }
#application-table th:nth-child(8), #application-table td:nth-child(8) { width: 5%; }

/* Header hover effects */
#application-table thead th[style*="cursor:pointer"]:hover {
    background-color: #e9ecef;
    transition: background-color 0.2s ease;
}

/* Enhanced hover for all clickable headers */
#status-fail-header:hover,
#sort-file-number:hover,
#sort-category:hover,
#countdown-ulasan-header:hover,
#tempoh-header:hover,
#countdown-permit-header:hover,
#countdown-cagaran-header:hover {
    background-color: #e9ecef !important;
    transition: background-color 0.2s ease;
}

/* Improved spacing and typography */
.main-content {
    font-family: 'Poppins', sans-serif;
    text-align: left;
}

.page-title {
    color: #2c3e50;
    margin-bottom: 0;
}

/* Center content properly */
.table-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Remove any potential gaps */
.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure proper centering */
.d-flex.justify-content-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Force full width usage */
body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Minimize gaps */
* {
    box-sizing: border-box;
}

/* Override layout constraints from app.blade.php */
.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
}

.row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Override Bootstrap column constraints for full width */
.col-12, .col-sm-12, .col-md-11, .col-lg-10, .col-xl-9 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Force full width on the main content area */
@media (min-width: 768px) {
    .col-md-11 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (min-width: 992px) {
    .col-lg-10 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (min-width: 1200px) {
    .col-xl-9 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Aggressive gap removal */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Remove any inherited margins */
.main-content * {
    margin-left: 0 !important;
}

/* Search box styling */
.search-box input {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box input:focus {
    outline: none;
    border-color: #0AD1C8;
    box-shadow: 0 0 0 3px rgba(10, 209, 200, 0.1);
}

/* Button styling - Updated to match exact design specs */
.btn-primary {
    background: #0B6477 !important;
    border: none;
    border-radius: 3px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding: 0;
    width: 207px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white !important;
    font-size: 14px;
}

.btn-primary:hover {
    background: #094d5a !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(11, 100, 119, 0.3);
}

.btn-primary:focus, .btn-primary:active {
    background: #0B6477 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Breadcrumb hover effects */
.breadcrumb a:hover img {
    opacity: 0.7;
}

.breadcrumb a:hover {
    color: #0B6477 !important;
}
</style>

@php
    $year = request('year');
@endphp

<!-- App data stored in hidden element -->
<div id="app-year-data" style="display: none;">{{ $year ?? '' }}</div>

<script type="text/javascript">
    // Define global variables for Blade data  
    window.appData = window.appData || {};
    window.appData.year = document.getElementById('app-year-data').textContent;
</script>

<div class="container-fluid p-0" style="background: #F4FFFF; min-height: 844px; width: 100%; opacity: 1; margin: 0; padding: 0;">
    <div class="d-flex align-items-center justify-content-between" style="height: 90px; padding: 0 40px 0 0;"></div>

    <!-- Centered Main Container -->
    <div style="width: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 0; margin: 0;">
        <div class="main-content" style="max-width: 98%; width: 98%; margin: 32px 1% 0 1%; padding: 0; box-sizing: border-box;">
            <!-- Breadcrumb -->
            <div class="d-flex align-items-center mb-2" style="gap: 12px; width: 100%; margin-left: 0;">
                <nav aria-label="breadcrumb" style="background: none; margin-bottom: 0; margin-left: 0;">
                    <ol class="breadcrumb" style="background: none; padding: 0; margin-bottom: 0; font-size: 16px; display: flex; align-items: center; gap: 0;">
                        <li style="display: flex; align-items: center;">
                            <a href="{{ route('maindashboard') }}" style="display: flex; align-items: center; text-decoration: none;">
                                <img src="{{ asset('images/icon/home.svg') }}" alt="Home" style="width: 20px; height: 20px; cursor: pointer; transition: opacity 0.2s;">
                            </a>
                        </li>
                        <li style="display: flex; align-items: center; margin: 0 8px;">
                            <i class="fa fa-chevron-right" style="font-size: 15px; color: #A0A0A0;"></i>
                        </li>
                        <li style="font-family: 'Poppins', sans-serif; font-weight: 300; font-style: normal; font-size: 10px; line-height: 100%; letter-spacing: 0.05em;">
                            <a href="{{ route('ibuildingYears') }}" style="text-decoration: none; color: inherit; cursor: pointer; transition: color 0.2s;">
                                Senarai Permohonan
                            </a>
                        </li>
                        <li style="display: flex; align-items: center; margin: 0 8px;">
                            <i class="fa fa-chevron-right" style="font-size: 15px; color: #A0A0A0;"></i>
                        </li>
                        <li style="font-family: 'Poppins', sans-serif; font-weight: 300; font-style: normal; font-size: 10px; line-height: 100%; letter-spacing: 0.05em;">
                            Permohonan @if($year){{ $year }}@endif
                        </li>
                    </ol>
                </nav>
            </div>

            <!-- Title and Date Row -->
            <div class="d-flex align-items-center justify-content-between" style="margin-bottom: 8px; width: 100%; margin-left: 0;">
                <h2 class="page-title" style="font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 32px; margin-bottom: 0; margin-left: 0;">SENARAI PERMOHONAN @if($year){{ $year }}@endif</h2>
                <div style="min-width: 261px;">
                    @include('layouts.date-clock')
                </div>
            </div>
            <hr style="margin-top: 0; margin-bottom: 32px; border-color: #D9D9D9;">

            <!-- Controls Row -->
            <div class="d-flex align-items-center mb-4" style="gap: 16px; justify-content: space-between; width: 100%; margin-left: 0;">
                <a href="{{ url('/step1') }}" class="btn btn-primary" style="min-width: 220px; margin-left: 0;">
                    <i class="fa fa-plus"></i> Pendaftaran Baru
                </a>
                <div class="search-box" style="max-width: 350px; width: 100%; position: relative; margin-right: 0;">
                    <input type="text" placeholder="   cth:1/2024" style="padding-left: 36px; width: 100%; height: 40px; border: 1px solid #ddd; border-radius: 4px;">
                    <i class="fa fa-search" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #bbb; pointer-events: none;"></i>
                </div>
            </div>

            <!-- Table Container - Now properly centered -->
            <div class="table-container" style="width: 100%; max-width: 100%; position: relative; opacity: 1; overflow: visible; margin: 0;">
                <table id="application-table" style="width: 100%; position: relative; margin: 0;">
                    <thead>
                        <tr>
                            <th id="status-fail-header" style="cursor:pointer; position: relative;">
                                STATUS FAIL <i class="fas fa-caret-down" id="status-fail-caret"></i>
                                <!-- Status Filter Dropdown -->
                                <div id="status-filter-dropdown" class="status-filter-dropdown" style="display: none;">
                                    <div class="filter-header">
                                        <span style="font-weight: 600; font-size: 14px; color: #333;">STATUS FAIL</span>
                                        <i class="fas fa-caret-up" style="color: #666;"></i>
                                    </div>
                                    <div class="filter-content">
                                        <div style="font-size: 12px; color: #666; margin-bottom: 15px;">Susun Mengikut :</div>
                                        <div class="filter-option">
                                            <input type="radio" id="filter-batal" name="status-filter" value="BATAL">
                                            <label for="filter-batal" style="color: #E74C3C; font-weight: 600;">BATAL</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="filter-lulus-ccc" name="status-filter" value="LULUS/CCC">
                                            <label for="filter-lulus-ccc" style="color: #00B96B; font-weight: 600;">LULUS/CCC</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="filter-tolak" name="status-filter" value="TOLAK">
                                            <label for="filter-tolak" style="color: #E74C3C; font-weight: 600;">TOLAK</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="filter-lulus" name="status-filter" value="LULUS">
                                            <label for="filter-lulus" style="color: #00B96B; font-weight: 600;">LULUS</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="filter-sedang" name="status-filter" value="SEDANG DIPROSES">
                                            <label for="filter-sedang" style="color: #333; font-weight: 600;">SEDANG DIPROSES</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="filter-all" name="status-filter" value="ALL" checked>
                                            <label for="filter-all" style="color: #333; font-weight: 600;">SEMUA</label>
                                        </div>
                                    </div>
                                </div>
                            </th>
                            <th id="sort-file-number" style="cursor:pointer; position: relative;">
                                NOMBOR FAIL <i class="fas fa-caret-down sort-caret" data-sort="none"></i>
                                <!-- Nombor Fail Sort Dropdown -->
                                <div id="nombor-fail-dropdown" class="filter-dropdown" style="display: none;">
                                    <div class="filter-header">
                                        <span style="font-weight: 600; font-size: 14px; color: #333;">NOMBOR FAIL</span>
                                        <i class="fas fa-caret-up" style="color: #666;"></i>
                                    </div>
                                    <div class="filter-content">
                                        <div style="font-size: 12px; color: #666; margin-bottom: 15px;">Susun Mengikut :</div>
                                        <div class="filter-option">
                                            <input type="radio" id="sort-asc" name="nombor-sort" value="ascending">
                                            <label for="sort-asc" style="color: #333; font-weight: 400;">Ascending</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="sort-desc" name="nombor-sort" value="descending">
                                            <label for="sort-desc" style="color: #333; font-weight: 400;">Descending</label>
                                        </div>
                                    </div>
                                </div>
                            </th>
                            <th id="sort-category" style="cursor:pointer; position: relative;">
                                KATEGORI FAIL <i class="fas fa-caret-down sort-caret" data-sort="none"></i>
                                <!-- Kategori Fail Filter Dropdown -->
                                <div id="kategori-fail-dropdown" class="filter-dropdown" style="display: none;">
                                    <div class="filter-header">
                                        <span style="font-weight: 600; font-size: 14px; color: #333;">KATEGORI FAIL</span>
                                        <i class="fas fa-caret-up" style="color: #666;"></i>
                                    </div>
                                    <div class="filter-content">
                                        <div style="font-size: 12px; color: #666; margin-bottom: 15px; text-decoration: underline;">KATEGORI FAIL</div>
                                        <div class="kategori-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px;">
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lbt" name="kategori-filter" value="LBT/600-6/3">
                                                <label for="kat-lbt" style="color: #333; font-weight: 400; font-size: 12px;">LBT / 600-6/3</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb5x" name="kategori-filter" value="LB5X/600-5/6">
                                                <label for="kat-lb5x" style="color: #333; font-weight: 400; font-size: 12px;">LB5X / 600-5/6</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb1" name="kategori-filter" value="LB1/600-5/1">
                                                <label for="kat-lb1" style="color: #333; font-weight: 400; font-size: 12px;">LB1 / 600-5/1</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb6" name="kategori-filter" value="LB6/600-5/7">
                                                <label for="kat-lb6" style="color: #333; font-weight: 400; font-size: 12px;">LB6 / 600-5/7</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb2" name="kategori-filter" value="LB2/600-5/2">
                                                <label for="kat-lb2" style="color: #333; font-weight: 400; font-size: 12px;">LB2 / 600-5/2</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb6x" name="kategori-filter" value="LB6X/600-5/8">
                                                <label for="kat-lb6x" style="color: #333; font-weight: 400; font-size: 12px;">LB6X / 600-5/8</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb3" name="kategori-filter" value="LB3/600-5/3">
                                                <label for="kat-lb3" style="color: #333; font-weight: 400; font-size: 12px;">LB3 / 600-5/3</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb7" name="kategori-filter" value="LB7/600-5/9">
                                                <label for="kat-lb7" style="color: #333; font-weight: 400; font-size: 12px;">LB7 / 600-5/9</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb4" name="kategori-filter" value="LB4/600-5/4">
                                                <label for="kat-lb4" style="color: #333; font-weight: 400; font-size: 12px;">LB4 / 600-5/4</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb8" name="kategori-filter" value="LB8/600-5/10">
                                                <label for="kat-lb8" style="color: #333; font-weight: 400; font-size: 12px;">LB8 / 600-5/10</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb5" name="kategori-filter" value="LB5/600-5/5">
                                                <label for="kat-lb5" style="color: #333; font-weight: 400; font-size: 12px;">LB5 / 600-5/5</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 8px;">
                                                <input type="checkbox" id="kat-lb9" name="kategori-filter" value="LB9/600-5/11">
                                                <label for="kat-lb9" style="color: #333; font-weight: 400; font-size: 12px;">LB9 / 600-5/11</label>
                                            </div>
                                        </div>
                                        <div style="font-size: 12px; color: #666; margin-bottom: 15px; text-decoration: underline;">PENGKLASIFIKASIAN FAIL</div>
                                        <div class="klasifikasi-options" style="display: flex; gap: 30px; align-items: center;">
                                            <div class="filter-option" style="margin-bottom: 0; display: flex; align-items: center;">
                                                <input type="radio" id="klas-a" name="klasifikasi-filter" value="A" style="margin-right: 8px;">
                                                <label for="klas-a" style="color: #333; font-weight: 400; margin: 0;">A</label>
                                            </div>
                                            <div class="filter-option" style="margin-bottom: 0; display: flex; align-items: center;">
                                                <input type="radio" id="klas-b" name="klasifikasi-filter" value="B" style="margin-right: 8px;">
                                                <label for="klas-b" style="color: #333; font-weight: 400; margin: 0;">B</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </th>
                            <th id="countdown-ulasan-header" style="cursor:pointer; position: relative;">
                                COUNTDOWN ULASAN <i class="fas fa-caret-down" id="countdown-caret"></i>
                                <!-- Countdown Ulasan Filter Dropdown -->
                                <div id="countdown-dropdown" class="filter-dropdown" style="display: none;">
                                    <div class="filter-header">
                                        <span style="font-weight: 600; font-size: 14px; color: #333;">COUNTDOWN</span>
                                        <i class="fas fa-caret-up" style="color: #666;"></i>
                                    </div>
                                    <div class="filter-content">
                                        <div style="font-size: 12px; color: #999; margin-bottom: 15px; text-decoration: underline;">Status</div>
                                        <div class="filter-option">
                                            <input type="radio" id="countdown-selesai" name="countdown-filter" value="SELESAI">
                                            <label for="countdown-selesai" style="color: #333; font-weight: 400;">SELESAI</label>
                                        </div>
                                        <div style="font-size: 12px; color: #999; margin: 20px 0 15px 0; text-decoration: underline;">NUMBER IN BETWEEN</div>
                                        <div class="filter-option">
                                            <input type="radio" id="countdown-19-14" name="countdown-filter" value="19-14">
                                            <label for="countdown-19-14" style="color: #333; font-weight: 400;">19 to 14</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="countdown-14-7" name="countdown-filter" value="14-7">
                                            <label for="countdown-14-7" style="color: #333; font-weight: 400;">14 to 7</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="countdown-less-7" name="countdown-filter" value="LESS-7">
                                            <label for="countdown-less-7" style="color: #333; font-weight: 400;">less then 7</label>
                                        </div>
                                    </div>
                                </div>
                            </th>
                            <th id="tempoh-header" style="cursor:pointer; position: relative;">
                                TEMPOH SAH LAKU PELAN / STATUS PEMBINAAN <i class="fas fa-caret-down" id="tempoh-caret"></i>
                                <!-- Tempoh Sah Laku Filter Dropdown -->
                                <div id="tempoh-dropdown" class="filter-dropdown" style="display: none;">
                                    <div class="filter-header">
                                        <span style="font-weight: 600; font-size: 14px; color: #333;">TEMPOH SAH LAKU PELAN /</span>
                                        <i class="fas fa-caret-up" style="color: #666;"></i>
                                    </div>
                                    <div class="filter-content">
                                        <div class="filter-option">
                                            <input type="radio" id="tempoh-berlangsung" name="tempoh-filter" value="Pembinaan Berlangsung">
                                            <label for="tempoh-berlangsung" style="color: #333; font-weight: 400;">Pembinaan Berlangsung</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="tempoh-tamat" name="tempoh-filter" value="Pembinaan Tamat">
                                            <label for="tempoh-tamat" style="color: #333; font-weight: 400;">Pembinaan Tamat</label>
                                        </div>
                                        <div style="font-size: 12px; color: #999; margin: 20px 0 15px 0; text-decoration: underline;">NUMBER IS BETWEEN</div>
                                        <div class="filter-option">
                                            <input type="radio" id="tempoh-60-30" name="tempoh-filter" value="60-30">
                                            <label for="tempoh-60-30" style="color: #333; font-weight: 400;">60 to 30</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="tempoh-less-30" name="tempoh-filter" value="LESS-30">
                                            <label for="tempoh-less-30" style="color: #333; font-weight: 400;">LESS THEN 30</label>
                                        </div>
                                    </div>
                                </div>
                            </th>
                            <th id="countdown-permit-header" style="cursor:pointer; position: relative;">
                                COUNTDOWN AKHIR PERMIT <i class="fas fa-caret-down" id="countdown-permit-caret"></i>
                                <!-- Countdown Akhir Permit Filter Dropdown -->
                                <div id="countdown-permit-dropdown" class="filter-dropdown" style="display: none;">
                                    <div class="filter-header">
                                        <span style="font-weight: 600; font-size: 14px; color: #333;">COUNTDOWN</span>
                                        <i class="fas fa-caret-up" style="color: #666;"></i>
                                    </div>
                                    <div class="filter-content">
                                        <div style="font-size: 12px; color: #999; margin-bottom: 15px; text-decoration: underline;">NUMBER IS BETWEEN</div>
                                        <div class="filter-option">
                                            <input type="radio" id="permit-60-30" name="countdown-permit-filter" value="60-30">
                                            <label for="permit-60-30" style="color: #333; font-weight: 400;">60 to 30</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="permit-less-30" name="countdown-permit-filter" value="LESS-30">
                                            <label for="permit-less-30" style="color: #333; font-weight: 400;">LESS THEN 30</label>
                                        </div>
                                    </div>
                                </div>
                            </th>
                            <th id="countdown-cagaran-header" style="cursor:pointer; position: relative;">
                                COUNTDOWN TUNTUTAN CAGARAN <i class="fas fa-caret-down" id="countdown-cagaran-caret"></i>
                                <!-- Countdown Tuntutan Cagaran Filter Dropdown -->
                                <div id="countdown-cagaran-dropdown" class="filter-dropdown" style="display: none;">
                                    <div class="filter-header">
                                        <span style="font-weight: 600; font-size: 14px; color: #333;">COUNTDOWN TUNTUTAN</span>
                                        <i class="fas fa-caret-up" style="color: #666;"></i>
                                    </div>
                                    <div class="filter-content">
                                        <div style="font-size: 12px; color: #999; margin-bottom: 15px; text-decoration: underline;">NUMBER IS BETWEEN</div>
                                        <div class="filter-option">
                                            <input type="radio" id="cagaran-60-30" name="countdown-cagaran-filter" value="60-30">
                                            <label for="cagaran-60-30" style="color: #333; font-weight: 400;">60 to 30</label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="radio" id="cagaran-less-30" name="countdown-cagaran-filter" value="LESS-30">
                                            <label for="cagaran-less-30" style="color: #333; font-weight: 400;">LESS THEN 30</label>
                                        </div>
                                    </div>
                                </div>
                            </th>
                            <th>TINDAKAN</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data as $index => $row)
                        <tr class="data-row"
                            data-nombor-fail="{{ $row->nombor_fail }}"
                            data-nombor-fail-rn="{{ $row->nombor_fail_rn }}"
                            data-nombor-fail-tahun="{{ $row->nombor_fail_tahun }}"
                            data-tarikh-permohonan="{{ $row->tarikh_terima_fail }}"
                            data-kategori-fail="{{ $row->kategori_fail }}"
                            data-tajuk-permohonan="{{ $row->tajuk_permohonan }}"
                            data-pegawai="{{ $row->pegawai_penyemak }}"
                            data-pemohon="{{ $row->nama_pemohon }}"
                            data-status-pembinaan="{{ $row->status_pembinaan }}"
                            data-status-fail="{{ $row->status_fail }}"
                            data-jumlah-unit="{{ $row->jumlah_unit }}"
                            data-tarikh-kelulusan="{{ $row->tarikh_lulus }}"
                            data-tarikh-keputusan="{{ $row->tarikh_keputusan }}"
                            data-ulasan-jabatan="{{ $row->ulasan_jabatan }}"
                            data-tempoh-piagam="{{ $row->tempoh_piagam}}"
                            data-countdown-ulasan="{{ $row->countdown_ulasan }}"
                            data-tempoh-ulasan="{{ $row->tempoh_piagam_1 }}"
                        >
                            <td>
                                <span class="
                                    @if($row->status_fail == 'TOLAK' || $row->status_fail == 'BATAL') status-tolak
                                    @elseif($row->status_fail == 'LULUS' || $row->status_fail == 'LULUS/CCC') status-lulus
                                    @elseif($row->status_fail == 'SEDANG DIPROSES') status-sedang
                                    @else status-tolak @endif
                                ">{{ $row->status_fail ?? '-' }}</span>
                            </td>
                            <td class="nombor-fail">
                                <span class="me-2">{{ $row->nombor_fail ?? '-' }}</span>
                                <span class="me-2">{{ $row->nombor_fail_rn ?? '-' }}</span>
                                <span>{{ $row->nombor_fail_tahun ?? '-' }}</span>
                            </td>
                            <td>
                                <span class="kategori-badge">{{ $row->kategori_fail ?? '-' }}</span>
                                @if(isset($row->pengklasifikasian_fail) && $row->pengklasifikasian_fail)
                                    <span class="klasifikasi-badge {{ $row->pengklasifikasian_fail == 'A' ? 'klasifikasi-a' : 'klasifikasi-b' }}">{{ $row->pengklasifikasian_fail }}</span>
                                @endif
                            </td>
                            <td>
                                @if($row->countdown_ulasan && strtolower($row->countdown_ulasan) == 'selesai')
                                    <span class="countdown-selesai">SELESAI</span>
                                @elseif($row->countdown_ulasan && is_numeric($row->countdown_ulasan))
                                    @php $countdown = (int)$row->countdown_ulasan; @endphp
                                    <span class="
                                        @if($countdown <= 7) countdown-red
                                        @elseif($countdown <= 14) countdown-orange
                                        @else countdown-green @endif
                                    ">{{ $countdown }}</span>
                                @else
                                    <span class="countdown-selesai">{{ $row->countdown_ulasan ?? '-' }}</span>
                                @endif
                            </td>
                            <td>
                                @if($row->status_pembinaan && strpos(strtolower($row->status_pembinaan), 'berlangsung') !== false)
                                    <span class="status-pembinaan berlangsung">{{ $row->status_pembinaan }}</span>
                                @elseif($row->status_fail == 'TOLAK')
                                    <span class="status-tolak">TOLAK</span>
                                @else
                                    <span class="status-pembinaan">{{ $row->status_pembinaan ?? '-' }}</span>
                                @endif
                            </td>
                            <td>
                                @if($row->countdown_permit && is_numeric($row->countdown_permit))
                                    @php $permit = (int)$row->countdown_permit; @endphp
                                    <span class="
                                        @if($permit <= 30) countdown-red
                                        @elseif($permit <= 60) countdown-orange
                                        @else countdown-green @endif
                                    ">{{ $permit }}</span>
                                @else
                                    <span>{{ $row->countdown_permit ?? '-' }}</span>
                                @endif
                            </td>
                            <td>-</td>
                            <td class="text-center" style="position: relative;">
                                <i class="fas fa-ellipsis-v action-menu" data-row-index="{{ $index }}"></i>
                                <!-- Action Menu Dropdown -->
                                <div id="action-menu-{{ $index }}" class="action-menu-dropdown" style="display: none;">
                                    <div class="action-menu-item" data-action="lihat" data-row-index="{{ $index }}">
                                        Lihat
                                    </div>
                                    <div class="action-menu-item" data-action="proses" data-row-index="{{ $index }}">
                                        Proses
                                    </div>
                                    <div class="action-menu-item" data-action="pergerakan" data-row-index="{{ $index }}">
                                        Pergerakan Fail
                                    </div>
                                    <div class="action-menu-item" data-action="padam" data-row-index="{{ $index }}">
                                        Padam
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal (outside of centered container) -->
    <div id="application-modal-overlay" class="modal-overlay" style="display:none;">
        <div id="application-modal" class="modal-content">
            <div class="modal-header">
                <span class="modal-title">Nombor Fail :</span>
                <span id="modal-nombor-fail"></span>
            </div>
            <div class="modal-body">
                <div style="display:flex;flex-wrap:wrap;gap:32px 0;">
                    <div style="flex:1 1 50%;max-width:50%;">
                        <div class="modal-row">
                            <span class="modal-label">TARIKH TERIMA PERMOHONAN</span> : <span id="modal-tarikh-permohonan" class="modal-value"></span>
                        </div>
                        <div class="modal-row">
                            <span class="modal-label">KATEGORI FAIL</span> : <span id="modal-kategori-fail" class="modal-value"></span>
                        </div>
                        <div class="modal-row">
                            <span class="modal-label">TAJUK PERMOHONAN</span> : <span id="modal-tajuk-permohonan" class="modal-value" style="height:100px; overflow-y:auto"></span>
                        </div>
                        <div class="modal-row">
                            <span class="modal-label">PEMOHON</span> : <span id="modal-pemohon" class="modal-value"></span>
                        </div>
                        <div class="modal-row" style="display:none">
                            <span class="modal-label">PEGAWAI</span> : <span id="modal-pegawai" class="modal-value"></span>
                        </div>
                        <div class="modal-row" style="display:none">
                            <span class="modal-label">ULASAN JABATAN</span> : <span id="modal-ulasan-jabatan" class="modal-value"></span>
                        </div>
                        <div class="modal-row" style="display:none">
                            <span class="modal-label">ULASAN JABATAN</span> : <span id="modal-tempoh-piagam" class="modal-value"></span>
                        </div>
                        <div class="modal-row" style="display:none">
                            <span class="modal-label">ULASAN JABATAN</span> : <span id="modal-countdown-ulasan" class="modal-value"></span>
                        </div>
                        <div class="modal-row" style="display:none">
                            <span class="modal-label">ULASAN JABATAN</span> : <span id="modal-tempoh-ulasan" class="modal-value"></span>
                        </div>
                        <div class="modal-row">
                            <span class="modal-label">STATUS PEMBINAAN</span> : <span id="modal-status-pembinaan" class="modal-value"></span>
                        </div>
                    </div>
                    <div style="flex:1 1 50%;max-width:50%;padding-left:32px;">
                        <div class="modal-row">
                            <span class="modal-label">STATUS FAIL</span> : <span id="modal-status-fail" class="modal-value"></span>
                        </div>
                        <div class="modal-row">
                            <span class="modal-label">JUMLAH KESELURUHAN UNIT</span> : <span id="modal-jumlah-unit" class="modal-value"></span>
                        </div>
                        <div class="modal-row">
                            <span class="modal-label">&nbsp;</span>
                        </div>
                        <div class="modal-row">
                            <span class="modal-label">TARIKH KELULUSAN</span> : <span id="modal-tarikh-kelulusan" class="modal-value"></span>
                        </div>
                        <div class="modal-row">
                            <span class="modal-label">TARIKH KEPUTUSAN AKHIR</span> : <span id="modal-tarikh-keputusan" class="modal-value"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="modal-close-btn" class="modal-btn">TUTUP</button>
                <button id="modal-proses-btn" class="modal-btn modal-proses">PROSES</button>
            </div>
        </div>
    </div>

    <script>
        // --- DROPDOWN FUNCTIONALITY ---
        document.addEventListener('DOMContentLoaded', function() {
            // Get all dropdown elements
            const dropdowns = {
                status: {
                    header: document.getElementById('status-fail-header'),
                    dropdown: document.getElementById('status-filter-dropdown'),
                    caret: document.getElementById('status-fail-caret')
                },
                nombor: {
                    header: document.getElementById('sort-file-number'),
                    dropdown: document.getElementById('nombor-fail-dropdown'),
                    caret: document.querySelector('#sort-file-number .sort-caret')
                },
                kategori: {
                    header: document.getElementById('sort-category'),
                    dropdown: document.getElementById('kategori-fail-dropdown'),
                    caret: document.querySelector('#sort-category .sort-caret')
                },
                countdown: {
                    header: document.getElementById('countdown-ulasan-header'),
                    dropdown: document.getElementById('countdown-dropdown'),
                    caret: document.getElementById('countdown-caret')
                },
                tempoh: {
                    header: document.getElementById('tempoh-header'),
                    dropdown: document.getElementById('tempoh-dropdown'),
                    caret: document.getElementById('tempoh-caret')
                },
                countdownPermit: {
                    header: document.getElementById('countdown-permit-header'),
                    dropdown: document.getElementById('countdown-permit-dropdown'),
                    caret: document.getElementById('countdown-permit-caret')
                },
                countdownCagaran: {
                    header: document.getElementById('countdown-cagaran-header'),
                    dropdown: document.getElementById('countdown-cagaran-dropdown'),
                    caret: document.getElementById('countdown-cagaran-caret')
                }
            };

            const tableRows = document.querySelectorAll('#application-table tbody tr');

            // Generic dropdown toggle function
            function toggleDropdown(type) {
                const { header, dropdown, caret } = dropdowns[type];
                if (!dropdown) return;

                // Close other dropdowns and reset their carets
                Object.keys(dropdowns).forEach(key => {
                    if (key !== type) {
                        dropdowns[key].dropdown?.classList.remove('show');
                        dropdowns[key].caret?.classList.remove('rotated');
                    }
                });

                // Toggle current dropdown with animation
                const isVisible = dropdown.classList.contains('show');
                if (isVisible) {
                    dropdown.classList.remove('show');
                    caret?.classList.remove('rotated');
                } else {
                    dropdown.classList.add('show');
                    caret?.classList.add('rotated');
                }
            }

            // Add click handlers for each dropdown
            Object.keys(dropdowns).forEach(type => {
                const { header, dropdown } = dropdowns[type];
                if (header) {
                    header.addEventListener('click', function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                        toggleDropdown(type);
                    });
                }
                if (dropdown) {
                    dropdown.addEventListener('click', function(e) {
                        e.stopPropagation();
                    });
                }
            });

            // Close dropdowns when clicking outside
            document.addEventListener('click', function() {
                Object.keys(dropdowns).forEach(type => {
                    dropdowns[type].dropdown?.classList.remove('show');
                    dropdowns[type].caret?.classList.remove('rotated');
                });

                // Also close action menus
                document.querySelectorAll('.action-menu-dropdown').forEach(menu => {
                    menu.classList.remove('show');
                });
            });

            // Add smooth animation class to all carets
            document.querySelectorAll('#status-fail-caret, .sort-caret, #countdown-caret, #tempoh-caret, #countdown-permit-caret, #countdown-cagaran-caret').forEach(caret => {
                if (caret) {
                    caret.style.transition = 'transform 0.2s ease';
                }
            });

            // --- ACTION MENU FUNCTIONALITY ---
            document.addEventListener('click', function(e) {
                // Handle action menu clicks
                if (e.target.classList.contains('action-menu')) {
                    e.stopPropagation();
                    e.preventDefault();

                    const rowIndex = e.target.getAttribute('data-row-index');
                    const dropdown = document.getElementById(`action-menu-${rowIndex}`);

                    // Close all other action menus
                    document.querySelectorAll('.action-menu-dropdown').forEach(menu => {
                        if (menu.id !== `action-menu-${rowIndex}`) {
                            menu.classList.remove('show');
                        }
                    });

                    // Close all filter dropdowns
                    Object.keys(dropdowns).forEach(type => {
                        dropdowns[type].dropdown?.classList.remove('show');
                        dropdowns[type].caret?.classList.remove('rotated');
                    });

                    // Toggle current action menu
                    if (dropdown) {
                        dropdown.classList.toggle('show');
                    }
                }

                // Handle action menu item clicks
                if (e.target.classList.contains('action-menu-item')) {
                    e.stopPropagation();
                    e.preventDefault();

                    const action = e.target.getAttribute('data-action');
                    const rowIndex = e.target.getAttribute('data-row-index');
                    const row = document.querySelectorAll('.data-row')[rowIndex];

                    // Close the action menu
                    document.getElementById(`action-menu-${rowIndex}`).classList.remove('show');

                    // Handle different actions
                    switch(action) {
                        case 'lihat':
                            // Open modal using the row index
                            openModal(parseInt(rowIndex));
                            break;
                        case 'proses':
                            // Open modal and then click proses button
                            openModal(parseInt(rowIndex));
                            setTimeout(() => {
                                document.getElementById('modal-proses-btn')?.click();
                            }, 100);
                            break;
                        case 'pergerakan':
                            // Navigate to file movement page
                            window.location.href = '/filemovement';
                            break;
                        case 'padam':
                            // Handle delete action
                            if (confirm('Adakah anda pasti ingin memadam item ini?')) {
                                console.log('Padam clicked for row:', rowIndex);
                                // Add your delete logic here
                                // For example: deleteRecord(rowIndex);
                            }
                            break;
                    }
                }

                // Close action menus when clicking elsewhere
                if (!e.target.closest('.action-menu-dropdown') && !e.target.classList.contains('action-menu')) {
                    document.querySelectorAll('.action-menu-dropdown').forEach(menu => {
                        menu.classList.remove('show');
                    });
                }
            });

            // --- STATUS FILTER FUNCTIONALITY ---
            const statusFilterRadios = document.querySelectorAll('input[name="status-filter"]');
            statusFilterRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    const selectedValue = this.value;
                    filterTableByStatus(selectedValue);
                    setTimeout(() => toggleDropdown('status'), 150); // Close dropdown with animation
                });
            });

            function filterTableByStatus(status) {
                tableRows.forEach(row => {
                    if (status === 'ALL') {
                        row.style.display = '';
                    } else {
                        const statusCell = row.cells[0].textContent.trim();
                        if (statusCell === status) {
                            row.style.display = '';
                        } else {
                            row.style.display = 'none';
                        }
                    }
                });
            }

            // --- NOMBOR FAIL SORT FUNCTIONALITY ---
            const nomborSortRadios = document.querySelectorAll('input[name="nombor-sort"]');
            
            nomborSortRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.checked) {
                        const sortOrder = this.value;
                        const isAscending = (sortOrder === 'ascending');
                        sortTableByNomborFail(isAscending);
                        setTimeout(() => toggleDropdown('nombor'), 150);
                    }
                });
            });

            function sortTableByNomborFail(ascending) {
                const tbody = document.querySelector('#application-table tbody');
                const visibleRows = Array.from(tbody.querySelectorAll('tr')).filter(row => row.style.display !== 'none');

                if (visibleRows.length === 0) return;

                // Extract data and create sort keys for compound sorting
                const rowData = visibleRows.map((row) => {
                    const firstSpan = row.cells[1] ? row.cells[1].querySelector('span:first-child') : null;
                    const text = firstSpan ? firstSpan.textContent.trim() : '';
                    
                    let sortKey = 999999; // Default high value for unknown formats
                    
                    if (text && text !== '-' && text !== '') {
                        // Look for pattern like OSC(001-A) -> extract 001 and A
                        let match = text.match(/\((\d+)-([A-Z])\)/);
                        if (match) {
                            const num = parseInt(match[1], 10);
                            const letter = match[2];
                            sortKey = num * 1000 + letter.charCodeAt(0);
                        } else {
                            // Look for any numbers in the text
                            match = text.match(/(\d+)/);
                            if (match) {
                                sortKey = parseInt(match[1], 10);
                            }
                        }
                    } else {
                        // Empty values go to end for ascending, beginning for descending
                        sortKey = ascending ? 999999 : 0;
                    }
                    
                    return { text, sortKey, row };
                });

                // Sort the rows
                rowData.sort((a, b) => {
                    return ascending ? (a.sortKey - b.sortKey) : (b.sortKey - a.sortKey);
                });

                // Clear and rebuild table with sorted rows
                tbody.innerHTML = '';
                rowData.forEach((item) => {
                    tbody.appendChild(item.row);
                });
            }

            // --- KATEGORI FAIL FILTER FUNCTIONALITY ---
            const kategoriCheckboxes = document.querySelectorAll('input[name="kategori-filter"]');
            const klasifikasiRadios = document.querySelectorAll('input[name="klasifikasi-filter"]');

            kategoriCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    filterTableByKategori();
                });
            });

            klasifikasiRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    filterTableByKlasifikasi(this.value);
                    setTimeout(() => toggleDropdown('kategori'), 150); // Close dropdown with animation
                });
            });

            function filterTableByKategori() {
                const selectedKategoris = Array.from(kategoriCheckboxes)
                    .filter(cb => cb.checked)
                    .map(cb => cb.value);

                tableRows.forEach(row => {
                    if (selectedKategoris.length === 0) {
                        row.style.display = '';
                    } else {
                        const kategoriCell = row.cells[2].textContent.trim();
                        const kategoriMatch = selectedKategoris.some(kategori => kategoriCell.includes(kategori));
                        row.style.display = kategoriMatch ? '' : 'none';
                    }
                });
            }

            function filterTableByKlasifikasi(klasifikasi) {
                // This would filter based on the classification A/B
                // You can implement this based on your data structure
                console.log('Filter by klasifikasi:', klasifikasi);
            }

            // --- COUNTDOWN ULASAN FILTER FUNCTIONALITY ---
            const countdownFilterRadios = document.querySelectorAll('input[name="countdown-filter"]');
            countdownFilterRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    const selectedValue = this.value;
                    filterTableByCountdown(selectedValue);
                    setTimeout(() => toggleDropdown('countdown'), 150); // Close dropdown with animation
                });
            });

            function filterTableByCountdown(filter) {
                tableRows.forEach(row => {
                    const countdownCell = row.cells[3].textContent.trim();
                    let shouldShow = false;

                    switch(filter) {
                        case 'SELESAI':
                            shouldShow = countdownCell.toLowerCase().includes('selesai') || countdownCell === '-';
                            break;
                        case '19-14':
                            const val1914 = parseInt(countdownCell.replace(/[^\d]/g, ''));
                            shouldShow = val1914 >= 14 && val1914 <= 19;
                            break;
                        case '14-7':
                            const val147 = parseInt(countdownCell.replace(/[^\d]/g, ''));
                            shouldShow = val147 >= 7 && val147 <= 14;
                            break;
                        case 'LESS-7':
                            const valLess7 = parseInt(countdownCell.replace(/[^\d]/g, ''));
                            shouldShow = valLess7 > 0 && valLess7 < 7;
                            break;
                        default:
                            shouldShow = true;
                    }

                    row.style.display = shouldShow ? '' : 'none';
                });
            }

            // --- COUNTDOWN AKHIR PERMIT FILTER FUNCTIONALITY ---
            const countdownPermitFilterRadios = document.querySelectorAll('input[name="countdown-permit-filter"]');
            countdownPermitFilterRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    const selectedValue = this.value;
                    filterTableByCountdownPermit(selectedValue);
                    setTimeout(() => toggleDropdown('countdownPermit'), 150); // Close dropdown with animation
                });
            });

            function filterTableByCountdownPermit(filter) {
                tableRows.forEach(row => {
                    const permitCell = row.cells[5].textContent.trim();
                    let shouldShow = false;

                    switch(filter) {
                        case '60-30':
                            const val6030 = parseInt(permitCell.replace(/[^\d]/g, ''));
                            shouldShow = val6030 >= 30 && val6030 <= 60;
                            break;
                        case 'LESS-30':
                            const valLess30 = parseInt(permitCell.replace(/[^\d]/g, ''));
                            shouldShow = valLess30 > 0 && valLess30 < 30;
                            break;
                        default:
                            shouldShow = true;
                    }

                    row.style.display = shouldShow ? '' : 'none';
                });
            }

            // --- COUNTDOWN TUNTUTAN CAGARAN FILTER FUNCTIONALITY ---
            const countdownCagaranFilterRadios = document.querySelectorAll('input[name="countdown-cagaran-filter"]');
            countdownCagaranFilterRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    const selectedValue = this.value;
                    filterTableByCountdownCagaran(selectedValue);
                    setTimeout(() => toggleDropdown('countdownCagaran'), 150); // Close dropdown with animation
                });
            });

            function filterTableByCountdownCagaran(filter) {
                tableRows.forEach(row => {
                    const cagaranCell = row.cells[6].textContent.trim();
                    let shouldShow = false;

                    switch(filter) {
                        case '60-30':
                            const val6030 = parseInt(cagaranCell.replace(/[^\d]/g, ''));
                            shouldShow = val6030 >= 30 && val6030 <= 60;
                            break;
                        case 'LESS-30':
                            const valLess30 = parseInt(cagaranCell.replace(/[^\d]/g, ''));
                            shouldShow = valLess30 > 0 && valLess30 < 30;
                            break;
                        default:
                            shouldShow = true;
                    }

                    row.style.display = shouldShow ? '' : 'none';
                });
            }

            // --- TEMPOH SAH LAKU FILTER FUNCTIONALITY ---
            const tempohFilterRadios = document.querySelectorAll('input[name="tempoh-filter"]');
            tempohFilterRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    const selectedValue = this.value;
                    filterTableByTempoh(selectedValue);
                    setTimeout(() => toggleDropdown('tempoh'), 150); // Close dropdown with slight delay for better UX
                });
            });

            function filterTableByTempoh(filter) {
                tableRows.forEach(row => {
                    const tempohCell = row.cells[4].textContent.trim().toLowerCase();
                    let shouldShow = false;

                    switch(filter) {
                        case 'Pembinaan Berlangsung':
                            shouldShow = tempohCell.includes('berlangsung') || tempohCell.includes('bermula');
                            break;
                        case 'Pembinaan Tamat':
                            shouldShow = tempohCell.includes('tamat') || tempohCell.includes('selesai');
                            break;
                        case '60-30':
                            const val6030 = parseInt(tempohCell.replace(/[^\d]/g, ''));
                            shouldShow = val6030 >= 30 && val6030 <= 60;
                            break;
                        case 'LESS-30':
                            const valLess30 = parseInt(tempohCell.replace(/[^\d]/g, ''));
                            shouldShow = valLess30 > 0 && valLess30 < 30;
                            break;
                        default:
                            shouldShow = true;
                    }

                    row.style.display = shouldShow ? '' : 'none';
                });
            }

        });
    </script>

    <script>
        var rowrealData = document.querySelectorAll('.data-row');

        // --- Modal Logic ---
        document.addEventListener('DOMContentLoaded', function() {
            rowrealData = document.querySelectorAll('.data-row');
        });

        const modalOverlay = document.getElementById('application-modal-overlay');
        const modal = document.getElementById('application-modal');
        const closeBtn = document.getElementById('modal-close-btn');
        const prosesBtn = document.getElementById('modal-proses-btn');
        var row;

        function openModal(index) {
            const rowData = document.querySelectorAll('.data-row')[index];
            if (!rowData) return;

            // Read data from data-* attributes
            document.getElementById('modal-nombor-fail').textContent = rowData.dataset.nomborFail || '-';
            document.getElementById('modal-tarikh-permohonan').textContent = rowData.dataset.tarikhPermohonan || '-';
            document.getElementById('modal-kategori-fail').textContent = rowData.dataset.kategoriFail || '-';
            document.getElementById('modal-tajuk-permohonan').textContent = rowData.dataset.tajukPermohonan || '-';
            document.getElementById('modal-pegawai').textContent = rowData.dataset.pegawai || '-';
            document.getElementById('modal-pemohon').textContent = rowData.dataset.pemohon || '-';
            document.getElementById('modal-status-pembinaan').textContent = rowData.dataset.statusPembinaan || '-';
            document.getElementById('modal-status-fail').textContent = rowData.dataset.statusFail || '-';
            document.getElementById('modal-jumlah-unit').textContent = rowData.dataset.jumlahUnit || '-';
            document.getElementById('modal-tarikh-kelulusan').textContent = rowData.dataset.tarikhKelulusan || '-';
            document.getElementById('modal-tarikh-keputusan').textContent = rowData.dataset.tarikhKeputusan || '-';
            document.getElementById('modal-ulasan-jabatan').textContent = rowData.dataset.ulasanJabatan || '-';
            document.getElementById('modal-countdown-ulasan').textContent = rowData.dataset.countdownUlasan || '-';
            document.getElementById('modal-tempoh-ulasan').textContent = rowData.dataset.tempohUlasan || '-';
            document.getElementById('modal-tempoh-piagam').textContent = rowData.dataset.tempohPiagam || '-';

            // Status Fail color
            const statusFail = document.getElementById('modal-status-fail');
            const statusValue = rowData.dataset.statusFail;
            if (statusValue === 'TOLAK' || statusValue === 'BATAL') {
                statusFail.style.color = '#E74C3C';
            } else if (statusValue === 'LULUS' || statusValue === 'LULUS/CCC') {
                statusFail.style.color = '#00B96B';
            } else {
                statusFail.style.color = '#F5A623';
            }

            // Status Pembinaan italic/gray if "PEMBINAAN BELUM MULA"
            const statusPembinaan = document.getElementById('modal-status-pembinaan');
            if (rowData.dataset.statusPembinaan === 'PEMBINAAN BELUM MULA') {
                statusPembinaan.style.fontStyle = 'italic';
                statusPembinaan.style.color = '#A0A0A0';
            } else {
                statusPembinaan.style.fontStyle = 'normal';
                statusPembinaan.style.color = '#222';
            }

            modalOverlay.style.display = 'flex';
        }

        closeBtn.addEventListener('click', function() {
            modalOverlay.style.display = 'none';
        });

        // Optional: clicking outside modal closes it
        modalOverlay.addEventListener('click', function(e) {
            if (e.target === modalOverlay) modalOverlay.style.display = 'none';
        });

        // PROSES button (implement as needed)
        prosesBtn.addEventListener('click', function() {
            // Get the currently opened modal data
            const data = rowrealData;
            const year = window.appData.year;
            if (rowrealData) {
                // Build query string from data
                const params = new URLSearchParams({
                    nomborFail: document.getElementById('modal-nombor-fail').textContent,
                    tarikhPermohonan: document.getElementById('modal-tarikh-permohonan').textContent,
                    kategoriFail: document.getElementById('modal-kategori-fail').textContent,
                    tajukPermohonan: document.getElementById('modal-tajuk-permohonan').textContent,
                    pegawai: document.getElementById('modal-pegawai').textContent,
                    pemohon: document.getElementById('modal-pemohon').textContent,
                    statusPembinaan: document.getElementById('modal-status-pembinaan').textContent,
                    statusFail: document.getElementById('modal-status-fail').textContent,
                    jumlahUnit: document.getElementById('modal-jumlah-unit').textContent,
                    tarikhKelulusan: document.getElementById('modal-tarikh-kelulusan').textContent,
                    tarikhKeputusan: document.getElementById('modal-tarikh-keputusan').textContent,
                    year:year,
                    ulasanJabatan: document.getElementById('modal-ulasan-jabatan').textContent,
                    countdownUlasan: document.getElementById('modal-countdown-ulasan').textContent,
                    tempohUlasan: document.getElementById('modal-tempoh-ulasan').textContent,
                    tempohPiagam: document.getElementById('modal-tempoh-piagam').textContent,
                }).toString();
                window.location.href = `/step1?${params}`;
            } else {
                window.location.href = '/step1';
            }
        });
    </script>

@endsection