@extends('theme.default.layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 17px; font-size: 26px;">COMPONENT-IV PROGRESS</h3>
@endsection

@section('content')

@php
$dummyRecords = collect([
    (object)[
        'id' => 1,
        'serial_no' => '4.1',
        'activity' => 'Procurement & Financial Specialist Hiring',
        'description' => 'Hiring of procurement and financial specialist for PIU setup',
        'target_start_date' => '2025-01-01',
        'planned_end_date' => '2025-01-20',
        'actual_end_date' => '2025-01-18',
        'status' => 'Completed',
    ],
    (object)[
        'id' => 2,
        'serial_no' => '4.2',
        'activity' => 'Monitoring & Evaluation Specialist Hiring',
        'description' => 'Hiring of M&E specialist',
        'target_start_date' => '2025-02-01',
        'planned_end_date' => '2025-02-20',
        'actual_end_date' => '2025-02-18',
        'status' => 'Completed',
    ],
    (object)[
        'id' => 3,
        'serial_no' => '4.3',
        'activity' => 'Project Baseline Survey',
        'description' => 'Baseline survey execution and reporting',
        'target_start_date' => '2025-02-15',
        'planned_end_date' => '2025-03-10',
        'actual_end_date' => '2025-03-08',
        'status' => 'Completed',
    ],
    (object)[
        'id' => 4,
        'serial_no' => '4.4',
        'activity' => 'Security Management Consultant',
        'description' => 'Hiring of security management consultant',
        'target_start_date' => '2025-03-01',
        'planned_end_date' => '2025-03-25',
        'actual_end_date' => null,
        'status' => 'In Progress',
    ],
    (object)[
        'id' => 5,
        'serial_no' => '4.5',
        'activity' => 'PMIS Deployment and API Integration',
        'description' => 'PMIS deployment, integration and configuration',
        'target_start_date' => '2025-03-10',
        'planned_end_date' => '2025-04-05',
        'actual_end_date' => null,
        'status' => 'In Progress',
    ],
    (object)[
        'id' => 6,
        'serial_no' => '4.6',
        'activity' => 'Quarterly Review Meetings',
        'description' => 'Quarterly review and monitoring meetings',
        'target_start_date' => '2025-04-01',
        'planned_end_date' => '2025-04-28',
        'actual_end_date' => null,
        'status' => 'In Progress',
    ],
]);
@endphp

<style>
    * {
        font-family: 'Roboto', sans-serif;
        box-sizing: border-box;
    }

    /* ────── CENTER MODAL ────── */
    #drawerModal {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 560px;
        max-width: 96vw;
        max-height: 88vh;
        background: #fff;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        border-radius: 8px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    #drawerModal.open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: all;
    }

    /* ────── VIEW MODAL ────── */
    #viewModal {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 560px;
        max-width: 96vw;
        max-height: 88vh;
        background: #fff;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        border-radius: 8px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    #viewModal.open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: all;
    }

    /* ────── MODAL HEADER ────── */
    .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-bottom: 1px solid #e5e7eb;
        flex-shrink: 0;
        background: #fff;
        border-radius: 8px 8px 0 0;
    }

    .modal-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .modal-header-left .close-btn {
        background: none;
        border: none;
        font-size: 16px;
        color: #9ca3af;
        cursor: pointer;
        line-height: 1;
        padding: 2px 4px;
    }

    .modal-header-left .close-btn:hover {
        color: #374151;
    }

    .modal-header-left .modal-title {
        font-weight: 600;
        font-size: 15px;
        color: #1f2937;
    }

    .modal-header-right {
        display: flex;
        gap: 8px;
    }

    .btn-cancel {
        border: 1px solid #22c55e;
        color: #16a34a;
        background: #fff;
        padding: 5px 18px;
        border-radius: 5px;
        font-size: 13px;
        cursor: pointer;
        font-family: 'Roboto', sans-serif;
    }

    .btn-cancel:hover {
        background: #f0fdf4;
    }

    .btn-save {
        background: #22c55e;
        color: #fff;
        border: none;
        padding: 5px 18px;
        border-radius: 5px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        font-family: 'Roboto', sans-serif;
    }

    .btn-save:hover {
        background: #16a34a;
    }

    /* ────── MODAL BODY ────── */
    .drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px 28px 24px;
    }

    /* ────── FORM ELEMENTS ────── */
    .fg {
        margin-bottom: 16px;
    }

    .fg label {
        display: block;
        font-size: 14px;
        color: #374151;
        margin-bottom: 5px;
    }

    .fg label .req {
        color: #ef4444;
    }

    .fg label.hint-lbl {
        font-size: 13px;
        color: #6b7280;
    }

    .fg input[type="text"],
    .fg input[type="date"],
    .fg textarea {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 5px;
        padding: 8px 11px;
        font-size: 14px;
        color: #1f2937;
        background: #fff;
        font-family: 'Roboto', sans-serif;
        transition: border-color .15s;
    }

    .fg input:focus,
    .fg textarea:focus {
        outline: none;
        border-color: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
    }

    .fg textarea {
        resize: none;
    }

    /* ────── STATUS DISPLAY ────── */
    .status-display {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 5px;
        padding: 8px 11px;
        font-size: 14px;
        font-family: 'Roboto', sans-serif;
        background: #f9fafb;
        color: #9ca3af;
        cursor: default;
        user-select: none;
        transition: color .2s, background .2s, border-color .2s;
    }

    .status-display.completed {
        color: #16a34a;
        font-weight: 600;
        background: #f0fdf4;
        border-color: #22c55e;
    }

    /* ────── ADD MORE PROGRESS BUTTON ────── */
    #addProgressBtn {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        border: 1px solid #d1d5db;
        background: #f9fafb;
        color: #374151;
        transition: background .2s, color .2s, border-color .2s;
        font-family: 'Roboto', sans-serif;
    }

    #addProgressBtn.active {
        background: #22c55e;
        color: #fff;
        border-color: #22c55e;
    }

    /* ────── PROGRESS SECTION ────── */
    #progressSection {
        display: none;
        margin-top: 14px;
    }

    #progressSection.show {
        display: block;
    }

    .counter-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #d1d5db;
        border-radius: 5px;
        padding: 5px 12px;
        font-size: 13px;
        color: #1f2937;
    }

    .counter-box input[type="number"] {
        width: 60px;
        border: none;
        outline: none;
        font-size: 13px;
        font-family: 'Roboto', sans-serif;
        color: #1f2937;
        background: transparent;
        text-align: left;
        padding: 4px 0;
        -moz-appearance: textfield;
    }

    .counter-box input[type="number"]::-webkit-outer-spin-button,
    .counter-box input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .counter-box .cnt-btns {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .cnt-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 18px;
        color: #374151;
        line-height: 1;
        padding: 2px 6px;
    }

    .cnt-btn:hover {
        color: #22c55e;
    }

    /* ────── PROGRESS FIELDS ────── */
    .progress-field {
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 12px;
        margin-top: 10px;
        background: #fafafa;
    }

    .progress-field .pf-title {
        font-size: 12px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
    }

    .progress-field input[type="text"] {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 5px;
        padding: 7px 10px;
        font-size: 13px;
        font-family: 'Roboto', sans-serif;
        background: #fff;
    }

    .progress-field input:focus {
        outline: none;
        border-color: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
    }

    /* ────── OVERLAY ────── */
    #overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.38);
        z-index: 9998;
    }

    #overlay.show {
        display: block;
    }

    /* ────── ERROR ────── */
    .f-error {
        display: none;
        color: #dc2626;
        font-size: 12.5px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 5px;
        padding: 9px 13px;
        margin-top: 10px;
    }

    /* ────── LIST ────── */
    .list-row:hover {
        background: #fafafa;
    }

    /* ────── SIDEBAR ────── */
    .sidebar-btn {
        border-radius: 6px;
        cursor: pointer;
    }

    .sidebar-btn:hover {
        background: #f0f0f0;
    }

    .sidebar-btn.active {
        background: #dcfce7;
        color: #166534;
        font-weight: 600;
    }

    /* ────── VIEW TABLE ────── */
    .view-table td {
        padding: 10px 0;
        border-bottom: 1px solid #f3f4f6;
        font-size: 14px;
    }

    .view-table td:first-child {
        color: #6b7280;
        font-weight: 500;
        width: 40%;
    }

    .view-table td:last-child {
        color: #1f2937;
    }
