@extends('layouts.customer')

@section('title', 'Pesanan Saya')

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    
    <!-- HEADER -->
    <div class="mb-8 flex items-center justify-between">
        <a href="{{ route('customer.dashboard') }}" class="inline-flex items-center gap-2 text-sm font-medium text-gray-500 hover:text-primary bg-white px-4 py-2 rounded-full border border-gray-200 hover:border-gray-300 transition-all shadow-sm">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
        <h1 class="text-2xl font-extrabold text-primary tracking-tight hidden sm:block">Riwayat Pesanan</h1>
    </div>

    @if(session('success'))
        <div class="bg-green-50 text-green-700 border border-green-200 rounded-xl p-4 flex items-center gap-3 mb-6 font-medium text-sm">
            <i class="bi bi-check-circle-fill text-green-500 text-lg"></i>
            {{ session('success') }}
        </div>
    @endif

    <div class="space-y-6">
        @forelse($pesanans as $pesanan)
            <div class="bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden">
                
                <!-- Card Header -->
                <div class="bg-gray-50/50 border-b border-gray-100 px-6 py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div class="flex items-center gap-4">
                        <div class="bg-white p-2.5 rounded-xl border border-gray-200 shadow-sm">
                            <i class="bi bi-bag-check text-xl text-accent"></i>
                        </div>
                        <div>
                            <div class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">Tanggal Pesanan</div>
                            <div class="text-sm font-semibold text-primary">
                                {{ \Carbon\Carbon::parse($pesanan->tanggal_pesanan)->format('d M Y, H:i') }}
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        @php
                            $statusColors = [
                                'menunggu'   => 'bg-yellow-100 text-yellow-700 border-yellow-200',
                                'pending'    => 'bg-yellow-100 text-yellow-700 border-yellow-200',
                                'diproses'   => 'bg-blue-100 text-blue-700 border-blue-200',
                                'dikirim'    => 'bg-purple-100 text-purple-700 border-purple-200',
                                'selesai'    => 'bg-green-100 text-green-700 border-green-200',
                                'dibatalkan' => 'bg-red-100 text-red-700 border-red-200',
                                'bermasalah' => 'bg-red-100 text-red-700 border-red-200'
                            ];
                            $color = $statusColors[$pesanan->status] ?? 'bg-gray-100 text-gray-700 border-gray-200';
                        @endphp
                        <span class="inline-flex items-center px-3 py-1.5 {{ $color }} border text-xs font-bold rounded-lg uppercase tracking-wider">
                            {{ $pesanan->status }}
                        </span>
                    </div>
                </div>
                
                <!-- Card Body -->
                <div class="p-6">
                    <div class="flex flex-col md:flex-row gap-6 items-start md:items-center justify-between">
                        
                        <!-- Left info & products -->
                        <div class="flex-1 w-full min-w-0">
                            <div class="mb-4">
                                <span class="text-xs text-gray-500 font-medium">No. Invoice</span>
                                <div class="text-sm font-bold text-primary">
                                    INV-{{ \Carbon\Carbon::parse($pesanan->tanggal_pesanan)->format('Ymd') }}-{{ str_pad($pesanan->id, 4, '0', STR_PAD_LEFT) }}
                                </div>
                            </div>
                            
                            <!-- Product Miniatures -->
                            <div class="flex gap-3 overflow-x-auto pb-2 custom-scrollbar">
                                @foreach($pesanan->detailPesanans->take(3) as $detail)
                                    <div class="flex items-center gap-3 border border-gray-100 rounded-xl p-2 min-w-[220px] max-w-[240px] shrink-0 bg-white shadow-sm hover:border-gray-200 transition">
                                        @if($detail->produk && $detail->produk->foto)
                                            <img src="{{ asset('storage/' . $detail->produk->foto) }}" class="w-12 h-12 rounded-lg object-cover bg-gray-50 shrink-0">
                                        @else
                                            <div class="w-12 h-12 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
                                                <i class="bi bi-image text-gray-300"></i>
                                            </div>
                                        @endif
                                        <div class="flex-1 min-w-0">
                                            <div class="text-xs font-bold text-primary truncate" title="{{ $detail->produk->nama ?? 'Produk Dihapus' }}">
                                                {{ $detail->produk->nama ?? 'Produk Dihapus' }}
                                            </div>
                                            <div class="text-[11px] font-medium text-gray-500 mt-1">
                                                {{ $detail->jumlah }} x Rp {{ number_format($detail->harga, 0, ',', '.') }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                @if($pesanan->detailPesanans->count() > 3)
                                    <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-gray-50 text-gray-500 text-xs font-bold shrink-0 border border-gray-100 self-center">
                                        +{{ $pesanan->detailPesanans->count() - 3 }}
                                    </div>
                                @endif
                            </div>
                        </div>
                        
                        <!-- Right Total & Action -->
                        <div class="w-full md:w-auto md:min-w-[200px] border-t md:border-t-0 md:border-l border-gray-100 pt-5 md:pt-0 md:pl-6 text-left md:text-right shrink-0">
                            <div class="text-xs text-gray-500 font-medium mb-1">Total Belanja</div>
                            <div class="text-lg font-extrabold text-primary mb-4">
                                Rp {{ number_format($pesanan->total_harga, 0, ',', '.') }}
                            </div>
                            <a href="{{ route('customer.pesanan.detail_pesanan', $pesanan->id) }}" class="block w-full text-center bg-primary text-white text-sm font-bold py-2.5 px-6 rounded-lg hover:bg-gray-800 transition shadow-sm">
                                Lihat Detail
                            </a>
                        </div>
                        
                    </div>
                </div>
                
            </div>
        @empty
            <div class="bg-white border border-gray-100 rounded-3xl shadow-sm p-16 text-center">
                <div class="inline-flex w-24 h-24 bg-gray-50 rounded-full items-center justify-center mb-6">
                    <i class="bi bi-bag-x text-5xl text-gray-300"></i>
                </div>
                <h2 class="text-2xl font-bold text-primary mb-2">Belum Ada Pesanan</h2>
                <p class="text-secondary mb-8">Anda belum melakukan transaksi apapun. Yuk mulai berbelanja!</p>
                <a href="{{ url('/') }}" class="inline-flex items-center gap-2 bg-primary text-white font-bold py-3 px-8 rounded-full hover:bg-gray-800 transition transform hover:scale-105 shadow-lg shadow-gray-200">
                    <i class="bi bi-shop"></i> Mulai Belanja
                </a>
            </div>
        @endforelse
    </div>
</div>

<style>
/* Custom scrollbar for product miniatures row */
.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
</style>
@endsection