@extends('layouts.user.app')
{{-- @include('layouts.user.header') --}}
@section('content')
<div class="container mx-auto px-4">
    <h1 class="text-2xl font-bold text-[#8B0000] mb-8">Riwayat Pesanan</h1>

    <!-- Filter Buttons -->
    <div class="flex gap-4 mb-6 overflow-x-auto">
        <button class="filter-btn active bg-[#8B0000] text-white px-6 py-2 rounded-full hover:bg-[#660000] transition" data-status="all">
            Semua
        </button>
        <button class="filter-btn bg-white text-[#8B0000] border border-[#8B0000] px-6 py-2 rounded-full hover:bg-[#ffebeb] transition" data-status="confirmed">
            Confirmed
        </button>
        <button class="filter-btn bg-white text-[#8B0000] border border-[#8B0000] px-6 py-2 rounded-full hover:bg-[#ffebeb] transition" data-status="pending">
            Pending
        </button>
        <button class="filter-btn bg-white text-[#8B0000] border border-[#8B0000] px-6 py-2 rounded-full hover:bg-[#ffebeb] transition" data-status="cancelled">
            Cancelled
        </button>
    </div>

    <div class="space-y-6">
        @foreach($riwayats as $riwayat)
        <div class="riwayat-item bg-white rounded-lg shadow-lg p-6" data-status="{{ strtolower($riwayat->status) }}">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold">
                    @if($riwayat->transaksi)
                        {{ $riwayat->transaksi->transaction_code }}
                    @else
                        Reservasi #{{ $riwayat->id }}
                    @endif
                </h2>
                <span class="px-4 py-1 rounded-full text-sm font-semibold
                    {{ $riwayat->status == 'completed' ? 'bg-green-100 text-green-800' : '' }}
                    {{ $riwayat->status == 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}
                    {{ $riwayat->status == 'cancelled' ? 'bg-red-100 text-red-800' : '' }}
                    {{ $riwayat->status == 'confirmed' ? 'bg-green-100 text-green-800' : '' }}">
                    {{ ucfirst($riwayat->status) }}
                </span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <p class="text-gray-600">Tanggal:</p>
                    <p class="font-medium">{{ \Carbon\Carbon::parse($riwayat->date)->format('d M Y') }}</p>
                </div>
                <div>
                    <p class="text-gray-600">Waktu:</p>
                    <p class="font-medium">
                        {{ \Carbon\Carbon::parse($riwayat->start_time)->format('H:i') }}
                    </p>
                </div>
                <div>
                    <p class="text-gray-600">Meja:</p>
                    <p class="font-medium">Meja {{ $riwayat->meja->nomor_meja }} ({{ ucfirst($riwayat->meja->kategori) }})</p>
                </div>
                <div>
                    <p class="text-gray-600">Kapasitas:</p>
                    <p class="font-medium">{{ $riwayat->meja->kapasitas }} Orang</p>
                </div>
            </div>

            @if($riwayat->transaksi)
                <div class="mt-4">
                    <p class="text-gray-600 mb-2">Detail Pesanan:</p>
                    <div class="space-y-2">
                        @foreach($riwayat->transaksi->items as $item)
                            <div class="flex justify-between items-center">
                                <span class="font-medium">- {{ $item->menu_name }}</span>
                                <span>{{ $item->quantity }}x</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="flex justify-end mt-4">
                @if($riwayat->transaksi)
                    <a href="{{ route('transaksi.show', $riwayat->transaksi->id) }}" 
                       class="bg-[#8B0000] text-white px-6 py-2 rounded-lg hover:bg-[#660000] transition transform hover:scale-105">
                        Lihat Detail
                    </a>
                @endif
            </div>
        </div>
        @endforeach
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    const riwayatItems = document.querySelectorAll('.riwayat-item');

    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Remove active class from all buttons
            filterButtons.forEach(btn => {
                btn.classList.remove('active', 'bg-[#8B0000]', 'text-white');
                btn.classList.add('bg-white', 'text-[#8B0000]');
            });

            // Add active class to clicked button
            this.classList.remove('bg-white', 'text-[#8B0000]');
            this.classList.add('active', 'bg-[#8B0000]', 'text-white');

            const status = this.getAttribute('data-status');

            // Filter items
            riwayatItems.forEach(item => {
                if (status === 'all' || item.getAttribute('data-status') === status) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
});
</script>
@endpush
@endsection