</style>

<!-- Top Header -->
<div class="bg-[#f4f4f4] border-b px-6 py-3 flex items-center justify-between"></div>

<!-- Main wrapper -->
<div style="display:flex; height:calc(100vh - 120px); overflow:hidden;">

    <!-- Sidebar -->
    <div style="width:260px; min-width:260px; border-right:1px solid #e5e7eb; background:#fff; display:flex; flex-direction:column;">
        <div style="display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #e5e7eb;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4b5563" stroke-width="2">
                <line x1="8" y1="6" x2="21" y2="6" />
                <line x1="8" y1="12" x2="21" y2="12" />
                <line x1="8" y1="18" x2="21" y2="18" />
                <line x1="3" y1="6" x2="3.01" y2="6" />
                <line x1="3" y1="12" x2="3.01" y2="12" />
                <line x1="3" y1="18" x2="3.01" y2="18" />
            </svg>
            <span style="font-weight:600; color:#1f2937;">Component-IV</span>
        </div>
        <div style="padding:12px;">
            <div id="btn-all" class="sidebar-btn active" style="padding:8px 12px; font-size:14px;" onclick="setFilter('all')">All</div>
            <div id="btn-completed" class="sidebar-btn" style="padding:8px 12px; font-size:14px; color:#374151; display:flex; justify-content:space-between; align-items:center; margin-top:4px;" onclick="setFilter('completed')">
                Completed <span id="cntCompleted" style="background:#e5e7eb; color:#4b5563; font-size:11px; padding:1px 8px; border-radius:10px;">0</span>
            </div>
            <div id="btn-inprogress" class="sidebar-btn" style="padding:8px 12px; font-size:14px; color:#374151; display:flex; justify-content:space-between; align-items:center; margin-top:4px;" onclick="setFilter('inprogress')">
                In Progress <span id="cntInProgress" style="background:#e5e7eb; color:#4b5563; font-size:11px; padding:1px 8px; border-radius:10px;">0</span>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div style="flex:1; display:flex; flex-direction:column; overflow:hidden;">
        <div style="display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid #e5e7eb; background:#fff;">
                       <button onclick="exportData()"
        style="background:white; color:#fff; border:1px solid #d6e1d9; border-radius:4px;
               font-size:14px; font-weight:600; cursor:pointer;
               display:flex; align-items:center; justify-content:center;  height: 36px;
    width: 34px;">

    <svg width="12" height="14" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.76973 10.5H2.20431C1.15916 10.5 0.613566 11.7433 1.3212 12.5125L10.0668 22.0185C10.5493 22.543 11.3799 22.5338 11.8508 21.9988L20.2161 12.4928C20.8983 11.7176 20.3478 10.5 19.3152 10.5H16.6697C16.007 10.5 15.4697 9.96274 15.4697 9.3V2.2C15.4697 1.53726 14.9325 1 14.2697 1H7.16973C6.50698 1 5.96973 1.53726 5.96973 2.2V9.3C5.96973 9.96274 5.43247 10.5 4.76973 10.5Z" stroke="#43A047" stroke-width="2"/>
                </svg>
