@extends('layouts.app')
@section('content')
<style>
    @media (max-width: 768px) { /* Adjust breakpoint as needed */
      .wg-table {
        display: block;
        overflow-x: auto;
      }

      .table-title,
      .wg-product {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* Adjust based on the number of columns */
        min-width: 900px; /* Ensure equal width for headers and data */
      }

      .table-title li,
      .wg-product > div {
        text-align: center; /* Align text for consistency */
      }

      .img-product {
        max-width: 50px; /* Adjust image size if necessary */
      }

      .table-title {
        display: flex;
        justify-content: space-between;
      }

      .dropdown.default {
        margin-left: auto; /* Push dropdown to the right */
        position: relative;
      }

      .dropdown-menu {
        right: 0; /* Align dropdown menu to the right */
        left: auto; /* Override default alignment */
      }
    }
</style>


<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Order #{{$order_query->reference}}</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>
            <a href="#"><div class="text-tiny">Order detail</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Order #{{$order_query->reference}}</div>
        </li>
    </ul>
</div>
<!-- order-detail -->
    <div class="wg-order-detail">
        <div class="left flex-grow">

        </div>
        <div class="right">

        </div>

    </div>
<div class="row">
    <div class="col-md-9">
        <div class="wg-box mb-20">
            <div class="wg-table table-order-detail">
                <ul class="table-title flex items-center justify-between gap20 mb-24">
                    <li>
                        <div class="body-title">{{ucwords(str_replace("_"," ",$filters['keyword']??"All item"))}}</div>
                    </li>
                    <li>
                        <form id="sortForm" method="POST">
							@csrf
							<input type="hidden" name="keyword" id="sortInput" />

							<div class="dropdown default" style="position: static;">
								<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<span class="body-title-2 flex items-center gap8">Sort <i class="h6 icon-chevron-down"></i></span>
								</button>

								<ul class="dropdown-menu" style="overflow:visible; z-index:9999; position:absolute;">
									<li><a href="#" class="sort-option" data-value="all">All Items</a></li>
									<li><a href="#" class="sort-option" data-value="product_name">Product Name</a></li>
									<li><a href="#" class="sort-option" data-value="attributes">Attributes</a></li>
									<li><a href="#" class="sort-option" data-value="unit_price">Unit Price</a></li>
									<li><a href="#" class="sort-option" data-value="quantity">Quantity</a></li>
									<li><a href="#" class="sort-option" data-value="price">Price</a></li>
								</ul>
							</div>
						</form>

                    </li>
                </ul>
                <ul class="flex flex-column">
                    @foreach($order_query->items as $item)
                    <li class="wg-product">

                        <div class="name product-data">
                            <div class="image">
                                <img src="{{url('storage/admin/shop-bo/'.$item->product_details->image)}}" alt="{{$item->product_details->name}}">
                            </div>
                            <div>
                                <div class="text-tiny">Product name</div>
                                <div class="title">
                                    <a href="#" class="body-title-2">{{$item->product_details->name}}</a>
                                </div>
                            </div>
                        </div>
                        <div class="product-data">
                            <div>
                                <div class="text-tiny">Attributes</div>
                                @foreach($item->attribute_values as $attribute_value)
                                <div class="title">
                                    <a href="#" class="body-title-2">{{$attribute_value->attribute->name.": ".$attribute_value->value}}</a>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="product-data">
                            <div class="text-tiny">Unit Price</div>
                            <div class="title">
                                <div class="body-title-2">₱{{number_format($item->product_price,0)}}</div>
                            </div>
                        </div>
                        <div>
                            <div class="text-tiny">Quantity</div>
                            <div class="title">
                                <div class="body-title-2">{{number_format($item->product_quantity,0)}}</div>
                            </div>
                        </div>
                        <div>
                            <div class="text-tiny">Price</div>
                            <div class="title">
                                <div class="body-title-2">₱{{number_format($item->total_price,0)}}</div>
                            </div>
                        </div>
                        {{-- <div>
                            <div class="title text-end">
                                <div class="body-title-2">
                                    <a href="{{route('shop-bo.order.detail.destroy',['id'=>$item->users_orders_id])}}" class="confirm-link" data-confirm-message="Are you sure you want to delete this product?" data-confirm-text="Yes"><i class="icon-trash-2"></i></a>
                                </div>
                            </div>
                        </div> --}}

                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
        <div class="wg-box mb-20">
            <div class="wg-table table-cart-totals">
                <ul class="table-title flex mb-24">
                    <li>
                        <div class="body-title">Cart Totals</div>
                    </li>
                    <li>
                        <div class="body-title">Price</div>
                    </li>
                </ul>
                <ul class="flex flex-column gap14">
                    <li class="cart-totals-item">
                        <span class="body-text">Subtotal:</span>
                        <span class="body-title-2">₱{{number_format($order_query->amount,2)}}</span>
                    </li>
                    @if($order_query == 'DELIVERY')
                    <li class="divider"></li>
                    <li class="cart-totals-item">
                        <span class="body-text">Shipping:</span>
                        <span class="body-title-2">₱100.00</span>
                    </li>
                    @endif
                    {{--<li class="divider"></li>
                    <li class="cart-totals-item">
                        <span class="body-text">Tax (GST):</span>
                        <span class="body-title-2">₱5.00</span>
                    </li>--}}
                    <li class="divider"></li>
                    <li class="cart-totals-item">
                        <span class="body-title">Total price:</span>
                        <span class="body-title tf-color-1">₱{{number_format($order_query->amount,2)}}</span>
                    </li>

                </ul>
            </div>
        </div>

        @if($order_query == 'DELIVERY')
        <div class="wg-box">
            <div class="wg-table table-cart-totals">

                <ul class="table-title flex mb-24">
                    <li>
                        <div class="body-title">Shipping Address</div>
                    </li>
                </ul>
                <ul class="flex flex-column gap14">
                    <li class="cart-totals-item">

                        <span class="body-text">

                            <textarea class="mb-10" name="shipping_address" tabindex="0" aria-required="true" required="" readonly>{{$order_query->shipping_details->address_1.", ".$order_query->shipping_details->address_2.", ".$order_query->shipping_details->barangay.", ".
                            $order_query->shipping_details->city.", ".$order_query->shipping_details->province}}</textarea>
                            <a href="{{route('shop-bo.order.detail.shipping-address.edit',['order_id' => Crypt::encrypt($order_query->id)])}}" style="position: absolute;"><span  class="icon-edit-3"></span></a>
                        </span>

                    </li>
                </ul>
            </div>
        </div>
        @endif
    </div>
    <div class="col-md-3">
        <div class="wg-box mb-20 gap10">
            <div class="body-title">Summary</div>
            <div class="summary-item">
                <div class="body-text">Order ID</div>
                <div class="body-title-2">{{$order_query->reference}}</div>
            </div>
            {{--@if(!empty($order_query->shipment->courier))
            <div class="summary-item">
                <div class="body-text">Courier</div>
                <div class="body-title-2">{{$order_query->shipment->courier->name}}</div>
            </div>
            @endif--}}
            <div class="summary-item">
                <div class="body-text">Date</div>
                <div class="body-title-2">{{date('d M Y',strtotime($order_query->created_at))}}</div>
            </div>
            <div class="summary-item">
                <div class="body-text">Total</div>
                <div class="body-title-2 tf-color-1">₱{{number_format($order_query->amount,2)}}</div>
            </div>
            <div class="summary-item">
                <div class="body-text">Status</div>
                <div class="body-title-2 tf-color-1">{{$order_query->status}}</div>
            </div>
        </div>
        @if($order_query->status == 'OUT FOR DELIVERY')
        <div class="wg-box gap10 mb-20">
            <div class="body-title">Cancel Shipment</div>
            <a class="tf-button style-1 w-full confirm-link" data-confirm-message="This will revert the order status to PROCESSING." href="{{route('shop-bo.order.cancel-shipment',['order_id' => Crypt::encrypt($order_query->id)])}}">
                <i class="icon-trash"></i>
                Cancel Shipment
            </a>
        </div>
        @endif
        @if($order_query->status == 'READY FOR PICKUP')
        <div class="wg-box gap10 mb-20">
            <div class="body-title">Cancel Pickup</div>
            <a class="tf-button style-1 w-full confirm-link" data-confirm-message="This will revert the order status to PROCESSING." href="{{route('shop-bo.order.cancel-shipment',['order_id' => Crypt::encrypt($order_query->id)])}}">
                <i class="icon-trash"></i>
                Cancel Pickup
            </a>
        </div>
        @endif
        <div class="wg-box mb-20 gap10">
            <form method="POST" action="{{route('shop-bo.order.update-payment',['order_id' => Crypt::encrypt($order_query->id)])}}">
                @csrf
                @honeypot
                <div class="body-title">Payment Method</div>
                <div class="body-text">{{$order_query->shop_payment_methods_name}}</div>
                <br>
                <div class="body-title">Payment Status</div>
                <div class="select flex-grow">
                    <select class="" name="status" id="courier">
                        <option {{$order_query->payment_status == "UNPAID" ? "selected" : ""}}>UNPAID</option>
                        <option {{$order_query->payment_status == "PAID" ? "selected" : ""}}>PAID</option>
                    </select>
                </div>
                <br>
                <button class="tf-button style-1 w-full confirm-form" data-confirm-message="Are you sure you want to update the payment status of this order?">Save Changes</button>
            </form>
        </div>
        @if($order_query->shipping_method != "PICKUP")
            <div class="wg-box mb-20 gap10">
                <form id="branchForm" action="{{ route('shop-bo.order.detail.branch.update', ['order_id' => Crypt::encrypt($order_query->id)]) }}" method="POST">
                    @csrf
                    <div class="body-title">Courier</div>
                    <div class="select flex-grow">
                        <select class="" name="courier" id="courier">
                            @foreach($shop_courier_query as $courier)
                            <option value="{{$courier->id}}" {{$order_query->shipment->courier->id==$courier->id?'selected':''}}>{{$courier->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <br>
                    <div class="body-title">Branch</div>
                    <div class="select flex-grow">
                        <select class="" name="branch" id="branch">
                            @foreach($shop_branch_query as $branch)
                            <option value="{{$branch->id}}" {{$order_query->shop_branches_id==$branch->id?'selected':''}}>{{$branch->province}} {{$branch->city}}</option>
                            @endforeach
                        </select>
                    </div>
                    <br>
                    <a class="tf-button style-1 w-full" href="javascript:void(0);" onclick="document.getElementById('branchForm').submit();">Save Changes</a>
                </form>
            </div>
           		@switch($order_query->status)
                @case('PROCESSING')
                <div class="wg-box gap10">
                    <div class="body-title">Shipment</div>
                    <div class="body-title-2 tf-color-2">Process Order For Shipment</div>
                    <a class="tf-button style-1 w-full" href="{{route('shop-bo.order.process-shipment',['order_id' => Crypt::encrypt($order_query->id)])}}"><i class="icon-truck"></i>Process </a>
                </div>
                @break
                @case('OUT FOR DELIVERY')
                <div class="wg-box gap10">
                    <div class="body-title">Estimated Delivery Date</div>
                    <div class="body-title-2 tf-color-2">{{!empty($order_query->shipment->estimated_delivery_date) ? date('d M Y',strtotime($order_query->shipment->estimated_delivery_date)) : 'N/A'}}</div>
                    <a class="tf-button style-1 w-full" href="{{route('shop-bo.order.tracking',['shipment_id' => Crypt::encrypt($order_query->shipment->id)])}}"><i class="icon-truck"></i>Track order</a>
                    <a class="tf-button style-1 w-full" href="{{route('shop-bo.order.tracking.edit',['shipment_id' => Crypt::encrypt($order_query->shipment->id)])}}"><i class="icon-truck"></i>Update Tracking</a>
                </div>
                @break
                @endswitch
            @else

                @switch($order_query->status)
                @case('PROCESSING')
                <div class="wg-box gap10">
                    <div class="body-title">Pickup</div>
                    <div class="body-title-2 tf-color-2">Process Order For Pickup</div>
                    <a class="tf-button style-1 w-full confirm-link" href="{{route('shop-bo.order.process-pickup',['order_id' => Crypt::encrypt($order_query->id)])}}"
                    data-confirm-message="Are you sure you want to process this order for pickup?" data-confirm-text="Yes">Process</a>
                </div>
                @break
                @case('READY FOR PICKUP')
                <div class="wg-box gap10">
                    <div class="body-title">Pickup</div>
                    <div class="body-title-2 tf-color-2">Order Ready for Pickup</div>
                    <a class="tf-button style-1 w-full confirm-link" href="{{route('shop-bo.order.confirm-pickup',['order_id' => Crypt::encrypt($order_query->id)])}}"
                    data-confirm-message="Are you sure you want to complete this order?" data-confirm-text="Yes">Confirm Pickup</a>
                </div>
                @break
                @endswitch

        @endif
    </div>
</div>
@endsection
@section('page_script')
@parent
<script>
    $(".order-menu").addClass("active");
    $(".order-detail").addClass("active");
</script>
<script>
$(document).on('click', '.sort-option', function(e) {
    e.preventDefault();

    let value = $(this).data('value');
    $("#sortInput").val(value);

    $("#sortForm").submit();
});
</script>

@endsection
<!-- App js -->