@extends('layouts.user')

@section('content')

<!-- page-title -->
<div class="page-title" style="background-image: url(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>

<!-- my-account -->
<section class="flat-spacing">
    <div class="container">
        <div class="my-account-wrap">
            <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><span class="my-account-nav-item active">Your Orders</span></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>

            <div class="my-account-content">
                <div class="account-orders">
                    <div class="wrap-account-order">
                        <table>
                            <thead>
                                <tr>
                                    <th class="fw-6">Order</th>
                                    <th class="fw-6">Date</th>
                                    <th class="fw-6">Status</th>
                                    <th class="fw-6">Total</th>
                                    <th class="fw-6">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="orders-container">
                                @if($orders->count())
                                    @foreach($orders as $order)
                                        <tr class="tf-order-item">
                                            <td>{{ $order->order_id }}</td>
                                            <td>{{ $order->order_date }}</td>
                                            <td>{{ ucfirst($order->order_status) }}</td>
                                            <td>₹{{ number_format($order->order_total, 2) }} for {{ $order->items_count }} items</td>
                                            <td>
                                               <a href="{{ route('my.orders.details', $order->order_id) }}" class="tf-btn btn-fill radius-4">
                                                   <span class="text">View</span>
                                               </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="5">No orders found.</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /my-account -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Auto-refresh orders every 10 seconds
    setInterval(function() {
        $.ajax({
            url: "{{ route('my.orders.fetch') }}",
            type: 'GET',
            success: function(data) {
                let container = $('#orders-container');
                container.empty();

                if(data.length > 0){
                    data.forEach(function(order){
                        container.append(`
                            <tr class="tf-order-item">
                                <td>#${order.order_id}</td>
                                <td>${order.order_date}</td>
                                <td>${order.order_status || 'Pending'}</td>
                                <td>₹${order.order_total} for ${order.items_count || 1} items</td>
                                <td>
                                    <a href="{{ url('my-orders') }}/${order.order_id}" class="tf-btn btn-fill radius-4">
                                        <span class="text">View</span>
                                    </a>
                                </td>
                            </tr>
                        `);
                    });
                } else {
                    container.append('<tr><td colspan="5">No orders found.</td></tr>');
                }
            }
        });
    }, 10000);
</script>

@endsection