@extends('layouts.dashboardUser')

@section('title', 'Riwayat Laporan Kerja')

@section('content')

<div class=" p-4 sm:p-10 text-gray-800">
    <div class="max-w-xl overflow-x-hidden mx-auto bg-white  border border-gray-300 rounded-xl p-5 sm:p-8">
        <h2 class="text-xl sm:text-2xl font-bold text-blue-900 mb-4 text-center">Riwayat Laporan Kerja</h2>

        <!-- Filter Bulan dan Tahun -->
        <!-- Form Filter -->
        <form action="{{ route('riwayat.laporan') }}" method="GET" class="flex justify-between items-center mb-4 space-x-6">
            <!-- Filter Bulan -->
            <div class="flex items-center space-x-2">
                <label for="bulan" class="font-semibold text-gray-800">Bulan</label>
                <select name="bulan" id="bulan" class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @foreach (range(1, 12) as $i)
                        <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}" @if (str_pad($i, 2, '0', STR_PAD_LEFT) == request('bulan')) selected @endif>
                            {{ \Carbon\Carbon::create()->month($i)->format('F') }}
                        </option>
                    @endforeach
                </select>
            </div>
    
            <!-- Filter Tahun -->
            <div class="flex items-center space-x-2">
                <label for="tahun" class="font-semibold text-gray-800">Tahun</label>
                <select name="tahun" id="tahun" class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @foreach ($years as $tahunItem)
                        <option value="{{ $tahunItem }}" @if ($tahunItem == request('tahun')) selected @endif>{{ $tahunItem }}</option>
                    @endforeach
                </select>
            </div>
    
            <!-- Tombol Filter -->
            <div>
                <button type="submit" class="bg-blue-900 text-white px-5 py-2 rounded-full hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    Cari
                </button>
            </div>
        </form>
        
        
        <div class="space-y-4">
            @foreach ($laporan as $lapor)
                <div class="bg-white shadow-md rounded-lg p-4 flex items-center justify-between border border-blue-900">
                    <div>
                        <p class="text-blue-900 font-semibold">{{ $lapor->lokasi }}</p>
                        <p class="text-gray-600 text-sm">{{ \Carbon\Carbon::parse($lapor->tanggal)->format('d M Y') }}</p>
                    </div>
                    <div>
                        <a href="{{ route('riwayat.laporan.detail', $lapor->id) }}" class="text-white bg-blue-900 px-4 py-2 rounded-md hover:bg-blue-600 transition">Detail</a>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="flex justify-center mt-6">
            {{ $laporan->links() }}
        </div>
    </div>
</div>

@endsection