@extends('frontend.master')

@section('title')
    Order Track
@endsection

@section('content')
    <!-- Start of Main -->
    <main class="main">
        <!-- Start of Page Header -->
        <div class="page-header">
            <div class="container">
                <h1 class="page-title mb-0">Track Order</h1>
            </div>
        </div>
        <!-- End of Page Header -->

        <!-- Start of Breadcrumb -->
        <nav class="breadcrumb-nav pb-8">
            <div class="container">
                <ul class="breadcrumb">
                    <li><a href="{{ route('home') }}">Home</a></li>
                    <li>Track Order</li>
                </ul>
            </div>
        </nav>

        <form class="tack_form" action="{{ route('track.order') }}" method="GET">
            <div class="wsus__track_input">
                <div class="row">
                    <div class="col-lg-6">
                        <label class="d-block mb-2">invoice No*</label>
                        <input type="text" placeholder="H25-21578455" name="invoice_no"
                            value="{{ @$order->invoice_no }}">
                    </div>
                    <div class="col-lg-2" style="margin-top: 25px;">
                        <label for="" class="mb-2 d-block"></label>
                        <button type="submit" class="btn btn-dark btn-rounded">track</button>

                    </div>
                </div>
            </div>
        </form>


        <!-- End of Breadcrumb -->
        @if (!empty($order))
            <div class="container">
                <div class="row">

                    <div class="col-xl-12">
                        <div class="wsus__track_header">
                            <div class="wsus__track_header_text">
                                <div class="row">
                                    <div class="col-xl-3 col-sm-6 col-lg-3">
                                        <div class="wsus__track_header_single">
                                            <h5>Order Date </h5>
                                            <p>{{ date('d M Y', strtotime(@$order->created_at)) }}</p>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 col-lg-3">
                                        <div class="wsus__track_header_single">
                                            <h5>shopping by:</h5>
                                            <p>{{ @$order?->billingInfo?->name }}</p>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 col-lg-3">
                                        <div class="wsus__track_header_single">
                                            <h5>status:</h5>
                                            <p>{{ @$order->order_status }}</p>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 col-lg-3">
                                        <div class="wsus__track_header_single border_none">
                                            <h5>tracking:</h5>
                                            <p>{{ @$order->invoice_no }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-xl-12">
                        <ul class="progtrckr" data-progtrckr-steps="4">
                            <li class="progtrckr_done icon_one check_mark">pending</li>

                            @if (@$order->order_status == 'canceled')
                                <li class="progtrckr_done icon_two">

                                    Processing</li>
                                <li class="icon_three">
                                    on the way</li>
                                <li class="icon_four red_mark mt-5">Canceled</li>
                            @else
                                <li class="progtrckr_done icon_two @if (
                                    @$order->order_status == 'processed' ||
                                        @$order->order_status == 'on_the_way' ||
                                        @$order->order_status == 'delivered') check_mark @endif">

                                    Processing</li>

                                <li class="icon_three @if (@$order->order_status == 'on_the_way' || @$order->order_status == 'delivered') check_mark @endif">on the way
                                </li>

                                <li class="icon_four @if (@$order->order_status == 'delivered') check_mark @endif">Delivered</li>
                            @endif
                        </ul>
                    </div>

                    <div class="col-xl-12" style="margin-bottom: 20px;">
                        <a href="{{ url('/') }}" class="btn btn-dark btn-sm btn-rounded"><i
                                class="fas fa-chevron-left"></i>
                            back to
                            home</a>
                    </div>
                </div>
            </div>
        @endif

    </main>
    <!-- End of Main -->
@endsection