</button>

            <button onclick="openDrawer()" style="background:#408A40; color:#fff; border:none; border-radius:6px; padding:8px 18px; font-size:14px; font-weight:600; cursor:pointer;">+ Add</button>

            <!-- Filter Button -->
            <button onclick="document.getElementById('filterOverlay').style.display='flex'"
                style="border:1px solid #e5e7eb; border-radius:6px; padding:7px; color:#6b7280; cursor:pointer; background:#fff;">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
                    <line x1="4" y1="6" x2="20" y2="6" />
                    <line x1="8" y1="12" x2="16" y2="12" />
                    <line x1="11" y1="18" x2="13" y2="18" />
                </svg>
            </button>

            <!-- Filter Overlay + Modal -->
            <!-- Filter Overlay + Modal -->
            <div id="filterOverlay" onclick="document.getElementById('filterOverlay').style.display='none'" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:10000; align-items:flex-start; justify-content:flex-end; padding-top:120px; padding-right:20px;">
                <div onclick="event.stopPropagation()" style="background:#fff; border-radius:10px; border:1px solid #e5e7eb; width:260px; padding:20px 18px; max-height:80vh; overflow-y:auto;">
                    <p style="font-weight:600; font-size:15px; color:#1e3a5f; margin:0 0 16px;">Filter</p>

                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Activity</label>
                        <input type="text" id="filterActivity" placeholder="Activity..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>

                    <!-- Planned End Date -->
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Planned End Date</label>
                        <input type="month"  id="filterPlannedEnd" style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>

                    <!-- Description -->
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Description</label>
                        <input type="text" id="filterDescription" placeholder="Search description..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>

                    <!-- Progress 1-10 -->
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-1</label>
                        <input type="text"  id="filterProgress1" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-2</label>
                        <input type="text"  id="filterProgress2" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-3</label>
                        <input type="text"  id="filterProgress3" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-4</label>
                        <input type="text"  id="filterProgress4" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-5</label>
                        <input type="text"  id="filterProgress5" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-6</label>
                        <input type="text"  id="filterProgress6" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-7</label>
                        <input type="text"  id="filterProgress7" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-8</label>
                        <input type="text"  id="filterProgress8" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-9</label>
                        <input type="text"  id="filterProgress9" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Progress-10</label>
                        <input type="text"  id="filterProgress10" placeholder="Search..." style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>

                    <!-- Actual End Date -->
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Actual End Date</label>
                        <input type="month" id="filterActualEnd" style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>

                    <!-- Status -->
                    <div style="margin-bottom:16px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Status</label>
                        <select id="filterStatus" style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px;">
                            <option value="">All</option>
                            <option value="In Progress">In Progress</option>
                            <option value="Completed">Completed</option>
                        </select>
                    </div>

                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Remarks</label>
                        <input type="text" id="filterRemarks" placeholder="Remarks" style="width:100%; padding:7px 10px; border-radius:6px; border:1px solid #d1d5db; font-size:13px; box-sizing:border-box;" />
                    </div>


                    <div style="display:flex; gap:8px;">
                        <button onclick="applyFilters()"
                            style="background:#22c55e; color:#fff; border:none; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer;">Apply</button>
                        <button onclick="resetFilters()"
                            style="background:#fff; color:#374151; border:1px solid #d1d5db; border-radius:6px; padding:8px 16px; font-size:13px; cursor:pointer;">Cancel</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="listContainer" style="flex:1; overflow-y:auto;"></div>
    </div>
