@extends('front.layout.master')
@push('css')
    <style>
        .myorders-details img{
            width: 13px;
            margin: 0 8px;
        }

        .my-orders h5 {
            font-size: 16px;
            font-weight: 600;
        }
        .my-orders .first {
            border-radius: 9px;
            border: 1px solid #678DD6;
            /* padding: 20px; */
            margin-bottom: 30px;
        }
        .my-orders ul li {
            padding-bottom: 5px;
            font-size: 14px;
            font-weight: 600;
        }
        .col-sm-offset-6 {
            margin-right: 50%;
            margin-left: 0;
        }
        .my-orders .left img {
            position: relative;
            top: -27px;
            height: 77px;}
        .my-orders .left ul {
            display: inline-block;
            margin-right: 5px;
        }
        .right label {
            font-size: 14px;
            font-weight: 600;
            color: #666464;
            text-transform: capitalize;
        }
        .d-order00{
            background: #678DD6;
            border-radius: 30px;
            font-size: 12px;
            width: 100px;
            text-align: center;
            height: 30px;
            line-height: 29px;
            transition: .5s;
        }
        .d-order00:hover{
            background: #f8bc00;
        }
        .d-order00 a{
            color: #fff;
        }
        .myorders-details .right{
            padding: 20px;

        }
        .myorders-details .left{
            background: #E8EFFF;
            height: 100%;
            border-radius: 10px 0 0 10px;
            padding: 25px;

        }
        .left li i{
            font-size: 20px;
            margin: 5px 16px;
            color: #ccc;
        }
        li.active i{
            color: #678dd6;

        }
        .box-Summary-orders {
            background: #FAFAFA;
            padding: 5% 7%;
            border-radius: 5px;
        }
        .box-doneOrder {
            background: #F3CC66;
            border-radius: 5px;
            padding: 6%;
            margin: 5% 5%;
            height: 75px;
            display: block;
            transition: .5s;

        }
        .box-doneOrder h5 {
            font-size: 20px;
            margin: 5% 0 0;}
        .price-order {
            float: left;
            color: #8f8f7b;;
            font-size: 13px;
            /*    font-weight: 600;*/
        }
        .price-order span{
            color: #618cdd;
        }
        .name-product-order{
            font-size: 13px;
            font-weight: 600;
            color: #636353;
        }
        .row-order-details{
            border-bottom: 1px solid #F2F2F2;
            line-height: 40px;
        }
        .box-doneOrder:hover {
            background: #ffc200;
        }
        @media (max-width: 767px){
            .myorders-details .left {
                background: #E8EFFF;
                height: 100%;
                border-radius: 0px 0 10px 10px;
            }
        }
    </style>

    @endpush
@section('content')
    <div class="breadcrumb-area gray-bg">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li><a href="{{route('main')}}">الرئيسية</a></li>
                    <li><a href="#" class="active">طلباتي</a></li>
                </ul>
            </div>
        </div>

    <div class="my-orders pt-50 pb-50">
        <div class="container">
            <div class="row">

                <div class="col-md-9 col-12 myorders-details">
                    <h5>طلباتي<img src="{{asset('front/assets/images/icon/bag%20(1).png')}}"></h5>
                    @foreach($data as $da)
                    <div class="first wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
                        <div class="row">
                            <div class="col-sm-8 col-xs-6">
                                <div class="right">
                                    <ul class="list-unstyled">
                                        <li>
                                            <label>رقم الطلب :</label>
                                            <span>{{$da['order_number']}}</span>
                                        </li>
                                        <li>
                                            <label>تاريخ الطلب :</label>
                                            <span>{{$da['date_order']}}</span>
                                        </li>
                                        <li>
                                            <label> طريقة التوصيل :</label>
                                            <span>{{$da['shipping_Type']}}</span>
                                        </li>

                                        <li>
                                            <label>الدفع :</label>
                                            <span>{{$da['payment_method']}}</span>
                                        </li>
                                        <li>
                                            <label>اجمالي الفاتورة :</label>
                                            <span>{{$da['total']}}</span>
                                            <span class="f-left d-order00"><a href="#" class="orderDetais" data-url="{{route('get-order-details')}}" data-orderId="{{$da['id']}}">تفاصيل الطلب</a></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-6">
                                <div class="left">

                                    <ul class="list-unstyled">
                                             @if($da['status'] == 'wait')

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


                                        @elseif($da['status'] == 'accepted')

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

                                                 @elseif($da['status'] == 'shipped')


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

                                                 @elseif($da['status'] == 'complete')

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

                                                 @endif


                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach


                </div>

                <div class="col-md-3 col-12 Summary-orders">
                    <h5> ملخص طلباتي </h5>
                    <div class="box-Summary-orders mb-20">
                        <div class="row">
                            <div class="col-md-6 col-6 p-0">
                                <a class="box-doneOrder text-center" href="#">
                                    <h5>{{$wait}}</h5>
                                    <span>في الانتظار</span>
                                </a>
                            </div>

                            <div class="col-md-6 col-6 p-0">
                                <a class="box-doneOrder text-center" href="#">
                                    <h5>{{$accepted}}</h5>
                                    <span>موافقة</span>
                                </a>
                            </div>
                            <div class="col-md-6 col-6 p-0">
                                <a class="box-doneOrder text-center" href="#">
                                    <h5>{{$shipped}}</h5>
                                    <span>قيد التوصيل</span>
                                </a>
                            </div>
                            <div class="col-md-6 col-6 p-0">
                                <a class="box-doneOrder text-center" href="#">
                                    <h5>{{$complete}}</h5>
                                    <span>تم التوصيل</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <h5>تفاصيل الطلب </h5>

                    <div class="box-Summary-orders mb-10" id="orderDetailDiv">


                    </div>


                </div>






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




@endsection