@extends('site.layout.layout')

@section('title',__('Order details'))

@if($order)
    @section('content')
    <main class="orders_page shipping_page shopping_cart_page product_details_page py-2">
        <!-- ------- breadcrumb ---------- -->
        <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('Site.MyOrders') }}"><i class="fas fa-arrow-right-long"></i> {{ __('My Orders') }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page"> {{ __('Order details') }}</li>
            </ol>
        </nav>
        <section class="all_products row py-3 px-3 px-lg-4 mb-5">
            <div class="col-sm-4 col-md-3 mb-3">
                <nav class="setting_nav d-flex d-sm-block">
                    <a href="{{ route('Site.MyOrders') }}" class="active">
                        <img src="{{ asset('site/img/3d-cube-scan.png') }}" alt=""> {{ __('My Orders') }}
                    </a>
                    <a href="{{ route('Site.SellMyProducts') }}">
                        <img src="{{ asset('site/img/light/buy-crypto.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/buy-crypto.png') }}" data-dark="{{ asset('site/img/dark/buy-crypto.png') }}" alt=""> {{ __('Sell My Products')}}
                    </a>
                    <a href="{{ route('Site.Profile') }}">
                        <img src="{{ asset('site/img/light/profile-circle.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/profile-circle.png') }}" data-dark="{{ asset('site/img/dark/profile-circle.png') }}" alt=""> {{ __('Profile') }}
                    </a>
                    <a href="{{ route('Site.favorites.index') }}">
                        <img src="{{ asset('site/img/light/heart.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/heart.png') }}" data-dark="{{ asset('site/img/dark/heart.png') }}" alt=""> {{ __('Favorites') }}
                    </a>
                    <a href="{{ route('Site.addresses.index') }}">
                        <img src="{{ asset('site/img/light/location.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/location.png') }}" data-dark="{{ asset('site/img/dark/location.png') }}" alt=""> {{ __('Addresses') }}
                    </a>
                </nav>
            </div>
            <div class="col-sm-8 col-md-9">
                <section class="title_sec">
                    <h3 class="section_title">{{ __('Order details') }}</h3>
                </section>
                @php
                    $progress = $order->shipping_progress;

                    $steps = [
                        ['threshold' => 0,   'label' => __('Pending'),              'icon' => '<i class="fas fa-check"></i>'],
                        ['threshold' => 33,  'label' => __('Ready for Shipping'),   'icon' => '<img src="' . asset('site/img/box-tick.png') . '" alt="">'],
                        ['threshold' => 66,  'label' => __('Shipping in Progress'), 'icon' => '<img src="' . asset('site/img/truck-time.png') . '" alt="">'],
                        ['threshold' => 100, 'label' => __('Shipped'),              'icon' => '<img src="' . asset('site/img/truck-tick.png') . '" alt="">'],
                    ];

                    $doneIcon = $steps[0]['icon']; // Use first step's icon for all "done" steps
                @endphp

                <section class="order_progress row my-4 py-3">
                    @foreach ($steps as $index => $step)
                        @php
                            $class = 'next';

                            if ($progress >= $step['threshold']) {
                                $class = 'done';
                            } elseif (
                                $progress < $step['threshold'] &&
                                ($index === 0 || $progress >= $steps[$index - 1]['threshold'])
                            ) {
                                $class = 'current';
                            }

                            $icon = $class === 'done' ? $doneIcon : $step['icon'];
                        @endphp
                        <figure class="step {{ $class }} fit_height_start justify-content-center col-3">
                            <div class="figure_container">{!! $icon !!}</div>
                            <figcaption class="w-100">{{ $step['label'] }}</figcaption>
                        </figure>
                    @endforeach
                </section>

                <div class="row">
                    <div class="store col-lg-8 px-2 mb-3 mb-lg-0">
                        <div class="info_card d-lg-flex justify-content-between align-items-start mb-4">
                            <figcaption>
                                <h5 class="mb-2"> {{ __('Order no') }}#<span>{{ $order->id }}</span></h5>
                                <h5 class="mb-2"> {{ $order->orderProducts()->count() ?? 0 }} {{ __('product') }}</h5>
                                <h5 class="mb-2">
                                    {{ __('Order placed on :date', ['date' => $order->created_at->format('d-m-Y')]) }}
                                </h5>
                                <h5> {{ __('Total') }}: {{ $order->total }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h5>
                            </figcaption>
                            <div class="d-flex justify-content-end mt-3 mt-lg-0">
                                @php
                                    $progress = $order->shipping_progress;
                                    if ($progress < 33) {
                                        $statusText = __('Pending');
                                        $statusClass = 'orange';
                                    } elseif ($progress < 66) {
                                        $statusText = __('Ready for Shipping');
                                        $statusClass = 'orange';
                                    } elseif ($progress < 100) {
                                        $statusText = __('Shipping in Progress');
                                        $statusClass = 'orange';
                                    } else {
                                        $statusText = __('Shipped');
                                        $statusClass = 'green';
                                    }
                                @endphp
                                <p class="order_status {{ $statusClass }}">
                                    {{ $statusText }} ( {{ $progress }}% )
                                </p>
                            </div>
                        </div>
                        <h3 class="section_title mb-2"> {{ __('Products information') }}</h3>
                        @foreach($order->orderProducts ?? [] as $orderProduct)
                            <div class="info_card p-3 mb-3">
                                <figure class="d-flex mb-3">
                                    <div class="product_container">
                                        <img src="{{ Storage::disk('public')->url($orderProduct->product?->images?->first()?->image) }}" class="img-fluid" alt="">
                                    </div>
                                    <figcaption class="mx-2">
                                        <span class="d-block">{{ __('Store title') }}: {{ $orderProduct->store?->getTranslation('title',app()->getLocale()) }}</span>
                                        <h5 class="my-2"> {{ $orderProduct->product?->getTranslation('title',app()->getLocale()) }}</h5>
                                        <p class="mb-2"> {{ $orderProduct->price }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></p>
                                        <p class="order_status @if($orderProduct->shipping_status != 'shipped') orange @else green @endif">{{ $orderProduct->shipping_status_label }}</p>
                                    </figcaption>
                                </figure>
                                @if($orderProduct->shipping_status != 'shipped')
                                    @if($orderProduct->shipping_type == 3)
                                        <!-- <h5><img @if(app()->getLocale() == 'ar') src="{{ asset('site/img/shipping-icon.png') }}" @else src="{{ asset('site/img/shipping-icon-en.png') }}" @endif alt="">{{ $orderProduct->shippingCompany?->title }} {{ $orderProduct->shipping_cost }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h5> -->
                                        <div class="d-xxl-flex justify-content-between align-items-center">
                                            <figure class="d-flex align-items-center mb-3 mb-xxl-0">
                                                <div class="figure_container">
                                                    <img src="{{ Storage::disk('public')->url($orderProduct->shippingCompany?->logo) }}" class="img-fluid" alt="">
                                                </div>
                                                <figcaption class="mx-2">
                                                    <h5> {{$orderProduct->shippingCompany?->title }} </h5>
                                                    <h5> {{ $orderProduct->shipping_cost }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h5>
                                                </figcaption>
                                            </figure>
                                            <h5><img @if(app()->getLocale() == 'ar') src="{{ asset('site/img/shipping-icon.png') }}" @else src="{{ asset('site/img/shipping-icon-en.png') }}" @endif alt=""> {{ __('Company delivery') }}</h5>
                                        </div>
                                    @elseif($orderProduct->shipping_type == 2)
                                        <div class="d-xxl-flex justify-content-between align-items-center">
                                            <figure class="d-flex align-items-center mb-3 mb-xxl-0" style="width:70%!important">
                                                <div class="figure_container">
                                                    <img src="{{ Storage::disk('public')->url($order->address?->user?->image) }}" class="img-fluid" alt="">
                                                </div>
                                                <figcaption class="mx-2">
                                                    <h5> {{ $order->address?->first_name . ' ' . $order->address?->second_name }} </h5>
                                                    <h5 class="my-1"> {{ $order->address?->city?->getTranslation('city',app()->getLocale()) . ' ' . $order->address?->region . ' ' . $order->address?->street . ' ' . $order->address?->distinct }}</h5>
                                                    <h5> {{ $order->address?->country_code . ' ' . $order->address?->mobile }}</h5>
                                                </figcaption>
                                            </figure>
                                            <h5><img @if(app()->getLocale() == 'ar') src="{{ asset('site/img/shipping-icon.png') }}" @else src="{{ asset('site/img/shipping-icon-en.png') }}" @endif alt=""> {{ __('Store delivery') }}</h5>
                                        </div>
                                    @else
                                        <div class="d-lg-flex justify-content-between align-items-center mb-3">
                                            <figure class="d-flex align-items-center mb-3 mb-lg-0">
                                                <div class="figure_container" style="height:90px!important">
                                                    <img src="{{ Storage::disk('public')->url($orderProduct->store?->logo) }}" class="img-fluid" alt="">
                                                </div>
                                                <figcaption class="mx-2">
                                                    <h5> {{ $orderProduct->store?->getTranslation('title',app()->getLocale()) }}</h5>
                                                    <h5 class="my-2"> {{ $orderProduct->store?->city?->getTranslation('city',app()->getLocale()) . ' ' . $orderProduct->store?->region }}</h5>
                                                    <h5> {{ $orderProduct->store?->owner?->country_code . ' ' . $orderProduct->store?->owner?->mobile }}</h5>
                                                </figcaption>
                                            </figure>
                                            <h5><img @if(app()->getLocale() == 'ar') src="{{ asset('site/img/shipping-icon.png') }}" @else src="{{ asset('site/img/shipping-icon-en.png') }}" @endif alt=""> {{ __('PickUp') }}</h5>
                                        </div>
                                        <button type="button" data-bs-toggle="modal" data-bs-target="#OrderCodeModal{{ $orderProduct->id }}" class="primaryBgBtn w-100">
                                            {{ __('Order receipt code') }}
                                        </button>
                                        <!-- Modal -->
                                        <div class="modal fade" id="OrderCodeModal{{ $orderProduct->id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header justify-content-end border-0 pb-0">
                                                        <button type="button" data-bs-dismiss="modal" aria-label="Close"><i class="far fa-circle-xmark"></i></button>
                                                    </div>
                                                    <div class="modal-body figure_modal fit_height_start justify-content-center pb-5">
                                                        <img src="{{ asset('site/img/request-code-img.png') }}" class="img-fluid" alt="">
                                                        <h2 class="section_title pt-5 pb-3"> {{ __('Order receipt code') }}</h2>
                                                        <h5> {{ __('Please provide this code to the seller upon receipt of the product to complete the transaction successfully.') }}</h5>
                                                        <h1 class="pb-2 pt-3">{{ $orderProduct->shipping_code }}</h1>
                                                        <p><i class="fas fa-info-circle"></i> {{ __('Do not share this code until you are sure that you have received the product.') }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @else