@extends('layouts.app')

@section('title', 'Reports - SIPHLN')

@section('content')
<style>[x-cloak] { display: none !important; }</style>

<div class="space-y-6" x-data="{ tab: 'combined' }">

    <!-- Header Banner -->
    <div class="relative overflow-hidden rounded-xl shadow border border-teal-900 bg-gradient-to-r from-teal-900 via-teal-800 to-teal-700">
        <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
            <div class="absolute -top-10 -right-10 w-48 h-48 rounded-full bg-teal-500/20 blur-2xl"></div>
            <div class="absolute -bottom-12 -left-8 w-56 h-56 rounded-full bg-emerald-400/10 blur-2xl"></div>
        </div>
        <div class="relative px-6 py-6 md:px-8">
            <p class="text-[11px] font-semibold uppercase tracking-widest text-teal-300">Reports • PHLN Projects</p>
            <h1 class="mt-1 text-2xl md:text-3xl font-bold text-white">REPORTS</h1>
            <p class="mt-1 text-sm text-teal-100">Export data project, activities, realization, atau gabungan ketiganya ke Excel.</p>
        </div>
    </div>

    <!-- Tabs -->
    <div class="flex flex-wrap items-center gap-2 bg-white p-2 rounded-xl shadow border border-gray-200">
        @foreach($datasets as $key => $config)
            <button
                type="button"
                @click="tab = '{{ $key }}'"
                :class="tab === '{{ $key }}' ? 'bg-teal-700 text-white shadow' : 'text-gray-600 hover:bg-teal-50 hover:text-teal-800'"
                class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-semibold transition"
            >
                {{ $config['label'] }}
            </button>
        @endforeach
    </div>

    <!-- Export Forms -->
    @foreach($datasets as $key => $config)
        <div x-show="tab === '{{ $key }}'" x-cloak class="bg-white rounded-xl shadow border border-gray-200 overflow-hidden">
            <div class="px-5 py-4 bg-teal-50/70 border-b border-teal-100">
                <h2 class="text-sm font-bold text-gray-800 uppercase tracking-wide">{{ $config['title'] }}</h2>
                <p class="mt-0.5 text-xs text-gray-500">{{ $config['description'] }}</p>
            </div>

            <div class="p-5">
                @include('reports.partials.export-form', [
                    'dataset' => $key,
                    'config' => $config,
                    'units' => $units,
                    'selectedUnitId' => $selectedUnitId,
                    'search' => $search,
                ])
            </div>
        </div>
    @endforeach
</div>
@endsection