@extends('layouts.demo10.base')

@section('content')
<div class="grid gap-5 lg:gap-7.5">
    <!-- begin: Toolbar -->
    <div class="flex flex-wrap items-center justify-between gap-5 pb-5">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-xl text-mono">
                Household Survey
            </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>
                <span class="text-mono">Household Survey</span>
            </div>
        </div>
        <div class="flex items-center gap-2.5">
            <button class="kt-btn kt-btn-primary">
                <i class="ki-filled ki-file-up"></i>
                Import Data
            </button>
        </div>
    </div>
    <!-- end: Toolbar -->

    <div class="kt-card">
        <div class="kt-card-header">
            <h3 class="kt-card-title text-base font-semibold">Survey Overview</h3>
        </div>
        <div class="kt-card-content p-5 lg:p-7.5">
            <div class="grid lg:grid-cols-2 gap-5 lg:gap-7.5">
                <div class="flex flex-col gap-3 p-5 rounded-xl border border-input bg-light/30">
                    <div class="flex items-center gap-2">
                        <i class="ki-filled ki-chart-line text-2xl text-primary"></i>
                        <span class="font-semibold text-foreground">Total Responses</span>
                    </div>
                    <div class="flex items-baseline gap-2">
                        <span class="text-3xl font-bold text-mono">1,248</span>
                        <span class="text-xs font-medium text-success">+12% this month</span>
                    </div>
                </div>
                <div class="flex flex-col gap-3 p-5 rounded-xl border border-input bg-light/30">
                    <div class="flex items-center gap-2">
                        <i class="ki-filled ki-profile-circle text-2xl text-primary"></i>
                        <span class="font-semibold text-foreground">Active Surveyors</span>
                    </div>
                    <div class="flex items-baseline gap-2">
                        <span class="text-3xl font-bold text-mono">24</span>
                        <span class="text-xs font-medium text-muted-foreground">Across 5 regions</span>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <p class="text-sm text-secondary-foreground">
                    This section provides detailed insights and analytics for the Household Survey data collected through ODK Central.
                </p>
            </div>
        </div>
    </div>
</div>
@endsection