@extends('frontend.layouts.app', ['title' => 'My Orders'])

@section('content')
    <div class="wrapper">
        @include('frontend.layouts.sidebar', ['title' => 'Orders'])
        <div class="my_order_page">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-lg-4 col-md-12">
                        <x-left-side-tabs />
                    </div>
                    <div class="col-xl-9 col-lg-8 col-md-12">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="main-title-tab">
                                    <h4><i class="uil uil-box"></i> My Orders</h4>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12">
                                @if ($orders->isNotEmpty())
                                    @foreach ($orders as $order)
                                        <div class="order-list">
                                            <div class="order-list-box">
                                                <div class="orderlist-i"><span>Order Id:</span>{{ $order->cart_id }}</div>
                                                <div class="orderlist-i"><span>Order Date:</span>{{ $order->order_date }}
                                                </div>
                                                <div class="orderlist-i"><span>Status:</span>{{ $order->order_status }}
                                                </div>
                                                <div class="orderlist-i"><span>Payment
                                                        Method:</span>{{ $order->payment_method }}</div>
                                            </div>
                                            <div class="cmy_order_list">
                                                <div class="order-body10 my_order_container">
                                                    @if ($order->orderItems->isNotEmpty())
                                                        @php $total = 0; @endphp
                                                        {{-- Order Items Row --}}
                                                        <div class="row">
                                                            @foreach ($order->orderItems as $item)
                                                                <div class="col-md-12 mb-3">
                                                                    <div class="d-flex justify-content-between align-items-end success_order_list_container">
                                                                        <ul class="order-dtsll row w-100">
                                                                            {{-- Product Image --}}
                                                                            <li class="col-md-2">
                                                                                <div class="order-dt-img">
                                                                                    <img src="{{ asset('storage/' . $item->varient_image) }}" alt="">
                                                                                </div>
                                                                            </li>
                                                        
                                                                            {{-- Product Info --}}
                                                                            <li class="col-md-10">
                                                                                <div class="order-dt47">
                                                                                    <h4>Price: {{ $item->product_name }}</h4>
                                                                                    <div class="row">
                                                                                        <div class="price-div-checkout">
                                                                                            @php
                                                                                                $mrp = $item->variation->mrp;
                                                                                                $price = $item->variation->price;
                                                                                                $percentOff = $mrp > 0 && $price > 0
                                                                                                    ? round((($mrp - $price) / $mrp) * 100)
                                                                                                    : 0;
                                                                                            @endphp
                                                        
                                                                                            <span class="color-span" id="percentage-span">{{ $percentOff }}% off</span>
                                                                                            <span class="price-mrp" id="product-price-mrp">MRP<del>₹{{ $mrp }}</del></span>
                                                                                            <span class="price-regular" id="product-price-checkout">₹{{ $price }}</span>
                                                                                        </div>
                                                        
                                                                                        @if ($item->variation->variation_attributes->isNotEmpty())
                                                                                            <p class="mb-0">
                                                                                                {{ $item->variation->variation_attributes->map(function ($attribute) {
                                                                                                    return $attribute->attribute->attribute->name . ': ' . $attribute->attribute->name;
                                                                                                })->implode(', ') }}
                                                                                            </p>
                                                                                        @endif
                                                                                    </div>
                                                        
                                                                                    <div class="order-title mt-2 color-span">
                                                                                        {{ $item->quantity }} Item{{ $item->quantity > 1 ? 's' : '' }}:
                                                                                        ₹{{ $item->variation->price * $item->quantity }}
                                                                                    </div>
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                        
                                                                @php
                                                                    $total += $item->variation->price * $item->quantity;
                                                                @endphp
                                                            @endforeach
                                                        
                                                            {{-- ✅ Total AFTER the loop --}}
                                                            <div class="col-md-12">
                                                                <h5 class="text-end mt-3"><strong>Total: ₹{{ $total }}</strong></h5>
                                                            </div>
                                                        </div>
                                                        
                                                    @endif
                                                </div>

                                                {{-- Shipping Address Row --}}
                                                <div class="row mt-3">
                                                    <div class="col-md-12">
                                                        <label><strong>Shipping Address</strong></label>
                                                        <div>{{ $order->address->house_no }}</div>
                                                        <div>{{ $order->address->society }}</div>
                                                        <div>{{ $order->address->city }}</div>
                                                        <div>{{ $order->address->state }}</div>
                                                        <div>{{ $order->address->pincode }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <h1>No Orders Found</h1>
                                @endif
                            </div>

                            {{-- Pagination --}}
                            <div class="col-md-12 pageina-items">
                                {{ $orders->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection