@extends('layouts.demo10.base')

@php
    $projectStatus = strtolower($currentProject->status ?? 'active');
    $projectDescription = filled($currentProject->description) ? $currentProject->description : 'N/A';
    $createdDate = optional($currentProject->created_at)->format('F, d, Y') ?? 'N/A';
    $updatedDate = optional($currentProject->updated_at)->format('F, d, Y') ?? 'N/A';
    $schemaDesignUrl = route('tenants.projects.schema_design', ['projectName' => $currentProject->slug]) . '?tenant_id=' . $currentProject->id;
    $projectImportUrl = route('tenants.projects.import', ['projectName' => $currentProject->slug]);
    $dataSourceType = strtolower($dataSourceConnection->source_type ?? 'odk');
    $dataSourceUpdatedDate = optional($dataSourceConnection?->updated_at)->format('F, d, Y') ?? 'N/A';
    $dataSourceStatus = strtolower($dataSourceConnection->status ?? 'inactive');
    $dataSourceUsesToken = (bool) data_get($dataSourceConnection?->settings, 'use_auth_token', false);
    $dataSourceColspan = $dataSourceType === 'csv' ? 6 : 7;
    $groupedPiiAttributes = collect($attributes ?? [])->groupBy('table');
    $dataSourceConfig = [
        'id' => $dataSourceConnection?->id,
        'type' => $dataSourceType,
        'base_url' => $dataSourceConnection?->base_url,
        'project_id' => $dataSourceConnection?->project_id,
        'form_id' => $dataSourceConnection?->form_id,
        'username' => $dataSourceConnection?->username,
        'file_name' => $dataSourceConnection?->file_name,
        'file_path' => $dataSourceConnection?->file_path,
        'use_auth_token' => $dataSourceUsesToken,
    ];
@endphp

@section('content')
<style>
    .project-settings-shell {
        display: grid;
        gap: 1.6rem;
        padding-bottom: 1.2rem;
    }

    .project-settings-topbar {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .project-settings-heading {
        display: grid;
        gap: 0.2rem;
    }

    .project-settings-title {
        margin: 0;
        color: #18181b;
        font-size: 2.1rem;
        font-weight: 600;
        line-height: 1.04;
        letter-spacing: -0.03em;
    }

    .project-settings-breadcrumb {
        color: #8d8d8d;
        font-size: 0.95rem;
        font-weight: 400;
    }

    .project-settings-top-actions {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        margin-left: auto;
    }

    .project-settings-ring {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #e2ddd6;
        border-radius: 999px;
        background: #fff;
        color: #545454;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    }

    .project-settings-head-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    .project-settings-back,
    .project-settings-save {
        min-height: 46px;
        padding-inline: 1.25rem !important;
        border-radius: 12px !important;
        font-weight: 500;
    }

    .project-settings-back {
        border-color: #e8e2da !important;
        color: #bbb1a5 !important;
        background: #fff !important;
    }

    .project-settings-save {
        min-width: 132px;
        background: #2f6cf6 !important;
        border-color: #2f6cf6 !important;
    }

    .project-settings-tabs {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        padding-bottom: 0.8rem;
        border-bottom: 1px solid #ece7e1;
    }

    .project-settings-tab {
        border: 0;
        background: transparent;
        min-height: 34px;
        padding: 0.38rem 0.65rem;
        border-radius: 7px;
        color: #262626;
        font-size: 0.98rem;
        font-weight: 400;
        line-height: 1;
        transition: background 0.18s ease, color 0.18s ease;
    }

    .project-settings-tab:hover {
        background: #f4f6fb;
        color: #111827;
    }

    .project-settings-tab.is-active {
        background: #dfeafe;
        color: #2f6cf6;
    }

    .project-settings-panel {
        display: none;
    }

    .project-settings-panel.is-active {
        display: block;
    }

    .project-settings-card {
        width: 100%;
        overflow: hidden;
        border: 1px solid #e8e2da;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
    }

    .project-settings-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.2rem;
        border-bottom: 1px solid #ede7df;
    }

    .project-settings-card-title {
        margin: 0;
        color: #1d1d1f;
        font-size: 1.08rem;
        font-weight: 500;
    }

    .project-settings-table-wrap {
        overflow-x: auto;
    }

    .project-settings-table {
        width: 100%;
        min-width: 920px;
        border-collapse: collapse;
    }

    .project-settings-table th,
    .project-settings-table td {
        padding: 0.95rem 0.8rem;
        border-right: 1px solid #ece7e1;
        border-bottom: 1px solid #ece7e1;
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
    }

    .project-settings-table th:last-child,
    .project-settings-table td:last-child {
        border-right: 0;
    }

    .project-settings-table th {
        color: #555;
        font-size: 0.76rem;
        font-weight: 500;
        background: #fdfcfb;
    }

    .project-settings-table td {
        color: #363636;
        font-size: 0.84rem;
        font-weight: 400;
    }

    .project-settings-sort {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
    }

    .project-settings-sort i {
        font-size: 0.72rem;
        color: #656565;
    }

    .project-settings-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.18rem 0.48rem;
        border-radius: 4px;
        background: #eaf7ea;
        color: #59a75f;
        font-size: 0.72rem;
        font-weight: 500;
    }

    .project-settings-status.is-inactive {
        background: #fef2f2;
        color: #dc2626;
    }

    .project-settings-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.18rem 0.45rem;
        border-radius: 4px;
        background: #eef2ff;
        color: #6270d9;
        font-size: 0.72rem;
        font-weight: 500;
    }

    .project-settings-row-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
    }

    .project-settings-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #777;
        transition: background 0.18s ease, color 0.18s ease;
    }

    .project-settings-icon-btn:hover {
        background: #f3f4f6;
        color: #222;
    }

    .project-settings-empty {
        min-height: 255px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(249, 249, 249, 0.5));
    }

    .project-settings-view-data-toolbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.45rem;
        flex-wrap: wrap;
        margin-bottom: 0.85rem;
    }

    .project-settings-view-data-actions {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: wrap;
    }

    .project-settings-view-data-spacer {
        flex: 1 1 auto;
    }

    .project-settings-view-data-btn {
        min-height: 40px;
        padding-inline: 1rem !important;
        border-radius: 10px !important;
        font-size: 0.88rem !important;
        font-weight: 500;
        box-shadow: none !important;
    }

    .project-settings-view-data-btn.is-secondary {
        border: 1px solid #dfe4ea !important;
        background: #fff !important;
        color: #7c8798 !important;
    }

    .project-settings-view-data-btn.is-primary {
        background: #2f6cf6 !important;
        border-color: #2f6cf6 !important;
        color: #fff !important;
    }

    .project-settings-view-data-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        width: 100%;
    }

    .project-settings-view-data-filter {
        min-width: 220px;
        max-width: 220px;
        min-height: 40px;
        padding: 0.3rem 0.7rem;
        border-radius: 8px;
        border-color: #e5e7eb;
        color: #9ca3af;
        font-size: 0.72rem;
        background: #fff;
    }

    #project_settings_view_data_field_select + .select2-container {
        min-width: 220px !important;
        max-width: 220px !important;
    }

    #project_settings_view_data_field_select + .select2-container .select2-selection--multiple {
        min-height: 40px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 4px 10px;
        background: #fff;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    #project_settings_view_data_field_select + .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #2f6cf6;
        box-shadow: 0 0 0 3px rgba(47, 108, 246, 0.12);
    }

    #project_settings_view_data_field_select + .select2-container .select2-selection--multiple .select2-selection__rendered {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0 !important;
        width: 100%;
    }

    #project_settings_view_data_field_select + .select2-container .select2-selection--multiple .select2-selection__choice {
        display: none;
    }

    #project_settings_view_data_field_select + .select2-container .select2-selection--multiple .select2-search--inline {
        display: none;
    }

    .project-settings-view-data-select-summary {
        color: #6b7280;
        font-size: 0.72rem;
    }

    .project-settings-view-data-select2-dropdown {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
    }

    .project-settings-view-data-dropdown-search {
        padding: 0.55rem 0.65rem;
        border-bottom: 1px solid #eef2f7;
        background: #fff;
    }

    .project-settings-view-data-dropdown-search input {
        width: 100%;
        height: 36px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 0 0.75rem;
        font-size: 0.76rem;
        color: #374151;
        outline: none;
    }

    .project-settings-view-data-dropdown-search input:focus {
        border-color: #2f6cf6;
        box-shadow: 0 0 0 3px rgba(47, 108, 246, 0.12);
    }

    .project-settings-view-data-dropdown-search input::placeholder {
        color: #9ca3af;
    }

    .project-settings-view-data-select2-dropdown .select2-results__options {
        max-height: 280px;
        padding: 0.35rem 0;
    }

    .project-settings-view-data-select2-dropdown .select2-results__option {
        padding: 0.5rem 0.75rem;
    }

    .project-settings-view-data-checkbox-option {
        display: flex;
        align-items: center;
        color: #374151;
        font-size: 0.78rem;
    }

    .project-settings-panel[data-settings-panel="view-data"] .project-settings-card {
        width: 100%;
        border-radius: 12px;
        box-shadow: none;
        overflow: visible;
        border-color: #e6ded5;
    }

    @media (min-width: 1200px) {
        .project-settings-panel[data-settings-panel="view-data"] {
            width: min(1500px, calc(100vw - var(--sidebar-width) - 72px));
            max-width: min(1500px, calc(100vw - var(--sidebar-width) - 72px));
        }
    }

    .project-settings-panel[data-settings-panel="view-data"] .project-settings-table-wrap {
        width: 100%;
        overflow: visible;
    }

    .project-settings-panel[data-settings-panel="view-data"] .project-settings-card-head {
        padding: 0.8rem 0.95rem;
    }

    .project-settings-panel[data-settings-panel="view-data"] .project-settings-card-title {
        font-size: 0.95rem;
        font-weight: 500;
    }

    .project-settings-view-data-scroll {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        min-height: 280px;
        padding-bottom: 0.15rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable both-edges;
    }

    .project-settings-view-data-scroll .dataTables_wrapper,
    #project_settings_view_data_table_wrapper {
        display: inline-block;
        width: max-content !important;
        min-width: 100% !important;
        vertical-align: top;
    }

    #project_settings_view_data_table {
        min-width: 1600px !important;
        width: max-content !important;
        table-layout: auto !important;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_wrapper {
        width: max-content !important;
        min-width: 100% !important;
        overflow: visible;
    }

    .project-settings-panel[data-settings-panel="view-data"] .project-settings-view-data-footer {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        flex-wrap: wrap;
        min-width: 100%;
        padding: 0.95rem 1rem 1rem;
    }

    .project-settings-panel[data-settings-panel="view-data"] .project-settings-view-data-footer .dataTables_length,
    .project-settings-panel[data-settings-panel="view-data"] .project-settings-view-data-footer .dataTables_info {
        margin-right: 0;
    }

    .project-settings-panel[data-settings-panel="view-data"] .project-settings-view-data-footer .dataTables_paginate {
        margin-left: auto;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_length,
    .project-settings-panel[data-settings-panel="view-data"] .dataTables_filter,
    .project-settings-panel[data-settings-panel="view-data"] .dataTables_info,
    .project-settings-panel[data-settings-panel="view-data"] .dataTables_paginate {
        padding-inline: 0.85rem;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_filter {
        display: none !important;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_info,
    .project-settings-panel[data-settings-panel="view-data"] .dataTables_paginate {
        display: block !important;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_length {
        color: var(--secondary-foreground) !important;
        font-size: 0.875rem !important;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_length select {
        border: 1px solid var(--border) !important;
        border-radius: 0.375rem !important;
        padding: 0.25rem 2rem 0.25rem 0.5rem !important;
        background-color: transparent !important;
        color: var(--foreground) !important;
        margin: 0 0.5rem !important;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_info {
        color: var(--secondary-foreground) !important;
        font-size: 0.875rem !important;
        padding-top: 0 !important;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_paginate {
        padding-top: 0 !important;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_paginate .paginate_button {
        border: none !important;
        background: none !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0 2px !important;
        border-radius: 0.375rem !important;
        color: var(--secondary-foreground) !important;
        cursor: pointer !important;
    }

    .project-settings-panel[data-settings-panel="view-data"] .dataTables_paginate .paginate_button.current {
        background-color: var(--primary) !important;
        color: white !important;
    }

    #project_settings_view_data_table,
    #project_settings_view_data_table th,
    #project_settings_view_data_table td {
        border: 1px solid #e2e8f0 !important;
        border-collapse: collapse !important;
    }

    #project_settings_view_data_table td {
        padding: 12px 16px !important;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.8rem;
    }

    #project_settings_view_data_table .cell-content-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    #project_settings_view_data_table .cell-value {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #project_settings_view_data_table td .project-settings-cell-edit-btn {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, visibility 0.18s ease, background-color 0.18s ease;
    }

    #project_settings_view_data_table td:hover .project-settings-cell-edit-btn,
    #project_settings_view_data_table td:focus-within .project-settings-cell-edit-btn {
        opacity: 1;
        visibility: visible;
    }

    #project_settings_view_data_table thead th {
        background: #fafafa !important;
        color: #6b7280 !important;
        font-size: 0.74rem !important;
        font-weight: 500 !important;
        text-transform: none;
        white-space: nowrap;
        padding: 12px 14px !important;
    }

    #project_settings_view_data_table thead tr.project-settings-view-data-comment-row th {
        background: #ffffff !important;
        color: #9ca3af !important;
        font-size: 0.7rem !important;
        font-weight: 400 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #project_settings_view_data_table .project-settings-view-data-sticky-select,
    #project_settings_view_data_table .project-settings-view-data-sticky-id,
    #project_settings_view_data_table .project-settings-view-data-sticky-__id {
        position: sticky !important;
        z-index: 3;
    }

    #project_settings_view_data_table td.project-settings-view-data-sticky-select,
    #project_settings_view_data_table td.project-settings-view-data-sticky-id,
    #project_settings_view_data_table td.project-settings-view-data-sticky-__id {
        background: #ffffff !important;
    }

    #project_settings_view_data_table thead .project-settings-view-data-sticky-select,
    #project_settings_view_data_table thead .project-settings-view-data-sticky-id,
    #project_settings_view_data_table thead .project-settings-view-data-sticky-__id {
        z-index: 5;
    }

    #project_settings_view_data_table .project-settings-view-data-sticky-select {
        left: 0;
        min-width: 72px !important;
    }

    #project_settings_view_data_table .project-settings-view-data-sticky-id {
        left: 72px;
        min-width: 150px !important;
    }

    #project_settings_view_data_table .project-settings-view-data-sticky-__id {
        left: 222px;
        min-width: 170px !important;
    }

    .project-settings-panel[data-settings-panel="view-data"] table.dataTable,
    .project-settings-panel[data-settings-panel="view-data"] table.dataTable.no-footer {
        width: max-content !important;
        min-width: 1600px !important;
    }

    #project_settings_view_data_table tbody tr:hover {
        background-color: #f8fafc !important;
    }

    .project-settings-cell-modified {
        background-color: #dde5f9 !important;
        outline: 1px solid #c3d0f6;
    }

    .project-settings-editable-cell {
        width: 100%;
        font-size: 0.875rem;
        outline: 2px solid #2f6cf6;
        border: 1px solid #2f6cf6;
        border-radius: 4px;
        padding: 0.25rem 0.5rem;
        background: #fff;
    }

    .project-settings-cell-action {
        margin-left: 0.5rem;
        border: 0;
        background: transparent;
        color: #64748b;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        flex-shrink: 0;
    }

    .project-settings-cell-action:hover {
        background: #eff6ff;
        color: #2f6cf6;
    }

    .project-settings-cell-save-btn {
        width: auto;
        height: auto;
        padding: 0.35rem 0.65rem;
        color: #2f6cf6;
    }

    .project-settings-field {
        width: 100%;
        min-height: 36px;
        padding: 0.55rem 0.7rem;
        border: 1px solid #dad4cd;
        border-radius: 10px;
        background: #fff;
        color: #232323;
        font-size: 0.84rem;
        outline: none;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .project-settings-field:focus {
        border-color: #2f6cf6;
        box-shadow: 0 0 0 3px rgba(47, 108, 246, 0.12);
    }

    .project-settings-select {
        min-width: 198px;
        max-width: 100%;
    }

    .project-settings-pii {
        padding: 1.2rem;
    }

    .project-settings-label {
        display: block;
        margin-bottom: 0.55rem;
        color: #4b4b4b;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .project-settings-pii-box {
        border: 1px solid #e3ddd5;
        border-radius: 14px;
        background: #fff;
        padding: 0.85rem 1rem 0.95rem;
    }

    .project-settings-pii-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.8rem;
    }

    .project-settings-pii-title {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #242424;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .project-settings-checkbox {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #4b4b4b;
        font-size: 0.82rem;
        font-weight: 400;
        line-height: 1.4;
    }

    .project-settings-checkbox input {
        width: 14px;
        height: 14px;
        accent-color: #2f6cf6;
    }

    .project-settings-attr-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.9rem 1.25rem;
    }

    .project-settings-attr-list .project-settings-checkbox {
        display: flex;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
    }

    .project-settings-attr-list .project-settings-checkbox span {
        display: block;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .project-settings-user {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .project-settings-avatar {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: linear-gradient(135deg, #d8d8d8, #8f8f8f);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.78rem;
        font-weight: 600;
    }

    .project-settings-user-meta {
        display: grid;
        gap: 0.1rem;
    }

    .project-settings-user-meta strong {
        color: #232323;
        font-size: 0.82rem;
        font-weight: 600;
    }

    .project-settings-user-meta span {
        color: #888;
        font-size: 0.72rem;
    }

    .project-flow {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .project-flow-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .project-flow-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-top: 0.75rem;
    }

    .project-flow-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        color: #6b7280;
    }

    .project-step-panel {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .project-flow-card-title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .project-flow-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #2f66e8;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .project-flow-card-title h3 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: #1f2937;
    }

    .project-flow-field {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .project-flow-field label {
        font-size: 0.75rem;
        font-weight: 500;
        color: #374151;
    }

    .project-flow-input,
    .project-flow-select {
        width: 100%;
        height: 42px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #f3f4f6;
        color: #111827;
        font-size: 0.8125rem;
        padding: 0 12px;
        outline: none;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .project-flow-input:focus,
    .project-flow-select:focus {
        border-color: #2f66e8;
        background: #ffffff;
    }

    .project-flow-textarea {
        height: 42px;
    }

    .project-flow-select {
        appearance: auto;
    }

    .project-flow-select:disabled,
    .project-flow-input:disabled {
        opacity: 1;
        color: #111827;
        cursor: default;
    }

    .project-flow-heading {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #0f172a;
        line-height: 1.3;
    }

    .project-flow-subtitle {
        margin: 0.25rem 0 0;
        color: #9ca3af;
        font-size: 0.75rem;
    }

    .project-settings-source-switch {
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #eceff3;
        margin-bottom: 0.25rem;
    }

    .project-settings-source-panel {
        padding-top: 0.25rem;
    }

    .project-flow-toggle-row {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-top: -0.25rem;
    }

    .project-flow-toggle {
        position: relative;
        width: 38px;
        height: 22px;
        display: inline-block;
    }

    .project-flow-toggle input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .project-flow-toggle-slider {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: #d4d4d8;
        transition: background-color 0.2s ease;
        cursor: pointer;
    }

    .project-flow-toggle-slider::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        background: #fff;
        transition: transform 0.2s ease;
    }

    .project-flow-toggle input:checked + .project-flow-toggle-slider {
        background: #2f66e8;
    }

    .project-flow-toggle input:checked + .project-flow-toggle-slider::before {
        transform: translateX(16px);
    }

    .project-flow-toggle-label {
        font-size: 0.8125rem;
        color: #3f3f46;
        font-weight: 500;
        cursor: pointer;
    }

    .project-flow-subpanel.is-hidden,
    .project-flow-step.is-hidden {
        display: none;
    }

    .project-flow-dropzone {
        min-height: 58px;
        border: 1px dashed #bdbdbd;
        border-radius: 10px;
        background: #fafafa;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #8a8a8a;
        font-size: 0.6875rem;
        padding: 12px;
        cursor: pointer;
    }

    .project-flow-dropzone input {
        display: none;
    }

    @media (max-width: 991px) {
        .project-settings-head-actions,
        .project-settings-top-actions {
            width: 100%;
            justify-content: flex-end;
        }
    }

    @media (max-width: 767px) {
        .project-settings-title {
            font-size: 1.7rem;
        }

        .project-settings-tabs {
            gap: 0.5rem;
        }

        .project-settings-tab {
            font-size: 0.88rem;
        }

        .project-flow-grid {
            grid-template-columns: 1fr;
        }
    }

    .confirmation-modal {
        position: fixed;
        inset: 0;
        z-index: 1300;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        background: rgba(15, 23, 42, 0.45);
    }

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

    .confirmation-modal-dialog {
        width: min(420px, 100%);
        padding: 2rem;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .confirmation-modal-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #2f6cf6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        color: #fff;
        margin-bottom: 1rem;
    }

    .confirmation-modal-title {
        margin: 0 0 1rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #111827;
    }

    .confirmation-modal-message {
        color: #6b7280;
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }

    .confirmation-modal-buttons {
        display: flex;
        gap: 0.75rem;
        width: 100%;
        justify-content: center;
    }

    .confirmation-modal-btn {
        min-height: 40px;
        padding: 0 1.5rem;
        border-radius: 10px;
        font-size: 0.88rem;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .confirmation-modal-btn.btn-no {
        background: #f3f4f6;
        color: #6b7280;
        flex: 1;
    }

    .confirmation-modal-btn.btn-no:hover {
        background: #e5e7eb;
    }

    .confirmation-modal-btn.btn-yes {
        background: #2f6cf6;
        color: #fff;
        flex: 1;
    }

    .confirmation-modal-btn.btn-yes:hover {
        background: #1f4fd6;
    }

    .delete-confirmation-modal-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #ef4444;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        color: #fff;
        margin-bottom: 1rem;
    }

    .delete-confirmation-modal-title {
        margin: 0 0 1rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #111827;
    }

    .delete-confirmation-modal-message {
        color: #6b7280;
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }

    .delete-confirmation-modal-buttons {
        display: flex;
        gap: 0.75rem;
        width: 100%;
        justify-content: center;
    }

    .delete-confirmation-modal-btn {
        min-height: 40px;
        padding: 0 1.5rem;
        border-radius: 10px;
        font-size: 0.88rem;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .delete-confirmation-modal-btn.btn-no {
        background: #f3f4f6;
        color: #6b7280;
        flex: 1;
    }

    .delete-confirmation-modal-btn.btn-no:hover {
        background: #e5e7eb;
    }

    .delete-confirmation-modal-btn.btn-yes {
        background: #ef4444;
        color: #fff;
        flex: 1;
    }

    .delete-confirmation-modal-btn.btn-yes:hover {
        background: #dc2626;
    }
</style>

<div
    class="project-settings-shell"
    id="project_settings_page"
    data-project-id="{{ $currentProject->id }}"
    data-update-url="{{ route('tenants.projects.update') }}"
    data-projects-url="{{ route('projects.index') }}"
>
    <div class="project-settings-topbar">
        <div class="project-settings-heading">
            <h1 class="project-settings-title">Projects Settings</h1>
            <div class="project-settings-breadcrumb">Project/{{ $currentProject->name }}/Settings</div>
        </div>

        {{-- <div class="project-settings-top-actions">
            <button type="button" class="project-settings-ring" aria-label="Notifications">
                <i class="ki-filled ki-notification-status"></i>
            </button>
        </div> --}}
    </div>

    {{-- <div class="project-settings-head-actions">
        <button type="button" class="kt-btn project-settings-back" id="project_settings_back_btn">Back</button>
        @can('edit.projects')
        <button type="button" class="kt-btn kt-btn-primary project-settings-save" id="project_settings_save_btn" disabled>Save Changes</button>
        @else
        <button type="button" class="kt-btn kt-btn-primary project-settings-save" disabled>Save Changes</button>
        @endcan
    </div> --}}

    <div class="project-settings-tabs" role="tablist" aria-label="Project settings tabs">
        <button type="button" class="project-settings-tab is-active" data-settings-tab="general" aria-selected="true">General</button>
        <button type="button" class="project-settings-tab" data-settings-tab="data-source" aria-selected="false">Data Source</button>
        <button type="button" class="project-settings-tab" data-settings-tab="schema-design" aria-selected="false">Schema Design</button>
        <button type="button" class="project-settings-tab" data-settings-tab="import" aria-selected="false">Import</button>
        <button type="button" class="project-settings-tab" data-settings-tab="cron-scheduler" aria-selected="false">Cron Scheduler</button>
        <button type="button" class="project-settings-tab" data-settings-tab="pii-management" aria-selected="false">PII Management</button>
        <button type="button" class="project-settings-tab" data-settings-tab="view-data" aria-selected="false">View Data</button>
    </div>

    <section class="project-settings-panel is-active" data-settings-panel="general">
        <div class="project-settings-card">
            <div class="project-settings-card-head">
                <h2 class="project-settings-card-title">General Information</h2>
            </div>

            <div class="project-settings-table-wrap">
                <table class="project-settings-table">
                    <thead>
                        <tr>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Project Name</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Project Description</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Status</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Start Date</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Last Modified</span></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            id="project_settings_row"
                            data-name="{{ $currentProject->name }}"
                            data-description="{{ $currentProject->description ?? '' }}"
                            data-status="{{ $projectStatus }}"
                        >
                            <td data-project-setting-cell="name"><span class="project-settings-badge">{{ $currentProject->name }}</span></td>
                            <td data-project-setting-cell="description">{{ $projectDescription }}</td>
                            <td data-project-setting-cell="status">
                                <span class="project-settings-status {{ $projectStatus === 'active' ? '' : 'is-inactive' }}">
                                    {{ $projectStatus === 'active' ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td>{{ $createdDate }}</td>
                            <td id="project_settings_last_modified">{{ $updatedDate }}</td>
                            <td>
                                <div class="project-settings-row-actions">
                                    @can('edit.projects')
                                    <button type="button" class="project-settings-icon-btn" id="project_settings_edit_btn" aria-label="Edit project settings">
                                        <i class="ki-filled ki-notepad-edit"></i>
                                    </button>
                                    <button type="button" class="project-settings-icon-btn" id="project_settings_delete_btn" aria-label="Delete project">
                                        <i class="ki-filled ki-trash"></i>
                                    </button>
                                    @else
                                    <button type="button" class="project-settings-icon-btn" disabled aria-label="Edit project settings">
                                        <i class="ki-filled ki-notepad-edit"></i>
                                    </button>
                                    <button type="button" class="project-settings-icon-btn" disabled aria-label="Delete project">
                                        <i class="ki-filled ki-trash"></i>
                                    </button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6" class="project-settings-empty"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <section class="project-settings-panel" data-settings-panel="data-source">
        <div class="project-settings-card">
            <div class="project-settings-card-head">
                <h2 class="project-settings-card-title">
                    {{ $dataSourceType === 'api' ? 'API Connection Information' : ($dataSourceType === 'csv' ? 'CSV File Information' : 'ODK Connection Information') }}
                </h2>
            </div>
            <div class="project-settings-table-wrap">
                <table class="project-settings-table">
                    <thead>
                        @if($dataSourceType === 'api')
                            <tr>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> API Name</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> URL</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Auth</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Username</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Last Date</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Status</span></th>
                                <th></th>
                            </tr>
                        @elseif($dataSourceType === 'csv')
                            <tr>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> File Name</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> File Path</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Source</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Last Date</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Status</span></th>
                                <th></th>
                            </tr>
                        @else
                            <tr>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Server</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Project ID</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Form ID</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Auth</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Last Date</span></th>
                                <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Status</span></th>
                                <th></th>
                            </tr>
                        @endif
                    </thead>
                    <tbody>
                        @if($dataSourceConnection)
                            @if($dataSourceType === 'api')
                                <tr>
                                    <td>{{ $dataSourceConnection->name ?: 'API Data Source' }}</td>
                                    <td>{{ $dataSourceConnection->base_url ?: '--' }}</td>
                                    <td>{{ $dataSourceUsesToken ? 'Token' : 'Basic' }}</td>
                                    <td>{{ $dataSourceUsesToken ? 'Token Enabled' : ($dataSourceConnection->username ?: '--') }}</td>
                                    <td>{{ $dataSourceUpdatedDate }}</td>
                                    <td>
                                        <span class="project-settings-status {{ in_array($dataSourceStatus, ['active', 'configured', 'connected']) ? '' : 'is-inactive' }}">
                                            {{ ucfirst($dataSourceConnection->status ?? 'Configured') }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="project-settings-row-actions">
                                            <button type="button" class="project-settings-icon-btn" id="project_settings_data_source_edit_btn"><i class="ki-filled ki-notepad-edit"></i></button>
                                            <button type="button" class="project-settings-icon-btn"><i class="ki-filled ki-trash"></i></button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="7" class="project-settings-empty"></td>
                                </tr>
                            @elseif($dataSourceType === 'csv')
                                <tr>
                                    <td>{{ $dataSourceConnection->file_name ?: 'CSV File' }}</td>
                                    <td>{{ $dataSourceConnection->file_path ?: '--' }}</td>
                                    <td>{{ strtoupper($dataSourceType) }}</td>
                                    <td>{{ $dataSourceUpdatedDate }}</td>
                                    <td>
                                        <span class="project-settings-status {{ in_array($dataSourceStatus, ['active', 'configured', 'connected']) ? '' : 'is-inactive' }}">
                                            {{ ucfirst($dataSourceConnection->status ?? 'Configured') }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="project-settings-row-actions">
                                            <button type="button" class="project-settings-icon-btn" id="project_settings_data_source_edit_btn"><i class="ki-filled ki-notepad-edit"></i></button>
                                            <button type="button" class="project-settings-icon-btn"><i class="ki-filled ki-trash"></i></button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="6" class="project-settings-empty"></td>
                                </tr>
                            @else
                                <tr>
                                    <td>{{ $dataSourceConnection->base_url ?: '--' }}</td>
                                    <td>{{ $dataSourceConnection->project_id ?: '--' }}</td>
                                    <td>{{ $dataSourceConnection->form_id ?: '--' }}</td>
                                    <td>{{ $dataSourceUsesToken ? 'Token' : 'Basic' }}</td>
                                    <td>{{ $dataSourceUpdatedDate }}</td>
                                    <td>
                                        <span class="project-settings-status {{ in_array($dataSourceStatus, ['active', 'configured', 'connected']) ? '' : 'is-inactive' }}">
                                            {{ ucfirst($dataSourceConnection->status ?? 'Configured') }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="project-settings-row-actions">
                                            <button type="button" class="project-settings-icon-btn" id="project_settings_data_source_edit_btn"><i class="ki-filled ki-notepad-edit"></i></button>
                                            <button type="button" class="project-settings-icon-btn"><i class="ki-filled ki-trash"></i></button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="7" class="project-settings-empty"></td>
                                </tr>
                            @endif
                        @else
                            <tr>
                                <td colspan="{{ $dataSourceColspan }}" class="project-settings-empty text-center">No data source configured yet.</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <section class="project-settings-panel" data-settings-panel="schema-design">
        <div class="project-settings-card">
            <div class="project-settings-card-head">
                <h2 class="project-settings-card-title">Schema Design Information</h2>
            </div>
            <div class="project-settings-table-wrap">
                <table class="project-settings-table">
                    <thead>
                        <tr>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Schema File</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Generated By</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Generated At</span></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($schemaHistories as $schemaHistory)
                            @php
                                $latestSchemaImport = $importHistories
                                    ->where('schema_history_id', $schemaHistory->id)
                                    ->sortByDesc('created_at')
                                    ->first();
                                $schemaFileName = filled($schemaHistory->schema_file)
                                    ? basename((string) $schemaHistory->schema_file)
                                    : 'N/A';
                                $generatedBy = $schemaHistory->user?->name
                                    ?? $latestSchemaImport?->user?->name
                                    ?? 'N/A';
                                $generatedAt = optional($schemaHistory->created_at)->format('F, d, Y') ?? 'N/A';
                            @endphp
                            <tr>
                                <td>{{ $schemaFileName }}</td>
                                <td>{{ $generatedBy }}</td>
                                <td>{{ $generatedAt }}</td>
                                <td>
                                    <div class="project-settings-row-actions">
                                        <a href="{{ $schemaDesignUrl }}" class="project-settings-icon-btn" title="Open Schema Design" aria-label="Open Schema Design">
                                            <i class="ki-filled ki-notepad-edit"></i>
                                        </a>
                                        <button type="button" class="project-settings-icon-btn" title="Delete Schema" aria-label="Delete Schema">
                                            <i class="ki-filled ki-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="project-settings-empty text-center">No schema generated yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <section class="project-settings-panel" data-settings-panel="import">
        <div class="project-settings-head-actions mb-3">
            @can('process.import')
            <button type="button" id="project_settings_import_btn" class="px-2 kt-btn common-secondary-btn" @if(!$dataSourceConnection || $dataSourceType !== 'odk') disabled @endif>
                <i class="ki-filled ki-exit-down"></i>
                <span>Import</span>
            </button>
            @endcan
        </div>
        <div class="project-settings-card">
            <div class="project-settings-card-head">
                <h2 class="project-settings-card-title">Import Information</h2>
            </div>
            <div class="project-settings-table-wrap">
                <table class="project-settings-table">
                    <thead>
                        <tr>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Imported By</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Imported Date</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Total Records</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Form ID</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Status</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($importHistories as $history)
                            @php
                                $importStatus = strtolower($history->status ?? 'failed');
                                $isImportSuccess = $importStatus === 'success';
                            @endphp
                            <tr>
                                <td>{{ $history->user?->name ?? 'N/A' }}</td>
                                <td>{{ optional($history->created_at)->format('F, d, Y') ?? 'N/A' }}</td>
                                <td>{{ $history->total_imported ?? 'N/A' }}</td>
                                <td>{{ $history->odkConnection?->form_id ?? 'N/A' }}</td>
                                <td>
                                    <span class="project-settings-status {{ $isImportSuccess ? '' : 'is-inactive' }}">
                                        {{ ucfirst($importStatus) }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="project-settings-empty">No import history available yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <section class="project-settings-panel" data-settings-panel="pii-management">
        <div class="project-settings-card">
            <div class="project-settings-card-head">
                <h2 class="project-settings-card-title">PII Management</h2>
            </div>
            <div class="project-settings-pii">
                @can('view.pii_management')
                <div class="mb-4">
                    <label class="project-settings-label" for="project_settings_role">Role</label>
                    <select id="project_settings_role" class="project-settings-field project-settings-select">
                        <option value="">Select Role</option>
                        @foreach($roles as $role)
                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="project-settings-label">Dataset Attributes</label>
                    @if($groupedPiiAttributes->isNotEmpty())
                    <div class="mb-4 flex justify-end">
                        <label class="project-settings-checkbox">
                            <input type="checkbox" id="project_settings_select_all_global">
                            <span>Select All</span>
                        </label>
                    </div>

                    <div class="flex flex-col gap-4">
                        @foreach($groupedPiiAttributes as $tableName => $tableAttributes)
                            @php $tableSlug = \Illuminate\Support\Str::slug($tableName); @endphp
                            <div class="project-settings-pii-box" data-section="{{ $tableSlug }}">
                                <div class="project-settings-pii-head">
                                    <div class="project-settings-pii-title">
                                        <i class="ki-filled ki-profile-user"></i>
                                        <span>{{ $tableName }}</span>
                                    </div>
                                    <label class="project-settings-checkbox">
                                        <input type="checkbox" class="project-settings-section-checkbox" data-target-section="{{ $tableSlug }}" id="project_settings_section_{{ $tableSlug }}">
                                        <span>Select All</span>
                                    </label>
                                </div>
                                <div class="project-settings-attr-list">
                                    @foreach($tableAttributes as $index => $attribute)
                                    <label class="project-settings-checkbox">
                                        <input
                                            type="checkbox"
                                            class="project-settings-attribute-checkbox"
                                            data-section="{{ $tableSlug }}"
                                            value="{{ $attribute['table'] }}::{{ $attribute['column'] }}"
                                            id="project_settings_attr_{{ $tableSlug }}_{{ $index }}"
                                        >
                                        <span>{{ $attribute['label'] }}</span>
                                    </label>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>

                    @can('edit.pii_management')
                    <div class="mt-5 flex justify-end">
                        <button type="button" class="kt-btn common-secondary-btn project-settings-save" id="project_settings_pii_save_btn">Save Changes</button>
                    </div>
                    @endcan
                    @else
                    <div class="project-settings-pii-box">No dataset attributes found in the connected database.</div>
                    @endif
                </div>
                @else
                <div class="project-settings-pii-box">You do not have permission to view PII Management.</div>
                @endcan
            </div>
        </div>
    </section>

    <section class="project-settings-panel" data-settings-panel="cron-scheduler">
        <div class="project-settings-head-actions mb-3">
            @can('create.cron_scheduler')
            <button type="button" id="project_settings_add_schedule_btn" class="px-2 kt-btn common-secondary-btn" data-kt-modal-toggle="#add_schedule_modal">
                <i class="ki-filled ki-plus"></i>
                <span>Add Schedule</span>
            </button>
            @endcan
        </div>
        <div class="project-settings-card">
            <div class="project-settings-card-head">
                <h2 class="project-settings-card-title">Cron Scheduler</h2>
            </div>
            <div class="project-settings-table-wrap">
                <table class="project-settings-table">
                    <thead>
                        <tr>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Schedule Name</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> ODK Connection</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Frequency</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Time</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Last Run</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Next Run</span></th>
                            <th><span class="project-settings-sort"><i class="ki-filled ki-arrow-sort"></i> Status</span></th>
                            @canany(['edit.cron_scheduler', 'delete.cron_scheduler', 'run.cron_scheduler', 'toggle.cron_scheduler'])
                            <th><span class="project-settings-sort">Actions</span></th>
                            @endcanany
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($cronSchedules as $schedule)
                        <tr>
                            <td>{{ $schedule->name ?: '--' }}</td>
                            <td>
                                <div class="flex flex-col">
                                    <span>{{ $schedule->odkConnection?->form_id ?: 'N/A' }}</span>
                                    <span class="text-xs text-gray-400">{{ $schedule->odkConnection?->base_url ?: '' }}</span>
                                </div>
                            </td>
                            <td>
                                <span>{{ ucfirst($schedule->frequency ?: '--') }}</span>
                                @if($schedule->frequency === 'weekly' && $schedule->day_of_week)
                                    <span class="block text-xs text-gray-400">{{ ucfirst($schedule->day_of_week) }}</span>
                                @endif
                                @if($schedule->frequency === 'monthly' && $schedule->day_of_month)
                                    <span class="block text-xs text-gray-400">Day {{ $schedule->day_of_month }}</span>
                                @endif
                            </td>
                            <td>{{ $schedule->time ?: '--' }}</td>
                            <td>{{ $schedule->last_run_at ? $schedule->last_run_at->format('M d, Y H:i') : 'Never' }}</td>
                            <td>{{ $schedule->next_run_at ? $schedule->next_run_at->format('M d, Y H:i') : 'N/A' }}</td>
                            <td>
                                <span class="project-settings-status {{ $schedule->is_active ? '' : 'is-inactive' }} cron-status-badge-display" data-id="{{ $schedule->id }}">
                                    {{ $schedule->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            @canany(['edit.cron_scheduler', 'delete.cron_scheduler', 'run.cron_scheduler', 'toggle.cron_scheduler'])
                            <td>
                                <div class="project-settings-row-actions">
                                    @can('toggle.cron_scheduler')
                                    <button type="button" class="project-settings-icon-btn cron-toggle-status-btn" data-id="{{ $schedule->id }}" data-status="{{ $schedule->is_active ? 'inactive' : 'active' }}" title="{{ $schedule->is_active ? 'Set inactive' : 'Set active' }}">
                                        <i class="ki-filled {{ $schedule->is_active ? 'ki-cross-circle' : 'ki-check-circle' }}"></i>
                                    </button>
                                    @endcan
                                    @can('run.cron_scheduler')
                                    <button type="button" class="project-settings-icon-btn run-now-btn" data-id="{{ $schedule->id }}" title="Run Now">
                                        <i class="ki-filled ki-rocket"></i>
                                    </button>
                                    @endcan
                                    @can('edit.cron_scheduler')
                                    <button type="button" class="project-settings-icon-btn edit-schedule-btn" data-id="{{ $schedule->id }}" title="Edit">
                                        <i class="ki-filled ki-notepad-edit"></i>
                                    </button>
                                    @endcan
                                    @can('delete.cron_scheduler')
                                    <button type="button" class="project-settings-icon-btn delete-schedule-btn" data-id="{{ $schedule->id }}" title="Delete">
                                        <i class="ki-filled ki-trash"></i>
                                    </button>
                                    @endcan
                                </div>
                            </td>
                            @endcanany
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="project-settings-empty text-center">No cron schedules configured yet.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <section class="project-settings-panel" data-settings-panel="view-data">
        <div class="project-settings-view-data-toolbar">
            <div class="project-settings-view-data-spacer"></div>
            <div class="project-settings-view-data-actions">
                @can('delete.view_data')
                <button type="button" id="project_settings_delete_selected" class="kt-btn project-settings-view-data-btn is-secondary min-w-[170px]">
                    Delete Submission
                </button>
                @endcan
                @can('edit.view_data')
                <button type="button" id="project_settings_update_dataset" class="kt-btn project-settings-view-data-btn is-primary min-w-[170px]">
                    Send For Approval
                </button>
                @endcan
            </div>
        </div>
        <div class="project-settings-card">
            <div class="project-settings-card-head">
                <div class="project-settings-view-data-head">
                    <h2 class="project-settings-card-title">View Data</h2>
                    <select id="project_settings_view_data_field_select" class="project-settings-field project-settings-view-data-filter" multiple>
                        </select>
                </div>
            </div>
            <div class="project-settings-table-wrap">
                <div class="project-settings-view-data-scroll">
                    <table id="project_settings_view_data_table" class="kt-table kt-table-border w-full">
                        <thead></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</div>

@can('edit.projects')
<div class="kt-modal" data-kt-modal="true" id="project_settings_edit_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Edit Project</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 p-5 lg:p-7.5">
            <form action="" method="POST" id="project_settings_edit_form" class="project-flow">
                @csrf
                <input type="hidden" name="project_id" id="edit_project_id" value="{{ $currentProject->id }}">

                <section class="project-flow-step project-step-panel">
                    <div class="project-flow-card-title">
                        <span class="project-flow-card-icon">
                            <i class="ki-filled ki-document text-lg"></i>
                        </span>
                        <h3>Add Projects</h3>
                    </div>

                    <div class="project-flow-field">
                        <label for="edit_name">Project Name*</label>
                        <input
                            type="text"
                            id="edit_name"
                            name="name"
                            class="project-flow-input"
                            value="{{ $currentProject->name }}"
                            required
                        />
                    </div>

                    <div class="project-flow-field">
                        <label for="edit_description">Project Description (optional)</label>
                        <input type="text" name="description" id="edit_description" class="project-flow-input" value="{{ $currentProject->description }}">
                    </div>

                    <div class="project-flow-grid">
                        <div class="project-flow-field">
                            <label for="edit_date_format">Date Format*</label>
                            <select id="edit_date_format" name="date_format" class="project-flow-select">
                                <option value="">Select</option>
                                <option value="d/m/Y" {{ ($currentProject->date_format ?? '') === 'd/m/Y' ? 'selected' : '' }}>DD/MM/YYYY</option>
                                <option value="m/d/Y" {{ ($currentProject->date_format ?? '') === 'm/d/Y' ? 'selected' : '' }}>MM/DD/YYYY</option>
                                <option value="Y-m-d" {{ ($currentProject->date_format ?? '') === 'Y-m-d' ? 'selected' : '' }}>YYYY-MM-DD</option>
                            </select>
                        </div>
                        <div class="project-flow-field">
                            <label for="edit_status">Status</label>
                            <select id="edit_status" name="status" class="project-flow-select">
                                <option value="active" {{ $projectStatus === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ $projectStatus === 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex justify-end gap-3 pt-3 modal-btns">
                        <button type="button" class="kt-btn kt-btn-light cancel min-w-[80px]" data-kt-modal-dismiss="true">Cancel</button>
                        <button type="submit" class="kt-btn common-secondary-btn min-w-[80px] save" id="project_settings_modal_save_btn">Update</button>
                    </div>
                </section>
            </form>
        </div>
    </div>
</div>

<div class="kt-modal" data-kt-modal="true" id="project_settings_data_source_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Edit Data Source</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 p-5 lg:p-7.5">
            <form id="project_settings_data_source_form" class="project-flow">
                @csrf
                <input type="hidden" name="tenant_id" value="{{ $currentProject->id }}">
                <input type="hidden" name="data_source_type" id="settings_data_source_type" value="{{ $dataSourceType }}">

                <section class="project-flow-step project-step-panel project-settings-source-switch" data-settings-source-step="source">
                    <div class="project-flow-field">
                        <label for="settings_data_source_type_select">Data Source*</label>
                        <select id="settings_data_source_type_select" class="project-flow-select">
                            <option value="odk">ODK Connection</option>
                            <option value="api">API Server</option>
                            <option value="csv">CSV File</option>
                        </select>
                    </div>
                </section>

                <section class="project-flow-step project-step-panel project-settings-source-panel" data-settings-source-step="odk">
                    <div>
                        <h3 class="project-flow-heading">ODK Central Connection</h3>
                        <p class="project-flow-subtitle">Projects/{{ $currentProject->name }}/Data Source/ODK Connection</p>
                    </div>

                    <div class="project-flow-field">
                        <label for="settings_server_url">Server URL*</label>
                        <input id="settings_server_url" name="server_url" type="text" class="project-flow-input" />
                    </div>

                    <div class="project-flow-field">
                        <label for="settings_odk_project_id">Project ID*</label>
                        <input id="settings_odk_project_id" name="odk_project_id" type="text" class="project-flow-input" />
                    </div>

                    <div class="project-flow-toggle-row">
                        <label class="project-flow-toggle" for="settings_use_auth_token">
                            <input id="settings_use_auth_token" name="use_auth_token" type="checkbox" value="1">
                            <span class="project-flow-toggle-slider" aria-hidden="true"></span>
                        </label>
                        <label for="settings_use_auth_token" class="project-flow-toggle-label">Use Auth Token</label>
                    </div>

                    <div id="settings_odk_token_panel" class="project-flow-subpanel is-hidden">
                        <div class="project-flow-field">
                            <label for="settings_odk_auth_token">Auth Token*</label>
                            <input id="settings_odk_auth_token" name="odk_auth_token" type="text" class="project-flow-input" placeholder="Leave blank to keep existing token" />
                        </div>
                    </div>

                    <div id="settings_odk_credentials_panel" class="project-flow-subpanel">
                        <div class="project-flow-field">
                            <label for="settings_odk_email">Email/Username*</label>
                            <input id="settings_odk_email" name="odk_email" type="text" class="project-flow-input" />
                        </div>

                        <div class="project-flow-field">
                            <label for="settings_odk_password">Password*</label>
                            <input id="settings_odk_password" name="odk_password" type="password" class="project-flow-input" placeholder="Leave blank to keep existing password" />
                        </div>
                    </div>

                    <div class="project-flow-actions">
                        <button type="button" class="kt-btn common-secondary-btn min-w-[150px]" id="settings_test_odk_btn">Test Connection</button>
                        <button type="submit" class="kt-btn common-secondary-btn min-w-[96px]" id="settings_save_odk_btn">Save</button>
                    </div>
                </section>

                <section class="project-flow-step project-step-panel project-settings-source-panel is-hidden" data-settings-source-step="api">
                    <div>
                        <h3 class="project-flow-heading">API Data Source</h3>
                        <p class="project-flow-subtitle">Projects/{{ $currentProject->name }}/Data Source/API Connection</p>
                    </div>

                    <div class="project-flow-field">
                        <label for="settings_api_url">API URL*</label>
                        <input id="settings_api_url" name="api_url" type="text" class="project-flow-input" />
                    </div>

                    <div class="project-flow-toggle-row">
                        <label class="project-flow-toggle" for="settings_use_api_auth_token">
                            <input id="settings_use_api_auth_token" name="use_api_auth_token" type="checkbox" value="1">
                            <span class="project-flow-toggle-slider" aria-hidden="true"></span>
                        </label>
                        <label for="settings_use_api_auth_token" class="project-flow-toggle-label">Use Auth Token</label>
                    </div>

                    <div id="settings_api_token_panel" class="project-flow-subpanel is-hidden">
                        <div class="project-flow-field">
                            <label for="settings_api_auth_token">Auth Token</label>
                            <input id="settings_api_auth_token" name="api_auth_token" type="text" class="project-flow-input" placeholder="Leave blank to keep existing token" />
                        </div>
                    </div>

                    <div id="settings_api_credentials_panel" class="project-flow-subpanel">
                        <div class="project-flow-field">
                            <label for="settings_api_email">Email/Username*</label>
                            <input id="settings_api_email" name="api_email" type="text" class="project-flow-input" />
                        </div>

                        <div class="project-flow-field">
                            <label for="settings_api_password">Password</label>
                            <input id="settings_api_password" name="api_password" type="password" class="project-flow-input" placeholder="Leave blank to keep existing password" />
                        </div>
                    </div>

                    <div class="project-flow-actions">
                        <span></span>
                        <button type="submit" class="kt-btn common-secondary-btn min-w-[96px]" id="settings_save_api_btn">Save</button>
                    </div>
                </section>

                <section class="project-flow-step project-step-panel project-settings-source-panel is-hidden" data-settings-source-step="csv">
                    <div>
                        <h3 class="project-flow-heading">CSV Data Source</h3>
                        <p class="project-flow-subtitle">Projects/{{ $currentProject->name }}/Data Source/CSV Connection</p>
                    </div>

                    <div class="project-flow-field">
                        <label for="settings_csv_file">Upload CSV File</label>
                        <label class="project-flow-dropzone" for="settings_csv_file" id="settings_csv_dropzone_text">
                            Drag and Drop The file here, or click to browse
                            <input id="settings_csv_file" name="csv_file" type="file" accept=".csv,text/csv" />
                        </label>
                    </div>

                    <div class="project-flow-actions">
                        <span></span>
                        <button type="submit" class="kt-btn common-secondary-btn min-w-[96px]" id="settings_save_csv_btn">Save</button>
                    </div>
                </section>
            </form>
        </div>
    </div>
</div>

@can('create.cron_scheduler')
<div class="kt-modal" data-kt-modal="true" id="add_schedule_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Add Cron Schedule</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 p-5 lg:p-7.5">
            <form id="add_schedule_form" class="flex flex-col gap-6">
                @csrf
                <input type="hidden" name="tenant_id" value="{{ $id }}">

                <div class="flex flex-col gap-2">
                    <label for="schedule_name" class="text-sm font-semibold text-foreground">Schedule Name</label>
                    <div class="kt-input">
                        <input type="text" name="name" id="schedule_name" placeholder="Daily Import" required />
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="odk_connection_id" class="text-sm font-semibold text-foreground">ODK Connection</label>
                    <div class="kt-select p-0">
                        <select name="odk_connection_id" id="odk_connection_id" required style="width:100%">
                            <option value="">Select Connection</option>
                            @foreach($cronConnections as $connection)
                                <option value="{{ $connection->id }}">{{ $connection->form_id }} - {{ $connection->base_url }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="frequency" class="text-sm font-semibold text-foreground">Frequency</label>
                    <div class="kt-select p-0">
                        <select name="frequency" id="frequency" required style="width:100%">
                            <option value="">Select Frequency</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="custom">Custom</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="day_of_week_container" style="display:none;">
                    <label for="day_of_week" class="text-sm font-semibold text-foreground">Day of Week</label>
                    <div class="kt-select p-0">
                        <select name="day_of_week" id="day_of_week" style="width:100%">
                            <option value="">Select Day</option>
                            <option value="monday">Monday</option>
                            <option value="tuesday">Tuesday</option>
                            <option value="wednesday">Wednesday</option>
                            <option value="thursday">Thursday</option>
                            <option value="friday">Friday</option>
                            <option value="saturday">Saturday</option>
                            <option value="sunday">Sunday</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="day_of_month_container" style="display:none;">
                    <label for="day_of_month" class="text-sm font-semibold text-foreground">Day of Month</label>
                    <div class="kt-input">
                        <input type="number" name="day_of_month" id="day_of_month" min="1" max="31" placeholder="1-31" />
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="cron_expression_container" style="display:none;">
                    <label for="cron_expression" class="text-sm font-semibold text-foreground">Cron Expression</label>
                    <div class="kt-input">
                        <input type="text" name="cron_expression" id="cron_expression" placeholder="0 0 * * *" />
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="time" class="text-sm font-semibold text-foreground">Time</label>
                    <div class="kt-input">
                        <input type="time" name="time" id="time" required />
                    </div>
                </div>

                <div class="flex justify-end gap-3 pt-3 modal-btns">
                    <button type="button" class="kt-btn min-w-[80px] cancel" data-kt-modal-dismiss="true">Cancel</button>
                    <button type="submit" class="kt-btn common-secondary-btn min-w-[80px] save">Create</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan

@can('edit.cron_scheduler')
<div class="kt-modal" data-kt-modal="true" id="edit_schedule_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Edit Cron Schedule</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 p-5 lg:p-7.5">
            <form id="edit_schedule_form" class="flex flex-col gap-6">
                @csrf
                <input type="hidden" name="schedule_id" id="edit_schedule_id">

                <div class="flex flex-col gap-2">
                    <label for="edit_schedule_name" class="text-sm font-semibold text-foreground">Schedule Name</label>
                    <div class="kt-input">
                        <input type="text" name="name" id="edit_schedule_name" placeholder="Daily Import" required />
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="edit_odk_connection_id" class="text-sm font-semibold text-foreground">ODK Connection</label>
                    <div class="kt-select p-0">
                        <select name="odk_connection_id" id="edit_odk_connection_id" required style="width:100%">
                            <option value="">Select Connection</option>
                            @foreach($cronConnections as $connection)
                                <option value="{{ $connection->id }}">{{ $connection->form_id }} - {{ $connection->base_url }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="edit_frequency" class="text-sm font-semibold text-foreground">Frequency</label>
                    <div class="kt-select p-0">
                        <select name="frequency" id="edit_frequency" required style="width:100%">
                            <option value="">Select Frequency</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="custom">Custom</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="edit_day_of_week_container" style="display:none;">
                    <label for="edit_day_of_week" class="text-sm font-semibold text-foreground">Day of Week</label>
                    <div class="kt-select p-0">
                        <select name="day_of_week" id="edit_day_of_week" style="width:100%">
                            <option value="">Select Day</option>
                            <option value="monday">Monday</option>
                            <option value="tuesday">Tuesday</option>
                            <option value="wednesday">Wednesday</option>
                            <option value="thursday">Thursday</option>
                            <option value="friday">Friday</option>
                            <option value="saturday">Saturday</option>
                            <option value="sunday">Sunday</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="edit_day_of_month_container" style="display:none;">
                    <label for="edit_day_of_month" class="text-sm font-semibold text-foreground">Day of Month</label>
                    <div class="kt-input">
                        <input type="number" name="day_of_month" id="edit_day_of_month" min="1" max="31" placeholder="1-31" />
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="edit_cron_expression_container" style="display:none;">
                    <label for="edit_cron_expression" class="text-sm font-semibold text-foreground">Cron Expression</label>
                    <div class="kt-input">
                        <input type="text" name="cron_expression" id="edit_cron_expression" placeholder="0 0 * * *" />
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="edit_time" class="text-sm font-semibold text-foreground">Time</label>
                    <div class="kt-input">
                        <input type="time" name="time" id="edit_time" required />
                    </div>
                </div>

                <div class="flex justify-end gap-3 pt-3 modal-btns">
                    <button type="button" class="kt-btn min-w-[80px] cancel" data-kt-modal-dismiss="true">Cancel</button>
                    <button type="submit" class="kt-btn common-secondary-btn min-w-[80px] save">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan

@canany(['run.cron_scheduler', 'process.import'])
<div class="kt-modal shadow" data-kt-modal="true" id="progress_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[500px] top-[20%] shadow">
        <div class="kt-modal-body p-10">
            <div class="flex flex-col items-center gap-5 text-center">
                <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
                <div class="flex flex-col gap-2">
                    <h3 class="text-lg font-semibold text-foreground">Running Import</h3>
                    <p class="text-sm text-muted-foreground">Please wait, we are importing data from ODK Central.</p>
                </div>
                <div class="w-full bg-secondary rounded-full h-2 mt-4 overflow-hidden">
                    <div class="bg-primary h-full w-0" id="importProgress"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endcanany
@endcan

<div class="confirmation-modal" id="sendApprovalConfirmationModal" aria-hidden="true">
    <div class="confirmation-modal-dialog" role="dialog" aria-modal="true">
        <div class="confirmation-modal-icon">
            <i class="ki-filled ki-check"></i>
        </div>
        <h2 class="confirmation-modal-title">Are You Sure To Send This For Approval?</h2>
        <p class="confirmation-modal-message">This action cannot be undone.</p>
        <div class="confirmation-modal-buttons">
            <button type="button" class="confirmation-modal-btn btn-no" id="sendApprovalModalNo">No</button>
            <button type="button" class="confirmation-modal-btn btn-yes" id="sendApprovalModalYes">Yes</button>
        </div>
    </div>
</div>

<div class="confirmation-modal" id="deleteSubmissionConfirmationModal" aria-hidden="true">
    <div class="confirmation-modal-dialog" role="dialog" aria-modal="true">
        <div class="delete-confirmation-modal-icon">
            <i class="ki-filled ki-cross"></i>
        </div>
        <h2 class="delete-confirmation-modal-title">Are You Sure To Delete This Submission?</h2>
        <p class="delete-confirmation-modal-message">This action cannot be undone.</p>
        <div class="delete-confirmation-modal-buttons">
            <button type="button" class="delete-confirmation-modal-btn btn-no" id="deleteSubmissionModalNo">No</button>
            <button type="button" class="delete-confirmation-modal-btn btn-yes" id="deleteSubmissionModalYes">Yes</button>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    let pendingUpdateDataset = false;

    function openSendApprovalConfirmationModal() {
        const $modal = $('#sendApprovalConfirmationModal');
        $modal.addClass('is-open').attr('aria-hidden', 'false');
        $('body').css('overflow', 'hidden');
    }

    function closeSendApprovalConfirmationModal() {
        const $modal = $('#sendApprovalConfirmationModal');
        $modal.removeClass('is-open').attr('aria-hidden', 'true');
        $('body').css('overflow', '');
        pendingUpdateDataset = false;
    }

    let pendingDeleteSubmission = false;
    let pendingDeleteRows = [];

    function openDeleteSubmissionConfirmationModal(rowCount) {
        const $modal = $('#deleteSubmissionConfirmationModal');
        const title = `Are You Sure To Delete This Submission${rowCount > 1 ? 's' : ''}?`;
        $modal.find('.delete-confirmation-modal-title').text(title);
        $modal.addClass('is-open').attr('aria-hidden', 'false');
        $('body').css('overflow', 'hidden');
    }

    function closeDeleteSubmissionConfirmationModal() {
        const $modal = $('#deleteSubmissionConfirmationModal');
        $modal.removeClass('is-open').attr('aria-hidden', 'true');
        $('body').css('overflow', '');
        pendingDeleteSubmission = false;
        pendingDeleteRows = [];
    }

    function sendDataForApprovalToBackend() {
        // Access the edited rows from the original handler's scope via window
        if (!window.projectSettingsEditedViewDataRows || !Object.keys(window.projectSettingsEditedViewDataRows).length) {
            toastr.info('No changes detected to submit.');
            return;
        }

        const payload = [];
        const config = window.projectSettingsConfig || {};
        const viewDataConfig = config.viewData || {};

        Object.keys(window.projectSettingsEditedViewDataRows).forEach((uuid) => {
            const originalRow = window.projectSettingsOriginalViewDataRowsByUuid[uuid];
            const changes = {};

            Object.keys(window.projectSettingsEditedViewDataRows[uuid]).forEach((colId) => {
                const oldValue = window.getViewDataRawValueFunc(originalRow, colId);
                const newValue = window.projectSettingsEditedViewDataRows[uuid][colId];

                if (String(oldValue ?? '') !== String(newValue ?? '')) {
                    changes[colId] = { old: oldValue, new: newValue };
                }
            });

            if (Object.keys(changes).length) {
                payload.push({ uuid, changes });
            }
        });

        if (!payload.length) {
            toastr.info('No changes detected to submit.');
            return;
        }

        // Send AJAX request to backend
        $.ajax({
            url: viewDataConfig.updateUrl,
            method: 'POST',
            data: {
                module_id: viewDataConfig.moduleId,
                project_id: config.projectId,
                project_name: config.projectSlug,
                rows: payload,
            },
            success: function (response) {
                toastr.success(response.message || 'Data submitted successfully for approval.');
                setTimeout(() => window.location.reload(), 800);
            },
            error: function (xhr) {
                toastr.error(xhr.responseJSON?.message || 'Error submitting data for approval.');
            },
        });
    }

    function deleteSubmissionsToBackend() {
        // Access the selected rows
        if (!pendingDeleteRows || !pendingDeleteRows.length) {
            toastr.error('No rows selected for deletion.');
            return;
        }

        const config = window.projectSettingsConfig || {};
        const viewDataConfig = config.viewData || {};

        // Send AJAX request to backend
        $.ajax({
            url: viewDataConfig.deleteUrl,
            method: 'POST',
            data: {
                module_id: viewDataConfig.moduleId,
                project_id: config.projectId,
                project_name: config.projectSlug,
                rows: pendingDeleteRows,
            },
            success: function (response) {
                toastr.success(response.message || 'Delete request submitted successfully.');
                setTimeout(() => window.location.reload(), 800);
            },
            error: function (xhr) {
                toastr.error(xhr.responseJSON?.message || 'Error submitting delete request.');
            },
        });
    }

    // This will be called after project-settings.js loads to override the handler
    function initializeApprovalModalHandler() {
        const $updateDatasetBtn = $('#project_settings_update_dataset');
        const $deleteSubmissionBtn = $('#project_settings_delete_selected');
        const $sendModal = $('#sendApprovalConfirmationModal');
        const $deleteModal = $('#deleteSubmissionConfirmationModal');
        const $sendModalYesBtn = $('#sendApprovalModalYes');
        const $sendModalNoBtn = $('#sendApprovalModalNo');
        const $deleteModalYesBtn = $('#deleteSubmissionModalYes');
        const $deleteModalNoBtn = $('#deleteSubmissionModalNo');

        if ($updateDatasetBtn.length === 0 && $deleteSubmissionBtn.length === 0) {
            return;
        }

        // Check if variables are available yet
        if (!window.projectSettingsEditedViewDataRows || !window.projectSettingsOriginalViewDataRowsByUuid || !window.getViewDataRawValueFunc) {
            // Retry after a short delay
            setTimeout(initializeApprovalModalHandler, 100);
            return;
        }

        // ===== SEND FOR APPROVAL MODAL HANDLERS =====
        if ($updateDatasetBtn.length > 0) {
            // Replace the click handler to show modal instead
            $updateDatasetBtn.off('click').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                
                // Check if there are changes
                const hasChanges = Object.keys(window.projectSettingsEditedViewDataRows || {}).length > 0;
                
                if (!hasChanges) {
                    toastr.info('No changes detected to submit.');
                    return;
                }
                
                pendingUpdateDataset = true;
                openSendApprovalConfirmationModal();
            });

            // Handle Yes button click for Send Approval
            $sendModalYesBtn.off('click').on('click', function () {
                if (pendingUpdateDataset) {
                    closeSendApprovalConfirmationModal();
                    sendDataForApprovalToBackend();
                }
            });

            // Handle No button click for Send Approval
            $sendModalNoBtn.off('click').on('click', function () {
                closeSendApprovalConfirmationModal();
            });

            // Close send modal when clicking outside
            $sendModal.on('click', function (event) {
                if ($(event.target).is($sendModal)) {
                    closeSendApprovalConfirmationModal();
                }
            });
        }

        // ===== DELETE SUBMISSION MODAL HANDLERS =====
        if ($deleteSubmissionBtn.length > 0) {
            // Replace the click handler to show modal instead
            $deleteSubmissionBtn.off('click').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                
                // Collect selected rows
                const selectedRows = [];
                $('#project_settings_view_data_table tbody .project-settings-row-select:checked').each(function () {
                    selectedRows.push($(this).data('uuid'));
                });

                if (!selectedRows.length) {
                    toastr.error('No rows selected for deletion.');
                    return;
                }

                // Store rows and show modal
                pendingDeleteSubmission = true;
                pendingDeleteRows = selectedRows;
                openDeleteSubmissionConfirmationModal(selectedRows.length);
            });

            // Handle Yes button click for Delete
            $deleteModalYesBtn.off('click').on('click', function () {
                if (pendingDeleteSubmission) {
                    closeDeleteSubmissionConfirmationModal();
                    deleteSubmissionsToBackend();
                }
            });

            // Handle No button click for Delete
            $deleteModalNoBtn.off('click').on('click', function () {
                closeDeleteSubmissionConfirmationModal();
            });

            // Close delete modal when clicking outside
            $deleteModal.on('click', function (event) {
                if ($(event.target).is($deleteModal)) {
                    closeDeleteSubmissionConfirmationModal();
                }
            });
        }

        // Close modals on ESC key (use only once)
        if (!window.approvalModalEscListenerSet) {
            $(document).on('keydown', function (event) {
                if (event.key === 'Escape') {
                    if ($sendModal.hasClass('is-open')) {
                        closeSendApprovalConfirmationModal();
                    } else if ($deleteModal.hasClass('is-open')) {
                        closeDeleteSubmissionConfirmationModal();
                    }
                }
            });
            window.approvalModalEscListenerSet = true;
        }
    }

    // Start initialization as soon as DOM is ready
    $(document).ready(function () {
        // Start trying to initialize
        initializeApprovalModalHandler();
    });

    window.projectSettingsConfig = {
        projectId: @json($currentProject->id),
        projectSlug: @json($currentProject->slug),
        project: @json([
            'date_format' => $currentProject->date_format,
        ]),
        updateUrl: @json(route('tenants.projects.update')),
        projectsUrl: @json(route('projects.index')),
        deleteUrl: @json(route('tenants.projects.destroy')),
        sourceStoreUrl: @json(route('onboarding.data-source.store')),
        testOdkUrl: @json(route('test-odk-connection')),
        importDatasetUrl: @json(route('import-dataset')),
        canEdit: {{ auth()->user()->can('edit.projects') ? 'true' : 'false' }},
        dataSource: @json($dataSourceConfig),
        cron: {
            canCreate: {{ auth()->user()->can('create.cron_scheduler') ? 'true' : 'false' }},
            canEdit: {{ auth()->user()->can('edit.cron_scheduler') ? 'true' : 'false' }},
            canDelete: {{ auth()->user()->can('delete.cron_scheduler') ? 'true' : 'false' }},
            canToggle: {{ auth()->user()->can('toggle.cron_scheduler') ? 'true' : 'false' }},
            canRun: {{ auth()->user()->can('run.cron_scheduler') ? 'true' : 'false' }},
            storeUrl: @json(route('tenants.projects.cron_scheduler.store', ['projectName' => $projectName])),
            editUrlTemplate: @json(route('tenants.projects.cron_scheduler.edit', ['projectName' => $projectName, 'scheduleId' => '__SCHEDULE_ID__'])),
            updateUrlTemplate: @json(route('tenants.projects.cron_scheduler.update', ['projectName' => $projectName, 'scheduleId' => '__SCHEDULE_ID__'])),
            deleteUrlTemplate: @json(route('tenants.projects.cron_scheduler.destroy', ['projectName' => $projectName, 'scheduleId' => '__SCHEDULE_ID__'])),
            toggleUrlTemplate: @json(route('tenants.projects.cron_scheduler.toggle_status', ['projectName' => $projectName, 'scheduleId' => '__SCHEDULE_ID__'])),
            runNowUrlTemplate: @json(route('tenants.projects.cron_scheduler.run_now', ['projectName' => $projectName, 'scheduleId' => '__SCHEDULE_ID__'])),
        },
        pii: {
            canView: {{ auth()->user()->can('view.pii_management') ? 'true' : 'false' }},
            canEdit: {{ auth()->user()->can('edit.pii_management') ? 'true' : 'false' }},
            fetchUrlTemplate: @json(route('tenants.projects.pii_management.get_role_attributes', ['projectName' => $projectName, 'roleId' => '__ROLE_ID__'])),
            saveUrl: @json(route('tenants.projects.pii_management.store_role', ['projectName' => $projectName])),
        },
        viewData: {
            moduleId: @json($viewDataModule?->id),
            columns: @json($viewDataColumns),
            rows: @json($viewDataRows),
            canEdit: {{ auth()->user()->can('edit.view_data') ? 'true' : 'false' }},
            canDelete: {{ auth()->user()->can('delete.view_data') ? 'true' : 'false' }},
            updateUrl: @json(route('update-data')),
            deleteUrl: @json(route('delete-data')),
        },
    };
</script>
@vite('resources/js/pages/project-settings.js')
@endsection