@extends('layouts.frontend.app')
@section('content')

<style>
 .pagination-text p {
    font-size: 16px;
    text-transform: capitalize;
    letter-spacing: 2px;
    height: unset;
}
@media (max-width: 1080px) {
  .orders-table {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px;
    scroll-behavior: smooth;
  }

  .orders-table .table-header,
  .orders-table .order-item {
    min-width: 900px;
  }

  .orders-table .row {
    display: flex;
    flex-wrap: nowrap;
  }

  /* Slim scrollbar */
  .orders-table::-webkit-scrollbar {
    height: 4px;
  }
  .orders-table::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 2px;
  }
  .orders-table::-webkit-scrollbar-thumb:hover {
    background: #888;
  }

  /* Next / Prev button container */
  .scroll-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
  }

  .scroll-btn {
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .scroll-btn:hover {
    background: #0056b3;
  }
}

</style>

<section class='about-section'>

    <div class="container">
        <div class="row">
            <div class="col-md-6 about-frist-row">
                <a href="/" class="back-btn">
                    <span class="svg-ic">
                       <i class="bi bi-arrow-left-circle"></i>
                    </span>
                    Back to Home
                </a>
                <h1>Orders</h1>
              
            </div>
        </div>
    </div>
</section>

<section class='account setion-cform'>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4">
            @include('layouts.frontend.sidebar')
                {{-- <div class="leftsidebar-account">
                    <div class="profile-header">
                        <div class="profile-avatar">
                            <img src="https://t3.ftcdn.net/jpg/02/99/04/20/360_F_299042079_vGBD7wIlSeNl7vOevWHiL93G4koMM967.jpg"
                                alt="">
                        </div>
                        <div class="profile-info">
                            <h4>Sarah Anderson</h4>
                            <div class="profile-bonus">
                                <i class="bi bi-gift"></i>
                                <span>100 bonuses available</span>
                            </div>
                        </div>
                    </div>
                    <div class="nav-account">
                        <ul>
                            <li><a href="{{route('user.dashboard')}}" class='active'><i class="bi bi-box-seam"></i> Orders</a></li>
                          
                            <li><a href="{{route('user.wishlist')}}"><i class="bi bi-heart"></i> Wishlist</a></li>
                            <li><a href="{{route('user.personal.info')}}"><i class="bi bi-person"></i> Personal info</a></li>
                            <li><a href="{{route('user.address')}}"><i class="bi bi-box-seam"></i> Addresses</a></li>
                            <li><a href="{{route('change.password')}}"><i class="bi bi-box-seam"></i> Password Change</a></li>
                            <span class='customer-d'>Customer service</span>
                            <li><a href=""><i class="bi bi-question-circle"></i> Help center</a></li>
                            <li><a href=""><i class="bi bi-file-text"></i> Terms and conditions</a></li>
                            <li><a href="" class='logout'><i class="bi bi-box-arrow-right"></i> Log out</a></li>
                        </ul>
                    </div>
                </div> --}}
            </div>
         
            <div class="col-lg-9 col-md-8">
                <div class="leftsiderbar-account">
                    {{-- <div class="heading-h3">
                        <h3>Orders</h3>
                        <select name="" id="" class='form-select'>
                            <option value="" selected>Select status</option>
                             <option value="all statsues">All statsues</option>
                            <option value="pending">Pending</option>
                            <option value="shipped">Shipped</option>
                            <option value="processing">In processing</option>
                            <option value="delivered">Delivered</option>
                            <option value="cancelled">cancelled</option>
                        </select>
                    </div>
                --}}
             
                    <div class="orders-table">
                        <div class="table-header">
                            <div class="row">
                                <div class="col"><div class="sort-header">Order #</div></div>
                                <div class="col"><div class="sort-header">Order date</div></div>
                                <div class="col"><div class="sort-header">Status</div></div>
                                <div class="col"><div class="sort-header">Total</div></div>
                                <div class="col"><div class="sort-header">Invioces</div></div>
                                <div class="col"><div class="sort-header"></div></div>
                            </div>
                        </div>

                        @foreach($orders as $key => $order)
                            <div class="order-item">
                                <div class="row align-items-center">
                                    <div class="col"><div class="order-id">{{ $order['order_number'] }}</div></div>
                                    <div class="col"><div class="order-date">{{ $order['order_date'] }}</div></div>
                                    <div class="col">
                                        <div class="order-status {{ strtolower($order['status']) }}">
                                            <span class="status-dot"></span>
                                            <span>{{ ucfirst($order['status']) }}</span>
                                        </div>
                                    </div>
                                    <div class="col"><div class="order-total">₹{{ number_format($order['total']),2 }}</div></div>
                                      <div class="col"><div class="order-total"> <a href="{{ route('order.invoice.download', $order['order_id']) }}" class="btn btn-primary btn-invioces">
                                            Download Invoice
                                        </a></div></div>
                                             <div class="col"> <div class="order-products">
                                    <div class="product-thumbnails">
                                        {{-- @foreach(array_slice($order['items'], 0, 3) as $item)
                                            <img src="{{ asset($item['product_image']) }}" alt="Product" class="product-thumb" loading="lazy">
                                        @endforeach --}}
                                    </div>
                                    <button type="button" class="order-details-link collapsed"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#orderDetails{{ $key }}"
                                            aria-expanded="false"
                                            aria-controls="orderDetails{{ $key }}">
                                        View More <i class="bi bi-chevron-down"></i>
                                    </button>
                                   
                                </div></div>
                                </div>
                             
                               
                                
                                <div class="order-details collapse" id="orderDetails{{ $key }}">
                                    <div class="order-details-content">
                                        <div class="order-details-header">
                                            <h5>Order Details</h5>
                                            <div class="order-info">
                                                <div class="info-item"><span class="info-label">Order Date:</span><span class="info-value">{{ $order['order_date'] }}</span></div>
                                                <div class="info-item"><span class="info-label">Payment Method:</span><span class="info-value">{{ $order['payment_method'] }}</span></div>
                                            </div>
                                        </div>

                                        <div class="order-items-list">
                                            @foreach($order['items'] as $item)
                                                <div class="order-item-detail">
                                                    <div class="item-image">
                                                        <img src="{{ asset($item['product_image']) }}" alt="Product" loading="lazy">
                                                    </div>
                                                    <div class="item-info">
                                                        <h6>{{ $item['product_name'] }}</h6>
                                                        <div class="item-meta">
                                                            <span class="item-sku">SKU: {{ $item['product_sku'] }}</span>
                                                            <span class="item-qty">Qty: {{ $item['product_quantity'] }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="item-price">₹{{ number_format($item['product_price']),2 }}</div>
                                                </div>
                                            @endforeach
                                        </div>

                                        <div class="order-summary">
                                           <div class="summary-row"><span>Subtotal:</span><span>₹{{ number_format($order['subtotal'], 2) }}</span></div>
                                            <div class="summary-row"><span>Shipping:</span><span>₹{{ number_format($order['shipping'], 2) }}</span></div>
                                            <div class="summary-row"><span>Tax:</span><span>₹{{ number_format($order['tax'], 2) }}</span></div>
                                            <div class="summary-row total"><span>Total:</span><span>₹{{ number_format($order['total'], 2) }}</span></div>

                                        </div>

                                        <div class="shipping-info">
                                            <div class="shipping-address">
                                                <h6>Shipping Address</h6>
                                                <p>{{ $order['shipping_address'] }}</p>
                                            </div>
                                            <div class="shipping-method">
                                                <h6>Shipping Method</h6>
                                                <p>{{ $order['payment_method'] }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
            <div class="mt-3 pagination-text">
                {!! $pagination !!}
            </div>
                </div>
            </div>
          
        </div>
    </div>
</section>
<style>
.order-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
</style>

<script>
document.querySelectorAll('.order-details-link').forEach((btn) => {
    const target = document.querySelector(btn.dataset.bsTarget);
    const icon = btn.querySelector('i');
    const textNode = Array.from(btn.childNodes).find(node => node.nodeType === Node.TEXT_NODE);

    // Initialize as hidden
    target.style.maxHeight = '0px';

    btn.addEventListener('click', () => {
        if(target.style.maxHeight === '0px' || target.style.maxHeight === '') {
            // Show the div
            target.style.maxHeight = target.scrollHeight + 'px';
            if(textNode) textNode.textContent = 'View Less ';
            icon.classList.remove('bi-chevron-up');
            icon.classList.add('bi-chevron-down');
        } else {
            // Hide the div
            target.style.maxHeight = '0px';
            if(textNode) textNode.textContent = 'View More ';
            icon.classList.remove('bi-chevron-down');
            icon.classList.add('bi-chevron-up');
        }
    });

    // Optional: reset maxHeight after transition to allow dynamic content changes
    target.addEventListener('transitionend', () => {
        if(target.style.maxHeight !== '0px') {
            target.style.maxHeight = 'none'; // allow dynamic height if content changes
        }
    });
});
</script>




@endsection