@extends('layouts.demo10.base')

@section('content')

    <style>
        .odk-page-shell {
            margin-top: calc(var(--spacing) * -5);
            margin-inline: calc(var(--spacing) * -6);
            margin-bottom: calc(var(--spacing) * -5);
            min-height: calc(100vh - 80px);
            background: #f3f4f6;
        }

        .odk-flow {
            height: 74px;
            background: #e2e2e2;
            border-bottom: 1px solid #d8d8d8;
            padding: 0 22px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .odk-flow-steps {
            display: flex;
            align-items: center;
            gap: 28px;
            color: #8f8f8f;
            font-size: 15px;
            font-weight: 500;
        }

        .odk-flow-step {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .odk-flow-step.is-active {
            color: #202020;
        }

        .odk-flow-dot {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            border: 1px solid #d0d0d0;
            background: #f5f5f5;
            color: #8f8f8f;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .odk-flow-step.is-active .odk-flow-dot {
            background: #2f66e8;
            border-color: #2f66e8;
            color: #ffffff;
        }

        .odk-flow-arrow {
            color: #9f9f9f;
            font-size: 20px;
            line-height: 1;
        }

        .odk-main {
            max-width: 1380px;
            margin: 26px auto 0;
            padding: 0 18px 24px;
        }

        .odk-card {
            background: #ffffff;
            border: 1px solid #e8e2da;
            border-radius: 16px;
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
            padding: 22px;
            min-height: 560px;
        }

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

        .odk-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .odk-subtitle {
            margin: 0.2rem 0 1.5rem;
            color: #8d8d8d;
            font-size: 0.95rem;
            font-weight: 400;
        }

        .odk-field {
            max-width: 100%;
            margin-bottom: 16px;
        }

        .odk-field label {
            display: block;
            margin-bottom: 0.35rem;
            color: #374151;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .odk-field select.kt-select {
            height: 42px !important;
            border-radius: 10px !important;
            border: 1px solid #e5e7eb !important;
            background: #f3f4f6 !important;
            color: #111827 !important;
            font-size: 0.8125rem !important;
            padding-left: 12px !important;
            transition: border-color 0.2s ease, background-color 0.2s ease !important;
        }

        .odk-field .select2-container--default .select2-selection--single {
            height: 42px !important;
            border-radius: 10px !important;
            border: 1px solid #e5e7eb !important;
            background: #f3f4f6 !important;
            transition: border-color 0.2s ease, background-color 0.2s ease !important;
        }

        .odk-field .select2-selection__rendered {
            line-height: 40px !important;
            padding-left: 12px !important;
            color: #111827 !important;
            font-size: 0.8125rem !important;
        }

        .odk-field .select2-selection__arrow {
            height: 42px !important;
            right: 10px !important;
        }

        .odk-field select.kt-select:focus,
        .odk-field .select2-container--default.select2-container--focus .select2-selection--single,
        .odk-field .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #2f66e8 !important;
            background: #ffffff !important;
        }

        .odk-actions {
            margin-top: 18px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
        }

        .odk-table-wrap {
            margin-top: 16px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
        }

        .kt-card-table,
        #odkSubmissionsTable,
        #odkSubmissionsTable th,
        #odkSubmissionsTable td {
            overflow: visible !important;
        }

        .odk-table-body {
            padding: 1rem;
        }

        .odk-table-scroll {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            min-height: 400px;
            -webkit-overflow-scrolling: touch;
        }

        .odk-table-scroll .dataTables_wrapper {
            width: 100% !important;
            min-width: 100% !important;
        }

        .odk-table-scroll table {
            width: max-content !important;
            min-width: 100% !important;
        }

        .odk-table-wrap .odk-table-footer {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 1rem;
            flex-wrap: wrap;
            min-width: 100%;
            padding: 0.95rem 1rem 1rem;
            border-top: 1px solid var(--input, #e5e7eb);
        }

        .odk-table-wrap .odk-table-footer .dataTables_length,
        .odk-table-wrap .odk-table-footer .dataTables_info {
            margin-right: 0;
        }

        .odk-table-wrap .odk-table-footer .dataTables_paginate {
            margin-left: auto;
        }

        .odk-table-caption {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.85rem;
            color: #4b5563;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .odk-table-caption strong {
            color: #111827;
            font-weight: 600;
        }

        .dataTables_wrapper .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;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: var(--primary) !important;
            color: white !important;
        }
        .dataTables_wrapper .dataTables_info {
            color: var(--secondary-foreground) !important;
            font-size: 0.875rem !important;
            padding-top: 0 !important;
        }
        .dataTables_wrapper .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;
        }
        .dataTables_wrapper .dataTables_length {
            color: var(--secondary-foreground) !important;
            font-size: 0.875rem !important;
        }
        .dataTables_wrapper .dataTables_paginate {
            padding-top: 0 !important;
        }

        @media (max-width: 900px) {
            .odk-page-shell {
                margin: -12px;
            }

            .odk-flow {
                height: auto;
                padding: 10px;
            }

            .odk-flow-steps {
                gap: 10px;
                font-size: 12px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .odk-main {
                padding: 0 10px 16px;
            }

            .odk-card {
                min-height: 460px;
                padding: 14px;
            }

            .odk-title {
                font-size: 1.8rem;
            }

            .odk-subtitle {
                font-size: 0.875rem;
            }

            .odk-header {
                flex-direction: column;
                align-items: stretch;
            }

            .odk-field .select2-selection__rendered {
                font-size: 0.8125rem !important;
            }
        }

        @media (min-width: 1280px) {
            .odk-page-shell {
                margin-inline: calc(var(--spacing) * -7.5);
            }
        }

        .odk-main-panel-flat-left {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }

        @media (min-width: 1024px) {
            .odk-main-panel-flat-left {
                border-left: 0 !important;
            }
        }

        .schema-btn-content {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .schema-btn-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.55);
            border-top-color: #ffffff;
            border-radius: 999px;
            animation: schema-btn-spin 0.8s linear infinite;
            display: none;
        }

        #proceedBtn.is-loading .schema-btn-spinner {
            display: inline-block;
        }

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

        .flow-panel-hidden {
            display: none !important;
        }
    </style>

@can('view.odk_central')
<div class="odk-page-shell">
    <div class="odk-flow">
        <div class="odk-flow-steps" aria-label="ODK workflow">
            <div class="odk-flow-step is-active" id="flowStepOdk">
                <span class="odk-flow-dot">
                    <i class="ki-filled ki-file-up text-sm"></i>
                </span>
                <span>ODKForm</span>
            </div>
            <span class="odk-flow-arrow">&rarr;</span>
            <div class="odk-flow-step" id="flowStepSchema">
                <span class="odk-flow-dot">
                    <i class="ki-filled ki-document text-sm"></i>
                </span>
                <span>Generate Schema</span>
            </div>
            <span class="odk-flow-arrow">&rarr;</span>
            <div class="odk-flow-step" id="flowStepImport">
                <span class="odk-flow-dot">
                    <i class="ki-filled ki-exit-down text-sm"></i>
                </span>
                <span>Import</span>
            </div>
        </div>
    </div>

    <div class="odk-main">
        <div class="odk-card" id="flowOdkPanel">
            <div class="odk-header">
                <div>
                    <h1 class="odk-title">ODK Form Data</h1>
                    <p class="odk-subtitle">Project/{{ $currentProject->name ?? 'Projects' }}/ODK Form Data</p>
                </div>
                @can('edit.odk_central')
                <button type="button" id="proceedBtn" class="kt-btn common-secondary-btn min-w-[150px] px-4 hidden" disabled
                onclick="AuditTracker.track({
                    event_type: 'click',
                    module:     'ODKForms',
                    section:    'ODKForms',
                    page:       'ODK Form List',
                    action:     'Click Generate Schema Button'
                })">
                    <span class="schema-btn-content">
                        <span class="schema-btn-spinner" aria-hidden="true"></span>
                        <span>Generate Schema</span>
                    </span>
                </button>
                @endcan
            </div>

            <form id="odkForm">
                @csrf
                <input type="hidden" id="tenantId" value="{{ $tenantId }}">

                <div class="odk-field">
                    <label for="xmlFormId">Select Form*</label>
                    <select id="xmlFormId" class="kt-select w-full">
                        <option value="">Select Form</option>
                        @foreach($forms as $form)
                            <option value="{{ $form['xmlFormId'] }}">{{ $form['name'] }} - {{ $form['xmlFormId'] }}</option>
                        @endforeach
                    </select>
                </div>
            </form>

            <div id="formDataEmptyState" class="hidden mt-5 p-4 rounded-lg border border-input text-sm text-secondary-foreground bg-card">
                No data found for this form.
            </div>

            <div class="odk-table-wrap hidden max-w-full" id="submissionsTableWrapper">
                <div class="kt-card-header justify-between items-center px-4 py-4 border-b border-input">
                    <div class="flex flex-wrap gap-3">
                        <select id="filterSubmitter" class="kt-select kt-select-sm w-48">
                            <option value="">All Submitters</option>
                        </select>

                        <select id="filterStatus" class="kt-select kt-select-sm w-40">
                            <option value="">All Status</option>
                            <option value="Received">Received</option>
                            <option value="Approved">Approved</option>
                            <option value="Rejected">Rejected</option>
                        </select>

                        <select id="filterDate" class="kt-select kt-select-sm w-40">
                            <option value="">All Time</option>
                            <option value="today">Today</option>
                            <option value="yesterday">Yesterday</option>
                            <option value="last7">Last 7 Days</option>
                            <option value="last30">Last 30 Days</option>
                        </select>
                    </div>
                </div>

                <div class="kt-card-table odk-table-body">
                    <div class="odk-table-caption hidden" id="selectedFormCaption">
                        Showing table for <strong id="selectedFormLabel">-</strong>
                    </div>
                    <div class="odk-table-scroll rounded-xl" id="odkTableScroll">
                        <div class="p-0 text-foreground">
                            <table id="odkSubmissionsTable" class="kt-table kt-table-border w-full table-auto">
                                <thead>
                                    <tr id="tableHeader"></tr>
                                </thead>
                                <tbody id="tableBody"></tbody>
                            </table>
                        </div>
                    </div>
                    <div id="odkTableFooter"></div>
                </div>
            </div>
        </div>
        <div id="flowSchemaPanel" class="flow-panel-hidden"></div>
        <div id="flowImportPanel" class="flow-panel-hidden"></div>
    </div>
</div>
@endcan

@cannot('view.odk_central')
<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>
@endcannot

@endsection

@section('scripts')
@vite('resources/js/odkConnection/get-form-data.js')
@vite('resources/js/pages/schemaDesign.js')
@vite('resources/js/ImportDataset/import-dataset.js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const scrollableContent = document.getElementById('scrollable_content');
        const mainPanel = scrollableContent ? scrollableContent.parentElement : null;
        if (mainPanel) {
            mainPanel.classList.add('odk-main-panel-flat-left');
        }

        const flowStepOdk = document.getElementById('flowStepOdk');
        const flowStepSchema = document.getElementById('flowStepSchema');
        const flowStepImport = document.getElementById('flowStepImport');
        const flowOdkPanel = document.getElementById('flowOdkPanel');
        const flowSchemaPanel = document.getElementById('flowSchemaPanel');
        const flowImportPanel = document.getElementById('flowImportPanel');

        function setActiveStep(step) {
            flowStepOdk?.classList.toggle('is-active', step === 'odk');
            flowStepSchema?.classList.toggle('is-active', step === 'schema');
            flowStepImport?.classList.toggle('is-active', step === 'import');
            flowOdkPanel?.classList.toggle('flow-panel-hidden', step !== 'odk');
            flowSchemaPanel?.classList.toggle('flow-panel-hidden', step !== 'schema');
            flowImportPanel?.classList.toggle('flow-panel-hidden', step !== 'import');
        }

        async function loadStepPanel(url, targetSelector, extractSelector) {
            const response = await fetch(url, { credentials: 'same-origin' });
            const html = await response.text();
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const source = doc.querySelector(extractSelector);
            const target = document.querySelector(targetSelector);
            if (!source || !target) {
                throw new Error('Step content not found');
            }
            const styles = Array.from(doc.querySelectorAll('style')).map((styleEl) => styleEl.outerHTML).join('');
            target.innerHTML = styles + source.outerHTML;
            return doc;
        }

        function executeInlineScriptByPattern(doc, pattern) {
            const script = Array.from(doc.querySelectorAll('script'))
                .find((s) => pattern.test(s.textContent || ''));
            if (!script) return false;
            try {
                // Run page bootstrap script (window.schemaTables/window.tenantId/... etc.)
                (new Function(script.textContent))();
                return true;
            } catch (e) {
                return false;
            }
        }

        window.odkFlowLoadSchema = async function (tenantId) {
            try {
                const doc = await loadStepPanel('/schema-design?tenant_id=' + tenantId, '#flowSchemaPanel', '.schema-main');
                executeInlineScriptByPattern(doc, /window\.schemaTables|window\.schemaLookups|window\.formId|window\.tenantId/);
                setActiveStep('schema');
                if (typeof window.initSchemaDesignPage === 'function') {
                    window.__schemaDesignBound = false;
                    window.initSchemaDesignPage();
                }
            } catch (e) {
                window.location.href = '/schema-design?tenant_id=' + tenantId;
            }
        };

        window.odkFlowLoadImport = async function () {
            try {
                const doc = await loadStepPanel('/import', '#flowImportPanel', '.import-main');
                executeInlineScriptByPattern(doc, /import-main-panel-flat-left|odk_history_table|progress_modal/);
                setActiveStep('import');
                if (typeof window.initImportDatasetPage === 'function') {
                    window.initImportDatasetPage();
                }
            } catch (e) {
                window.location.href = '/import';
            }
        };
    });
</script>
@endsection