@extends('frontend.layouts.frontend_app')
@push('style')
    <style>
        .order-tracker {
            padding: 20px;
            background-color: #f6f6f6;
            border-radius: 5px;
        }

        .status {
            display: flex;
            align-items: flex-start;
            position: relative;
        }

        .status-circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .status-circle:after {
            content: '';
            position: absolute;
            left: 9px;
            top: 25px;
            height: 49px;
            width: 3px;
            background: inherit;
            border-radius: 82px;
        }

        .status.disabled {
            opacity: 0;
            visibility: hidden;
            display: none;
        }

        .status-text {
            font-weight: bold;
        }

        .status-description {
            margin-top: 5px;
        }

        .invoice-number-form {
            position: relative;
        }

        .invoice-number-form input {
            height: 50px;
            width: 100%;
            border-radius: 550pc;
            border: 1px solid var(--theme-color);
            padding: 5px 140px 5px 17px;
            outline: unset;
        }

        .invoice-number-form button {
            border: 0;
            padding: 8px 26px;
            background: var(--default-bg);
            color: #fff;
            border-radius: 50px;
            position: absolute;
            top: 0;
            right: 0;
            margin: 6px;
        }
    </style>
@endpush
@section('content')
    <section id="custom_dashboard">
        <div class="container" data-aos="fade-up">
            <div class="row">
                @include('frontend.pages.customer.includes.sidebar')
                <div class="col-lg-9">
                    <div class="card p-0">
                        <div class="card-body">
                            <h2 class="text-center mb-4">{{ __('pages.Order Tracke') }}r</h2>
                            <div class="row justify-content-center mb-4">
                                <div class="col-lg-7">
                                    <form action="{{ route('customer.order.track') }}" class="invoice-number-form">
                                        <input type="text" value="{{ request('invoice_id') }}" name="invoice_id"
                                               placeholder="{{ __('pages.Enter Invoice') }}">
                                        <button type="submit"><i class="fa fa-search"></i> {{ __('pages.Search') }} </button>
                                    </form>
                                </div>
                            </div>
                            @if(!empty($order))
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="order-tracker">
                                            <div class="status  @if(!$order->order_placed) disabled @endif">
                                                <div class="status-circle bg-primary"></div>
                                                <div>
                                                    <p class="status-text">{{ __('pages.Order Placed') }}</p>
                                                    <p class="status-description">{{ __('pages.Your order has been placed
                                                        successfully') }}.</p>
                                                </div>
                                            </div>

                                            <div class="status @if(!$order->order_processing) disabled @endif">
                                                <div class="status-circle bg-secondary"></div>
                                                <div>
                                                    <p class="status-text">{{ __('pages.Processing') }}</p>
                                                    <p class="status-description">{{ __('pages.We are processing your order') }}.</p>
                                                </div>
                                            </div>

                                            <div class="status @if(!$order->order_shipped) disabled @endif">
                                                <div class="status-circle bg-warning"></div>
                                                <div>
                                                    <p class="status-text">{{ __('pages.Shipped') }}</p>
                                                    <p class="status-description">{{ __('pages.Your order has been shipped') }}.</p>
                                                </div>
                                            </div>

                                            <div class="status @if(!$order->order_delivered) disabled @endif">
                                                <div class="status-circle bg-success"></div>
                                                <div>
                                                    <p class="status-text">{{ __('pages.Delivered') }}</p>
                                                    <p class="status-description">{{ __('pages.Your order has been delivered') }}.</p>
                                                </div>
                                            </div>

                                            <div class="status @if(!$order->order_cancelled) disabled @endif">
                                                <div class="status-circle bg-danger"></div>
                                                <div>
                                                    <p class="status-text">{{ __('pages.Cancelled') }}</p>
                                                    <p class="status-description">{{ __('pages.Your order has been cancelled') }}.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <p>
                                            <b>{{ __('pages.Estimated delivery date') }}:</b><br>
                                            @if($order->delivery_date != null)
                                                {{ date('Y-m-d', strtotime($order->delivery_date)) }}
                                            @endif
                                        </p>
                                        <div class="mt-3">
                                            <strong>{{ __('pages.Notes') }}:</strong>
                                            {{ $order->order_note }}
                                        </div>
                                    </div>
                                </div>
                            @else
                                @if(request('invoice_id'))
                                    <h4 class="text-center my-5 text-muted">
                                        {{ __('pages.Opps! Sorry order not found please try again!') }}
                                    </h4>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection