@extends('frontend.main_master')
@section('body-class', 'panel-page panel-scrollable')
@section('title', 'Siparişlerim | ' . t('site-title'))

@push('styles')
<style>
    body.panel-page {
        padding-top: 0 !important;
    }
</style>
@endpush

@section('content')
<div class="container py-4 py-lg-5" style="max-width:900px;">
    <h1 class="h3 mb-4">Siparişlerim</h1>

    @if ($orders->count() > 0)
        <div class="d-flex flex-column gap-3">
            @foreach ($orders as $order)
                <div class="border rounded-3 p-3" style="background:#fff;">
                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                        <div>
                            <strong>{{ $order->invoice_number ?? ('Sipariş #' . $order->id) }}</strong>
                            <div class="small text-muted">{{ $order->created_at->format('d.m.Y H:i') }} — {{ $order->items->count() }} ürün</div>
                        </div>
                        <div class="text-end">
                            <span class="badge {{ $order->storeOrderDetail->fulfillment_status === 'delivered' ? 'bg-success' : 'bg-warning text-dark' }}">
                                {{ $order->storeOrderDetail->statusLabel() }}
                            </span>
                            <div class="fw-bold mt-1">{{ number_format($order->total, 2, ',', '.') }} ₺</div>
                        </div>
                    </div>
                    <a href="{{ route('my-orders.show', $order) }}" class="btn btn-sm btn-outline-primary mt-2">Sipariş Detayı</a>
                </div>
            @endforeach
        </div>

        <div class="mt-4">
            {{ $orders->links() }}
        </div>
    @else
        <div class="text-center py-5 border rounded-3" style="background:#fff;">
            <i class="fa-solid fa-box-open text-muted" style="font-size:3rem;"></i>
            <p class="text-muted mt-3 mb-0">Henüz mağaza siparişiniz yok.</p>
            <a href="{{ route('store.index') }}" class="btn text-white mt-2" style="background:var(--astro-main-green);">Mağazaya Git</a>
        </div>
    @endif
</div>
@endsection