@extends('layouts.app')
@section('content')
<style>
    /* === Inventory Table Layout === */
    .wg-table-inventory .table-title-inventory,
    .wg-product-inventory {
        display: grid;
        grid-template-columns: 100px 100px 120px 80px 120px; /* tighter columns, no space between action & name */
        align-items: center;
        column-gap: 0; /* remove space between Action and Product Name */
    }

    .wg-product-inventory .name .image img {
        width: 150px;
        height: 150px;
        border-radius: 6px;
        object-fit: cover;
    }
    .wg-table.table-all-category .wg-product > *:nth-child(1) {
        width: 100px;
    }

    .wg-table.table-all-category ul.table-title > *:nth-child(1) {
        width: 100px;
    }
</style>
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Track Order</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">Track Order</div>
        </li>
    </ul>
</div>
<!-- order-track -->

<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">All item</div>
            </li>
            <li>
                <div class="dropdown default">
                    <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">
                        <li>
                            <a href="javascript:void(0);">Name</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Unit Price</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Quantity</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Price</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <ul class="flex flex-column">
            @foreach($shipment_query->order->items as $item)
            <li class="wg-product">

                <div class="name">
                    <div class="image">
                        <img src="{{url('storage/admin/shop-bo/'.$item->product_details->image)}}" alt="product">
                    </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>
                    <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>

            </li>
            @endforeach
        </ul>
    </div>
</div>
<!-- /order-track -->
<!-- detail -->
<div class="wg-box mb-20">
    <div>
        <h6 class="mb-10">Detail</h6>
        {{-- <div class="body-text">{!! $shipment_query->tracking()->orderBy('id','desc')->first()->details !!}</div> --}}
    </div>
    <div class="road-map">
        @php
            $statuses = [
                "PROCESSING" => "Processing",
                "OUT FOR DELIVERY" => "Out for Delivery",
                "DELIVERED" => "Delivered"
            ];
        @endphp

        @foreach($statuses as $statusKey => $statusName)
            @php

                $tracking = $shipment_query->tracking()->orderBy('id','desc')->where('status', $statusKey)->first();

                $isActive = $tracking ? "active" : "";

            @endphp

            <div class="road-map-item {{ $isActive }}">
                <div class="icon"><i class="icon-check"></i></div>
                <h6>{{ $statusName }}</h6>
                <div class="body-text">
                    @if($tracking)
                        {{ $statusKey === 'OUT FOR DELIVERY' ? 'Order is Out for Delivery' : $tracking->created_at->format('m/d/y H:i:s A') }}
                    @else
                        {{ $statusKey === 'OUT FOR DELIVERY' ? 'Processing' : '' }}
                    @endif
                </div>
            </div>
        @endforeach

    </div>

</div>
<!-- /detail -->
<!-- table -->
<div class="wg-box">
    <div class="flex items-center justify-end gap10 flex-wrap">
        <a class="tf-button style-1 w208" href="{{route('shop-bo.order.tracking.edit',['shipment_id' => Crypt::encrypt($shipment_query->id)])}}"><i class="icon-truck"></i>Update Tracking</a>
    </div>
    <div class="wg-table table-all-category wg-table-inventory">
        <ul class="table-title flex gap20 mb-14 table-title-inventory">
            <li >
                <div class="body-title">Date</div>
            </li>
            <li >
                <div class="body-title">Time</div>
            </li>
            <li>
                <div class="body-title">Status</div>
            </li>
            <li>
                <div class="body-title">Description</div>
            </li>
            <li>
                <div class="body-title">Location</div>
            </li>

        </ul>
        <ul class="flex flex-column">
            @if($shipment_query->tracking && $shipment_query->tracking->isNotEmpty())
            @foreach($shipment_query->tracking()->orderBy('id','desc')->get() as $tracking)
                <li class="wg-product item-row gap20 wg-product-inventory">
                    <div class="body-text">
                        {{ $tracking->created_at->format('Y-m-d') }}
                    </div>
                    <div class="body-text">
                        {{ $tracking->created_at->format('H:i:s') }}
                    </div>
                    <div class="body-text text-main-dark mt-4">
                        {{ $tracking->status }}
                    </div>
                    <div class="body-text text-main-dark mt-4">{{ $tracking->details }}</div>
                    <div class="body-text text-main-dark mt-4">{{ $tracking->location ?? 'N/A' }}</div>

                </li>
            @endforeach
            @else
                <p>No tracking information available for this shipment.</p>
            @endif
        </ul>
    </div>




    {{-- <div class="wg-table table-order-track">
        <ul class="table-title flex gap20 mb-14">
            <li>
                <div class="body-title">Date</div>
            </li>
            <li>
                <div class="body-title">Time</div>
            </li>
            <li>
                <div class="body-title">Status</div>
            </li>
            <li>
                <div class="body-title">Description</div>
            </li>
            <li>
                <div class="body-title">Location</div>
            </li>
        </ul>
        <ul class="flex flex-column">
            @if($shipment_query->tracking && $shipment_query->tracking->isNotEmpty())
                    @foreach($shipment_query->tracking()->orderBy('id','desc')->get() as $tracking)
                        <li class="wg-product item-row gap20">
                            <div class="body-text">{{ $tracking->created_at->format('Y-m-d') }}</div>
                            <div class="body-text">{{ $tracking->created_at->format('H:i:s') }}</div>
                            <div class="body-text">{{ $tracking->status }}</div>
                            <div class="body-text">{{ $tracking->details }}</div>
                            <div class="body-text">{{ $tracking->location ?? 'N/A' }}</div>
                        </li>
                        <li class="divider"></li>
                    @endforeach
            @else
                <p>No tracking information available for this shipment.</p>
            @endif

        </ul>
    </div> --}}
</div>
<!-- /table -->

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