@extends('website.layout.app')

@section('content')
    <div class="relative">
        <img src="{{ asset('assets/images/track.jpg') }}" alt="track"
            class="w-[100vw] h-[100vh] object-cover opacity-[0.5]">
        <div class="absolute top-1/4 w-full">
            <div class="flex gap-2 md:justify-between items-center px-5 md:px-24">
                <a href="{{ route('website.home') }}">
                    <i class="ri-corner-up-left-line text-5xl text-yellow-500"></i>
                </a>
                <h1 class="text-2xl md:text-4xl text-white">Order Tracking</h1>
                <div></div>
            </div>
            <div class="mt-14 flex justify-center w-full">
                <div class="bg-white w-[700px] h-[300px] rounded-xl flex flex-col justify-between gap-3 px-10 py-8">
                    <h1 class="font-bold text-xl">Order ID: <span class="text-yellow-500">{{ $package->barcode }}</span>
                    </h1>
                    <div class="flex flex-col gap-3">
                        <div id="bg-bar" class="w-[90%] h-[15px] bg-yellow-200 ms-5 relative">
                            @foreach ($sortedWarehouses as $key => $warehouse)
                                @if (
                                    $package->current_warehouse_id == $sortedWarehouses[$key]->warehouse_id ||
                                        $package->previous_warehouse_id == $sortedWarehouses[$key]->warehouse_id)
                                    <div id="progress-bar" class="h-[15px] bg-yellow-500 mt-10 absolute top-[-40px]"
                                        style="width: {{ (100 / (count($sortedWarehouses) - 1)) * $key + 1 }}%">
                                    </div>
                                @endif
                            @endforeach
                            @for ($i = 0; $i < count($sortedWarehouses); $i++)
                                @if (
                                    $package->previous_warehouse_id == $sortedWarehouses[$i]->warehouse_id ||
                                        $package->current_warehouse_id == $sortedWarehouses[$i]->warehouse_id ||
                                        $i <= array_search($package->previous_warehouse_id, $sortedWarehouses->pluck('warehouse_id')->toArray()) - 1 ||
                                        $i <= array_search($package->current_warehouse_id, $sortedWarehouses->pluck('warehouse_id')->toArray()) - 1)
                                    <div id="circle"
                                        class="w-[45px] h-[45px] rounded-full bg-yellow-500 absolute top-[-15px] flex justify-center items-center z-[99]"
                                        style="left: {{ (100 / (count($sortedWarehouses) - 1)) * $i }}%;">
                                        @if (
                                            $package &&
                                                $package->destination_warehouse_id == $sortedWarehouses[$i]->warehouse_id &&
                                                $package->status != 'Completed')
                                            <i class="ri-archive-line text-2xl"></i>
                                        @elseif($package && $package->current_warehouse_id == $sortedWarehouses[$i]->warehouse_id)
                                            <i class="ri-check-double-line"></i>
                                        @elseif($package && $package->previous_warehouse_id == $sortedWarehouses[$i]->warehouse_id)
                                            <i class="ri-check-double-line"></i>
                                        @elseif($i <= array_search($package->previous_warehouse_id, $sortedWarehouses->pluck('warehouse_id')->toArray()) - 1)
                                            <i class="ri-check-double-line"></i>
                                        @elseif($i <= array_search($package->current_warehouse_id, $sortedWarehouses->pluck('warehouse_id')->toArray()) - 1)
                                            <i class="ri-check-double-line"></i>
                                        @endif
                                    </div>
                                @else
                                    <div id="circle"
                                        class="w-[45px] h-[45px] rounded-full bg-yellow-200 absolute top-[-15px] flex justify-center items-center z-[99]"
                                        style="left: {{ (100 / (count($sortedWarehouses) - 1)) * $i }}%;">

                                        @if ($package && $package->destination_warehouse_id == $sortedWarehouses[$i]->warehouse_id)
                                            <i class="ri-archive-line text-2xl"></i>
                                        @else
                                            <i class="ri-loader-2-line text-2xl"></i>
                                        @endif
                                    </div>
                                @endif
                            @endfor
                        </div>
                        {{-- Each left position should subtracted by 33.33 to their original circle calculated positions --}}
                        <div id="warehouses" class="relative mt-5">
                            <div class="absolute top-[-15px] left-[-1%] flex gap-2 items-center">
                                <i class="ri-store-3-line text-yellow-500 text-3xl"></i>
                                <span class="font-semibold text-sm w-[50%] text-center">
                                    {{ $sortedWarehouses[0]->warehouse->name }}
                                </span>
                            </div>
                            @for ($i = 1; $i < count($sortedWarehouses); $i++)
                                @if ($i != count($sortedWarehouses) - 1)
                                    <div class="absolute top-[-15px] flex gap-2 items-center"
                                        style="left: {{ (100 / (count($sortedWarehouses) - 1)) * $i - 10 }}%;">
                                        <i class="ri-store-3-line text-yellow-500 text-3xl"></i>
                                        <span class="font-semibold text-sm w-[50%] text-center">
                                            {{ $sortedWarehouses[$i]->warehouse->name }}
                                        </span>
                                    </div>
                                @else
                                    <div class="absolute top-[-15px] left-[85%] flex gap-2 items-center">
                                        <i class="ri-store-3-line text-yellow-500 text-3xl"></i>
                                        <span class="font-semibold text-sm w-[50%] text-center">
                                            {{ $sortedWarehouses[$i]->warehouse->name }}
                                        </span>
                                    </div>
                                @endif
                            @endfor
                        </div>
                    </div>
                    <button data-modal-target="default-modal" data-modal-toggle="default-modal" type="button"
                        class="text-yellow-500 hover:text-yellow-800 font-bold self-end">View Detail</button>

                    <div id="default-modal" tabindex="-1" aria-hidden="true"
                        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[9999] justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
                        <div class="relative p-4 w-full max-w-2xl max-h-full">
                            <!-- Modal content -->
                            <div class="relative bg-white rounded-lg shadow">
                                <!-- Modal header -->
                                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t">
                                    <h3 class="text-xl font-semibold text-gray-900">
                                        Order's Detail
                                    </h3>
                                    <button type="button"
                                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
                                        data-modal-hide="default-modal">
                                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                            fill="none" viewBox="0 0 14 14">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                                        </svg>
                                        <span class="sr-only">Close modal</span>
                                    </button>
                                </div>
                                <!-- Modal body -->
                                <div class="p-4 md:p-5 space-y-4">
                                    @foreach ($packages as $package)
                                        <h1><b>{{ $package->package_id }}</b></h1>
                                        <ul>
                                            <li> <b>Cargo Fee: </b> {{ $package->cargo_fee }}</li>
                                            <li> <b>Quantity: </b> {{ $package->quantity }}</li>
                                            <li> <b>Status: </b> {{ $package->status }}</li>
                                            <li> <b>Current Warehouse: </b>
                                                {{ $package->currentWarehouse->name ?? 'In Transit' }}
                                            <li> <b>Arrival Warehouse: </b>
                                                {{ $package->targetWarehouse->name ?? 'In Transit' }}
                                            </li>
                                            <li> <b>Arrived Date: </b> {{ $package->arrived_date ?? 'In Transit' }}</li>
                                        </ul>
                                        <hr>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection