@extends('layouts.app')
@section('content')
<style>
    /* Use the same grid layout for header and rows */
    .wg-table .table-title,
    .wg-product {
        display: grid;
        grid-template-columns:
            80px      /* Action */
            600px     /* Product */
            120px     /* Order ID */
            80px      /* Amount */
            120px     /* Quantity */
            120px     /* Total */
            150px     /* Shipping Method */
            150px     /* Payment Method */
            150px     /* Transaction Status */
            250px     /* Branch */
            150px     /* Order Status */
            250px;    /* Date */
    }



    /* Remove fixed width for .wg-product .name */
    .wg-product .name {
        max-width: 600px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    /* Prevent wrapping for other columns, keep ellipsis */
    .wg-table .table-title > li:not(:nth-child(2)),
    .wg-product > div:not(.name):not(.branch):not(.date),
    .wg-product > li:not(.name):not(.branch):not(.date) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .orderdetails-table {
        max-height: 420px;    /* vertical max height */
        overflow-y: scroll;     /* vertical scrollbar */
        overflow-x: auto;     /* horizontal scrollbar when needed */
        max-width: 100%;      /* allow container to shrink on small screens */
    }
    .orderdetails-table table {
        width: 100%;
        min-width: 600px;  /* force horizontal scroll on smaller widths */
    }
    .wg-product .branch {
        max-width: 150px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }
</style>
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Archived Order List</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Order</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Archived Order List</div>
        </li>
    </ul>
</div>
<!-- order-list -->
<div class="wg-box">
    <div class="flex items-center justify-between gap10 flex-wrap">
        <div class="wg-filter flex-grow">
            <form class="form-search">
                <fieldset class="name">
                    <input type="text" placeholder="Search here..." class="" name="name" tabindex="2" value="" aria-required="true" required="">
                </fieldset>
                <div class="button-submit">
                    <button class="" type="submit"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>
        <a class="tf-button style-1 w208" href="javascript:void(0)"><i class="icon-file-text"></i>Export all order</a>
    </div>
    <div class="wg-table table-all-category">
    <ul class="table-title mb-14">
        <li><div class="body-title">Action</div></li>
        <li><div class="body-title">Product</div></li>
        <li><div class="body-title">Order ID</div></li>
        <li><div class="body-title">Amount</div></li>
        <li><div class="body-title">Quantity</div></li>
        <li><div class="body-title">Total</div></li>
        <li><div class="body-title">Shipping Method</div></li>
        <li><div class="body-title">Payment Method</div></li>
        <li><div class="body-title">Transaction Status</div></li>
        <li><div class="body-title">Branch</div></li>
        <li><div class="body-title">Order Status</div></li>
        <li><div class="body-title">Date</div></li>
    </ul>

    <ul class="flex flex-column">
        @foreach($orders as $order)
        <li class="wg-product item-row">
            <div class="list-icon-function">
                <a href="{{route('shop-bo.order.undo-archived',['id'=>$order->order_id])}}" class="confirm-link" data-confirm-message="Are you sure you want to remove this order?" data-confirm-text="Yes">
                    <i class="icon-edit-3 fs-2"></i>
                </a>
            </div>
            <div class="name">
                <div class="image">
                    <img src="{{url('storage/admin/shop-bo/'.$order->product_image)}}" alt="{{$order->name}}">
                </div>
                <div class="title">
                    <div class="body-text fw-6">{{$order->name}}</div>
                    <div class="body-text fw-3">{{$order->description}}</div>
                </div>
            </div>
            <div class="body-text">{{$order->reference}}</div>
            <div class="body-text">₱{{number_format($order->amount,2)}}</div>
            <div class="body-text">{{$order->product_quantity}}</div>
            <div class="body-text">₱{{number_format($order->amount*$order->product_quantity,2)}}</div>
            <div class="body-text">{{$order->shipping_method}}</div>
            <div class="body-text">{{$order->payment_method}}</div>
            <div>
                @if($order->payment_status == "UNPAID")
                <div class="block-tracking text-danger bg-1 fw-7">{{$order->payment_status}}</div>
                @else
                <div class="block-available bg-1 fw-7">{{$order->payment_status}}</div>
                @endif
            </div>
            <div class="body-text">{{$order->branch}}</div>
            <div>
                    @if ($order->status == "PENDING")
                        <div class="block-available bg-1 fw-7 text-warning">{{$order->status}}</div>
                    @elseif ($order->status == "PROCESSING")
                        <div class="block-available bg-1 fw-7 text-info">{{$order->status}}</div>
                    @elseif ($order->status == "OUT FOR DELIVERY")
                        <div class="block-available bg-1 fw-7 text-primary">{{$order->status}}</div>
                    @elseif ($order->status == "DELIVERED")
                        <div class="block-available bg-1 fw-7 text-success">{{$order->status}}</div>
                    @elseif ($order->status == "FAILED")
                        <div class="block-available bg-1 fw-7 text-danger">{{$order->status}}</div>
                    @else
                        <div class="block-available bg-1 fw-7 text-primary">{{$order->status}}</div>
                    @endif
                </div>
            <div class="body-text date">{{$order->created_at}}</div>
        </li>
        @endforeach
    </ul>
</div>
    @if($orders->count()>0)
    <div class="divider"></div>
    <div class="flex items-center justify-between flex-wrap gap10">
        <div class="text-tiny">
            Showing {{ $orders->count() }} entries
        </div>
        <ul class="wg-pagination">
            <!-- Previous Page Link -->
            @if ($orders->onFirstPage())
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-left"></i></a>
                </li>
            @else
                <li>
                    <a href="{{ $orders->previousPageUrl() }}"><i class="icon-chevron-left"></i></a>
                </li>
            @endif

            <!-- Page Number Links -->
            @foreach ($orders->getUrlRange(1, $orders->lastPage()) as $page => $url)
                <li class="{{ $page == $orders->currentPage() ? 'active' : '' }}">
                    <a href="{{ $url }}">{{ $page }}</a>
                </li>
            @endforeach

            <!-- Next Page Link -->
            @if ($orders->hasMorePages())
                <li>
                    <a href="{{ $orders->nextPageUrl() }}"><i class="icon-chevron-right"></i></a>
                </li>
            @else
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-right"></i></a>
                </li>
            @endif
        </ul>
    </div>
    @endif
</div>
<!-- /order-list -->

@endsection
@section('page_script')
@parent
<script>
    $(".order-menu").addClass("active");
    $(".order-archived").addClass("active");
</script>
@endsection
<!-- App js -->