</div>

<!-- OVERLAY (shared for edit + view modals) -->
<div id="overlay" onclick="closeDrawer(); closeView();"></div>

<!-- ══════════════════════════════════════
     EDIT / ADD MODAL
══════════════════════════════════════ -->
<div id="drawerModal">

    <!-- Modal Header -->
    <div class="modal-header">
        <div class="modal-header-left">
            <button class="close-btn" onclick="closeDrawer()">✕</button>
            <span class="modal-title">Comp4</span>
        </div>
    </div>

    <!-- Modal Body -->
    <div class="drawer-body">

        <!-- Serial No -->
        <div class="fg">
            <label class="hint-lbl">Last entered serial no available: <strong id="lastSerialLbl" style="color:#374151;"></strong></label>
            <input type="text" id="fSerial" placeholder="e.g." />
        </div>

        <!-- Activity -->
        <div class="fg">
            <label>Activity <span class="req">*</span></label>
            <input type="text" id="fActivity" />
        </div>

        <!-- Target Start Date -->
        <div class="fg">
            <label>Target Start Date</label>
            <input type="date" id="fStart" onchange="onStartDateChange()" />
        </div>

        <!-- Planned End Date -->
        <div class="fg">
            <label>Planned End Date</label>
            <input type="date" id="fEnd" onchange="onEndDateChange()" />
        </div>

        <!-- Description -->
        <div class="fg">
            <label>Description <span class="req">*</span></label>
            <textarea id="fDesc" rows="3"></textarea>
        </div>

        <!-- Add More Progress -->
        <div class="fg">
            <label>Add Progress</label>
            <button id="addProgressBtn" onclick="toggleProgressSection()">Add more progress items</button>
        </div>

        <!-- Progress Section -->
        <div id="progressSection">
            <div class="fg">
                <label>No. of Items</label>
                <div class="counter-box">
                    <input type="number" id="itemCountInput" value="1" min="1" max="10"
                        oninput="onCountInput()" onblur="onCountBlur()" />
                    <div class="cnt-btns">
                        <button class="cnt-btn" onclick="changeCount(-1)">—</button>
                        <button class="cnt-btn" onclick="changeCount(1)">+</button>
                    </div>
                </div>
            </div>
            <div id="progressFields"></div>
        </div>

        <!-- Actual End Date -->
        <div class="fg">
            <label>Actual End Date</label>
            <input type="date" id="fActual" onchange="onActualDateChange()" />
        </div>

        <!-- Status -->
        <div class="fg">
            <label>Status</label>
            <input type="hidden" id="fStatus" value="In Progress" />
            <div id="statusDisplay" class="status-display">In Progress</div>
        </div>

        <!-- Remarks -->
        <div class="fg">
            <label>Remarks</label>
            <textarea id="fRemarks" rows="2"></textarea>
        </div>

        <div class="modal-header-right">
            <button class="btn-cancel" onclick="closeDrawer()">Cancel</button>
            <button class="btn-save" onclick="saveActivity()">Save</button>
        </div>

        <!-- Error -->
        <div id="fError" class="f-error">⚠ Serial No, Activity aur Description required hain.</div>

    </div>
</div>

<!-- ══════════════════════════════════════
     VIEW MODAL
══════════════════════════════════════ -->
<div id="viewModal">

    <!-- Header -->
    <div class="modal-header">
        <div class="modal-header-left">
            <button class="close-btn" onclick="closeView()">✕</button>
            <span class="modal-title">View Activity</span>
        </div>
        <span id="vStatusBadge" style="font-size:12px; padding:3px 12px; border-radius:20px; font-weight:600;"></span>
    </div>

    <!-- Body -->
    <div class="drawer-body">
        <table class="view-table" style="width:100%; border-collapse:collapse;">
            <tr>
                <td>Serial No</td>
                <td id="vSerial"></td>
            </tr>
            <tr>
                <td>Activity</td>
                <td id="vActivity"></td>
            </tr>
            <tr>
                <td>Description</td>
                <td id="vDesc"></td>
            </tr>
            <tr id="vProgressRow" style="display:none;">
                <td>Progress</td>
                <td>
                    <div id="vProgressFields"></div>
                </td>
            </tr>
            <tr>
                <td>Target Start Date</td>
                <td id="vStart"></td>
            </tr>
            <tr>
                <td>Planned End Date</td>
                <td id="vEnd"></td>
            </tr>
            <tr>
                <td>Actual End Date</td>
                <td id="vActual"></td>
            </tr>
            <tr>
                <td>Status</td>
                <td id="vStatusText"></td>
            </tr>
            <tr>
                <td>Remarks</td>
                <td id="vRemarks"></td>
            </tr>
        </table>

        <!-- Progress Items -->
        <!-- <div id="vProgressSection" style="margin-top:16px; display:none;">
            <p style="font-weight:600; font-size:13px; color:#374151; margin-bottom:8px;">Progress Items</p>
            <div id="vProgressFields"></div>
        </div> -->

        <!-- Edit Button -->
        <div style="margin-top:20px; display:flex; justify-content:flex-end;">
            <button id="vEditBtn" style="background:#22c55e; color:#fff; border:none; border-radius:6px; padding:8px 20px; font-size:13px; font-weight:600; cursor:pointer;">Edit</button>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    const permissions = {
        view: @json(Auth::check() ? auth()->user()->can('compIV progress view') : false),
        edit: @json(Auth::check() ? auth()->user()->can('compIV progress edit') : false),
        delete: @json(Auth::check() ? auth()->user()->can('compIV progress delete') : false)
    };
    const AUDIT_MODULE = 'Comp4Progress';
    const AUDIT_SECTION = 'Progress Management';
    const AUDIT_PAGE = 'comp-progress4';

    let filter = 'all';
    let editIdx = null;
    let editId = null;
    let progressCount = 1;
    let progressActive = false;
    let data = @json($dummyRecords);

        function applyFilters() {
    renderList(); // Re-render list with filters applied
    document.getElementById('filterOverlay').style.display = 'none';
}

