@extends('front.layout.infoOrder')
@push('css')

    <style>
        .titel-page{
            color: #5399F8;
            font-size: 25px;
        }
        .title-done p{
            font-size: 20px;

        }
        .row-stepOrder{
            height: max-content;
            background: #F7F7FA;
            padding: 1%;
        }
        .row-stepOrder ul li {
            display: inline-block;
            line-height: 25px;
            padding: 1% 0%;
            color: #707070;
        }
        .row-stepOrder li i{
            font-size: 20px;
            margin: 5px 16px;
            color: #ccc;
            display: block;
        }
        .row-stepOrder i:after{
            border-bottom: 1px solid #ccc;
        }
        .row-stepOrder li.active i{
            color: #678dd6;

        }
        .b00{
            border-top: 1px solid #ccc;
            width: 115px;
            position: relative;
            top: -6px;
        }
        .box-details-done{
            width: 60%;
            background: white;
            display: block;
            margin: 0% auto 2%;
            border: 1px solid #A8A8A8;
            padding: 10px 0px;
            border-radius: 5px;
        }
        .box-details-done h5{
            display: inline-block;
            padding: 0 0 0 4%;
            border-left: 1px solid #a8a8a8;
            margin: 0 4%;
            line-height: 30px;
            color: #678dd6;
            font-size: 17px;
            width: 170px;

        }
        @media (max-width: 767px){
            .mt-100 {
                margin-top: 30px;
            }
            .row-stepOrder ul li {
                font-size: 10px;}

            .b00 {
                width: 10px;
                top: -22px;
            }
            .row-stepOrder {
                padding: 3%}
            .box-details-done {
                width: 90%;
                margin: 0% auto 2%;
                padding: 5px 0px;
            }
            .box-details-done h5 {
                font-size: 13px;
                width: 124px;
            }
            .box-details-done span{
                font-size: 13px;

            }
            .titel-page {
                font-size: 20px;
            }
            .title-done p {
                font-size: 15px;
            }

        }
    </style>



@endpush

@section('content')

    <div class="text-center order-bar">
        <a href="{{route('main')}}"><span>الرئيسية<i class="fa fa-check-circle"></i></span></a>
        --------------------------
        <span>مراجعة الطلب<i class="fa fa-check-circle"></i></span>
        --------------------------
        <span>تم الدفع <i class="fa fa-check-circle"></i></span>

    </div>


    <div class="container">
        <div class="text-center title-done">
            <h4 class="mt-100 mb-20 text-center titel-page">تم الدفع بنجاح</h4>
            <p>سنقوم بتوصيل طلباتكم في الوقت المحدد</p>
        </div>
    </div>
    <div class="row-stepOrder mt-40 mb-40">
        <div class="container text-center">
            <h5>مراحل توصيل الطلب</h5>
            <ul>
                @if($data['order_data']['status'] == 'wait')

                    <li class="active"><i class="fa fa-check-circle " aria-hidden="true"></i>بانتظار الدفع</li>
                    <li class="b00"></li>
                    <li ><i class="fa fa-check-circle " aria-hidden="true"></i>قيد التجهيز</li>
                    <li class="b00"></li>
                    <li><i class="fa fa-check-circle " aria-hidden="true"></i>قيد التوصيل </li>
                    <li class="b00"></li>
                    <li > <i class="fa fa-check-circle " aria-hidden="true"></i>تم التوصيل </li>



                @elseif($data['order_data']['status'] == 'accepted')

                    <li class="active"><i class="fa fa-check-circle " aria-hidden="true"></i>بانتظار الدفع</li>
                    <li class="b00"></li>
                    <li class="active"><i class="fa fa-check-circle " aria-hidden="true"></i>قيد التجهيز</li>
                    <li class="b00"></li>
                    <li><i class="fa fa-check-circle " aria-hidden="true"></i>قيد التوصيل </li>
                    <li class="b00"></li>
                    <li> <i class="fa fa-check-circle " aria-hidden="true"></i>تم التوصيل </li>


                @elseif($data['order_data']['status'] == 'shipped')

                    <li class="active"><i class="fa fa-check-circle " aria-hidden="true"></i>بانتظار الدفع</li>
                    <li class="b00"></li>
                    <li class="active"><i class="fa fa-check-circle " aria-hidden="true"></i>قيد التجهيز</li>
                    <li class="b00"></li>
                    <li class="active"><i class="fa fa-check-circle " aria-hidden="true"></i>قيد التوصيل </li>
                    <li class="b00"></li>
                    <li > <i class="fa fa-check-circle " aria-hidden="true"></i>تم التوصيل </li>

                @elseif($data['order_data']['status'] == 'complete')

                    <li class="active"><i class="fa fa-check-circle " aria-hidden="true"></i>بانتظار الدفع</li>
                    <li class="b00"></li>
                    <li class="active"><i class="fa fa-check-circle " aria-hidden="true"></i>قيد التجهيز</li>
                    <li class="b00"></li>
                    <li class="active"><i class="fa fa-check-circle " aria-hidden="true"></i>قيد التوصيل </li>
                    <li class="b00"></li>
                    <li class="active"> <i class="fa fa-check-circle " aria-hidden="true"></i>تم التوصيل </li>

                @endif


            </ul>


        </div>


    </div>
    {{--    @dd($data)--}}
    <div class="container">
        <div class="row mt-100">
            <div class="box-details-done">
                <h5>رقم الطلب</h5>
                <span>{{$data['order_data']['order_number']}}</span>
            </div>
            <div class="box-details-done">
                <h5>تاريخ الطلب</h5>
                <span>{{$data['order_data']['order_created']}}</span>
            </div>
            <div class="box-details-done">
                <h5>تاريخ وقت التوصيل </h5>
                <span>{{$data['order_data']['order_arrival_date']}} {{$data['order_data']['order_arrival_time_from']}} : {{$data['order_data']['order_arrival_time_to']}}</span>
            </div>
            <div class="box-details-done">
                <h5>نوع الدفع </h5>
                <span>{{$data['order_data']['payment_method']}}</span>
            </div>
            <div class="box-details-done">
                <h5>اجمالي الفاتورة</h5>
                <span>{{$data['order_data']['total']}} <span>@lang('admin.KD')</span></span>
            </div>
        </div>
    </div>
    <!--start footer-->
@endsection