@extends('layouts.app')

@section('title', 'Standard Reports')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('reports.monthly.index') }}">Reports</a>
        <span class="separator">/</span>
        <span class="current">Standard Reports</span>
    </div>
@endsection

@section('content')
<div class="space-y-6 animate-fade-up">

    <div class="flex items-center justify-between">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Standard Reports</h1>
            <p class="text-sm text-gray-500 mt-1">Generate on-demand reports with custom date ranges</p>
        </div>
        <a href="{{ route('reports.monthly.index') }}" class="btn-secondary">← Monthly Reports</a>
    </div>

    {{-- Report Generator --}}
    <div class="card">
        <div class="card-header">
            <h2 class="card-header-title">Generate Report</h2>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('reports.standard.generate') }}" x-data="reportForm()">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div>
                        <label class="form-label">Category</label>
                        <select name="category" x-model="category" @change="updateReports()" class="form-select" required>
                            <option value="">Select category...</option>
                            @foreach($reportCategories as $key => $cat)
                                <option value="{{ $key }}">{{ $cat['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Report</label>
                        <select name="report" x-model="report" class="form-select" required>
                            <option value="">Select report...</option>
                            <template x-for="(label, key) in reports" :key="key">
                                <option :value="key" x-text="label"></option>
                            </template>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Start Date</label>
                        <input type="date" name="start_date" value="{{ now()->startOfMonth()->format('Y-m-d') }}" class="form-input" required>
                    </div>
                    <div>
                        <label class="form-label">End Date</label>
                        <input type="date" name="end_date" value="{{ now()->format('Y-m-d') }}" class="form-input" required>
                    </div>
                </div>
                <div class="mt-4">
                    <button type="submit" class="btn-primary">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                        Generate Report
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Available Reports Grid --}}
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        @foreach($reportCategories as $catKey => $category)
            <div class="card">
                <div class="card-header">
                    <h3 class="card-header-title">{{ $category['label'] }}</h3>
                </div>
                <div class="card-body">
                    <div class="space-y-2">
                        @foreach($category['reports'] as $reportKey => $reportLabel)
                            <div class="flex items-center gap-2 py-1.5">
                                <svg class="w-4 h-4 text-primary-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                                <span class="text-sm text-gray-700">{{ $reportLabel }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    </div>

</div>

@push('scripts')
<script>
    function reportForm() {
        const allReports = @json(collect($reportCategories)->map(fn($c) => $c['reports']));
        return {
            category: '',
            report: '',
            reports: {},
            updateReports() {
                this.reports = allReports[this.category] || {};
                this.report = '';
            }
        };
    }
</script>
@endpush
@endsection