@extends('layouts.demo10.base')

@section('content')

    <style>
        /* Prevent table clipping for dropdowns, but ensure wrapper scrolls */
        .kt-card-table, #odkSubmissionsTable, td {
            overflow: visible !important;
        }
        
        /* Restore scrolling for the wrapper */
        .kt-scrollable-x-auto {
            overflow-x: auto !important;
            min-height: 400px; /* Ensure height for dropdowns if needed */
        }

        /* DataTables overrides to match Metronic UI */
        .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;
        }
    </style>

@can('view.odk_central')
<div class="grid gap-1 lg:gap-1.5 mb-5">
    <!-- begin: Toolbar -->
    <div class="flex flex-wrap items-center justify-between gap-5">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-xl text-mono">
                ODK Form Data
            </h1>
            <div class="flex items-center gap-1 text-sm font-normal text-secondary-foreground">
                <a class="hover:text-primary transition-colors" href="/">Home</a>
                <span class="text-muted-foreground">/</span>
                <a class="hover:text-primary transition-colors" href="{{ route('tenants.projects') }}">Projects</a>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">{{ $currentProject->name ?? 'Project' }}</span>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">ODK Forms</span>
            </div>
        </div>
    </div>
    <!-- end: Toolbar -->
</div>

<div class="grid gap-5 lg:gap-7.5">

    <!-- FORM SELECTION CARD -->
    <div class="kt-card">
        <div class="kt-card-body">
            <form id="odkForm" class="flex flex-col gap-5">
                @csrf
                <input type="hidden" id="tenantId" value="{{ $tenantId }}">

                <div class="flex flex-col gap-1">
                    <label class="text-sm font-medium">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>

                <div class="flex gap-3 justify-end mt-4">
                    <button type="button" id="getFormDataBtn" class="kt-btn add-btn kt-btn-secondary">
                        Get Form Data
                    </button>
                    @can('edit.odk_central')
                    <button type="button" id="proceedBtn" class="next-btn kt-btn kt-btn-primary min-w-[60px] px-2" disabled>
                        Next
                    </button>
                    @endcan
                </div>
            </form>
        </div>
    </div>

    <!-- SUBMISSIONS TABLE -->
    <div class="kt-card hidden max-w-full" id="submissionsTableWrapper">
        <div class="kt-card-header justify-between items-center px-0 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 py-4">
            <div id="odkSubmissionsTable_wrapper" class="p-0 text-foreground overflow-hidden">
                <div class="kt-scrollable-x-auto rounded-xl">
                    <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>
    </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

<!-- Progress Modal -->
<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">Generating Schema</h3>
                    <p class="text-sm text-muted-foreground">Please wait, we are generating the schema for this form.</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="schemaProgress"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
@vite('resources/js/odkConnection/get-form-data.js')
@endsection