@extends('layouts.demo10.base')

@section('content')
<style>
    .project-hub {
        display: grid;
        gap: 1.5rem;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    .project-card {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        min-height: 200px;
        padding: 1.35rem 1.4rem 1rem;
        border: 1px solid #f1f1f1;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .project-card:hover {
        transform: translateY(-1px);
        border-color: #e5e7eb;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .project-card.is-hidden {
        display: none;
    }

    .project-card.is-connected {
        border-color: rgba(34, 197, 94, 0.18);
        box-shadow: 0 6px 18px rgba(34, 197, 94, 0.06);
    }

    .project-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .project-card-title-wrap {
        display: grid;
        gap: 0.42rem;
    }

    .project-card-title {
        font-size: 1.02rem;
        font-weight: 600;
        color: #1f1f1f;
        line-height: 1.3;
    }

    .project-card-meta {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: wrap;
        font-size: 0.72rem;
        color: #b0b0b7;
    }

    .project-card-meta i {
        color: #67a988;
        font-size: 0.8rem;
    }

    .project-card-meta strong {
        color: #1f1f1f;
        font-weight: 600;
    }

    .project-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 72px;
        height: 35px;
        padding: 0 1rem;
        border-radius: 999px;
        background: #e6f5ec;
        color: #5aac80;
        font-size: 0.78rem;
        font-weight: 600;
    }

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

    .project-card-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        color: #b6b8be;
        border-radius: 999px;
        background: transparent;
        cursor: pointer;
    }

    .project-card-menu-wrap {
        position: relative;
    }

    .project-card-menu:hover {
        background: #f8fafc;
        color: #475569;
    }

    .project-card-menu.is-disabled,
    .project-card-btn.is-disabled {
        opacity: 0.4;
        pointer-events: none;
        cursor: not-allowed;
    }

    .project-card-menu.is-disabled:hover,
    .project-card-btn.is-disabled:hover {
        background: inherit;
        color: inherit;
        border-color: #d9d9de;
    }

    .project-card-dropdown {
        position: absolute;
        top: calc(100% + 0.55rem);
        right: -0.25rem;
        min-width: 156px;
        padding: 0;
        overflow: hidden;
        border: 1px solid #d6d0c8;
        border-radius: 20px;
        background: #faf9f6;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
        z-index: 20;
    }

    .project-card-dropdown.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .project-card-dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        width: 100%;
        padding: 0.82rem 0.95rem;
        border: 0;
        background: transparent;
        color: #6d6b67;
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 1;
        text-align: left;
        cursor: pointer;
        transition: background 0.18s ease, color 0.18s ease;
    }

    .project-card-dropdown-item + .project-card-dropdown-item {
        border-top: 1px solid #d8d2ca;
    }

    .project-card-dropdown-item i {
        width: 1rem;
        font-size: 0.98rem;
        color: #6f6c67;
        flex: 0 0 auto;
    }

    .project-card-dropdown-item:hover {
        background: #efebe5;
        color: #585652;
    }

    .project-card-dropdown-item:hover i {
        color: inherit;
    }

    .project-card-dropdown-item span {
        display: inline-block;
        transform: translateY(-1px);
    }

    .project-card-dropdown-item.is-delete,
    .project-card-dropdown-item.is-delete i {
        color: #7c7872;
    }

    .project-card-body {
        flex: 1;
        display: grid;
        align-content: start;
        gap: 0;
        padding-top: 0.35rem;
        min-height: 54px;
    }

    .project-card-divider {
        height: 1px;
        background: #dddddd;
        margin-top: auto;
    }

    .project-card-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        flex-wrap: wrap;
        padding-top: 0.15rem;
    }

    .project-card-buttons {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: wrap;
    }

    .project-card-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        height: 36px;
        padding: 0 0.95rem;
        border: 1px solid #d9d9de;
        border-radius: 10px;
        background: #fff;
        color: #585c64;
        font-size: 0.77rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .project-card-btn:hover {
        border-color: #cbd5e1;
        color: #0f172a;
    }

    .project-card-btn.is-primary {
        border-color: #1e8357;
        background: #1e8357;
        color: #fff;
    }

    .project-card-btn.is-primary:hover {
        border-color: #176846;
        background: #176846;
    }

    .project-empty {
        display: none;
        align-items: center;
        justify-content: center;
        min-height: 180px;
        border: 1px dashed #d7dee8;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.7);
        color: #64748b;
        font-size: 0.95rem;
        text-align: center;
        padding: 1.5rem;
    }

    .project-empty.is-visible {
        display: flex;
    }

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

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

    .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-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-source-hint.is-hidden {
        display: none;
    }

    .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-select {
        appearance: auto;
    }

    .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 {
        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;
    }

    .project-complete-screen {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 340px;
        gap: 0.75rem;
    }

    .project-complete-screen img {
        width: min(220px, 75%);
        height: auto;
    }

    .project-complete-title {
        margin: 0;
        font-size: 2rem;
        line-height: 1.2;
        font-weight: 600;
        color: #111827;
    }

    .project-complete-title span {
        color: #2f66e8;
    }

    .project-complete-text {
        margin: 0;
        color: #6b7280;
        font-size: 0.8125rem;
        line-height: 1.4;
    }

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

    @media (max-width: 767px) {
        .project-hub-actions,
        .project-search {
            width: 100%;
        }

        .project-hub-actions {
            margin-left: 0;
            flex-direction: column;
            align-items: stretch;
        }

        .project-search {
            min-width: 100%;
        }

        .project-hub-add {
            width: 100%;
            justify-content: center;
        }

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

        .project-flow-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

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

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

                @can('create.projects')
                <button class="kt-btn common-secondary-btn project-hub-add" data-kt-modal-toggle="#add_project_modal">
                    <i class="ki-filled ki-plus"></i>
                    Add Project
                </button>
                @endcan
            </div>
        </div>
    </div>

    <div class="project-grid" id="project_grid">
        @forelse($projects as $project)
            @php
                $isConnected = (int) $activeProjectId === (int) $project->id;
                $isStatusActive = strtolower((string) ($project->status ?? 'active')) === 'active';
                $searchValue = strtolower(trim(($project->name ?? '') . ' ' . ($project->description ?? '') . ' ' . ($project->organization->name ?? '') . ' ' . ($project->dynamic_database ?? '')));
            @endphp
            <article
                class="project-card {{ $isConnected ? 'is-connected' : '' }}"
                id="project-card-{{ $project->id }}"
                data-project-card
                data-project-id="{{ $project->id }}"
                data-search="{{ $searchValue }}"
            >
                <div class="project-card-top">
                    <div class="project-card-title-wrap">
                        <h3 class="project-card-title">{{ $project->name ?? 'Untitled Project' }}</h3>
                        <div class="project-card-meta">
                            <span><i class="ki-filled ki-home-2"></i> <strong>{{ $project->organization->name ?? 'N/A' }}</strong></span>
                            <span>{{ optional($project->updated_at)->format('M, Y') ?? 'Jul, 2026' }}</span>
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <span class="project-status {{ $isStatusActive ? '' : 'is-inactive' }}" data-project-status>
                            {{ $isStatusActive ? 'Active' : 'Inactive' }}
                        </span>
                        <div class="project-card-menu-wrap">
                            <button
                                type="button"
                                class="project-card-menu {{ $isConnected ? '' : 'is-disabled' }}"
                                aria-label="Project menu"
                                aria-expanded="false"
                                data-project-menu-toggle
                                {{ $isConnected ? '' : 'disabled' }}
                            >
                                <i class="ki-filled ki-dots-vertical text-base"></i>
                            </button>
                            <div class="project-card-dropdown" data-project-menu-dropdown>
                                <button type="button" class="project-card-dropdown-item">
                                    <i class="ki-filled ki-notepad-edit"></i>
                                    <span>Edit</span>
                                </button>
                                <button type="button" class="project-card-dropdown-item is-delete">
                                    <i class="ki-filled ki-trash"></i>
                                    <span>Delete</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="project-card-body"></div>

                <div class="project-card-divider"></div>

                <div class="project-card-footer">
                    <div class="project-card-buttons">
                        <button
                            type="button"
                            class="project-card-btn {{ $isConnected ? 'is-primary tenant-disconnect-btn' : 'tenant-connect-btn' }}"
                            data-id="{{ $project->id }}"
                            data-project-connect
                        >
                            <i class="ki-filled {{ $isConnected ? 'ki-disconnect' : 'ki-connect' }}"></i>
                            <span>{{ $isConnected ? 'Connected' : 'Connect' }}</span>
                        </button>

                        <button
                            type="button"
                            class="project-card-btn {{ $isConnected ? '' : 'is-disabled' }}"
                            data-project-settings-btn
                            data-settings-url="{{ route('tenants.projects.settings', ['projectName' => $project->slug]) }}"
                            {{ $isConnected ? '' : 'disabled' }}
                        >
                            <i class="ki-filled ki-setting-2"></i>
                            <span>Settings</span>
                        </button>
                    </div>
                </div>
            </article>
        @empty
            <div class="project-empty is-visible" id="project_empty_state">
                No projects found yet.
            </div>
        @endforelse
    </div>

    @if($projects->count() > 0)
    <div class="project-empty" id="project_empty_state">
        No projects match your search.
    </div>
    @endif
</div>

<div class="kt-modal" data-kt-modal="true" id="add_project_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[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 New 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="{{ route('projects.store') }}"
                method="POST"
                enctype="multipart/form-data"
                class="project-flow"
                id="add_project_form"
                data-source-store-url="{{ route('onboarding.data-source.store') }}"
                data-test-odk-url="{{ route('test-odk-connection') }}"
                data-forms-data-url="{{ route('forms-data') }}"
            >
                @csrf

                <section class="project-flow-step project-step-panel" data-flow-step="project">
                    <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="project_name">Project Name*</label>
                        <input type="text" name="project_name" id="project_name" class="project-flow-input" required />
                    </div>

                    <div class="project-flow-field">
                        <label for="project_description">Project Description (optional)</label>
                        <input type="text" name="project_description" id="project_description" class="project-flow-input" />
                    </div>

                    <div class="project-flow-grid">
                        <div class="project-flow-field">
                            <label for="date_format">Date Format*</label>
                            <select id="date_format" name="date_format" class="project-flow-select" required>
                                <option value="">Select</option>
                                <option value="d/m/Y">DD/MM/YYYY</option>
                                <option value="m/d/Y">MM/DD/YYYY</option>
                                <option value="Y-m-d">YYYY-MM-DD</option>
                            </select>
                        </div>
                        <div class="project-flow-field">
                            <label for="project_status">Status</label>
                            <select id="project_status" name="project_status" class="project-flow-select">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex justify-end gap-3 pt-3 modal-btns">
                        <button type="button" class="kt-btn cancel min-w-[80px]" data-kt-modal-dismiss="true">Cancel</button>
                        <button type="button" class="kt-btn save min-w-[96px]" id="project_flow_continue_btn">Continue</button>
                    </div>
                </section>

                <section class="project-flow-step project-step-panel is-hidden" data-flow-step="source">
                    <div>
                        <h3 class="project-flow-heading">Add Data Source</h3>
                        <p class="project-flow-subtitle" id="project_flow_path_text">Projects/IFRAP/Data Source</p>
                    </div>

                    <div class="project-flow-field">
                        <label for="data_source_type">Data Source*</label>
                        <select id="data_source_type" name="data_source_type" class="project-flow-select" required>
                            <option value="">Select Data Source</option>
                            <option value="odk">ODK Connection</option>
                            <option value="api">API Server</option>
                            <option value="csv">CSV File</option>
                        </select>
                    </div>

                    <div class="project-flow-actions project-flow-source-hint">
                        <button type="button" class="project-flow-back" id="project_flow_back_btn" aria-label="Back">
                            <i class="ki-filled ki-left text-lg"></i>
                        </button>
                        <span class="text-xs text-secondary-foreground">Select a data source and its form will appear below.</span>
                    </div>
                </section>

                <section class="project-flow-step project-step-panel is-hidden" data-flow-step="odk">
                    <div>
                        <h3 class="project-flow-heading">ODK Central Connection</h3>
                        <p class="project-flow-subtitle" id="project_flow_odk_path_text">Projects/IFRAP/Data Source/ODK Connection</p>
                    </div>

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

                    <div class="project-flow-field">
                        <label for="odk_project_id">ProjectID*</label>
                        <input id="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="use_auth_token">
                            <input id="use_auth_token" name="use_auth_token" type="checkbox" value="1">
                            <span class="project-flow-toggle-slider" aria-hidden="true"></span>
                        </label>
                        <label for="use_auth_token" class="project-flow-toggle-label">Use Auth Token</label>
                    </div>

                    <div id="project_odk_token_panel" class="project-flow-subpanel is-hidden">
                        <div class="project-flow-field">
                            <label for="odk_auth_token">AuthToken*</label>
                            <input id="odk_auth_token" name="odk_auth_token" type="text" class="project-flow-input" />
                        </div>
                    </div>

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

                        <div class="project-flow-field">
                            <label for="odk_password">Password*</label>
                            <input id="odk_password" name="odk_password" type="password" class="project-flow-input" />
                        </div>
                    </div>

                    <div class="project-flow-actions">
                        <button type="button" class="project-flow-back" data-project-flow-back="project" aria-label="Back">
                            <i class="ki-filled ki-left text-lg"></i>
                        </button>
                        <div class="flex items-center gap-3">
                            <button type="button" class="kt-btn common-secondary-btn min-w-[140px]" id="project_test_odk_btn">Test Connection</button>
                            <button type="button" class="kt-btn common-secondary-btn min-w-[96px]" id="project_save_odk_btn">Save</button>
                        </div>
                    </div>
                </section>

                <section class="project-flow-step project-step-panel is-hidden" data-flow-step="api">
                    <div>
                        <h3 class="project-flow-heading">API Data Source</h3>
                        <p class="project-flow-subtitle" id="project_flow_api_path_text">Projects/IFRAP/Data Source/API Connection</p>
                    </div>

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

                    <div class="project-flow-toggle-row">
                        <label class="project-flow-toggle" for="use_api_auth_token">
                            <input id="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="use_api_auth_token" class="project-flow-toggle-label">Use Auth Token</label>
                    </div>

                    <div id="project_api_token_panel" class="project-flow-subpanel is-hidden">
                        <div class="project-flow-field">
                            <label for="api_auth_token">AuthToken*</label>
                            <input id="api_auth_token" name="api_auth_token" type="text" class="project-flow-input" />
                        </div>
                    </div>

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

                        <div class="project-flow-field">
                            <label for="api_password">Password*</label>
                            <input id="api_password" name="api_password" type="password" class="project-flow-input" />
                        </div>
                    </div>

                    <div class="project-flow-actions">
                        <button type="button" class="project-flow-back" data-project-flow-back="project" aria-label="Back">
                            <i class="ki-filled ki-left text-lg"></i>
                        </button>
                        <div class="flex items-center gap-3">
                            <button type="button" class="kt-btn common-secondary-btn min-w-[96px]" id="project_save_api_btn">Save</button>
                        </div>
                    </div>
                </section>

                <section class="project-flow-step project-step-panel is-hidden" data-flow-step="csv">
                    <div>
                        <h3 class="project-flow-heading">CSV Data Source</h3>
                        <p class="project-flow-subtitle" id="project_flow_csv_path_text">Projects/IFRAP/Data Source/CSV Connection</p>
                    </div>

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

                    <div class="project-flow-actions">
                        <button type="button" class="project-flow-back" data-project-flow-back="project" aria-label="Back">
                            <i class="ki-filled ki-left text-lg"></i>
                        </button>
                        <div class="flex items-center gap-3">
                            <button type="button" class="kt-btn common-secondary-btn min-w-[96px]" id="project_save_csv_btn">Save</button>
                        </div>
                    </div>
                </section>

                <section class="project-flow-step project-step-panel is-hidden" data-flow-step="completed">
                    <div class="project-complete-screen">
                        <img src="{{ asset('assets/media/images/welcome.png') }}" alt="Welcome">
                        <h2 class="project-complete-title">Welcome <span>Field Data Solutions</span> !</h2>
                        <p class="project-complete-text">Get Started By Connecting<br>Via ODK Form</p>
                        <button type="button" class="kt-btn common-secondary-btn min-w-[160px]" id="project_complete_cta_btn">Connect ODK Form</button>
                    </div>
                </section>
            </form>
        </div>
    </div>
</div>
@else
<div class="flex items-center justify-center min-h-[400px]">
    <div class="text-center">
        <i class="ki-filled ki-lock text-4xl text-danger mb-4"></i>
        <h3 class="text-lg font-semibold text-foreground">Access Denied</h3>
        <p class="text-sm text-secondary-foreground">You do not have permission to view this page.</p>
    </div>
</div>
@endcan
@endsection

@section('scripts')
@vite('resources/js/pages/project-main.js')
@endsection