@extends('layouts.app')
@section('idesign', 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">

<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;
}

/* Make sure table headers have relative positioning for dropdown - Enhanced for small tables */
#status-fail-header, #sort-file-number, #sort-category, #pergerakan-fail-header, #tarikh-header, #tindakan-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 {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.sort-caret, #status-fail-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-baru {
    color: #0AD1C8 !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-proposalditerima {
    color: #00B96B !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-3dperspektif {
    color: #F5A623 !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-kajianbrief {
    color: #9B59B6 !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-lukisankerja {
    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-proposalslide {
    color: #3498DB !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%;
}

/* PPS badge styling - Updated to match exact design specs */
.pps-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;
}

/* 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: 20%; }
#application-table th:nth-child(5), #application-table td:nth-child(5) { width: 12%; }
#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;
}

/* 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;
}

/* 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;
}
</style>

@php
    $year = request('year') ?? '2024';
    // Sample data for iDesign projects
    $data = collect([
        (object)[
            'tarikh_terima' => '1/3/2024',
            'nombor_fail' => 'U/R/',
            'nombor_fail_rn' => '1',
            'nombor_fail_tahun' => '2024',
            'status' => 'Baru',
            'nama_projek' => 'Cadangan Pengubahsuaian Pejalat bagi Jabatan Pelesenan di Lot 9 & 10 di Bangunan UTC Ipoh',
            'pps' => 'PPS Firdaus',
            'pergerakan_fail' => 'PPS',
            'tarikh' => '1/3/2024',
        ],
        (object)[
            'tarikh_terima' => '1/3/2024',
            'nombor_fail' => 'U/R/',
            'nombor_fail_rn' => '2',
            'nombor_fail_tahun' => '2024',
            'status' => 'Proposal Dihantar',
            'nama_projek' => 'Nama Projek 1',
            'pps' => 'PPS Firdaus',
            'pergerakan_fail' => 'PPBP(PS)',
            'tarikh' => '1/3/2024',
        ],
        (object)[
            'tarikh_terima' => '1/3/2024',
            'nombor_fail' => 'U/R/',
            'nombor_fail_rn' => '3',
            'nombor_fail_tahun' => '2024',
            'status' => 'Kajian Brief',
            'nama_projek' => 'Nama Projek 2',
            'pps' => 'PPS Zahiril',
            'pergerakan_fail' => 'PPSK(2)',
            'tarikh' => '1/3/2024',
        ],
        (object)[
            'tarikh_terima' => '1/3/2024',
            'nombor_fail' => 'U/R/',
            'nombor_fail_rn' => '4',
            'nombor_fail_tahun' => '2024',
            'status' => 'Lukisan Kerja',
            'nama_projek' => 'Nama Projek 3',
            'pps' => 'PPS Fikri',
            'pergerakan_fail' => 'PPBP(PS)',
            'tarikh' => '1/3/2024',
        ],
        (object)[
            'tarikh_terima' => '1/3/2024',
            'nombor_fail' => 'U/R/',
            'nombor_fail_rn' => '5',
            'nombor_fail_tahun' => '2024',
            'status' => '3D Perspektif',
            'nama_projek' => 'Nama Projek 4',
            'pps' => 'PPS Asyraf',
            'pergerakan_fail' => 'PPS',
            'tarikh' => '1/3/2024',
        ],
        (object)[
            'tarikh_terima' => '1/3/2024',
            'nombor_fail' => 'U/R/',
            'nombor_fail_rn' => '6',
            'nombor_fail_tahun' => '2024',
            'status' => 'Proposal Slide',
            'nama_projek' => 'Nama Projek 5',
            'pps' => 'PPS Asyraf',
            'pergerakan_fail' => 'PBB',
            'tarikh' => '1/3/2024',
        ],
    ]);
@endphp

<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;">
                            <img src="{{ asset('images/icon/home.svg') }}" alt="Home" style="width: 20px; height: 20px;">
                        </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;">
                            Fail Projek
                        </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;">
                            Tahun {{ $year }}
                        </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;">TAHUN {{ $year }}</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;">
                <button class="btn btn-primary" style="min-width: 220px; margin-left: 0;">
                    <i class="fa fa-plus"></i> Pendaftaran Baru
                </button>
                <div class="search-box" style="max-width: 350px; width: 100%; position: relative; margin-right: 0;">
                    <input type="text" placeholder="   Carian..." 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>TARIKH TERIMA</th>
                            <th>NOMBOR FAIL</th>
                            <th id="status-fail-header" style="cursor:pointer; position: relative;">
                                STATUS <i class="fas fa-caret-down" id="status-fail-caret"></i>
                            </th>
                            <th>NAMA PROJEK</th>
                            <th>PPS</th>
                            <th>PERGERAKAN FAIL</th>
                            <th>TARIKH</th>
                            <th>TINDAKAN</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data as $index => $row)
                        <tr class="data-row">
                            <td>{{ $row->tarikh_terima }}</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="
                                    @if($row->status == 'Baru') status-baru
                                    @elseif($row->status == 'Proposal Dihantar') status-proposalditerima
                                    @elseif($row->status == '3D Perspektif') status-3dperspektif
                                    @elseif($row->status == 'Kajian Brief') status-kajianbrief
                                    @elseif($row->status == 'Lukisan Kerja') status-lukisankerja
                                    @elseif($row->status == 'Proposal Slide') status-proposalslide
                                    @else status-baru @endif
                                ">{{ $row->status }}</span>
                            </td>
                            <td>{{ $row->nama_projek }}</td>
                            <td>
                                <span class="pps-badge">{{ $row->pps }}</span>
                            </td>
                            <td>
                                <span class="pps-badge">{{ $row->pergerakan_fail }}</span>
                            </td>
                            <td>{{ $row->tarikh }}</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="pergerakan" data-row-index="{{ $index }}">
                                        Pergerakan Fail
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // --- DROPDOWN FUNCTIONALITY ---
        document.addEventListener('DOMContentLoaded', function() {
            const statusHeader = document.getElementById('status-fail-header');
            const statusCaret = document.getElementById('status-fail-caret');

            if (statusHeader) {
                statusHeader.addEventListener('click', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    // Toggle caret rotation
                    statusCaret?.classList.toggle('rotated');
                });
            }

            // --- 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');
                        }
                    });

                    // 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');

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

                    // Handle different actions
                    switch(action) {
                        case 'lihat':
                            window.location.href = '{{ route("idesignInfo") }}';
                            break;
                        case 'pergerakan':
                            window.location.href = '{{ route("idesignFileMov") }}';
                            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');
                    });
                }
            });
        });
    </script>

@endsection