@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-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.projects')
                <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>
                                <th class="w-[80px] text-right">Actions</th>
                            </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-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>
                                    <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>
                            </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 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