@extends('layouts.user')
@section('content')
<!-- page-title -->
<div class="page-title" style="background-image: url({{ asset('user_assets/images/section/page-title.jpg') }});">
    <div class="container-full">
        <div class="row">
            <div class="col-12">
                <h3 class="heading text-center">My Account</h3>
                <ul class="breadcrumbs d-flex align-items-center justify-content-center">
                    <li><a class="link" href="{{ url('/') }}">Homepage</a></li>
                    <li><i class="icon-arrRight"></i></li>
                    <li><a class="link" href="#">Pages</a></li>
                    <li><i class="icon-arrRight"></i></li>
                    <li>My Account</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- /page-title -->
<div class="btn-sidebar-account">
    <button data-bs-toggle="offcanvas" data-bs-target="#mbAccount"><i class="icon icon-squares-four"></i></button>
</div>

<section class="flat-spacing">
    <div class="container">
        <div class="my-account-wrap">
            <!-- Sidebar -->
            <div class="wrap-sidebar-account">
                <div class="sidebar-account">
                    <div class="account-avatar">
                        <h6 class="mb_4">{{ session('user_name', 'User Name') }}</h6>
                        <div class="body-text-1">{{ session('user_email', 'user@example.com') }}</div>
                    </div>
                    <ul class="my-account-nav">
                        <li><a href="{{ url('my-account') }}" class="my-account-nav-item">Account Details</a></li>
                        <li><a href="{{ url('my-account/orders') }}" class="my-account-nav-item active">Your Orders</a></li>
                        <li><a href="{{ url('my-account/address') }}" class="my-account-nav-item">My Address</a></li>
                        <li><a href="{{ url('logout') }}" class="my-account-nav-item">Logout</a></li>
                    </ul>
                </div>
            </div>
            <!-- /Sidebar -->

            <!-- Order Details -->
            <div class="my-account-content">
                <div class="account-order-details">
                    <div class="wd-form-order">
                        <div class="order-head">
                            <figure class="img-product">
                                @if($items->first() && $items->first()->product && $items->first()->product->product_thumbnail)
                                    <img src="{{ asset('' . $items->first()->product->product_thumbnail) }}" alt="product">
                                @else
                                    <img src="{{ asset('user_assets/images/default-product.jpg') }}" alt="default product">
                                @endif
                            </figure>
                            <div class="content">
                                <div class="badge badge-success">{{ ucfirst(str_replace('_', ' ', $order->order_status)) }}</div>
                                <h6 class="mt-8 fw-5">Order {{ $order->order_id }}</h6>
                            </div>
                        </div>

                        <div class="tf-grid-layout md-col-2 gap-15 mt-20">
                            <div class="item">
                                <div class="text-2 text_black-2">Order Date</div>
                                <div class="text-2 mt_4 fw-6">{{ \Carbon\Carbon::parse($order->order_date)->format('d F Y, h:i A') }}</div>
                            </div>
                            <div class="item">
                                <div class="text-2 text_black-2">Payment Method</div>
                                <div class="text-2 mt_4 fw-6">{{ ucfirst($order->payment_method ?? 'N/A') }}</div>
                            </div>
                            <div class="item">
                                <div class="text-2 text_black-2">Shipping Method</div>
                                <div class="text-2 mt_4 fw-6">
                                    {{ $order->shipping ? $order->shipping->shipping_method_name : 'Standard Shipping' }}
                                </div>
                            </div>
                            <div class="item">
                                <div class="text-2 text_black-2">Delivery Address</div>
                                <div class="text-2 mt_4 fw-6">
                                    @if($address)
                                        {{ $address->address_name ? $address->address_name . '<br>' : '' }}
                                        {{ $address->address_line1 }}<br>
                                        {{ $address->address_line2 ? $address->address_line2 . '<br>' : '' }}
                                        {{ $address->address_line3 ? $address->address_line3 . '<br>' : '' }}
                                        {{ $address->city }}, {{ $address->state->state_name ?? '' }} - {{ $address->zip_code }}
                                    @else
                                        Address not available
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="widget-tabs style-3 widget-order-tab mt-30">
                            <ul class="widget-menu-tab">
                                <li class="item-title active" data-tab="order-history">
                                    <span class="inner">Order History</span>
                                </li>
                                <li class="item-title" data-tab="item-details">
                                    <span class="inner">Item Details</span>
                                </li>
                            </ul>

                            <div class="widget-content-tab">
                                <!-- Tab 1: Order History (Dynamic Vertical Stepper) -->
                                <div class="widget-content-inner active" id="order-history">
                                    <div class="order-tracking-vertical">

                                        <!-- 1. Pending -->
                                        <div class="tracking-step {{ $order->order_status !== 'Pending' ? 'completed' : 'active' }}">
                                            <div class="step-circle">
                                                <i class="icon-check"></i>
                                            </div>
                                            <div class="step-content">
                                                <h6 class="fw-6">Pending</h6>
                                                <p class="text-2">Your order is pending confirmation.</p>
                                                <small>{{ \Carbon\Carbon::parse($order->order_date)->format('d M Y, h:i A') }}</small>
                                            </div>
                                        </div>

                                        <!-- 2. In Progress -->
                                        <div class="tracking-step {{ in_array($order->order_status, ['In Progress', 'Shipped', 'Delivered']) ? 'completed' : ($order->order_status === 'In Progress' ? 'active' : '') }}">
                                            <div class="step-circle">
                                                <i class="icon-check"></i>
                                            </div>
                                            <div class="step-content">
                                                <h6 class="fw-6">In Progress</h6>
                                                <p class="text-2">Your order is being prepared and packed.</p>
                                            </div>
                                        </div>

                                        <!-- 3. Shipped -->
                                        <div class="tracking-step {{ in_array($order->order_status, ['Shipped', 'Delivered']) ? 'completed' : ($order->order_status === 'Shipped' ? 'active' : '') }}">
                                            <div class="step-circle">
                                                <i class="icon-check"></i>
                                            </div>
                                            <div class="step-content">
                                                <h6 class="fw-6">Shipped</h6>
                                                <p class="text-2">Your order has been shipped.</p>
                                            </div>
                                        </div>

                                        <!-- 4. Delivered -->
                                        <div class="tracking-step {{ $order->order_status === 'Delivered' ? 'completed' : '' }}">
                                            <div class="step-circle">
                                                <i class="icon-check"></i>
                                            </div>
                                            <div class="step-content">
                                                <h6 class="fw-6">Delivered</h6>
                                                <p class="text-2">Your order has been delivered successfully.</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!-- Tab 2: Item Details -->
                                <div class="widget-content-inner" id="item-details" style="display: none;">
                                    @forelse($items as $item)
                                        <div class="order-head mb-20 pb-20 border-bottom">
                                            <figure class="img-product">
                                                @if($item->product && $item->product->product_thumbnail)
                                                    <img src="{{ asset('' . $item->product->product_thumbnail) }}" alt="{{ $item->product->product_name }}">
                                                @else
                                                    <img src="{{ asset('user_assets/images/default-product.jpg') }}" alt="product">
                                                @endif
                                            </figure>
                                            <div class="content flex-grow-1">
                                                <h6 class="text-2 fw-6 mb-8">{{ $item->product->product_name ?? 'Product Not Found' }}</h6>
                                                @if($item->variant_id && $item->variant)
                                                    <div class="mt_4"><span class="fw-6">Variant:</span> {{ $item->variant->variant_name ?? 'N/A' }}</div>
                                                @endif
                                                <div class="mt_4"><span class="fw-6">Price:</span> ₹{{ number_format($item->sale_price, 2) }}</div>
                                                <div class="mt_4"><span class="fw-6">Qty:</span> {{ $item->quantity ?? 1 }}</div>
                                                <div class="mt_4"><span class="fw-6">Subtotal:</span> ₹{{ number_format(($item->sale_price * ($item->quantity ?? 1)), 2) }}</div>
                                            </div>
                                        </div>
                                    @empty
                                        <p>No items found in this order.</p>
                                    @endforelse

                                    <div class="order-summary mt-30 p-20 bg-light radius-8">
                                        <ul class="list-unstyled">
                                            <li class="d-flex justify-content-between text-2 py-2">
                                                <span>Subtotal</span>
                                                <span class="fw-6">₹{{ number_format($order->order_total - $order->shipping_amount, 2) }}</span>
                                            </li>
                                            <li class="d-flex justify-content-between text-2 py-2">
                                                <span>Shipping</span>
                                                <span class="fw-6">₹{{ number_format($order->shipping_amount, 2) }}</span>
                                            </li>
                                            @if($order->tax_amount > 0)
                                            <li class="d-flex justify-content-between text-2 py-2">
                                                <span>Tax</span>
                                                <span class="fw-6">₹{{ number_format($order->tax_amount, 2) }}</span>
                                            </li>
                                            @endif
                                            <li class="d-flex justify-content-between fs-18 fw-7 py-3 border-top mt-3">
                                                <span>Order Total</span>
                                                <span class="text-primary">₹{{ number_format($order->order_total, 2) }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Order Details -->
        </div>
    </div>
</section>
<!-- /my-account -->

<style>
    .order-tracking-vertical {
        position: relative;
        padding-left: 40px;
    }
    .order-tracking-vertical::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e0e0e0;
    }
    .tracking-step {
        position: relative;
        padding-bottom: 30px;
    }
    .tracking-step:last-child {
        padding-bottom: 0;
    }
    .step-circle {
        position: absolute;
        left: -40px;
        top: 4px;
        width: 40px;
        height: 40px;
        background: #fff;
        border: 3px solid #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #aaa;
        z-index: 1;
    }
    .tracking-step.completed .step-circle,
    .tracking-step.active .step-circle {
        background: #28a745;
        border-color: #28a745;
        color: white;
    }
    .step-content h6 {
        margin: 0 0 8px 0;
        color: #222;
    }
    .step-content p {
        margin: 0 0 4px 0;
        color: #666;
    }
    .step-content small {
        color: #999;
        font-size: 13px;
    }
    .widget-menu-tab .item-title {
        cursor: pointer;
    }
    .widget-menu-tab .item-title.active {
        color: #28a745;
        font-weight: 600;
        border-bottom: 2px solid #28a745;
    }
    .badge-success {
        background: #28a745;
        color: white;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 13px;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('.widget-menu-tab .item-title').on('click', function(){
            var target = $(this).data('tab');
            $('.widget-menu-tab .item-title').removeClass('active');
            $(this).addClass('active');
            $('.widget-content-inner').hide();
            $('#' + target).fadeIn().addClass('active');
        });
    });
</script>

@endsection