@extends('layouts.app')

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

@section('content')

<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-I</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;">
        <a href="{{ url('/api/export-comp1-progress') }}" 
        onclick="AuditTracker.buttonClick('Component Progress', 'Comp1 Progress', 'Component-I Progress List', 'Export', { meta: { file_type: 'csv' } })"
        style="background:#205C2E; color:#fff; border:none; border-radius:6px; 
                padding:8px 18px; font-size:14px; font-weight:600; cursor:pointer; 
                display:flex; align-items:center; justify-content:center; gap:6px; height:40px;">
   <img src="{{ asset('assets/media/images/down-arrow.png') }}" style="width:18px; height:18px;filter: invert(1);" />
   
</a>
            @can('compI progress create')
            <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>
            @endcan

            <!-- Filter Button -->
            <button onclick="document.getElementById('filterOverlay').style.display='flex'; AuditTracker.buttonClick('{{ 'Component Progress' }}', '{{ 'Comp1 Progress' }}', '{{ 'Component-I Progress List' }}', 'Open Filter Panel')"
                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>

                    <!-- Report Type -->
                    <!-- Activity -->
                    <div style="margin-bottom:12px;">
                        <label style="font-size:13px; color:#6b7280; display:block; margin-bottom:4px;">Activity</label>
                        <input type="text" placeholder="Activity..." id="filterActivity" 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">Comp1</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 and Description are required.</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>

            <!-- ✅ PROGRESS NOW HERE -->
            <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>

        <!-- <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>
    // ── AUDIT CONSTANTS ──
    const AUDIT_MODULE = 'Component Progress';
    const AUDIT_SECTION = 'Comp1Progress';
    const AUDIT_PAGE = 'Component-I Progress List';

    let filter = 'all';
    let editIdx = null;
    let editId = null;
    let progressCount = 1;
    let progressActive = false;
    let data = [];

    function applyFilters() {
        // ✅ Log filter application
        const filterData = {
            activity: document.getElementById('filterActivity').value || null,
            plannedEnd: document.getElementById('filterPlannedEnd').value || null,
            description: document.getElementById('filterDescription').value || null,
            status: document.getElementById('filterStatus').value || null,
        };

        AuditTracker.filter(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Apply Filters', {
            meta: { filters: filterData, results_count: data.length }
        });

        renderList();
        document.getElementById('filterOverlay').style.display = 'none';
    }

    function resetFilters() {
        // ✅ Log filter reset
        AuditTracker.filter(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Reset Filters');

        ['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';
    }
    /* ── Fetch list ── */
    async function fetchData() {
        try {
            const res = await fetch('/api/comp1-progress');
            const json = await res.json();
            data = json.data;

            // ✅ Log page/list view
            // AuditTracker.dataView(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, null, {
            //     meta: { total_records: data.length }
            // });

            refreshCounts();
            renderList();
        } catch (err) {
            // ✅ Log fetch failure
            AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Data Fetch Failed', {
                meta: { error: err.message }
            });

            console.error('Error fetching data:', err);
            document.getElementById('listContainer').innerHTML =
                `<div style="text-align:center;padding:60px 0;color:#9ca3af;font-size:14px;">Failed to load data</div>`;
        }
    }

    /* ── 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);

        // ✅ Log progress section toggle
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Toggle Progress Section', {
            meta: { active: 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;

        // ✅ Log progress count change
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Change Progress Count', {
            meta: { new_count: 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');

        // ✅ Log date field change
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Set Target Start Date', {
            meta: { date: start || null }
        });

        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;

        // ✅ Log date field change
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Set Planned End Date', {
            meta: { date: end || null }
        });

        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 => d.status === 'Completed').length;
        document.getElementById('cntInProgress').textContent = data.filter(d => d.status === 'In Progress').length;
    }

    function setFilter(f) {
        // ✅ Log sidebar filter click
        AuditTracker.filter(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, `Filter: ${f}`, {
            meta: { filter_type: 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;
        // Sidebar filter: completed / in progress / all
    if (filter === 'completed') rows = rows.filter(d => d.status === 'Completed');
    if (filter === 'inprogress') rows = rows.filter(d => d.status === '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 && (d.status === fStatus);
        if (fRemarks) match = match && (d.remarks ?? '').toLowerCase().includes(fRemarks);

        return match;
    });

    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, ri) => `
    <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(${ri})"
                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(${ri})"
                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() {
        // ✅ Log Add button click
        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(index) {
        // ✅ Log Edit button click
        const record = data[index];
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Open Edit Modal', {
            meta: {
                action: 'edit',
                record_id: record.id,
                serial_no: record.serial_no,
                activity: record.activity
            }
        });

        editIdx = index;
        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(record.status ?? 'In Progress');

        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) {
        // ✅ Log Delete button click (confirm prompt shown)
        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/comp1-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) {
                        // ✅ Log delete failure
                        AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'delete', 'failed', {
                            meta: {
                                record_id: id,
                                error: json.message || 'Unknown error',
                                status_code: res.status
                            }
                        });

                        toastr.error(json.message || 'Failed to delete record');
                        return;
                    }

                    // ✅ Log delete success
                    AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'delete', 'success', {
                        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) {
                    // ✅ Log delete exception
                    AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'delete', 'error', {
                        meta: {
                            record_id: id,
                            error: err.message
                        }
                    });

                    console.error('Delete error:', err);
                    toastr.error('Something went wrong while deleting');
                }
            } else {
                // ✅ Log delete cancelled
                AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Delete Cancelled');
            }
        });
    }

    function closeDrawer() {
        // ✅ Log modal close
        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(index) {
        // ✅ Log View button click
        const a = data[index];
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Open View Modal', {
            meta: {
                record_id: a.id,
                serial_no: a.serial_no,
                activity: a.activity,
                status: a.status
            }
        });

        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 ?? '-';
        document.getElementById('vStatusText').textContent = a.status ?? 'In Progress';

        // Status badge
        const badge = document.getElementById('vStatusBadge');
        const isCompleted = a.status === 'Completed';
        badge.textContent = a.status ?? 'In Progress';
        badge.style.background = isCompleted ? '#f0fdf4' : '#fffbeb';
        badge.style.color = isCompleted ? '#16a34a' : '#d97706';

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

        // Show Edit button only if user has edit permission
        const editBtnContainer = document.getElementById('vEditBtn').parentElement;
        if (permissions.edit) {
            editBtnContainer.style.display = 'flex';
            document.getElementById('vEditBtn').onclick = () => {  closeView() ,openEdit(index)};
        } else {
            editBtnContainer.style.display = 'none';
        }

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

    function closeView() {
        // ✅ Log close view modal
        AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Close View Modal');

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

    /* ── Download record as JSON ── */
    function downloadRecord(index) {
        const a = data[index];
        const content = JSON.stringify(a, null, 2);
        const blob = new Blob([content], {
            type: 'application/json'
        });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = `activity_${a.serial_no ?? index}.json`;
        link.click();
        URL.revokeObjectURL(url);
    }

    /* ── Fetch last serial ── */
    async function fetchLastSerialAndSetNext() {
        try {
            const res = await fetch('/api/comp1-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) {
            // ✅ Log validation error
            AuditTracker.buttonClick(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, 'Save Failed - Validation Error', {
                meta: {
                    missing_fields: [
                        !serial && 'serial_no',
                        !activity && 'activity',
                        !description && 'description'
                    ].filter(Boolean)
                }
            });

            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/comp1-progress/update/${editId}` : '/api/comp1-progress/add';
        const method = 'POST';
        const isCreate = !editId;

        fetch(url, {
                method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(res => {
                if (res.status === 'error') {
                    // ✅ Log save error
                    AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, isCreate ? 'create' : 'update', 'failed', {
                        meta: {
                            record_id: editId || null,
                            serial_no: serial,
                            activity: activity,
                            error: res.message,
                            errors: res.errors
                        }
                    });

                    toastr.error(res.message || 'Failed to save record.');
                    return;
                }

                // ✅ Log save success
                AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, isCreate ? 'create' : 'update', 'success', {
                    meta: {
                        record_id: res.data?.id || editId,
                        serial_no: serial,
                        activity: activity,
                        status: payload.status,
                        progress_items_count: payload.no
                    }
                });

                toastr.success(res.message || 'Record saved successfully.');
                fetchData();
                closeDrawer();
            })
            .catch(err => {
                // ✅ Log save exception
                AuditTracker.rowAction(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE, isCreate ? 'create' : 'update', 'error', {
                    meta: {
                        record_id: editId || null,
                        serial_no: serial,
                        activity: activity,
                        error: err.message
                    }
                });

                const el = document.getElementById('fError');
                el.textContent = '⚠ API call failed: ' + err.message;
                el.style.display = 'block';
                console.error(err);
            });
    }

    /* ── Init ── */
    refreshCounts();
    renderList();
    window.addEventListener('DOMContentLoaded', () => {
        fetchData();
    });
</script>
<script>
    const permissions = {
        view: @json(auth()->user()->can('compI progress view')),
        edit: @json(auth()->user()->can('compI progress edit')),
        delete: @json(auth()->user()->can('compI progress delete'))
    };
    console.log("permisison",permissions);

</script>
@endsection