@extends('layouts.main')

@section('title', 'Siparişlerim')

@section('content')
<div class="min-h-screen bg-[#b4bf9f] flex items-center">
    <div class="container mx-auto px-4 py-8 lg:mt-28">
        <div class="flex flex-wrap">
            @include('customer.partials.account-sidebar')

            <!-- Sağ İçerik -->
            <div class="w-full lg:w-3/4 lg:pl-6">
                <div class="bg-[#DBDBBC] rounded-xl shadow-lg p-8">
                    <div class="flex justify-between items-center mb-8">
                        <div>
                            <h1 class="text-3xl font-bold text-[#2C5530] mb-4">Siparişlerim</h1>
                            <div class="h-1 w-24 bg-[#2C5530] rounded"></div>
                        </div>
                    </div>

                    <div class="space-y-6">
                        @forelse($orders as $order)
                            <div class="bg-[#b4bf9f]/50 rounded-lg shadow-sm overflow-hidden">
                                <!-- Sipariş Başlığı -->
                                <div class="p-4 bg-[#2C5530]/5 border-b border-[#2C5530]/10">
                                    <div class="flex flex-col lg:flex-row justify-between gap-2 lg:items-center">
                                        <div class="flex flex-row items-center">
                                            <span class="text-sm text-[#2C5530]/70 min-w-[80px]">Sipariş No:</span>
                                            <span class="ml-2 font-medium text-[#2C5530] break-all">{{ $order->order_number }}</span>
                                        </div>
                                        <div class="flex flex-row items-center">
                                            <span class="text-sm text-[#2C5530]/70 min-w-[45px]">Tarih:</span>
                                            <span class="ml-2 text-[#2C5530]">{{ $order->created_at->format('d.m.Y H:i') }}</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Sipariş Detayları -->
                                <div class="p-4">
                                    <div class="flex flex-col lg:flex-row justify-between gap-4 lg:items-start">
                                        <div class="space-y-1">
                                            <div class="text-sm text-[#2C5530]/70">Durum</div>
                                            <div class="mt-1 text-[#2C5530]">
                                                {{ $order->getStatusTitle() }}
                                            </div>
                                        </div>
                                        <div class="lg:text-right">
                                            <div class="text-[#2C5530]/70">Toplam Tutar</div>
                                            <div class="text-xl font-bold text-[#2C5530]">₺{{ number_format($order->total, 2) }}</div>
                                        </div>
                                    </div>

                                    <!-- Teslimat Adresi -->
                                    <div class="mt-4 pt-4 border-t border-[#2C5530]/10">
                                        <div class="text-sm text-[#2C5530]/70 mb-1">Teslimat Adresi:</div>
                                        <div class="text-[#2C5530] break-words">
                                            {{ $order->shipping_address }}
                                        </div>
                                    </div>

                                    <!-- Sipariş Aksiyonları -->
                                    <div class="mt-4 pt-4 border-t border-[#2C5530]/10 flex justify-end gap-3">
                                        <a href="{{ route('customer.orders.show', $order->getHashedOrderNumber()) }}"
                                            class="inline-flex items-center px-4 py-2 text-sm text-[#2C5530] hover:text-[#2C5530]/80 transition-colors duration-200">
                                            Sipariş Detayı
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="bg-[#b4bf9f]/30 rounded-lg p-8 text-center">
                                <p class="text-[#2C5530] text-lg">Henüz siparişiniz bulunmamaktadır.</p>
                                <a href="{{ route('order') }}"
                                    class="inline-block mt-4 text-[#2C5530] hover:text-[#2C5530]/80 transition duration-200">
                                    Alışverişe başlamak için tıklayın
                                </a>
                            </div>
                        @endforelse

                        @if($orders->hasPages())
                            <div class="mt-6">
                                {{ $orders->links() }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection