@extends('layouts.app')

@section('title', 'Saved Reports')
@section('heading', 'Saved Reports')

@section('content')
    <x-card class="mb-6">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <p class="text-slate-600">Save report filters and optionally schedule recurring exports.</p>
            <a href="{{ route('reports.index') }}" class="text-sm text-primary hover:underline">Reports hub</a>
        </div>

        <form action="{{ route('reports.saved.store') }}" method="post" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            @csrf
            <input type="text" name="name" placeholder="Report name" required class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
            <select name="report_key" required class="rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                @foreach($catalog as $item)
                    @if($item['export_route'])
                        <option value="{{ $item['key'] }}">{{ $item['title'] }}</option>
                    @endif
                @endforeach
            </select>
            <select name="schedule_frequency" class="rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                <option value="">No schedule</option>
                <option value="daily">Daily</option>
                <option value="weekly">Weekly</option>
                <option value="monthly">Monthly</option>
            </select>
            <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white">Save report</button>
        </form>
    </x-card>

    <x-card>
        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Type</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Schedule</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Last run</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($reports as $report)
                <tr>
                    <td class="px-4 py-3 text-sm text-slate-900">{{ $report->name }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ $report->report_key }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ $report->schedule_frequency ?: 'Manual' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ $report->last_run_at?->format('d M Y H:i') ?? '—' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm space-x-2">
                        <a href="{{ route('reports.saved.run', $report) }}" class="font-medium text-primary hover:underline">Run</a>
                        @include('partials.delete-form', ['action' => route('reports.saved.destroy', $report)])
                    </td>
                </tr>
            @empty
                <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-slate-500">No saved reports yet.</td></tr>
            @endforelse
        </x-table>
        @if($reports->hasPages())<div class="mt-4">{{ $reports->links() }}</div>@endif
    </x-card>
@endsection