@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="mb-8">
            <h1 class="text-2xl font-bold text-gray-800">Generate Laporan</h1>
            <p class="text-gray-600 mt-2">Pilih jenis dan periode laporan yang ingin Anda generate</p>
        </div>

        <div class="card p-6">
            <form action="{{ route('admin.laporan.generate') }}" method="GET">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="jenis" class="block text-sm font-medium text-gray-700 mb-2">
                            Jenis Laporan
                        </label>
                        <select name="jenis" id="jenis"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-[#88D8CC] focus:ring-[#88D8CC]">
                            <option value="transaksi">Laporan Transaksi</option>
                            <option value="barang">Laporan Barang</option>
                        </select>
                    </div>

                    <div>
                        <label for="periode" class="block text-sm font-medium text-gray-700 mb-2">
                            Periode
                        </label>
                        <select name="periode" id="periode"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-[#88D8CC] focus:ring-[#88D8CC]">
                            <option value="hari-ini">Hari Ini</option>
                            <option value="minggu-ini">Minggu Ini</option>
                            <option value="bulan-ini" selected>Bulan Ini</option>
                            <option value="custom">Periode Tertentu</option>
                        </select>
                    </div>
                </div>

                <div id="custom-date" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6" style="display: none;">
                    <div>
                        <label for="tanggal_mulai" class="block text-sm font-medium text-gray-700 mb-2">
                            Tanggal Mulai
                        </label>
                        <input type="date" name="tanggal_mulai" id="tanggal_mulai"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-[#88D8CC] focus:ring-[#88D8CC]">
                    </div>

                    <div>
                        <label for="tanggal_selesai" class="block text-sm font-medium text-gray-700 mb-2">
                            Tanggal Selesai
                        </label>
                        <input type="date" name="tanggal_selesai" id="tanggal_selesai"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-[#88D8CC] focus:ring-[#88D8CC]">
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit"
                        class="bg-[#2c7a7b] hover:bg-[#7AC8BC] text-white font-semibold py-2 px-4 rounded-lg">
                        Generate Laporan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.getElementById('periode').addEventListener('change', function() {
        var customDate = document.getElementById('custom-date');
        if (this.value === 'custom') {
            customDate.style.display = 'grid';
        } else {
            customDate.style.display = 'none';
        }
    });
</script>
@endsection