@extends('layouts.app')

@section('dashboard-title')
    <div class="flex items-center justify-between w-full">
    <!-- Centered Title -->
    <h3 class="flex-1">
        ME&IE CONSULTANTS - DATASET
    </h3>

    <!-- Right-aligned Date -->
    <span class="me-5 pe-1 dashboard-date">
        {{-- Updated: {{ $dashboardDate->format('F d, Y') }} --}}
    </span>
</div>
@endsection
@section('extra_margin', 'style=margin-top:32px;')

@section('content')
  <div id="loading-overlay">
        <div class="spinner"></div>
    </div>
    <!-- Inner Navbar -->
    <div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
        id="navbar" style="margin-top: 32px">
        <div class="rounded-t-xl border border-input border-b-input filter-container flex items-stretch grow">
            <!-- Container -->
            <div class="kt-container-fluid flex justify-center items-stretch gap-5">
                <div class="grid items-stretch">
                    <div class="kt-scrollable-x-auto flex items-stretch">
                      <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true" data-is-meieDataSet-dashboard="true">

                            <x-dropdown-filter title="Financial Year" name="financial_year" :options="[]"
                                searchable="true" />

                            <x-dropdown-filter title="Zone" name="zone" :api="'/api/zone/list'" :options="[]"
                                searchable="true" />

                            <x-dropdown-filter title="District" name="district" :api="'/api/district/list'" dependsOn="zone"
                                :options="[]" searchable="true" />

                            <x-dropdown-filter title="Survey Type" name="survey_type" :options="[]" searchable="true" />

                            <x-dropdown-filter title="Intervention" name="intervention" :options="[]" searchable="true" />



                        </div>


                    </div>
                </div>

            </div>
            @can('dataset export')
                <div class="flex items-center ml-auto me-2 export-btn-box">
                    <a href="{{ route('export.meie') }}">
                        <button type="button"
                            class="export-btn flex items-center gap-2 px-4 py-2 text-black font-semibold rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
                            <!-- Clean download SVG -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" stroke-width="2">
                                {{--
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
                                --}}
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 12v8m0 0l-4-4m4 4l4-4" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v8" />
                            </svg>
                            Dataset

                        </button>
                    </a>
                </div>
            @endcan
            <!-- End of Container -->
        </div>
    </div>
    <!-- End of Inner Navbar -->


    <!-- Container -->
<div class="kt-container-fluid stuckupStyling">
    <div class="grid gap-5 lg:gap-1.5 mb-5">
        <table id="meie_dataset_table" class="divide-y divide-gray-200">
            <thead class="bg-primary">
                <tr>
                    <th class="px-1 py-1 text-left text-sm font-semibold text-gray-600 text-mono">SR.</th>
                    <th class="px-1 py-1 text-left text-sm font-semibold text-gray-600 text-mono">Zone</th>
                    <th class="px-1 py-1 text-left text-sm font-semibold text-gray-600 text-mono">District</th>
                    <th class="px-1 py-1 text-left text-sm font-semibold text-gray-600 text-mono">Survey Type</th>
                    <th class="px-1 py-1 text-left text-sm font-semibold text-gray-600 text-mono">Intervention</th>
                    <th class="px-1 py-1 text-left text-sm font-semibold text-gray-600 text-mono">Scheme Name
                    </th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>

</div>
    <!-- End of Container -->
@endsection

@section('scripts')
     @vite('resources/js/pages/meie-dataset.js')
        @vite('resources/js/generic-filter.js')
@endsection

</rewritten_file>