function resetFilters() {
    ['filterActivity','filterPlannedEnd','filterDescription','filterStatus'].forEach(id => {
        document.getElementById(id).value = '';
    });
    for (let i = 1; i <= 10; i++) document.getElementById(`filterProgress${i}`).value = '';
    renderList();
     document.getElementById('filterOverlay').style.display = 'none';
}
    function normalizeStatus(record) {
        if (record?.actual_end_date) {
            return 'Completed';
        }

        const rawStatus = (record?.status ?? '').toString().trim().toLowerCase();

        if (rawStatus === 'completed' || rawStatus === 'complete') {
            return 'Completed';
        }

        return 'In Progress';
    }

    /* ── Fetch list ── */
    async function fetchData() {
        data = @json($dummyRecords);
        refreshCounts();
        renderList();
    }

    /* ── Status helper ── */
    function setStatus(val) {
        document.getElementById('fStatus').value = val;
        const disp = document.getElementById('statusDisplay');
        disp.textContent = val;
        disp.classList.toggle('completed', val === 'Completed');
    }

    /* ── Actual date → status ── */
    function onActualDateChange() {
        setStatus(document.getElementById('fActual').value ? 'Completed' : 'In Progress');
    }

    /* ── Progress section ── */
    function toggleProgressSection() {
        progressActive = !progressActive;
        document.getElementById('addProgressBtn').classList.toggle('active', progressActive);
        document.getElementById('progressSection').classList.toggle('show', progressActive);
        if (progressActive) {
            progressCount = 1;
            document.getElementById('itemCountInput').value = 1;
            renderProgressFields();
        }
    }

    function changeCount(delta) {
        const input = document.getElementById('itemCountInput');
        let val = Math.min(10, Math.max(1, (parseInt(input.value) || 1) + delta));
        input.value = val;
        progressCount = val;
        renderProgressFields();
    }

    function onCountInput() {
        const input = document.getElementById('itemCountInput');
        let val = parseInt(input.value);
        if (isNaN(val) || val < 1) return;
        if (val > 10) {
            input.value = 10;
            val = 10;
        }
        progressCount = val;
        renderProgressFields();
    }

    function onCountBlur() {
        const input = document.getElementById('itemCountInput');
        let val = parseInt(input.value);
        if (isNaN(val) || val < 1) val = 1;
        if (val > 10) val = 10;
        input.value = val;
        progressCount = val;
        renderProgressFields();
    }

    function renderProgressFields() {
        // ✅ Step 1: Store existing values
        let existingValues = {};
        for (let i = 1; i <= 10; i++) {
            const el = document.getElementById(`pField_${i}`);
            if (el) {
                existingValues[i] = el.value;
            }
        }

        // ✅ Step 2: Rebuild fields with preserved values
        let html = '';
        for (let i = 1; i <= progressCount; i++) {
            html += `<div class="progress-field">
            <div class="pf-title">Progress-${i}</div>
            <input type="text" id="pField_${i}"
                value="${existingValues[i] ?? ''}"
                placeholder="Enter progress description..." />
        </div>`;
        }

        document.getElementById('progressFields').innerHTML = html;
    }

    function updateProgressFields(count, record = {}) {
        const container = document.getElementById('progressFields');
        container.innerHTML = '';
        for (let i = 1; i <= count; i++) {
            const val = record[`progress_${i}`] ?? '';
            container.innerHTML += `<div class="progress-field">
                <div class="pf-title">Progress-${i}</div>
                <input type="text" id="pField_${i}" value="${val}" placeholder="Enter progress description..." />
            </div>`;
        }
    }

    /* ── Date validation ── */
    function onStartDateChange() {
        const start = document.getElementById('fStart').value;
        const end = document.getElementById('fEnd');
        if (start) {
            end.min = start;
            if (end.value && end.value < start) {
                end.value = '';
                showDateError('Planned End Date, Start Date sy pehle nahi ho sakti — clear kar di gayi.');
            }
        }
    }

    function onEndDateChange() {
        const start = document.getElementById('fStart').value;
        const end = document.getElementById('fEnd').value;
        if (start && end && end < start) {
            document.getElementById('fEnd').value = '';
            showDateError('Planned End Date, Target Start Date sy pehle nahi rakhi ja sakti!');
        }
    }

    function showDateError(msg) {
        const el = document.getElementById('fError');
        el.textContent = '⚠ ' + msg;
        el.style.display = 'block';
        setTimeout(() => {
            el.style.display = 'none';
        }, 3500);
    }

    /* ── Counts & filter ── */
    function refreshCounts() {
        document.getElementById('cntCompleted').textContent = data.filter(d => normalizeStatus(d) === 'Completed').length;
        document.getElementById('cntInProgress').textContent = data.filter(d => normalizeStatus(d) === 'In Progress').length;
    }

    function setFilter(f) {
        filter = f;
        ['all', 'completed', 'inprogress'].forEach(k => document.getElementById('btn-' + k).classList.remove('active'));
        document.getElementById('btn-' + f).classList.add('active');
        renderList();
    }

    /* ── Render list ── */
    function renderList() {
        const c = document.getElementById('listContainer');
        let rows = data;
        if (filter === 'completed') rows = rows.filter(d => normalizeStatus(d) === 'Completed');
        if (filter === 'inprogress') rows = rows.filter(d => normalizeStatus(d) === 'In Progress');

         // Overlay filters
    const fActivity = document.getElementById('filterActivity').value.trim().toLowerCase();
    const fPlannedEnd = document.getElementById('filterPlannedEnd').value;
    const fDescription = document.getElementById('filterDescription').value.trim().toLowerCase();
    const fRemarks = document.getElementById('filterRemarks').value.trim().toLowerCase();

    const fProgress = [];
    for (let i = 1; i <= 10; i++) {
        const val = document.getElementById(`filterProgress${i}`).value.trim().toLowerCase();
        fProgress.push(val);
    }

    const fStatus = document.getElementById('filterStatus').value;

    rows = rows.filter(d => {
        let match = true;

        if (fActivity) match = match && (d.activity ?? '').toLowerCase().includes(fActivity);
        if (fPlannedEnd) match = match && (d.planned_end_date ?? '').startsWith(fPlannedEnd);
        if (fDescription) match = match && (d.description ?? '').toLowerCase().includes(fDescription);

        for (let i = 0; i < 10; i++) {
            if (fProgress[i]) {
                match = match && ((d[`progress_${i+1}`] ?? '').toLowerCase().includes(fProgress[i]));
            }
        }

        if (fStatus) match = match && (normalizeStatus(d) === fStatus);
        if (fRemarks) match = match && (d.remarks ?? '').toLowerCase().includes(fRemarks);

        return match;
    });

    // Audit filter if any filter applied
    const appliedFilters = {
        activity: fActivity,
        planned_end: fPlannedEnd,
        description: fDescription,
        progress: fProgress.filter(p => p).length > 0 ? fProgress : null,
        status: fStatus,
        remarks: fRemarks,
        filter_type: filter
    };
    if (Object.values(appliedFilters).some(v => v && (Array.isArray(v) ? v.some(p => p) : true))) {
        // AuditTracker.filter(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, appliedFilters);
    }
        if (!rows.length) {
            c.innerHTML = `<div style="text-align:center;padding:60px 0;color:#9ca3af;font-size:14px;">No items found.</div>`;
            return;
        }

        c.innerHTML = rows.map((a) => `
    <div class="list-row" style="display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e7eb;padding:14px 22px;cursor:pointer;">
        <div style="flex:1;">
            <div style="font-weight:600;font-size:13px;color:#1f2937;margin-bottom:3px;">${a.serial_no ?? '-'}</div>
            <div style="font-size:13px;color:#4b5563;line-height:1.5;">${a.activity ?? '-'}</div>
        </div>
        <div style="display:flex; gap:8px; align-items:center; flex-shrink:0;">
            ${permissions.view ? `<button onclick="event.stopPropagation(); openView(${a.id})"
                style="background:#3b82f6;color:#fff;border:none;border-radius:5px;padding:6px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Roboto',sans-serif;"
                onmouseover="this.style.background='#1e40af';"
                onmouseout="this.style.background='#3b82f6';">
                View
            </button>` : ''}

            ${permissions.edit ? `<button onclick="event.stopPropagation(); openEdit(${a.id})"
                style="background:#408A40;color:#fff;border:none;border-radius:5px;padding:6px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Roboto',sans-serif;"
                onmouseover="this.style.background='#16a34a';"
                onmouseout="this.style.background='#408A40';">
                Edit
            </button>` : ''}

            ${permissions.delete ? `<button onclick="event.stopPropagation(); deleteProgress(${a.id})"
                style="background:#b71c1c;color:#fff;border:none;border-radius:5px;padding:6px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Roboto',sans-serif;"
                onmouseover="this.style.background='#b91c1c';"
                onmouseout="this.style.background='#b71c1c';">
                Delete
            </button>` : ''}
        </div>
    </div>`).join('');
    }

    /* ── Open / close EDIT modal ── */
    function openDrawer() {
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Open Add Modal', {
            meta: { action: 'create' }
        });
        editIdx = null;
        editId = null;
        clearForm();
        fetchLastSerialAndSetNext();
        document.getElementById('overlay').classList.add('show');
        document.getElementById('drawerModal').classList.add('open');
    }

    function openEdit(recordId) {
        const record = data.find(item => item.id === recordId);
        if (!record) return;
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Open Edit Modal', {
            meta: { record_id: record?.id ?? null, serial_no: record?.serial_no, activity: record?.activity }
        });
        editIdx = data.findIndex(item => item.id === recordId);
        editId = record.id;

        document.getElementById('fSerial').value = record.serial_no ?? '';
        document.getElementById('fActivity').value = record.activity ?? '';
        document.getElementById('fDesc').value = record.description ?? '';
        document.getElementById('fStart').value = record.target_start_date ?? '';
        document.getElementById('fEnd').value = record.planned_end_date ?? '';
        document.getElementById('fActual').value = record.actual_end_date ?? '';
        document.getElementById('fRemarks').value = record.remarks ?? '';
        document.getElementById('lastSerialLbl').textContent = record.serial_no ?? '-';

        setStatus(normalizeStatus(record));

        const noItems = record.no ?? 0;
        if (noItems > 0) {
            progressActive = true;
            document.getElementById('progressSection').classList.add('show');
            document.getElementById('addProgressBtn').classList.add('active');
            document.getElementById('itemCountInput').value = noItems;
            progressCount = noItems;
            updateProgressFields(noItems, record);
        }

        document.getElementById('overlay').classList.add('show');
        document.getElementById('drawerModal').classList.add('open');
    }

    async function deleteProgress(id) {
        const record = data.find(d => d.id === id);
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Delete Confirmation Shown', {
            meta: { record_id: id, serial_no: record?.serial_no, activity: record?.activity }
        });

        // Show confirmation popup
        Swal.fire({
            title: 'Are you sure?',
            text: "This record will be deleted!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#22c55e',
            cancelButtonColor: '#ef4444',
            confirmButtonText: 'Yes, delete it!'
        }).then(async (result) => {
            if (result.isConfirmed) {
                try {
                    const res = await fetch(`/api/comp4-progress/${id}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                    });

                    const json = await res.json();

                    if (!res.ok) {
                        AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Delete', 'comp4_progress', id, {
                            meta: { record_id: id, error: json.message || 'Unknown error', status_code: res.status }
                        });
                        toastr.error(json.message || 'Failed to delete record');
                        return;
                    }

                    AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Delete', 'comp4_progress', id, {
                        meta: { record_id: id, serial_no: record?.serial_no, activity: record?.activity }
                        });

                    // Remove deleted item from frontend array
                    data = data.filter(item => item.id !== id);

                    // Refresh UI
                    refreshCounts();
                    renderList();

                    toastr.success('Record deleted successfully');
                } catch (err) {
                    AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Delete', 'comp4_progress', id, {
                        meta: { record_id: id, error: err.message }
                    });

                    console.error('Delete error:', err);
                    toastr.error('Something went wrong while deleting');
                }
            } else {
                AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Delete Cancelled', {
                    meta: { record_id: id, serial_no: record?.serial_no, activity: record?.activity }
                });
            }
        });
    }

    function closeDrawer() {
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Close Add/Edit Modal', {
            meta: { mode: editId ? 'edit' : 'add' }
        });
        document.getElementById('overlay').classList.remove('show');
        document.getElementById('drawerModal').classList.remove('open');
        clearForm();
        editIdx = null;
        editId = null;
    }

    function clearForm() {
        ['fSerial', 'fActivity', 'fDesc', 'fStart', 'fEnd', 'fActual', 'fRemarks'].forEach(id => {
            const el = document.getElementById(id);
            el.value = '';
            if (el.type === 'date') el.min = '';
        });
        setStatus('In Progress');
        document.getElementById('fError').style.display = 'none';
        progressActive = false;
        progressCount = 1;
        document.getElementById('addProgressBtn').classList.remove('active');
        document.getElementById('progressSection').classList.remove('show');
        document.getElementById('progressFields').innerHTML = '';
        document.getElementById('itemCountInput').value = 1;
        document.getElementById('lastSerialLbl').textContent = '';
    }

    /* ── Open / close VIEW modal ── */
    function openView(recordId) {
        const a = data.find(item => item.id === recordId);
        if (!a) return;

        AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Open View Modal', 'comp4_progress', a.id);

        document.getElementById('vSerial').textContent = a.serial_no ?? '-';
        document.getElementById('vActivity').textContent = a.activity ?? '-';
        document.getElementById('vDesc').textContent = a.description ?? '-';
        document.getElementById('vStart').textContent = a.target_start_date ?? '-';
        document.getElementById('vEnd').textContent = a.planned_end_date ?? '-';
        document.getElementById('vActual').textContent = a.actual_end_date ?? '-';
        document.getElementById('vRemarks').textContent = a.remarks ?? '-';
        const normalizedStatus = normalizeStatus(a);
        document.getElementById('vStatusText').textContent = normalizedStatus;

        const badge = document.getElementById('vStatusBadge');
        const isCompleted = normalizedStatus === 'Completed';
        badge.textContent = normalizedStatus;
        badge.style.background = isCompleted ? '#f0fdf4' : '#fffbeb';
        badge.style.color = isCompleted ? '#16a34a' : '#d97706';

        const no = a.no ?? 0;
        const row = document.getElementById('vProgressRow');
        const fields = document.getElementById('vProgressFields');

        if (no > 0) {
            let html = '';
            for (let i = 1; i <= no; i++) {
                const val = a[`progress_${i}`] ?? '-';
                html += `
        <div style="border:1px solid #e5e7eb;border-radius:6px;padding:8px 10px;margin-bottom:6px;background:#fafafa;">
            <div style="font-size:11px;font-weight:600;color:#6b7280;">Progress-${i}</div>
            <div style="font-size:13px;color:#1f2937;">${val}</div>
        </div>`;
            }

            fields.innerHTML = html;
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }

         const editBtnContainer = document.getElementById('vEditBtn').parentElement;
    if (permissions.edit) {
        editBtnContainer.style.display = 'flex';
        document.getElementById('vEditBtn').onclick = () => { closeView(), openEdit(recordId) };
    } else {
        editBtnContainer.style.display = 'none';
    }
        // document.getElementById('vEditBtn').onclick = () => {
        //     closeView();
        //     openEdit(index);
        // };

        document.getElementById('overlay').classList.add('show');
        document.getElementById('viewModal').classList.add('open');
    }

    function closeView() {
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Close View Modal');
        document.getElementById('overlay').classList.remove('show');
        document.getElementById('viewModal').classList.remove('open');
    }

    /* ── Fetch last serial ── */
    async function fetchLastSerialAndSetNext() {
        try {
            const res = await fetch('/api/comp4-progress/last-serial');
            const json = await res.json();
            const lastSerial = json.last_serial || '1.0';
            document.getElementById('lastSerialLbl').textContent = lastSerial;
            let parts = lastSerial.split('.').map(Number);
            parts[parts.length - 1] += 1;
            document.getElementById('fSerial').value = parts.join('.');
        } catch (err) {
            console.error('Failed to fetch last serial', err);
            document.getElementById('fSerial').value = '1.1';
            document.getElementById('lastSerialLbl').textContent = '-';
        }
    }

    /* ── Save ── */
    function saveActivity() {
        const serial = document.getElementById('fSerial').value.trim();
        const activity = document.getElementById('fActivity').value.trim();
        const description = document.getElementById('fDesc').value.trim();

        if (!serial || !activity || !description) {
            const el = document.getElementById('fError');
            el.textContent = '⚠ Serial No, Activity and Description are required.';
            el.style.display = 'block';
            return;
        }

        const payload = {
            serial_no: serial,
            activity: activity,
            target_start_date: document.getElementById('fStart').value,
            planned_end_date: document.getElementById('fEnd').value,
            description: description,
            no: document.getElementById('itemCountInput').value,
            actual_end_date: document.getElementById('fActual').value,
            status: document.getElementById('fStatus').value,
            remarks: document.getElementById('fRemarks').value.trim(),
        };

        for (let i = 1; i <= progressCount; i++) {
            const el = document.getElementById(`pField_${i}`);
            payload[`progress_${i}`] = el ? el.value : null;
        }

        const url = editId ? `/api/comp4-progress/update/${editId}` : '/api/comp4-progress/add';
        const method = 'POST';

        fetch(url, {
                method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(payload)
            })
            .then(response => {
                return response.json().then(json => ({ response, json }));
            })
            .then(({ response, json }) => {
                if (!response.ok) {
                    toastr.error(json.message || 'Failed to save record.');
                    return;
                }
                toastr.success(json.message || 'Record saved successfully.');
                const action = editId ? 'Update' : 'Create';
                AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, action, 'comp4_progress', json.data.id, {meta: {record: json.data}});
                fetchData();
                closeDrawer();
            })
            .catch(err => {
                const el = document.getElementById('fError');
                el.textContent = '⚠ API call failed: ' + err.message;
                el.style.display = 'block';
                console.error(err);
            });
    }

    /* ── Export ── */
    function exportData() {
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Export Component-IV Progress Data', {
            meta: { action: 'export', format: 'excel' },
            message: 'Component-IV Progress data exported'
        });
        toastr.success('Component-IV Progress export initiated successfully.');
        window.location.href = '{{ url("/api/export-comp4-progress") }}';
    }

    /* ── Init ── */
    // refreshCounts();
    // renderList();
    window.addEventListener('DOMContentLoaded', () => {
        fetchData(); // fetchData already calls refreshCounts() + renderList()
    });
</script>
@endsection