@extends('ecommerce::frontend.layout.main2')

@section('title') {{ $ecommerce_setting->site_title ?? 'My Orders' }} @endsection

@section('description') {{ $ecommerce_setting->site_description ?? '' }} @endsection

@section('content')
<style>
    /* Order Card Styles matching the Dashboard Design */
    .order-card {
        background: #ffffff;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        padding: 25px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }
    .order-card:hover {
        border-color: #c8102e;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }
    .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
    }
    .order-id {
        font-size: 16px;
        font-weight: 600;
        color: #222;
    }
    .order-date {
        font-size: 14px;
        color: #777;
    }
    .status-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .status-success { background-color: #e6f7ec; color: #28a745; }
    .status-warning { background-color: #fff8e1; color: #ffc107; }
    .status-danger { background-color: #fbecec; color: #dc3545; }
    .status-info { background-color: #e3f2fd; color: #17a2b8; }
    .status-primary { background-color: #e8eaf6; color: #3f51b5; }

    .order-divider {
        border-top: 1px solid #f0f0f0;
        margin: 15px 0;
    }

    .order-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }
    .order-total {
        font-size: 18px;
        font-weight: 700;
        color: #222;
    }
    .order-total span { color: #c8102e; }
    
    .btn-custom-action {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.3s;
    }
    .btn-view {
        background-color: #c8102e;
        color: #fff;
        border: 1px solid #c8102e;
    }
    .btn-view:hover {
        background-color: #a00b24;
        border-color: #a00b24;
        color: #fff;
    }
    .btn-cancel {
        background-color: transparent;
        color: #dc3545;
        border: 1px solid #dc3545;
    }
    .btn-cancel:hover {
        background-color: #dc3545;
        color: #fff;
    }
     .sidebar-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sidebar-menu-list li {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .sidebar-menu-list li:last-child {
        border-bottom: none;
    }
    .sidebar-menu-list a {
        color: #555;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        transition: color 0.3s;
    }
    .sidebar-menu-list a:hover, .sidebar-menu-list a.active {
        color: #c8102e;
        padding-left: 5px;
    }
</style>

<!-- Breadcrumb Area (Matching Dashboard) -->
<div style="padding-top:50px;" class="tf-page-title flat-spacing pb-0">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="text-start">
                    <h1 class="text-display fw-medium">{{trans('file.My Orders')}}</h1>
                    <ul class="breadcrumb-list d-flex align-items-center">
                        <li><a href="{{url('/')}}" class="link">{{trans('file.Home')}}</a></li>
                        <li class="separator mx-2">/</li>
                        <li><a href="{{url('customer/profile')}}" class="link">{{trans('file.dashboard')}}</a></li>
                        <li class="separator mx-2">/</li>
                        <li class="active text-main fw-medium">{{trans('file.My Orders')}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<section style="padding-top:50px;" class="flat-spacing">
    <div class="container">
        <div class="row">
            
            <!-- Sidebar (Matching Dashboard) -->
            <div class="col-lg-3 col-md-4 mb-md-0 mb-4">
                <div class="sidebar-wrapper">
                    <div class="widget-account-nav">
                        <h3 class="widget-title h5 fw-bold text-uppercase mb-4 pb-2 border-bottom">{{trans('Menu')}}</h3>
                        @include('ecommerce::frontend.customer-menu')
                    </div>
                </div>
            </div>

            <!-- Order Content -->
            <div class="col-lg-9 col-md-8">
                
                @if(!empty($sales))
                    <div class="account-dashboard">
                        @foreach($sales as $sale)
                        @php
                            $delivery = App\Models\Delivery::where('sale_id', $sale->id)->first();
                            
                            // Determine Badge Class and Text based on Logic
                            $badgeClass = 'status-info';
                            $badgeText = 'Pending';
                            
                            if($sale->sale_status == 1) {
                                $badgeClass = 'status-success';
                                $badgeText = 'Complete';
                            } elseif($sale->sale_status == 2) {
                                if($delivery) {
                                    if($delivery->status == 1) {
                                        $badgeClass = 'status-info';
                                        $badgeText = 'Packing';
                                    } elseif($delivery->status == 2) {
                                        $badgeClass = 'status-warning';
                                        $badgeText = 'Delivering';
                                    } elseif($delivery->status == 3) {
                                        $badgeClass = 'status-success';
                                        $badgeText = 'Delivered';
                                    }
                                } else {
                                    $badgeClass = 'status-danger';
                                    $badgeText = 'Pending';
                                }
                            } elseif($sale->sale_status == 3) {
                                $badgeClass = 'status-warning';
                                $badgeText = 'Canceled';
                            } else {
                                $badgeClass = 'status-primary';
                                $badgeText = 'On The Way';
                            }
                        @endphp
                        
                        <!-- Order Card Design -->
                        <div class="order-card">
                            <div class="order-header">
                                <div>
                                    <div class="order-id mb-1">Order ID: {{ $sale->reference_no }}</div>
                                    <div class="order-date">{{ date('d M, Y', strtotime($sale->created_at)) }}</div>
                                </div>
                                <div>
                                    <span class="status-badge {{ $badgeClass }}">{{ $badgeText }}</span>
                                </div>
                            </div>

                            <div class="order-divider"></div>

                            <div class="order-footer">
                                <div class="order-total">
                                    Total: <span>{{ $currency->symbol ?? $currency->code }}{{ number_format($sale->grand_total - $sale->coupon_discount, 2) }}</span>
                                </div>
                                <div class="d-flex gap-2">
                                    <a class="btn-custom-action btn-view" href="{{url('customer/order-details')}}/{{$sale->id}}">
                                        <i class="icon icon-eye"></i> View Details
                                    </a>
                                    @if($sale->sale_status == 2)
                                    <a class="btn-custom-action btn-cancel" href="{{url('customer/order-cancel')}}/{{$sale->id}}">
                                        <i class="icon icon-trash"></i> Cancel
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <!-- Empty State -->
                    <div class="card-dashboard text-center py-5">
                        <div class="empty-cart-icon mb-3">
                            <i class="icon icon-package" style="font-size: 48px; color: #ddd;"></i>
                        </div>
                        <h3 class="fw-bold mb-2">{{trans('file.You have not ordered anything yet!')}}</h3>
                        <a href="{{ url('shop') }}" class="btn-custom-action btn-view mt-3">Start Shopping</a>
                    </div>
                @endif

            </div>
        </div>
    </div>
</section>
@endsection