@extends('layouts.app')

@section('content')
<div class="p-4">
    <h1 class="text-xl font-bold mb-4">Laporan Penjualan</h1>

    <form method="GET" class="mb-4">
        <label for="group" class="text-sm font-semibold mr-2">Tampilkan per:</label>
        <select name="group" onchange="this.form.submit()" class="border rounded p-1 text-sm">
            <option value="daily" {{ $group == 'daily' ? 'selected' : '' }}>Harian</option>
            <option value="monthly" {{ $group == 'monthly' ? 'selected' : '' }}>Bulanan</option>
        </select>
    </form>

    <div class="overflow-x-auto bg-white rounded shadow">
        <table class="min-w-full text-sm">
            <thead class="bg-gray-100 text-left">
                <tr>
                    <th class="px-4 py-2">Periode</th>
                    <th class="px-4 py-2">Jumlah Nota</th>
                    <th class="px-4 py-2">Total Penjualan</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($data as $row)
                    <tr class="border-t">
                        <td class="px-4 py-2">{{ $group == 'monthly' ? date('F Y', strtotime($row->period.'-01')) : date('d M Y', strtotime($row->period)) }}</td>
                        <td class="px-4 py-2">{{ $row->total_nota }}</td>
                        <td class="px-4 py-2">Rp{{ number_format($row->total_penjualan, 0, ',', '.') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="px-4 py-2 text-center text-gray-500">Tidak ada data.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection