@extends('layouts.app')

@section('content')
<div class="max-w-6xl px-4 pb-20">
    <!-- Report Header -->
    <div class="pb-8 sm:flex sm:items-center sm:justify-between gap-x-4">
        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
            <div class="lg:divide-y lg:divide-stone-200">
                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                    <div
                        class="bg-gradient-to-b from-stone-600 to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-lg">
                        AYLARA GÖRE ENVANTER RAPORLARI
                    </div>
                </nav>
            </div>
        </header>

        <!-- Refresh Button -->
        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
            <div class="lg:divide-y lg:divide-stone-200">
                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                    <a href="{{ route('inventory.refresh') }}" type="button"
                        class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400 hover:text-stone-700">
                        <span class="material-symbols-rounded">
                            refresh
                        </span>
                    </a>
                </nav>
            </div>
        </header>
    </div>

    <div class="grid h-6 gap-y-6">
        {{-- SON ÜÇ AY --}}
        <h2 class="flex text-lg leading-6 tracking-tight font-jbmono-bold text-stone-700">
            <span class="mr-2 material-symbols-rounded">
                info
            </span>
            Son 3 Ay Envanter Raporları
        </h2>
        <div class="bg-white rounded-lg shadow">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-stone-200">
                    <thead class="rounded-t-lg bg-stone-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                Dönem
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                Toplam Stok Kartı
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                Toplam Kategori
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-center uppercase text-stone-500">
                                İşlem
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y rounded-lg divide-stone-200">
                        @forelse($monthlyReports as $report)
                        <tr class="rounded-lg hover:bg-stone-50">
                            <td class="px-6 py-4 text-sm font-medium text-stone-900 whitespace-nowrap">
                                {{ $report['displayName'] }}
                            </td>
                            <td class="w-48 px-6 py-4 text-sm text-right text-stone-900 whitespace-nowrap">
                                {{ number_format($report['totalItems'], 0, ',', '.') }}
                            </td>
                            <td class="w-48 px-6 py-4 text-sm text-right text-stone-900 whitespace-nowrap">
                                {{ number_format($report['totalCategories'], 0, ',', '.') }}
                            </td>
                            <td class="w-48 px-6 py-4 text-sm text-center whitespace-nowrap">
                                <a href="{{ route('reports.inventory.show', [$report['year'], $report['month']]) }}"
                                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-stone-600 rounded-md hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500"
                                    x-data="{ loading: false }"
                                    @click="loading = true; setTimeout(() => { loading = false; }, 50000)">
                                    <span x-show="!loading" class="mr-1 text-base material-symbols-rounded">
                                        visibility
                                    </span>
                                    <svg x-show="loading" class="w-4 h-4 mr-2 -ml-1 text-white animate-spin"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                            stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor"
                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                        </path>
                                    </svg>
                                    <span x-text="loading ? 'Rapor Oluşturuluyor...' : 'Raporu Görüntüle'"></span>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-4 text-sm text-center text-stone-500">
                                Rapor verisi bulunamadı
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- SON ÜÇ YIL --}}
        <h2 class="flex text-lg leading-6 tracking-tight font-jbmono-bold text-stone-700">
            <span class="mr-2 material-symbols-rounded">
                info
            </span>
            Son 3 Yıla Ait Envanter Raporları
        </h2>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            @foreach ($yearlyReports as $yearReport)
            <div
                class="relative flex items-center px-6 py-5 space-x-3 bg-white border rounded-lg shadow-sm border-stone-300 focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 hover:border-stone-400">
                <div class="shrink-0">
                </div>
                <div class="flex-1 min-w-0">
                    <a href="{{ route('reports.inventory.year', ['year' => $yearReport['year']]) }}"
                        class="focus:outline-none">
                        <span aria-hidden="true" class="absolute inset-0"></span>
                        <p class="text-lg font-medium text-stone-900">{{ $yearReport['year'] }}</p>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection