@extends('layouts.demo10.base')

@section('content')
    <style>
        /* ─── Step 2 UI ─── */
        .ind-view-row {
            display: flex;
            gap: 0.5rem;
            align-items: flex-start;
        }

        .ind-view-row .ind-select-wrap {
            flex: 1;
            min-width: 0;
        }

        .ind-add-view-btn {
            flex-shrink: 0;
            height: 44px;
            padding: 0 0.85rem;
            border-radius: 10px;
            border: 1.5px solid #2563eb;
            background: #eff6ff;
            color: #2563eb;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            transition: all 0.18s;
            white-space: nowrap;
        }

        .ind-add-view-btn:hover:not(:disabled) {
            background: #dbeafe;
        }

        .ind-add-view-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .ind-edit-view-btn {
            flex-shrink: 0;
            height: 44px;
            padding: 0 0.85rem;
            border-radius: 10px;
            border: 1.5px solid #7c3aed;
            background: #f5f3ff;
            color: #7c3aed;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            transition: all 0.18s;
            white-space: nowrap;
        }

        .ind-edit-view-btn:hover:not(:disabled) {
            background: #ede9fe;
        }

        .ind-edit-view-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .ind-hint {
            font-size: 0.68rem;
            color: #9ca3af;
            margin-top: 0.2rem;
        }

        /* ─── Drawer overlay ─── */
        .vb-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.45);
            z-index: 1040;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.28s ease, visibility 0.28s ease;
        }

        .vb-overlay.is-open {
            opacity: 1;
            visibility: visible;
        }

        /* ─── Drawer panel ─── */
        .vb-drawer {
            position: fixed;
            top: 0;
            right: 0;
            width: min(560px, 100vw);
            height: 100vh;
            background: #fff;
            z-index: 1050;
            display: flex;
            flex-direction: column;
            box-shadow: -8px 0 32px rgba(15, 23, 42, 0.14);
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .vb-drawer.is-open {
            transform: translateX(0);
        }

        .vb-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #f0f0f0;
            flex-shrink: 0;
        }

        .vb-drawer-title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .vb-drawer-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1.5px solid #e5e7eb;
            background: #fff;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.18s;
        }

        .vb-drawer-close:hover {
            border-color: #cbd5e1;
            color: #374151;
        }

        .vb-drawer-body {
            flex: 1;
            overflow-y: auto;
            padding: 1.25rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.15rem;
        }

        .vb-drawer-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.6rem;
            flex-shrink: 0;
        }

        /* ─── View Builder internals ─── */
        .vb-section-label {
            font-size: 0.7rem;
            font-weight: 700;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 0.5rem;
        }

        .vb-join-row {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 0.65rem;
            align-items: center;
        }

        .vb-join-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
        }

        .vb-join-icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #eff6ff;
            color: #2563eb;
            font-size: 0.7rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Column grid */
        .vb-col-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 0.4rem;
            max-height: 180px;
            overflow-y: auto;
            padding: 0.6rem;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            background: #fafafa;
        }

        .vb-col-item {
            display: flex;
            align-items: flex-start;
            gap: 0.4rem;
            padding: 0.4rem 0.55rem;
            border: 1px solid #e5e7eb;
            border-radius: 7px;
            background: #fff;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
            user-select: none;
        }

        .vb-col-item:hover {
            border-color: #93c5fd;
            background: #f0f7ff;
        }

        .vb-col-item.is-selected {
            border-color: #2563eb;
            background: #eff6ff;
        }

        .vb-col-item.is-dup {
            border-color: #fcd34d;
        }

        .vb-col-item.is-dup.is-selected {
            border-color: #f59e0b;
            background: #fffbeb;
        }

        .vb-col-item input[type="checkbox"] {
            width: 13px;
            height: 13px;
            accent-color: #2563eb;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .vb-col-name {
            font-size: 0.72rem;
            font-weight: 600;
            color: #1f2937;
            line-height: 1.3;
        }

        .vb-col-table {
            font-size: 0.62rem;
            color: #9ca3af;
        }

        .vb-col-alias {
            font-size: 0.6rem;
            color: #b45309;
            background: #fef3c7;
            border-radius: 3px;
            padding: 0 3px;
            margin-top: 1px;
            display: inline-block;
        }

        .vb-dup-warning {
            font-size: 0.72rem;
            color: #b45309;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 8px;
            padding: 0.5rem 0.75rem;
            display: none;
        }

        .vb-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 70px;
            color: #9ca3af;
            font-size: 0.78rem;
            grid-column: 1 / -1;
        }

        /* SQL preview */
        .vb-sql-box {
            background: #0f172a;
            border-radius: 10px;
            padding: 0.85rem 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.7rem;
            color: #7dd3fc;
            white-space: pre;
            overflow-x: auto;
            max-height: 130px;
            overflow-y: auto;
            line-height: 1.6;
        }

        .vb-col-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.4rem;
        }

        .vb-col-count {
            font-size: 0.72rem;
            color: #6b7280;
        }

        .vb-select-all-btn {
            font-size: 0.72rem;
            color: #2563eb;
            background: none;
            border: none;
            cursor: pointer;
            font-weight: 600;
            padding: 0;
        }

        /* ── Preview column highlight ── */
        #ind_preview_head th.is-highlighted {
            background: #eff6ff !important;
            color: #2563eb !important;
            border-bottom-color: #2563eb !important;
        }

        #ind_preview_body td.is-highlighted {
            background: #f0f7ff;
            color: #1d4ed8;
            font-weight: 600;
        }

        /* ── View Builder join grid ── */
        .vb-join-grid {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .vb-join-grid .ind-select-wrap {
            width: 100%;
        }

        /* ── Add join button ── */
        .vb-add-join-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            height: 36px;
            padding: 0 0.9rem;
            border-radius: 8px;
            border: 1.5px dashed #93c5fd;
            background: #f0f7ff;
            color: #2563eb;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.18s;
            width: 100%;
            justify-content: center;
        }

        .vb-add-join-btn:hover {
            border-color: #2563eb;
            background: #dbeafe;
        }


        .project-hub {
            display: grid;
            gap: 1.5rem;
        }

        .project-hub-header {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .project-hub-title {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .project-hub-actions {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .project-search {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 300px;
            padding: 0 0.9rem;
            height: 44px;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            background: #fff;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .project-search:focus-within {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }

        .project-search i {
            color: #94a3b8;
            font-size: 0.95rem;
            transition: color 0.2s ease;
        }

        .project-search:focus-within i {
            color: #2563eb;
        }

        .project-search input {
            width: 100%;
            border: 0;
            outline: 0;
            background: transparent;
            color: #0f172a;
            font-size: 0.875rem;
        }

        .project-search input:focus {
            outline: none;
            box-shadow: none;
        }

        .project-search input::placeholder {
            color: #94a3b8;
        }

        .project-hub-add {
            height: 46px;
            padding-inline: 1.15rem !important;
            border-radius: 14px !important;
            font-weight: 600;
        }

        .project-hub-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        /* ─── DataTable overrides to match existing table styles ─── */
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            display: none;
        }

        /* we use custom search */

        .dataTables_wrapper .dataTables_info {
            font-size: 0.78rem;
            color: #6b7280;
            padding: 0.75rem 0 0;
        }

        .dataTables_wrapper .dataTables_paginate {
            padding: 0.75rem 0 0;
            display: flex;
            justify-content: flex-end;
            gap: 0.25rem;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 0.6rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #fff;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.18s ease;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            border-color: #2563eb;
            color: #2563eb;
            background: #f0f7ff;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            border-color: #2563eb;
            background: #2563eb;
            color: #fff !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            opacity: 0.4;
            cursor: not-allowed;
            border-color: #e5e7eb;
            color: #9ca3af !important;
            background: #fff;
        }

        /* ─── Step Progress Bar ─── */
        .ind-steps {
            display: flex;
            align-items: center;
            gap: 0;
            padding: 0 0 1.25rem;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 1.5rem;
        }

        .ind-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.3rem;
            flex: 1;
            position: relative;
        }

        .ind-step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 15px;
            left: calc(50% + 16px);
            right: calc(-50% + 16px);
            height: 2px;
            background: #e5e7eb;
            z-index: 0;
        }

        .ind-step.is-done:not(:last-child)::after {
            background: #2563eb;
        }

        .ind-step-dot {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid #e5e7eb;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: 700;
            color: #9ca3af;
            z-index: 1;
            transition: all 0.25s ease;
        }

        .ind-step.is-active .ind-step-dot {
            border-color: #2563eb;
            background: #2563eb;
            color: #fff;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
        }

        .ind-step.is-done .ind-step-dot {
            border-color: #2563eb;
            background: #2563eb;
            color: #fff;
        }

        .ind-step-label {
            font-size: 0.65rem;
            font-weight: 500;
            color: #9ca3af;
            text-align: center;
            white-space: nowrap;
        }

        .ind-step.is-active .ind-step-label,
        .ind-step.is-done .ind-step-label {
            color: #2563eb;
        }

        .ind-panel {
            display: flex;
            flex-direction: column;
            gap: 1.15rem;
        }

        .ind-panel.is-hidden {
            display: none;
        }

        .ind-panel-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #111827;
            margin: 0 0 0.25rem;
            line-height: 1.3;
        }

        .ind-field {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .ind-field label {
            font-size: 0.78rem;
            font-weight: 600;
            color: #374151;
        }

        .ind-input,
        .ind-select {
            width: 100%;
            height: 44px;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            background: #f3f4f6;
            color: #111827;
            font-size: 0.8rem;
            padding: 0 13px;
            outline: none;
            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
            appearance: none;
            -webkit-appearance: none;
        }

        .ind-input:focus,
        .ind-select:focus {
            border-color: #2563eb;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .ind-select-wrap {
            position: relative;
        }

        .ind-select-wrap::after {
            content: '';
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid #6b7280;
            pointer-events: none;
        }

        .ind-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .ind-check-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.25rem;
        }

        .ind-check-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
        }

        .ind-check-item {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.75rem 1rem;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            user-select: none;
        }

        .ind-check-item:hover {
            border-color: #93c5fd;
            background: #f0f7ff;
        }

        .ind-check-item input[type="checkbox"] {
            width: 17px;
            height: 17px;
            accent-color: #2563eb;
            flex-shrink: 0;
            cursor: pointer;
        }

        .ind-check-item span {
            font-size: 0.83rem;
            font-weight: 500;
            color: #1f2937;
        }

        .ind-check-item.is-checked {
            border-color: #2563eb;
            background: #f0f7ff;
        }

        .ind-select-all-label {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.82rem;
            font-weight: 600;
            color: #374151;
            cursor: pointer;
        }

        .ind-select-all-label input[type="checkbox"] {
            width: 17px;
            height: 17px;
            accent-color: #2563eb;
            cursor: pointer;
        }

        .ind-formula-box {
            border: 1.5px dashed #93c5fd;
            border-radius: 10px;
            background: #f8fbff;
            padding: 0.85rem 1rem;
        }

        .ind-formula-label {
            font-size: 0.7rem;
            color: #6b7280;
            margin-bottom: 0.3rem;
            font-weight: 500;
        }

        .ind-formula-value {
            font-size: 0.92rem;
            font-weight: 600;
            color: #2563eb;
            min-height: 1.2em;
        }

        .ind-dataset-preview {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }

        .ind-dataset-preview-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: #374151;
        }

        .ind-table-wrap {
            overflow-x: auto;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
        }

        .ind-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.75rem;
        }

        .ind-table thead th {
            padding: 0.55rem 0.85rem;
            background: #f9fafb;
            border-bottom: 1.5px solid #e5e7eb;
            color: #6b7280;
            font-weight: 600;
            white-space: nowrap;
            text-align: left;
        }

        .ind-table tbody td {
            padding: 0.5rem 0.85rem;
            border-bottom: 1px solid #f3f4f6;
            color: #374151;
        }

        .ind-table tbody tr:last-child td {
            border-bottom: none;
        }

        .ind-table tbody tr:hover td {
            background: #f8faff;
        }

        .ind-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 0.75rem;
            border-top: 1px solid #f0f0f0;
            margin-top: 0.5rem;
        }

        .ind-back-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1.5px solid #e5e7eb;
            background: #fff;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s;
        }

        .ind-back-btn:hover {
            border-color: #cbd5e1;
            color: #374151;
        }

        .ind-back-btn.is-hidden {
            visibility: hidden;
            pointer-events: none;
        }

        .ind-footer-right {
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .ind-save-btn {
            height: 40px;
            padding: 0 1.4rem;
            border-radius: 10px;
            border: none;
            background: #2563eb;
            color: #fff;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, transform 0.15s;
        }

        .ind-save-btn:hover {
            background: #1d4ed8;
            transform: translateY(-1px);
        }

        .ind-save-btn:active {
            transform: translateY(0);
        }

        .ind-next-btn {
            height: 40px;
            padding: 0 1.4rem;
            border-radius: 10px;
            border: 1.5px solid #e5e7eb;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .ind-next-btn:hover:not(:disabled) {
            border-color: #cbd5e1;
            background: #e9ecef;
        }

        .ind-next-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .ind-checkbox-row {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            cursor: pointer;
        }

        .ind-checkbox-row input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #2563eb;
            cursor: pointer;
        }

        .ind-checkbox-row span {
            font-size: 0.82rem;
            font-weight: 500;
            color: #374151;
        }

        .ind-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.18rem 0.6rem;
            border-radius: 999px;
            font-size: 0.7rem;
            font-weight: 600;
        }

        .ind-badge-active {
            background: #e6f5ec;
            color: #1e8357;
        }

        .ind-badge-draft {
            background: #fef9ec;
            color: #b45309;
        }

        .ind-badge-archived {
            background: #f3f4f6;
            color: #6b7280;
        }

        @media (max-width: 600px) {

            .ind-grid-2,
            .ind-check-grid {
                grid-template-columns: 1fr;
            }
        }

        .vb-col-comment {
            font-size: 0.60rem;
            color: #6366f1;
            font-style: italic;
            line-height: 1.3;
            margin-top: 1px;
            word-break: break-word;
        }
    </style>

    @can('view.projects')
        <div class="project-hub">
            <div class="project-hub-header">
                <div class="project-hub-title">
                    <h1 class="font-semibold text-[30px] leading-none text-mono">Indicators</h1>
                    <div class="flex items-center gap-1 text-sm font-normal text-secondary-foreground">
                        <a class="hover:text-primary transition-colors" href="{{ route('dashboard') }}">Home</a>
                        <span class="text-muted-foreground">/</span>
                        <span class="text-mono">Indicators</span>
                    </div>
                </div>

                <div class="project-hub-toolbar">
                    <div></div>
                    <div class="project-hub-actions">
                        <label class="project-search">
                            <i class="ki-filled ki-magnifier"></i>
                            <input type="text" id="project_page_search" placeholder="Search Indicators..." />
                        </label>

                        @can('create.indicators')
                            <button
                                onclick="AuditTracker.buttonClick('Indicators', 'Indicators', 'Indicator List', 'Open Add Indicator Modal');"
                                class="kt-btn common-secondary-btn project-hub-add" data-kt-modal-toggle="#add_project_modal">
                                <i class="ki-filled ki-plus"></i>
                                Add Indicator
                            </button>
                        @endcan
                    </div>
                </div>
            </div>

            <div class="users-panel">
                <div class="kt-card-table">
                    <div class="p-0">
                        <div class="kt-scrollable-x-auto">
                            <table class="kt-table users-table w-full" id="kt_datatable_indicators">
                                <thead>
                                    <tr>
                                        <th class="min-w-[220px]">Indicator Name</th>
                                        <th class="min-w-[100px]">Definition</th>
                                        <th class="min-w-[110px]">Donor</th>
                                        <th class="min-w-[100px]">Indicator Level</th>
                                        <th class="min-w-[110px]">Disaggregation</th>
                                        <th class="min-w-[70px]">Baseline Value</th>
                                        <th class="min-w-[70px]">End Target</th>
                                        <th class="min-w-[70px]">Unit</th>
                                        <th class="min-w-[80px]">Status</th>
                                        @canany(['edit.indicators', 'delete.indicators'])
                                            <th class="w-[80px] text-right">Actions</th>
                                        @endcanany
                                    </tr>
                                </thead>
                                <tbody></tbody>{{-- DataTables fills this --}}
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ════════════════════════ MODAL ════════════════════════ --}}
        <div class="kt-modal" data-kt-modal="true" id="add_project_modal" data-kt-modal-backdrop-static="true">
            <div class="kt-modal-content max-w-[640px] top-[4%] max-h-[92vh]">
                <div class="kt-modal-header py-4 px-6">
                    <h3 class="kt-modal-title text-base font-semibold">Add New Indicator</h3>
                    <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true">
                        <i class="ki-filled ki-cross"></i>
                    </button>
                </div>

                <div class="kt-modal-body px-6 pb-6 pt-2 overflow-y-auto">

                    <div class="ind-steps" id="ind_steps">
                        <div class="ind-step is-active" data-ind-step-dot="1">
                            <div class="ind-step-dot">1</div>
                            <span class="ind-step-label">Info</span>
                        </div>
                        <div class="ind-step" data-ind-step-dot="2">
                            <div class="ind-step-dot">2</div>
                            <span class="ind-step-label">Data Source</span>
                        </div>
                        <div class="ind-step" data-ind-step-dot="3">
                            <div class="ind-step-dot">3</div>
                            <span class="ind-step-label">Disaggregation</span>
                        </div>
                        <div class="ind-step" data-ind-step-dot="4">
                            <div class="ind-step-dot">4</div>
                            <span class="ind-step-label">Calculation</span>
                        </div>
                        <div class="ind-step" data-ind-step-dot="5">
                            <div class="ind-step-dot">5</div>
                            <span class="ind-step-label">Reporting</span>
                        </div>
                    </div>

                    <form id="add_indicator_form" action="{{ route('indicators.store') }}" method="POST"
                        data-step-url="{{ route('indicators.step') }}" data-edit-url="{{ route('indicators.edit') }}"
                        data-update-url="{{ url('indicators') }}/:id" data-delete-url="{{ route('indicators.destroy') }}"
                        data-datatable-url="{{ route('indicators.datatable') }}">

                        @csrf

                        {{-- ═══════ STEP 1 ═══════ --}}
                        <div class="ind-panel" data-ind-panel="1">
                            <h2 class="ind-panel-title">Indicator Information</h2>

                            <div class="ind-field">
                                <label for="ind_name">Indicator Name*</label>
                                <input type="text" id="ind_name" name="name" class="ind-input" required />
                            </div>

                            <div class="ind-field">
                                <label for="ind_definition">Definition</label>
                                <input type="text" id="ind_definition" name="ind_definition" class="ind-input" />
                            </div>

                            <div class="ind-field">
                                <label for="ind_level">Indicator Level*</label>
                                <div class="ind-select-wrap">
                                    <select id="ind_level" name="level" class="ind-select" required>
                                        <option value="">Please Select Indicator Level</option>
                                        <option value="PDO">PDO</option>
                                        <option value="IRI">IRI</option>
                                    </select>
                                </div>
                            </div>

                            <div class="ind-grid-2">
                                <div class="ind-field">
                                    <label for="ind_unit">Unit*</label>
                                    <div class="ind-select-wrap">
                                        <select id="ind_unit" name="unit" class="ind-select" required>
                                            <option value="">Please Select Unit</option>
                                            @foreach ($units as $unit)
                                                <option value="{{ $unit->id }}">{{ $unit->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="ind-field">
                                    <label for="ind_donor">Donor*</label>
                                    <div class="ind-select-wrap">
                                        <select id="ind_donor" name="donor" class="ind-select" required>
                                            <option value="">Please Select Donor</option>
                                            @foreach ($donors as $donor)
                                                <option value="{{ $donor->id }}">{{ $donor->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="ind-grid-2">
                                <div class="ind-field">
                                    <label for="ind_baseline">Baseline Value*</label>
                                    <input type="number" id="ind_baseline" name="baseline_value" class="ind-input"
                                        step="any" required />
                                </div>
                                <div class="ind-field">
                                    <label for="ind_target">End Target*</label>
                                    <input type="number" id="ind_target" name="end_target" class="ind-input"
                                        step="any" required />
                                </div>
                            </div>

                            <div class="ind-field">
                                <label for="ind_status">Status*</label>
                                <div class="ind-select-wrap">
                                    <select id="ind_status" name="status" class="ind-select" required>
                                        <option value="">Please Select Status</option>
                                        <option value="active" >Active</option>
                                        <option value="draft">Draft</option>
                                        <option value="archived">Archived</option>
                                    </select>
                                </div>
                            </div>

                            <div class="ind-footer">
                                <button type="button" class="ind-back-btn is-hidden"><i
                                        class="ki-filled ki-left"></i></button>
                                <div class="ind-footer-right">
                                    <button type="button" class="ind-save-btn" id="ind_step1_save">Save</button>
                                    <button type="button" class="ind-next-btn" id="ind_step1_next">Next</button>
                                </div>
                            </div>
                        </div>

                        {{-- ═══════ STEP 2 ═══════ --}}
                        <div class="ind-panel is-hidden" data-ind-panel="2">
                            <h2 class="ind-panel-title">Data Source Connection</h2>

                            <div class="ind-grid-2">

                                {{-- Database --}}
                                <div class="ind-field">
                                    <label for="ind_dataset">Database <span style="color:#ef4444">*</span></label>
                                    <div class="ind-select-wrap">
                                        <select id="ind_dataset" name="data_source_type" class="ind-select" required
                                            data-tenant="{{ auth()->user()->organization_id }}">
                                            <option value="">Loading…</option>
                                        </select>
                                    </div>
                                    <span class="ind-hint">Tenant-scoped schemas</span>
                                </div>

                                {{-- View + Add View button --}}
                                <div class="ind-field">
                                    <label for="ind_view_list">View <span style="color:#ef4444">*</span></label>
                                    <div class="ind-view-row">
                                        <div class="ind-select-wrap">
                                            <select id="ind_view_list" name="view_list" class="ind-select" required>
                                                <option value="">Select database first…</option>
                                            </select>
                                        </div>
                                        <button type="button" id="ind_add_view_btn" class="ind-add-view-btn" disabled>
                                            <i class="ki-filled ki-plus" style="font-size:0.78rem;"></i> Add View
                                        </button>
                                        <button type="button" id="ind_edit_view_btn" class="ind-edit-view-btn" disabled
                                            title="Edit selected view">
                                            <i class="ki-filled ki-pencil" style="font-size:0.78rem;"></i> Edit
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {{-- Field to Aggregate --}}
                            <div class="ind-field">
                                <label for="ind_field_aggregate">Field to Aggregate <span
                                        style="color:#ef4444">*</span></label>
                                <div class="ind-select-wrap">
                                    <select id="ind_field_aggregate" name="field_to_aggregate" class="ind-select" required>
                                        <option value="">Select a view first…</option>
                                    </select>
                                </div>
                            </div>

                            {{-- Preview table --}}
                            <div class="ind-dataset-preview" id="ind_dataset_preview" style="display:none;">
                                <div class="ind-dataset-preview-title">View Preview</div>
                                <div class="ind-table-wrap">
                                    <table class="ind-table">
                                        <thead id="ind_preview_head"></thead>
                                        <tbody id="ind_preview_body"></tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="ind-footer">
                                <button type="button" class="ind-back-btn" id="ind_step2_back">
                                    <i class="ki-filled ki-left"></i>
                                </button>
                                <div class="ind-footer-right">
                                    <button type="button" class="ind-save-btn" id="ind_step2_save">Save</button>
                                    <button type="button" class="ind-next-btn" id="ind_step2_next">Next</button>
                                </div>
                            </div>
                        </div>
                        {{-- ═══════ STEP 3 ═══════ --}}
                        <div class="ind-panel is-hidden" data-ind-panel="3">
                            <div class="ind-check-header">
                                <h2 class="ind-panel-title" style="margin:0">Disaggregation Selection</h2>
                                <label class="ind-select-all-label">
                                    <input type="checkbox" id="ind_select_all" checked />
                                    Select All
                                </label>
                            </div>

                            <div class="ind-check-grid" id="ind_disagg_grid">
                                <div class="vb-empty">Select a View first to load disaggregation fields</div>
                            </div>

                            <div class="ind-footer">
                                <button type="button" class="ind-back-btn" id="ind_step3_back"><i
                                        class="ki-filled ki-left"></i></button>
                                <div class="ind-footer-right">
                                    <button type="button" class="ind-save-btn" id="ind_step3_save">Save</button>
                                    <button type="button" class="ind-next-btn" id="ind_step3_next">Next</button>
                                </div>
                            </div>
                        </div>

                        {{-- ═══════ STEP 4 ═══════ --}}
                        <div class="ind-panel is-hidden" data-ind-panel="4">
                            <h2 class="ind-panel-title">Calculation Method</h2>

                            <div class="ind-field">
                                <label for="ind_calc_method">Calculation Methods*</label>
                                <div class="ind-select-wrap">
                                    <select id="ind_calc_method" name="calculation_method" class="ind-select" required>
                                        <option value=""></option>
                                        <option value="sum">Sum</option>
                                        <option value="count">Count</option>
                                        <option value="average">Average</option>
                                        <option value="multiply">Multiply</option>
                                        <option value="percentage">Percentage</option>
                                    </select>
                                </div>
                            </div>

                            <div class="ind-field">
                                <label for="ind_agg_field">Field to Aggregate*</label>
                                <div class="ind-select-wrap">
                                    <select id="ind_agg_field" name="aggregation_field" class="ind-select" required>
                                        <option value=""></option>
                                        <option value="completed_house">Completed Houses</option>
                                        <option value="beneficiary_type">Beneficiary Type</option>
                                        <option value="gender">Gender</option>
                                    </select>
                                </div>
                            </div>

                            <div class="ind-field" id="ind_multiplier_wrap">
                                <label for="ind_multiplier">Multiplier Field</label>
                                <input type="text" id="ind_multiplier" name="multiplier_field" class="ind-input"
                                    placeholder="e.g. Average Household Size" />
                            </div>

                            <div class="ind-formula-box">
                                <div class="ind-formula-label">Live Preview of Formula</div>
                                <div class="ind-formula-value" id="ind_formula_preview">—</div>
                            </div>

                            <div class="ind-footer">
                                <button type="button" class="ind-back-btn" id="ind_step4_back"><i
                                        class="ki-filled ki-left"></i></button>
                                <div class="ind-footer-right">
                                    <button type="button" class="ind-save-btn" id="ind_step4_save">Save</button>
                                    <button type="button" class="ind-next-btn" id="ind_step4_next">Next</button>
                                </div>
                            </div>
                        </div>

                        {{-- ═══════ STEP 5 ═══════ --}}
                        <div class="ind-panel is-hidden" data-ind-panel="5">
                            <h2 class="ind-panel-title">Reporting Settings</h2>

                            <div class="ind-grid-2">
                                <div class="ind-field">
                                    <label for="ind_rep_freq">Reporting Frequency*</label>
                                    <div class="ind-select-wrap">
                                        <select id="ind_rep_freq" name="reporting_frequency" class="ind-select" required>
                                            <option value=""></option>
                                            <option value="monthly">Monthly</option>
                                            <option value="quarterly">Quarterly</option>
                                            <option value="bi_annual">Bi-Annual</option>
                                            <option value="annual">Annual</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="ind-field">
                                    <label for="ind_resp_entity">Responsible Entity*</label>
                                    <input type="text" id="ind_resp_entity" name="responsible_entity" class="ind-input"
                                        required />
                                </div>
                            </div>

                            <div class="ind-field">
                                <label for="ind_mov">Means of Verification*</label>
                                <input type="text" id="ind_mov" name="means_of_verification" class="ind-input"
                                    required />
                            </div>

                            <label class="ind-checkbox-row">
                                <input type="checkbox" id="ind_baseline_applicable" name="baseline_applicable"
                                    value="1" checked />
                                <span>Baseline Applicable</span>
                            </label>

                            <div class="ind-footer">
                                <button type="button" class="ind-back-btn" id="ind_step5_back"><i
                                        class="ki-filled ki-left"></i></button>
                                <div class="ind-footer-right">
                                    <button type="submit" class="ind-save-btn" id="ind_step5_save">Save</button>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    @else
        <div class="flex items-center justify-center min-h-[400px]">
            <div class="text-center">
                <i class="ki-filled ki-lock text-4xl text-danger mb-4"></i>
                <h3 class="text-lg font-semibold text-foreground">Access Denied</h3>
                <p class="text-sm text-secondary-foreground">You do not have permission to view this page.</p>
            </div>
        </div>
    @endcan

    {{-- Overlay (darkens the modal behind the drawer) --}}
    <div id="vb_overlay" class="vb-overlay"></div>

    {{-- Drawer --}}
    <div id="vb_drawer" class="vb-drawer">

        <div class="vb-drawer-header">
            <span class="vb-drawer-title">Build a View</span>
            <button type="button" class="vb-drawer-close" id="vb_close_btn">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>

        <div class="vb-drawer-body">

            {{-- View Name --}}
            <div class="ind-field">
                <label for="vb_view_name">
                    View Name <span style="color:#ef4444">*</span>
                </label>
                <input type="text" id="vb_view_name" class="ind-input" placeholder="e.g. beneficiary_summary" />
            </div>

            {{-- Tables & Joins --}}
            <div>
                <div class="vb-section-label">Tables & Joins</div>

                {{-- Dynamic join rows rendered by JS --}}
                <div id="vb_join_rows" style="display:flex;flex-direction:column;gap:0.6rem;"></div>

                {{-- Add join button --}}
                <button type="button" id="vb_add_join_btn" class="vb-add-join-btn" style="margin-top:0.6rem;">
                    <i class="ki-filled ki-plus" style="font-size:0.78rem;"></i> Add Join
                </button>
            </div>

            {{-- Column selector --}}
            <div>
                <div class="vb-col-actions">
                    <span class="vb-section-label" style="margin:0;border:none;padding:0;">
                        Select Columns
                        <span id="vb_col_count" style="color:#2563eb;font-weight:700;margin-left:0.3rem;"></span>
                    </span>
                    <button type="button" id="vb_select_all_cols" class="vb-select-all-btn">
                        Select All
                    </button>
                </div>
                <div id="vb_col_grid" class="vb-col-grid">
                    <div class="vb-empty">Add tables to see columns</div>
                </div>

                <div style="margin-top:0.8rem;">
                    <div class="vb-col-actions" style="margin-bottom:0.5rem;">
                        <span class="vb-section-label" style="margin:0;border:none;padding:0;">Filters</span>
                        <button type="button" id="vb_add_condition_btn" class="vb-select-all-btn">Add Condition</button>
                    </div>
                    <div id="vb_conditions" style="display:flex;flex-direction:column;gap:0.5rem;">
                        <div class="vb-empty">No filters applied. Click "Add Condition" to add one.</div>
                    </div>
                    <div style="margin-top:0.65rem;display:flex;flex-direction:column;gap:0.45rem;">
                        <textarea id="vb_condition_paste" class="ind-input" placeholder="Paste SQL FROM/JOIN/WHERE conditions here"
                            style="height:96px;min-height:96px;resize:vertical;padding-top:0.75rem;line-height:1.45;"></textarea>
                        <div style="display:flex;justify-content:flex-end;gap:0.45rem;">
                            <button type="button" id="vb_clear_condition_paste_btn" class="ind-next-btn"
                                style="height:34px;">Clear</button>
                            <button type="button" id="vb_import_conditions_btn" class="vb-select-all-btn">Load
                                Filters</button>
                        </div>
                    </div>
                </div>
                <div id="vb_dup_warning" class="vb-dup-warning" style="margin-top:0.5rem;display:none;">
                    ⚠ Amber columns appear in multiple tables — auto-aliased as
                    <strong>tablename_columnname</strong>.
                </div>
            </div>



            {{-- SQL Preview --}}
            <div>
                <div class="vb-section-label">Generated SQL</div>
                <div class="vb-sql-box" id="vb_sql_preview">SELECT * FROM table</div>
            </div>

        </div>

        <div class="vb-drawer-footer">
            <button type="button" id="vb_cancel_btn" class="ind-next-btn">Cancel</button>
            <button type="button" id="vb_create_btn" class="ind-save-btn">Create View</button>
        </div>

    </div>
    {{-- /drawer --}}
@endsection

@section('scripts')
    @vite('resources/js/pages/indicator.js')
@endsection