@extends('layouts.demo10.base')

@section('styles')
<style>
    .dc-screen {
        display: grid;
        gap: 18px;
        color: #111827;
        padding-bottom: 24px;
    }

    .dc-title h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 650;
        line-height: 1.15;
        letter-spacing: 0;
    }

    .dc-title span {
        display: block;
        margin-top: 3px;
        color: #7b8494;
        font-size: 12px;
        font-weight: 500;
    }

    .dc-panel {
        background: #fff;
        border: 1px solid #edf0f5;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    }

    .dc-api-bar {
        display: grid;
        grid-template-columns: 150px minmax(220px, 1fr) 120px minmax(220px, .9fr);
        gap: 16px 26px;
        align-items: center;
        padding: 18px 36px;
    }

    .dc-api-endpoint {
        grid-column: 1;
    }

    .dc-api-input {
        grid-column: 2 / 4;
    }

    .dc-api-bar .dc-btn {
        grid-column: 4;
        justify-self: end;
        min-width: 110px;
    }

    .dc-label {
        color: #8a94a6;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .dc-input {
        width: 100%;
        height: 34px;
        border: 1px solid #e5e9f0;
        border-radius: 6px;
        background: #f9fafc;
        color: #4b5563;
        font-size: 11px;
        padding: 0 12px;
        outline: none;
    }

    .dc-select {
        appearance: none;
        background-image:
            linear-gradient(45deg, transparent 50%, #667085 50%),
            linear-gradient(135deg, #667085 50%, transparent 50%);
        background-position:
            calc(100% - 15px) 14px,
            calc(100% - 10px) 14px;
        background-repeat: no-repeat;
        background-size: 5px 5px, 5px 5px;
        padding-right: 28px;
    }

    .dc-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 34px;
        border: 1px solid #dde3ec;
        border-radius: 6px;
        background: #fff;
        color: #1f2937;
        font-size: 11px;
        font-weight: 700;
        padding: 0 12px;
        cursor: pointer;
        white-space: nowrap;
    }

    .dc-btn-primary {
        border-color: #2864e5;
        background: #2864e5;
        color: #fff;
    }

    .dc-btn-primary svg path {
        stroke: currentColor;
    }

    .dc-kpis {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }

    .dc-kpi {
        display: grid;
        gap: 5px;
        min-height: 90px;
        padding: 16px;
    }

    .dc-kpi-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .dc-kpi-title {
        font-size: 10px;
        font-weight: 800;
    }

    .dc-kpi-value {
        font-size: 24px;
        line-height: 1;
        font-weight: 750;
        letter-spacing: 0;
    }

    .dc-kpi-sub {
        color: #9aa3b2;
        font-size: 10px;
        font-weight: 600;
    }

    .dc-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .dc-blue {
        color: #2563eb;
    }

    .dc-green {
        color: #00a66a;
    }

    .dc-orange {
        color: #f59e0b;
    }

    .dc-red {
        color: #f43f5e;
    }

    .dc-bg-blue {
        background: #eff6ff;
    }

    .dc-bg-green {
        background: #ecfdf3;
    }

    .dc-bg-orange {
        background: #fff7ed;
    }

    .dc-bg-red {
        background: #fff1f2;
    }

    .dc-filters {
        padding: 14px 18px 13px;
    }

    .dc-filter-row {
        display: grid;
        grid-template-columns: minmax(220px, 312px) minmax(0, 1fr) auto auto;
        gap: 10px;
        align-items: center;
    }

    .dc-filter-row .dc-btn {
        width: 86px;
        padding-inline: 0;
    }

    .dc-search {
        position: relative;
        width: 150%;
    }

    .dc-search svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa3b2;
    }

    .dc-search input {
        height: 36px;
        padding-left: 34px;
        background: #fff;
    }

    .dc-switch {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #596273;
        font-size: 11px;
        font-weight: 700;
        justify-self: start;
        white-space: nowrap;
    }

    .dc-switch input {
        appearance: none;
        position: relative;
        width: 34px;
        height: 18px;
        border-radius: 999px;
        background: #d7dde7;
        cursor: pointer;
        transition: background .15s ease;
    }

    .dc-switch input::after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        left: 2px;
        top: 2px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
        transition: transform .15s ease;
    }

    .dc-switch input:checked {
        background: #2864e5;
    }

    .dc-switch input:checked::after {
        transform: translateX(16px);
    }

    .dc-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 9px;
        margin-top: 13px;
    }

    .dc-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 25px;
        border-radius: 999px;
        background: #f1f4f8;
        color: #687385;
        font-size: 10px;
        font-weight: 750;
        padding: 0 11px;
        line-height: 1;
    }

    .dc-chip-break {
        flex-basis: 100%;
        height: 0;
    }

    .dc-chip-alert {
        background: #fff;
        border: 1px solid #e7ebf2;
    }

    .dc-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: currentColor;
    }

    .dc-chip.is-active {
        background: #2864e5;
        color: #fff;
    }

    .dc-chip strong,
    .dc-meta-value {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 16px;
        border-radius: 5px;
        padding: 0 7px;
        background: rgba(255, 255, 255, .62);
        color: inherit;
        font-size: 9px;
        font-weight: 850;
    }

    .dc-chip:not(.is-active) strong {
        background: #e4e9f1;
        color: #7b8494;
    }

    .dc-chip-green {
        background: #dcfce7;
        color: #15803d;
    }

    .dc-chip-purple {
        background: #f1e8ff;
        color: #7e22ce;
    }

    .dc-meta-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 18px;
        margin-top: 2px;
        padding: 0 2px 8px;
        color: #9aa3b2;
        font-size: 10px;
        font-weight: 800;
    }

    .dc-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 26px;
        white-space: nowrap;
    }

    .dc-meta-blue {
        background: #eaf2ff;
        color: #2864e5;
    }

    .dc-meta-green {
        background: #dcfce7;
        color: #15803d;
        min-width: 68px;
    }

    .dc-meta-purple {
        background: #f1e8ff;
        color: #7e22ce;
        min-width: 128px;
    }

    .dc-table-panel {
        overflow: hidden;
    }

    .dc-table-meta {
        padding: 14px 16px;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
    }

    .dc-table-wrap {
        overflow-x: auto;
    }

    .dc-table {
        width: 100%;
        min-width: 820px;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .dc-table th {
        color: #98a2b3;
        background: #fff;
        border-bottom: 1px solid #eef2f7;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .06em;
        padding: 14px 16px;
        text-align: left;
        text-transform: uppercase;
    }

    .dc-table td {
        border-bottom: 1px solid #f1f4f8;
        color: #4b5563;
        font-size: 11px;
        font-weight: 600;
        padding: 15px 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dc-table tbody tr {
        cursor: pointer;
        transition: background .15s ease;
    }

    .dc-table tbody tr:hover {
        background: #f8fbff;
    }

    .dc-record {
        color: #075fc6;
        font-weight: 800;
    }

    .dc-ok {
        color: #049c63;
        font-weight: 800;
    }

    .dc-warn {
        color: #f97316;
        font-weight: 800;
    }

    .dc-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 54px;
        height: 20px;
        border-radius: 999px;
        font-size: 8px;
        font-weight: 850;
        text-transform: uppercase;
    }

    .dc-pill-review {
        background: #fff4df;
        color: #f59e0b;
    }

    .dc-pill-cleaned {
        background: #dcfce7;
        color: #16a34a;
    }

    .dc-pill-duplicate {
        background: #ffe4ea;
        color: #f43f5e;
    }

    .dc-table-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        color: #7b8494;
        font-size: 11px;
        font-weight: 600;
    }

    .dc-pages {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .dc-page {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 26px;
        border: 1px solid #e5e9f0;
        border-radius: 5px;
        background: #fff;
        color: #667085;
        font-size: 10px;
        font-weight: 800;
    }

    .dc-page-nav {
        min-width: 72px;
        padding: 0 10px;
    }

    .dc-page.is-current {
        border-color: #2864e5;
        background: #2864e5;
        color: #fff;
    }

    .dc-modal {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(15, 23, 42, .38);
        backdrop-filter: blur(5px);
    }

    .dc-modal.is-open {
        display: flex;
    }

    .dc-dialog {
        width: min(950px, 100%);
        max-height: min(720px, 92vh);
        overflow: auto;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
    }

    .dc-dialog-head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fff;
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 22px 26px 14px;
        border-bottom: 1px solid #f1f4f8;
    }

    .dc-dialog-title {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .dc-dialog-title h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 750;
        letter-spacing: 0;
    }

    .dc-close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #98a2b3;
        cursor: pointer;
    }

    .dc-dialog-sub {
        margin-top: 5px;
        color: #667085;
        font-size: 12px;
        font-weight: 500;
    }

    .dc-changes {
        display: grid;
        padding: 0 26px 24px;
    }

    .dc-change-head,
    .dc-change-row {
        display: grid;
        grid-template-columns: 1.1fr 1.3fr 30px 1.3fr 1fr;
        gap: 12px;
        align-items: center;
    }

    .dc-rule {
        color: #2563eb;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dc-change-head {
        color: #8a94a6;
        font-size: 11px;
        font-weight: 700;
        padding: 16px 0 10px;
    }

    .dc-change-row {
        min-height: 58px;
        border-top: 1px solid #f1f4f8;
        color: #1f2937;
        font-size: 12px;
        font-weight: 700;
    }

    .dc-field-sub {
        display: block;
        margin-top: 4px;
        color: #a0a8b5;
        font-size: 10px;
        font-weight: 600;
    }

    .dc-old,
    .dc-new {
        display: inline-flex;
        max-width: 100%;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        padding: 5px 8px;
        white-space: normal;
    }

    .dc-old {
        background: #ffe7e8;
        color: #d12f3f;
    }

    .dc-new {
        background: #dcfce7;
        color: #15803d;
    }

    .dc-arrow {
        color: #98a2b3;
        text-align: center;
        font-weight: 800;
    }

    #dcReviewDetailsModal .dc-change-head,
    #dcReviewDetailsModal .dc-change-row {
        grid-template-columns: 1fr 2fr;
    }

    #dcReviewDetailsModal .dc-rule {
        white-space: normal;
    }

    .dc-loader {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(4px);
        z-index: 999;
    }

    .dc-loader.is-active {
        display: flex;
    }

    .dc-spinner {
        width: 42px;
        height: 42px;
        border: 4px solid #e5e9f0;
        border-top-color: #2864e5;
        border-radius: 50%;
        animation: spin 0.9s linear infinite;
    }

    .dc-loader-text {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #4b5563;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    @media (max-width: 960px) {
        .dc-kpis {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .dc-api-bar {
            grid-template-columns: 130px minmax(0, 1fr);
            padding: 16px 18px;
        }

        .dc-api-endpoint,
        .dc-api-input,
        .dc-api-bar .dc-btn {
            grid-column: auto;
        }

        .dc-api-bar .dc-btn {
            justify-self: start;
        }

        .dc-filter-row {
            grid-template-columns: 1fr;
        }

        .dc-switch {
            justify-content: flex-start;
        }
    }

    @media (max-width: 640px) {

        .dc-api-bar,
        .dc-kpis {
            grid-template-columns: 1fr;
        }

        .dc-table-footer {
            align-items: flex-start;
            flex-direction: column;
        }

        .dc-dialog-head {
            padding-inline: 18px;
        }

        .dc-changes {
            padding-inline: 18px;
        }

        .dc-change-head {
            display: none;
        }

        .dc-change-row {
            grid-template-columns: 1fr;
            gap: 7px;
            padding: 14px 0;
        }

        .dc-arrow {
            text-align: left;
        }
    }
</style>
@endsection

@section('content')
<section class="dc-screen">
    <div class="dc-title">
        <h1>DataCleaning</h1>
        <span>Home/DataCleaning</span>
    </div>

    <div class="dc-panel dc-api-bar">
        <span class="dc-label">Dataset Selection</span>
        <select class="dc-input dc-select" aria-label="Dataset selection" id="dataset-select">
            <option>Select a dataset</option>
            <option value="beneficiary">Beneficiary</option>
            <option value="Bank_Financials">Bank</option>
            <option value="Bank_Financials">Financials</option>
            <option value="certificates">Certificates</option>
        </select>
        <span class="dc-label">IP Selection</span>
        <select class="dc-input dc-select" aria-label="IP selection" id="ip-select">
            <option>Select IP Address</option>
            <option value="Hands">Hands</option>
            <option value="Safco">SAFCO</option>
            <option value="Srso">SRSO</option>
            <option value="Trdp">TRDP</option>
            <option value="Nrsp">NRSP</option>
        </select>
        <span class="dc-label">Page Size</span>
        <input
            id="pageSizeInput"
            class="dc-input"
            type="number"
            min="1"
            max="100000"
            value="500">
        <span class="dc-label dc-api-endpoint">API Endpoint</span>
        <input class="dc-input dc-api-input" type="text" value="https://python.algogtech.com/transformation/api/report/" aria-label="API endpoint">

        <button id="fetchBtn" class="dc-btn dc-btn-primary inline-flex items-center gap-1.5" type="button">
            Fetch
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.33333 3.33301L14 7.99967M14 7.99967L9.33333 12.6663M14 7.99967H2"
                    stroke="currentColor"
                    stroke-width="1.66667"
                    stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </button>
    </div>

    <div class="dc-kpis">
        <article class="dc-panel dc-kpi">
            <div class="dc-kpi-head">
                <span class="dc-kpi-title dc-blue">Total Records</span>
                <span class="dc-icon dc-bg-blue dc-blue" aria-hidden="true">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 11H5M19 11C20.1038 11 21 11.8962 21 13V19C21 20.1038 20.1038 21 19 21H5C3.89617 21 3 20.1038 3 19V13C3 11.8962 3.89617 11 5 11M19 11V9C19 7.89617 18.1038 7 17 7M5 11V9C5 7.89617 5.89617 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1038 3 17 3.89617 17 5V7M7 7H17" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </span>
            </div>
            <strong id="totalRecords" class="dc-kpi-value">0</strong>
            <!-- <span class="dc-kpi-sub">+15.3% from baseline</span> -->
        </article>

        <article class="dc-panel dc-kpi">
            <div class="dc-kpi-head">
                <span class="dc-kpi-title dc-blue">Records Loaded</span>
                <span class="dc-icon dc-bg-blue dc-blue" aria-hidden="true">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 11H5M19 11C20.1038 11 21 11.8962 21 13V19C21 20.1038 20.1038 21 19 21H5C3.89617 21 3 20.1038 3 19V13C3 11.8962 3.89617 11 5 11M19 11V9C19 7.89617 18.1038 7 17 7M5 11V9C5 7.89617 5.89617 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1038 3 17 3.89617 17 5V7M7 7H17" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </span>
            </div>
            <strong id="recordsLoaded" class="dc-kpi-value">0</strong>
            <!-- <span class="dc-kpi-sub">+15.3% from baseline</span> -->
        </article>

        <article class="dc-panel dc-kpi">
            <div class="dc-kpi-head">
                <span class="dc-kpi-title dc-green">Fields Cleaned</span>
                <span class="dc-icon dc-bg-green dc-green" aria-hidden="true">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 12L11 14L15 10M21 12C21 16.9672 16.9672 21 12 21C7.03276 21 3 16.9672 3 12C3 7.03276 7.03276 3 12 3C16.9672 3 21 7.03276 21 12Z" stroke="#16A34A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </span>
            </div>
            <strong class="dc-kpi-value" id="kpi-cleaned">0</strong>
            <!-- <span class="dc-kpi-sub">Across 10 field types</span> -->
        </article>

        <article class="dc-panel dc-kpi">
            <div class="dc-kpi-head">
                <span class="dc-kpi-title dc-orange">Needs Review</span>
                <span class="dc-icon dc-bg-orange dc-orange" aria-hidden="true">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.0004 8.99975V10.9998M12.0004 14.9998H12.0104M5.07241 18.9998H18.9284C20.4684 18.9998 21.4304 17.3328 20.6604 15.9998L13.7324 3.99975C12.9624 2.66675 11.0384 2.66675 10.2684 3.99975L3.34041 15.9998C2.57041 17.3328 3.53241 18.9998 5.07241 18.9998Z" stroke="#D97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </span>
            </div>
            <strong class="dc-kpi-value" id="kpi-review">0</strong>
            <!-- <span class="dc-kpi-sub">Require manual check</span> -->
        </article>

        <article class="dc-panel dc-kpi">
            <div class="dc-kpi-head">
                <span class="dc-kpi-title dc-red">Duplicates</span>
                <span class="dc-icon dc-bg-red dc-red" aria-hidden="true">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 7V15C8 16.1038 8.89617 17 10 17H16M8 7V5C8 3.89617 8.89617 3 10 3H14.586C14.8512 3.00006 15.1055 3.10545 15.293 3.293L19.707 7.707C19.8945 7.89449 19.9999 8.14881 20 8.414V15C20 16.1038 19.1038 17 18 17H16M8 7H6C4.89617 7 4 7.89617 4 9V19C4 20.1038 4.89617 21 6 21H14C15.1038 21 16 20.1038 16 19V17" stroke="#E11D48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </span>
            </div>
            <strong class="dc-kpi-value" id="kpi-duplicates">0</strong>
            <!-- <span class="dc-kpi-sub">Flagged for review</span> -->
        </article>
    </div>

    <!-- <div class="dc-panel dc-filters">
        <div class="dc-filter-row">
            <label class="dc-search">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <circle cx="11" cy="11" r="8" />
                    <path d="m21 21-4.3-4.3" />
                </svg>
                <input class="dc-input" type="search" placeholder="Search UUID, CNIC...">
            </label>
            <span aria-hidden="true"></span>
            <button class="dc-btn dc-btn-primary" type="button">Load data</button>
            <button class="dc-btn" type="button">Export CSV</button>
        </div>

        <div class="dc-chips" aria-label="Cleaning filters">
            <span class="dc-chip is-active" style="display:flex; align-items:center; gap:6px;">
                <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.3143 0.024C4.4023 -0.008 4.4943 -0.008 4.5903 0.024C4.6303 0.032 5.3223 0.372 6.6663 1.044C8.0103 1.716 8.6943 2.064 8.7183 2.088C8.8143 2.16 8.8763 2.252 8.9043 2.364C8.9323 2.476 8.9183 2.58 8.8623 2.676L8.8503 2.7C8.8263 2.756 8.7903 2.8 8.7423 2.832C8.6703 2.88 8.5063 2.972 8.2503 3.108L6.9543 3.756L5.1543 4.656C4.8503 4.8 4.6543 4.888 4.5663 4.92C4.5023 4.944 4.4463 4.952 4.3983 4.944H4.3743C4.3423 4.936 4.1943 4.868 3.9303 4.74L0.6663 3.108C0.4103 2.972 0.2463 2.88 0.1743 2.832C0.1183 2.8 0.0823 2.756 0.0663 2.7L0.0543 2.676C0.0063 2.58 -0.0077 2.48 0.0123 2.376C0.0323 2.272 0.0863 2.18 0.1743 2.1C0.1983 2.076 0.8823 1.728 2.2263 1.056C3.5703 0.384 4.2663 0.04 4.3143 0.024ZM4.4583 1.056C4.4503 1.056 3.5383 1.512 1.7223 2.424L1.6143 2.484L4.4583 3.888L7.3023 2.484C7.3023 2.476 6.8323 2.236 5.8923 1.764C4.9523 1.292 4.4743 1.056 4.4583 1.056ZM0.1743 4.836C0.0463 4.732 -0.0097 4.598 0.0063 4.434C0.0223 4.27 0.0943 4.14 0.2223 4.044C0.3503 3.948 0.4943 3.924 0.6543 3.972L0.6903 3.996C1.3303 4.308 1.9623 4.624 2.5863 4.944L4.4583 5.88L6.3423 4.944C6.9583 4.632 7.5943 4.316 8.2503 3.996L8.2863 3.972C8.4143 3.932 8.5463 3.954 8.6823 4.038C8.8183 4.122 8.8983 4.232 8.9223 4.368C8.9463 4.528 8.8823 4.684 8.7303 4.836C8.7143 4.852 8.0183 5.204 6.6423 5.892L4.6023 6.924H4.3143L2.2743 5.892C0.8903 5.204 0.1903 4.852 0.1743 4.836ZM0.3783 5.952C0.2743 5.968 0.1843 6.024 0.1083 6.12C0.0323 6.216 -0.0037 6.328 0.0003 6.456C0.0043 6.584 0.0623 6.7 0.1743 6.804C0.1903 6.828 0.8743 7.178 2.2263 7.854C3.5783 8.53 4.2783 8.872 4.3263 8.88C4.4143 8.904 4.5023 8.904 4.5903 8.88C4.6143 8.872 4.8263 8.772 5.2263 8.58C5.6983 8.348 6.1823 8.108 6.6783 7.86L8.1423 7.128C8.4303 6.976 8.6183 6.872 8.7063 6.816C8.7623 6.784 8.8023 6.748 8.8263 6.708L8.8383 6.684C8.9103 6.556 8.9283 6.428 8.8923 6.3C8.8563 6.172 8.7823 6.074 8.6703 6.006C8.5583 5.938 8.4383 5.92 8.3103 5.952C8.2623 5.968 7.6103 6.288 6.3543 6.912L4.4583 7.848L2.5623 6.912C1.9543 6.608 1.3183 6.296 0.6543 5.976L0.6063 5.952C0.5343 5.936 0.4583 5.936 0.3783 5.952Z" fill="white" />
                </svg>

                <span>All rules <strong>250</strong></span>
            </span>
            <span class="dc-chip">Bool standardized <strong>50</strong></span>
            <span class="dc-chip">Cell no. normalized <strong>25</strong></span>
            <span class="dc-chip">CNIC format <strong>25</strong></span>
            <span class="dc-chip">Gender standardized <strong>15</strong></span>
            <span class="dc-chip">Title cased <strong>75</strong></span>
            <span class="dc-chip-break" aria-hidden="true"></span>
            <span class="dc-chip dc-chip-alert dc-red"><span class="dc-dot" aria-hidden="true"></span>Duplicates only</span>
            <span class="dc-chip dc-chip-alert dc-orange"><span class="dc-dot" aria-hidden="true"></span>Needs review</span>
        </div>
    </div> -->

    <!-- <div class="dc-meta-row">
        <span class="dc-meta-item">Records / Page <strong class="dc-meta-value dc-meta-blue">200</strong></span>
        <span class="dc-meta-item">More Records <strong class="dc-meta-value dc-meta-green">AVAILABLE</strong></span>
        <span class="dc-meta-item">Cursor Status <strong class="dc-meta-value dc-meta-purple">EYJRLJOGNTG3NTR9</strong></span>
    </div> -->

    <article class="dc-panel dc-table-panel">
        <!-- <div class="dc-table-meta">25 records</div> -->
        <div class="dc-table-wrap">
            <table id="recordsTable" class="dc-table">
                <thead>
                    <tr>
                        <th style="width: 16%;">UUID</th>
                        <th style="width: 14%;">Cleaned</th>
                        <th style="width: 17%;">Needs Review</th>
                        <th style="width: 16%;">Duplicate UUID</th>
                        <th style="width: 16%;">Duplicate CNIC</th>
                        <th style="width: 16%;">Status</th>
                        <th style="width: 17%;">Last Updated</th>
                        <th style="width: 10%;">Actions</th>
                    </tr>
                </thead>
                <tbody id="dcTableBody"></tbody>
            </table>
        </div>

        <div class="dc-table-footer">
            <!-- <span>Showing 1 to 25 of 25 records</span> -->
            <div class="dc-pages" aria-label="Pages">
                <button id="prevBtn" class="dc-page dc-page-nav" type="button">
                    Previous
                </button>
                <span
                    id="currentPageLabel"
                    class="dc-page is-current">
                    1
                </span>
                <!-- <span class="dc-page">2</span>
                <span class="dc-page">3</span> -->
                <button id="nextBtn" class="dc-page dc-page-nav" type="button">
                    Next
                </button>
                <!-- <span class="dc-page">10 / page</span> -->
            </div>
        </div>
        <!-- <div class="dc-pages">
            <button id="prevBtn" class="dc-page dc-page-nav">
                Previous
            </button>

            <span
                id="currentPageLabel"
                class="dc-page is-current">
                1
            </span>

            <button id="nextBtn" class="dc-page dc-page-nav">
                Next
            </button>
        </div> -->
    </article>
</section>

<div class="dc-modal" id="dcReviewModal" aria-hidden="true">
    <div class="dc-dialog" role="dialog" aria-modal="true" aria-labelledby="dcModalTitle">
        <div class="dc-dialog-head">
            <div>
                <div class="dc-dialog-title">
                    <h2 id="dcModalTitle">Record #25503</h2>
                    <span class="dc-pill dc-pill-review" id="dcModalStatus">Review</span>
                </div>
                <div class="dc-dialog-sub" id="dcModalSubtitle">6 fields updated by the cleaning pipeline</div>
            </div>
            <button class="dc-close" type="button" data-dc-close aria-label="Close review">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg>
            </button>
        </div>

        <div class="dc-changes">
            <div class="dc-change-head">
                <span>Field</span>
                <span id="dcHeaderMiddle">Original data</span>
                <span></span>
                <span>Cleaned data</span>
                <!-- <span id="dcHeaderArrow"></span> -->
                <span id="dcHeaderRule">Rule</span>
            </div>
            <div id="dcModalChanges"></div>
        </div>
    </div>
</div>

<template id="dcChangeTemplate">
    <div class="dc-change-row">
        <div>
            <strong data-field></strong>
            <span class="dc-field-sub" data-key></span>
        </div>

        <div class="dc-old" data-old></div>

        <div class="dc-arrow">→</div>

        <div class="dc-new" data-new></div>
        <div class="dc-rule" data-rule></div>
    </div>
</template>

<div class="dc-modal" id="dcReviewDetailsModal" aria-hidden="true">
    <div class="dc-dialog" role="dialog" aria-modal="true">
        <div class="dc-dialog-head">
            <div>
                <div class="dc-dialog-title">
                    <h2 id="dcReviewModalTitle">Manual Reviews</h2>
                </div>
                <div class="dc-dialog-sub" id="dcReviewModalSubtitle"></div>
            </div>

            <button class="dc-close" type="button" data-dc-close aria-label="Close review modal">
                ✕
            </button>
        </div>

        <div class="dc-changes">
            <div class="dc-change-head">
                <span>Field</span>
                <span>Value</span>
            </div>

            <div id="dcReviewModalBody"></div>
        </div>
    </div>
</div>
<div id="dcLoader" class="dc-loader">
    <div class="dc-spinner"></div>
    <div class="dc-loader-text">Loading records...</div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {

        // =====================================
        // MODALS
        // =====================================
        const loader = document.getElementById('dcLoader');
        const modal = document.getElementById('dcReviewModal');
        const modalTitle = document.getElementById('dcModalTitle');
        const modalStatus = document.getElementById('dcModalStatus');
        const modalSubtitle = document.getElementById('dcModalSubtitle');
        const modalChanges = document.getElementById('dcModalChanges');

        const headerMiddle = document.getElementById('dcHeaderMiddle');
        // const headerArrow = document.getElementById('dcHeaderArrow');
        const headerRule = document.getElementById('dcHeaderRule');

        const closeBtn = modal.querySelector('[data-dc-close]');

        const reviewDetailsModal = document.getElementById('dcReviewDetailsModal');
        const reviewDetailsCloseBtn = reviewDetailsModal.querySelector('[data-dc-close]');
        const datasetSelect = document.getElementById('dataset-select');
        const ipSelect = document.getElementById('ip-select');

        // IP label is the span right before select
        const ipLabel = ipSelect.previousElementSibling;

        function toggleIpField() {
            const hideIp = datasetSelect.value === 'Bank_Financials';

            ipSelect.style.display = hideIp ? 'none' : '';
            ipLabel.style.display = hideIp ? 'none' : '';
        }

        datasetSelect.addEventListener('change', toggleIpField);
        toggleIpField();

        const statusClasses = [
            'dc-pill-review',
            'dc-pill-cleaned',
            'dc-pill-duplicate'
        ];

        // =====================================
        // TABLE DATA
        // =====================================
        const tbody = document.getElementById('dcTableBody');
        const pageSizeInput = document.getElementById('pageSizeInput');
        const fetchBtn = document.getElementById('fetchBtn');
        const nextBtn = document.getElementById('nextBtn');
        const prevBtn = document.getElementById('prevBtn');
        const pageLabel = document.getElementById('currentPageLabel');

        const totalRecordsEl = document.getElementById('totalRecords');
        const recordsLoadedEl = document.getElementById('recordsLoaded');
        const kpiCleanedEl = document.getElementById('kpi-cleaned');
        const kpiReviewEl = document.getElementById('kpi-review');
        const kpiDuplicatesEl = document.getElementById('kpi-duplicates');

        const baseUrl = 'https://python.algogtech.com/transformation/api/report';

        let currentRows = [];
        let currentCursor = null;
        let nextCursor = null;
        let cursorHistory = [];
        let currentPage = 1;

        // =====================================
        // NULL HANDLER
        // =====================================
        function formatValue(val) {
            if (val === null || val === undefined || val === '') return 'NULL';
            return val;
        }

        function showLoader() {
            loader?.classList.add('is-active');
        }

        function hideLoader() {
            loader?.classList.remove('is-active');
        }

        // =====================================
        // BUILD URL
        // =====================================
        function buildUrl() {

            const dataset = document.querySelector('[aria-label="Dataset selection"]').value;
            const ip = document.querySelector('[aria-label="IP selection"]').value;
            const pageSize = parseInt(pageSizeInput.value || 100);
            const skipIpValidation = dataset === 'Bank_Financials';

            if (
                !dataset ||
                dataset === 'Select a dataset' ||
                (!skipIpValidation && (!ip || ip === 'Select IP Address'))
            ) {
                return null;
            }

            // let url = `${baseUrl}/${dataset}/${ip}/${ip}/page?page_size=${pageSize}`;
            let url;

            if (dataset === 'Bank_Financials') {
                url =
                    `${baseUrl}/banks/Banks_Financials/page?page_size=${pageSize}`;
            } else {
                url =
                    `${baseUrl}/${dataset}/${ip}/${ip}/page?page_size=${pageSize}`;
            }

            if (currentCursor) {
                url += `&cursor=${encodeURIComponent(currentCursor)}`;
            }

            return url;
        }

        // =====================================
        // FETCH DATA
        // =====================================
        async function fetchData() {
            const url = buildUrl();
            if (!url) return alert('Select Dataset and IP');

            const fetchedAt = new Date();
            try {
                showLoader(); // ✅ START LOADER
                const res = await fetch(url);
                const data = await res.json();

                const pagination = data.pagination || {};

                const summary = data.summary || {};

                if (totalRecordsEl) {
                    totalRecordsEl.textContent =
                        Number(pagination.total_rows || 0).toLocaleString();
                }

                if (recordsLoadedEl) {
                    recordsLoadedEl.textContent =
                        Number(pagination.returned || 0).toLocaleString();
                }

                if (kpiCleanedEl) {
                    kpiCleanedEl.textContent =
                        Number(summary.total_cleaned || 0).toLocaleString();
                }

                if (kpiReviewEl) {
                    kpiReviewEl.textContent =
                        Number(summary.total_review || 0).toLocaleString();
                }

                if (kpiDuplicatesEl) {
                    kpiDuplicatesEl.textContent =
                        Number(
                            (summary.total_duplicate_uuid || 0) +
                            (summary.total_duplicate_cnic || 0)
                        ).toLocaleString();
                }
                currentRows = data.rows || [];
                nextCursor = pagination.next_cursor || null;

                renderTable(currentRows, fetchedAt);

                if (pageLabel) pageLabel.textContent = currentPage;

            } catch (err) {
                hideLoader();
                console.error(err);
                alert('API failed');
            } finally {

                hideLoader(); // ✅ ALWAYS STOP LOADER
            }
        }

        // =====================================
        // RENDER TABLE
        // =====================================
        function renderTable(rows, fetchedAt) {

            tbody.innerHTML = '';

            rows.forEach(row => {

                const cleaned = row.cleaned_values || {};
                const original = row.original_values || {};
                const reviews = row.manual_reviews || {};

                const reviewCount = Object.keys(reviews).length;

                const status = row.is_dup ?
                    'Duplicate' :
                    reviewCount > 0 ?
                    'Review' :
                    'Cleaned';

                const tr = document.createElement('tr');
                tr.dataset.uuid = row.uuid;

                tr.innerHTML = `
                <td><span class="dc-record">${row.uuid}</span></td>

                <td><span class="dc-ok">${Object.keys(cleaned).length}</span></td>

                <td>
                    <span class="${reviewCount > 0 ? 'dc-warn' : 'dc-ok'}">
                        ${reviewCount}
                    </span>
                </td>

                <td>${row.is_dup ? 'Yes' : 'No'}</td>
                <td>${row.is_dup_cnic ? 'Yes' : 'No'}</td>

                <td>
                    ${
                        status === 'Review'
                        ? `<span class="dc-pill dc-pill-review view-review" data-uuid="${row.uuid}">Review</span>`
                        : `<span class="dc-pill ${
                                status === 'Cleaned'
                                    ? 'dc-pill-cleaned'
                                    : 'dc-pill-duplicate'
                            }">${status}</span>`
                    }
                </td>

                <td>${fetchedAt ? fetchedAt.toLocaleString() : '-'}</td>

                <td>
                    <button type="button" class="view-record dc-close" data-uuid="${row.uuid}">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>
                    </button>
                </td>
            `;

                tbody.appendChild(tr);
            });
        }

        // =====================================
        // OPEN RECORD MODAL
        // =====================================
        function openRecord(record) {
            headerMiddle.textContent = 'Original data';
            // headerArrow.textContent = '';
            headerRule.style.display = 'block';

            const cleaned = record.cleaned_values || {};
            const original = record.original_values || {};
            const reviewCount = Object.keys(record.manual_reviews || {}).length;

            const status = record.is_dup ?
                'Duplicate' :
                reviewCount > 0 ?
                'Review' :
                'Cleaned';

            modalTitle.textContent = `Record #${record.uuid}`;
            // modalStatus.textContent = status.toUpperCase();
            modalStatus.textContent = 'Cleaned';
            modalStatus.classList.remove(...statusClasses);

            modalStatus.classList.add(
                status === 'Cleaned' ?
                'dc-pill-cleaned' :
                status === 'Duplicate' ?
                'dc-pill-duplicate' :
                'dc-pill-review'
            );

            modalSubtitle.textContent = `${Object.keys(cleaned).length} fields`;

            modalChanges.innerHTML = '';

            Object.keys(cleaned).forEach(key => {

                const tpl = document.getElementById('dcChangeTemplate');
                const row = tpl.content.cloneNode(true);

                row.querySelector('[data-field]').textContent = key;
                row.querySelector('[data-key]').textContent = key;

                row.querySelector('[data-old]').textContent =
                    formatValue(original[key]);

                const cleanedData = cleaned[key] || [];

                row.querySelector('[data-new]').textContent =
                    Array.isArray(cleanedData) ?
                    cleanedData[0] :
                    cleanedData;

                row.querySelector('[data-rule]').textContent =
                    Array.isArray(cleanedData) ?
                    cleanedData[1] :
                    '-';

                modalChanges.appendChild(row);
            });

            modal.classList.add('is-open');
        }

        // =====================================
        // OPEN REVIEW MODAL
        // =====================================
        function openReviewModal(record) {

            headerMiddle.textContent = 'Review data';

            const reviews = record.manual_reviews || {};
            const cleaned = record.cleaned_values || {};

            modalTitle.textContent = `Record #${record.uuid}`;
            modalStatus.textContent = "REVIEW";

            modalSubtitle.textContent =
                `${Object.keys(reviews).length} review fields`;

            modalChanges.innerHTML = '';

            Object.keys(reviews).forEach(key => {

                const reviewData = reviews[key];

                const cleanedData = cleaned[key];

                // rule extraction (if API later sends object)
                let rule = '-';

                if (Array.isArray(cleanedData)) {
                    rule = cleanedData[1] ?? '-';
                }

                const row = document.createElement('div');
                row.className = 'dc-change-row';

                row.innerHTML = `
            <div>
                <strong>${key}</strong>
                <span class="dc-field-sub">manual review</span>
            </div>

            <div class="dc-old">
                ${formatValue(reviewData)}
            </div>

            <div class="dc-arrow">→</div>

            <div class="dc-new">
                ${formatValue(cleanedData)}
            </div>

            <div class="dc-rule">
                ${rule}
            </div>
        `;

                modalChanges.appendChild(row);
            });

            modal.classList.add('is-open');
        }

        // =====================================
        // CLOSE MODAL
        // =====================================
        function closeModal() {
            modal.classList.remove('is-open');
        }

        closeBtn.addEventListener('click', closeModal);
        reviewDetailsCloseBtn.addEventListener('click', () => reviewDetailsModal.classList.remove('is-open'));
        reviewDetailsModal.addEventListener('click', (e) => {
            if (e.target === reviewDetailsModal) reviewDetailsModal.classList.remove('is-open');
        });

        modal.addEventListener('click', (e) => {
            if (e.target === modal) closeModal();
        });

        // =====================================
        // ROW EVENTS
        // =====================================
        tbody.addEventListener('click', (e) => {

            const reviewBtn = e.target.closest('.view-review');
            const viewBtn = e.target.closest('.view-record');

            const uuid = reviewBtn?.dataset.uuid || viewBtn?.dataset.uuid;
            if (!uuid) return;

            const record = currentRows.find(r =>
                String(r.uuid) === String(uuid)
            );

            if (!record) return;

            if (reviewBtn) {
                openReviewModal(record);
            } else {
                openRecord(record);
            }
        });

        // =====================================
        // FETCH BUTTON
        // =====================================
        fetchBtn?.addEventListener('click', () => {
            currentPage = 1;
            currentCursor = null;
            cursorHistory = [];
            fetchData();
        });

        nextBtn?.addEventListener('click', () => {
            if (!nextCursor) return alert('No more records');

            cursorHistory.push(currentCursor);
            currentCursor = nextCursor;
            currentPage++;

            fetchData();
        });

        prevBtn?.addEventListener('click', () => {
            if (!cursorHistory.length) return;

            currentCursor = cursorHistory.pop();
            currentPage--;

            fetchData();
        });

    });
</script>
@endsection