@extends('shared.front')
@section('content')
    <section id="tracking-detail" class="section">
        <div class="main-content">
            <div class="title-w-decor">
                <div class="title-decor decor-1"></div>
                <h2>
                    {{ __('messages.tracking.title') }}
                </h2>
                <div class="title-decor decor-2"></div>
            </div>

            <!-- Tracking Form Holder -->
            <div class="tracking-form-holder">
                <!-- Form Holder -->
                <div class="form-holder">
                    <form action="{{ route('home.order_tracking') }}" method="GET" class="tracking-form">
                        <div class="form-col">
                            <input type="text" class="form-control" placeholder="{{ __('messages.tracking.phone') }}"
                                   value="{{ $phone }}"
                                   name="phone" id="phone-number-input">
                            <label for="phone-number-input">{{ __('messages.tracking.phone') }}</label>
                        </div>
                        <div class="form-col">
                            <input type="text" class="form-control" placeholder="{{ __('messages.tracking.order_id') }}"
                                   value="{{ $orderId }}"
                                   name="orderId" id="order-id-input">
                            <label for="order-id-input">{{ __('messages.tracking.order_id') }}</label>
                        </div>
                        <div class="form-col">
                            <button type="submit" class="btn btn-block">{{ __('messages.tracking.submit') }}</button>
                        </div>
                    </form>
                </div>

                <!-- Code detail -->
                @if (isset($order) && $order)

                    @if (count($codes))
                        <section class="section section-code-list">
                            <!-- Main Content -->
                            <div class="main-content">
                                <!-- Container -->
                                <!-- Section Body -->
                                <div class="section-body">
                                    <!-- Container -->
                                    <div class="code-list-wrapper">
                                        <!-- Prize List -->
                                        <ul class="code-list">
                                            <li class="title-row">
                                                <div class="spin-code">
                                                    <span class="context">MÃ QUAY THƯỞNG</span>
                                                </div>
                                                <div class="prize-status">
                                                    <span class="context">TRẠNG THÁI MÃ</span>
                                                </div>
                                                <div class="prize">
                                                    <span class="context">GIẢI THƯỞNG</span>
                                                </div>
                                            </li>
                                        @foreach($codes as $code)
                                            <!-- Prize Item Row -->
                                                <li class="prize-item-row">
                                                    <div class="spin-code">
                                                        @if(in_array($code->status, [\App\Enums\StarSpinCodeStatus::INFORMATION, \App\Enums\StarSpinCodeStatus::COMPLETED, \App\Enums\StarSpinCodeStatus::CANCELLED]))
                                                            {{$code->code}}
                                                        @else
                                                            <a href="{{ route('starspin.join'). '?code=' . $code->code }}"
                                                               style="text-decoration: underline">
                                                                {{$code->code}}
                                                            </a>
                                                        @endif
                                                    </div>
                                                    <div class="prize-status">
                                                        {{ \App\Enums\StarSpinCodeStatus::getDescription($code->status) }}
                                                    </div>
                                                    <div class="prize">{{ $code->gift ? $code->gift->name : '' }}</div>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                <!-- Main Content - END -->
                        </section>
                    @endif

                    <div class="detail-holder">
                        <!-- Detail Head -->
                        <div class="detail-head">
                            <div class="left-col">
                                <p class="id">{{ __('messages.tracking.order_id') }}: {{ $order->id }}</p>
                                <p class="status-value">{{ __('messages.tracking.status.' . \App\Enums\OrderStatus::getStatus($order->status)) }}</p>
                            </div>
                            <div class="right-col">
                                <p class="order-date">
                                    {{ __('messages.tracking.order_date') }}: <span
                                            id="order-date-value">{{ $order->created_at }}</span>
                                </p>
                            </div>
                        </div>
                        <hr>

                        <!-- Detail Body -->
                        <div class="detail-body">
                            <!-- Deliver Info -->
                            <div class="deliver-info">
                                <!-- Left Column -->
                                <div class="left-col">
                                    <article class="receiver-info">
                                        <p class="label">{{ __('messages.tracking.receive_information') }}</p>
                                        <p class="val">
                                            {{ $order->fullname }}<br>
                                            {{ $order->phone }}<br>
                                            {{ $order->address }}
                                        </p>
                                    </article>
                                </div>

                                <!-- Right Column -->
                                <div class="right-col">
                                    <article class="payment-info">
                                        <p class="label">{{ __('messages.tracking.payment_method.title') }}</p>
                                        <p class="val">{{ __('messages.tracking.payment_method.' . ($order->paymentmethod ?? 'cod')) }}</p>
                                    </article>
                                </div>
                            </div>

                            <hr>

                            <!-- Cart Info -->
                            <div class="cart-info">
                                <h3 class="cart-info-title">{{ __('messages.tracking.order_information') }}</h3>
                                <ul class="card-info-list">
                                    <!-- Title Row -->
                                    <li class="title-row">
                                        <p class="name-col">{{ __('messages.tracking.product') }}</p>
                                        <p class="price-col">{{ __('messages.tracking.price') }}</p>
                                        <p class="quantity-col">{{ __('messages.tracking.quantity') }}</p>
                                        <p class="total-col">{{ __('messages.tracking.sub_total') }}</p>
                                    </li>

                                    @foreach($order->products as $product)
                                        <li class="product-item">
                                            <div class="product-col">
                                                <figure class="img-holder product-thumbnail bg-mode">
                                                    <img src="{{ asset($product->thumb) }}" alt="{{ $product->title }}">
                                                </figure>
                                                <p class="prod-name">{{ $product->title }}</p>
                                            </div>
                                            <p class="price-col">{{ Common::numberFormat($product->sale_price) . ' VND' }}</p>
                                            <p class="quantity-col">{{ $product->pivot->quanlity }}</p>
                                            <p class="total-col">{{ Common::numberFormat($product->pivot->quanlity * $product->sale_price) . ' VND' }}</p>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <hr>

                            <!-- Summary Info -->
                            <div class="summary-info">
                                <div class="info-row">
                                    <p class="label">{{ __('messages.tracking.discount') }}</p>
                                    <p class="val">{{ $order->discount ? '-'. Common::numberFormat($order->discount) : '0' }} VND</p>
                                </div>
                                <div class="info-row">
                                    <p class="label">{{ __('messages.tracking.delivery') }}</p>
                                    <p class="val">{{ $order->shipping_fee ? Common::numberFormat($order->shipping_fee) : '0' }} VND</p>
                                </div>
                                <div class="info-row">
                                    <p class="label">{{ __('messages.tracking.delivery_discount') }}</p>
                                    <p class="val">{{ $order->shipping_discount ? '-'. Common::numberFormat($order->shipping_discount) : '0' }} VND</p>
                                </div>
                                <div class="info-row">
                                    <p class="label">{{ __('messages.tracking.total') }}</p>
                                    <p class="val">{{ Common::numberFormat($order->totalprice) }} VND</p>
                                </div>
                            </div>

                            <!-- Map Holder -->
                            @if($order->delivery && $order->delivery->status !== \App\Enums\DeliveryStatus::EXPIRED && $order->delivery->status !== \App\Enums\DeliveryStatus::CANCELED && $order->delivery->status !== \App\Enums\DeliveryStatus::REJECTED && $order->delivery->status !== \App\Enums\DeliveryStatus::COMPLETED)
                                <div class="map-holder" id="tracking-map">
                                    <iframe src="{{ $order->delivery->share_link }}" width="100%"
                                            height="100%"></iframe>
                                </div>
                            @endif
                        </div>
                    </div>
                @elseif($orderId && $phone)
                    <div class="detail-holder text-center">
                        {{ __('messages.tracking.not_found') }}
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection