@extends('layouts.demo10.base')

@section('content')
<div class="grid gap-5 lg:gap-7.5">
    <div class="kt-card">
        <div class="kt-card-header">
            <h3 class="kt-card-title">ODK Connection</h3>
        </div>
        <div class="kt-card-body">
            <form method="POST" id="odkConnectForm" class="flex flex-col gap-5">
                @csrf

                <!-- Base URL -->
                <div class="flex flex-col gap-1">
                    <label for="base_url" class="text-sm font-medium text-secondary-foreground">Base URL</label>
                    <div class="kt-input">
                        <input type="text" name="base_url" id="base_url" placeholder="Enter Base URL">
                    </div>
                </div>
                

                <!-- Tenant Selection (Local Project) -->
                <div class="flex flex-col gap-1">
                    <label for="tenant_id" class="text-sm font-medium text-secondary-foreground">Select Local Project (Tenant)</label>
                    <select name="tenant_id" id="tenant_id" class="kt-select" data-kt-select="true">
                        <option value="">-- Select a Project --</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}" {{ (isset($tenantId) && $tenantId == $project->id) ? 'selected' : '' }}>{{ $project->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- ODK Project ID -->
                <div class="flex flex-col gap-1">
                    <label for="project_id" class="text-sm font-medium text-secondary-foreground">ODK Project ID</label>
                    <div class="kt-input">
                        <input type="number" name="project_id" id="project_id" placeholder="Enter ODK Project ID" value="1">
                    </div>
                </div>

                <!-- Username / Email -->
                <div class="flex flex-col gap-1">
                    <label for="username" class="text-sm font-medium text-secondary-foreground">Username / Email</label>
                    <div class="kt-input">
                        <input type="text" name="username" id="username" placeholder="Enter Username or Email">
                    </div>
                </div>

                <!-- Password -->
                <div class="flex flex-col gap-1">
                    <label for="password" class="text-sm font-medium text-secondary-foreground">Password</label>
                    <div class="kt-input">
                        <input type="password" name="password" id="password" placeholder="Enter Password">
                    </div>
                </div>

                <div class="flex justify-between items-center mt-5">
                    <!-- Test Connection Button -->
                    <button type="button" id="testConnBtn" class="kt-btn kt-btn-secondary">
                        <i class="ki-filled ki-wifi"></i> Test Connection
                    </button>

                    <!-- Next Button -->
                    <button type="button" value="next" id="nextBtn" class="kt-btn kt-btn-primary">
                        Next <i class="ki-filled ki-right"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@vite('resources/js/odk-connect-form.js')
@endsection