@extends('layouts/contentLayoutMaster')

@section('title', ' عرض تفاصيل الطلب ')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
@endsection
<style>
.hh-grayBox {
	/* background-color: #F8F8F8; */
	margin-bottom: 20px;
	padding: 20px;
  margin-top: 20px;
}
.pt45{padding-top:45px;}
.order-tracking{
	text-align: center;
	width: 16.66%; /* تم التعديل لـ 6 حالات */
	position: relative;
	display: block;
}
.order-tracking .is-complete{
	display: block;
	position: relative;
	border-radius: 50%;
	height: 30px;
	width: 30px;
	border: 0px solid #AFAFAF;
	background-color: #f7be16;
	margin: 0 auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
	z-index: 2;
}
.order-tracking .is-complete:after {
	display: block;
	position: absolute;
	content: '';
	height: 14px;
	width: 7px;
	top: -2px;
	bottom: 0;
	left: 10px;
	margin: auto 0;
	border: 0px solid #AFAFAF;
	border-width: 0px 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}
.order-tracking.completed .is-complete{
	border-color: #27aa80;
	border-width: 0px;
	background-color: #27aa80;
}
.order-tracking.completed .is-complete:after {
	border-color: #fff;
	border-width: 0px 3px 3px 0;
	width: 7px;
	left: 11px;
	opacity: 1;
}
.order-tracking p {
	color: #A4A4A4;
	font-size: 14px; /* ممكن تحتاج تعديل بسيط لحجم الخط */
	margin-top: 8px;
	margin-bottom: 0;
	line-height: 18px; /* ممكن تحتاج تعديل بسيط لارتفاع الخط */
}
.order-tracking p span{font-size: 12px;} /* ممكن تحتاج تعديل بسيط لحجم خط span */
.order-tracking.completed p{color: #000;}
.order-tracking::before {
	content: '';
	display: block;
	height: 3px;
	width: calc(100% - 100px); /* تم التعديل لحساب 6 عناصر */
	background-color: #f7be16;
	top: 13px;
	position: absolute;
	left: calc(-50% + 50px); /* تم التعديل لحساب 6 عناصر */
	z-index: 0;
}
.order-tracking:first-child:before{display: none;}
.order-tracking.completed:before{background-color: #27aa80;}
</style>
@section('content')
<section id="contextual-colors" class="card">
        <div class="card-content">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" style="color:#ffb800"># {{$order->id}} </h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <form class="form" id="edit" >
                            @csrf
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <b> اسم العميل </b> :
                                        <span><a class ="b_table"  href="/users/view/{{$order->user_id}}" target="_blank"> {{$order->user->name}} </a> @if($order->order_for == 'another') (لعميل أخر) @endif </span>
                                    </div>
                                    <div class="col-md-4">
                                        <b> اسم الفني </b> :
                                        <span><a class ="b_table"  href="/providers/view/{{$order->provider_id}}" target="_blank"> {{$order->provider->name}} </a></span>
                                    </div>
                                    <div class="col-md-4">
                                        <b> الحالة </b> :
                                        @if($order->status == 0 )
                                            <span style='background-color: #a8afae;padding: 3px;border-radius: 13px;'> قيد التنفيذ </span> 
                                        @elseif($order->status == 1 )
                                            <span style='background-color: #18f118;padding: 3px;border-radius: 13px'> مكتملة </span>
                                        @elseif($order->status == -1 )
                                            <span  style='background-color: #ff5858;padding: 3px;border-radius: 13px'> مرفوضه  </span>
                                        @elseif($order->status == -2 )
                                            <span  style='background-color:#ff5858;padding: 3px;border-radius: 13px'> ملغيه </span>
                                            </br>{{$order->reason->text}} ;
                                        @elseif($order->status == -3 )
                                            <span  style='background-color:#ff5858;padding: 3px;border-radius: 13px'> قيد المعالجة </span>
                                            </br>
                                        @endif
                                    </div>
                                </div>
                                </br>
                                <div class="row">
                                    <div class="col-md-4">
                                        <b>  كوبون الخصم </b> :
                                        @if($order->discount)<span><a class ="b_table"  href="/coupons/edit//{{$order->discount}}" target="_blank"> {{$order->coupon->code}} </a></span>@endif
                                    </div>
                                    <div class="col-md-4">
                                        <b> وقت الطلب</b> :
                                        <span> {{date("Y-m-d h:i A" , strtotime($order->created_at))}}</span>
                                    </div>
                                    <div class="col-md-4">
                                        <b> وقت التنفيذ</b> :
                                        <span> {{$order->delivery_date}}</span>
                                    </div>
                                </div>


                                </br>
                                <div class="row">
                                    <div class="col-md-4">
                                        <b>الاشتراك</b> :
                                        @if($order->subscription)<span><a class ="b_table" target="_blank"> {{$order->subscription->name_ar}} </a></span>@endif
                                    </div>
                                    <div class="col-md-4">
                                        <b> نوع الخدمة </b> :
                                        @if($order->package)<span>{{$order->package->name_ar}} </span>@endif
                                    </div>
                                    <div class="col-md-4">
                                        <b> موقع المحطة  </b> :
                                        <span><a class ="b_table"  href="/zones/view/{{$order->zone_id}}" target="_blank"> {{$order->zone->name}} </a></span>
                                    </div>
                                </div>
                                </br>
                                <div class="row">
                                    <div class="col-md-4">
                                        <b>السعر</b> :
                                        <span> {{$order->total}} </span>
                                    </div>
                                    <div class="col-md-4">
                                        <b>دفع بالمحفظة</b> :
                                        <span> {{$order->wallet}} </span>
                                    </div>
                                    <div class="col-md-4">
                                        <b>دفع اونلاين</b> :
                                        <span> {{$order->online}} </span>
                                    </div>
                                    
                                </div>
                                
                            </div>
                                </br>
                                <tr id="detail_" ><td colspan="12"><ul><li>  جوال العميل : </li><li>  مكان التنفيذ : </li><li>  ماركة السيارة : </li><li>  رقم اللوحة : </li><li>   سنة اصدار السيارة : </li><li>   ممشي السيارة بالكيلومتر :  كم</li><li>   المدفوع :  ريال </li><span> <a href="api/user/get_invoice/" target="_blank"> عرض الفاتورة الألكترونية</a> </span></br><span> <a href="api/user/get_invoice/?mode=okhtboot" target="_blank"> عرض فاتورة أخطبوط </a> </span></br><span> <a href="http://maps.google.com/?q=," target="_blank"> عرض الموقع </a> </span></ul><table class="table table-striped">                                <div class="col-12 col-md-10 hh-grayBox pt45 pb20" style="direction: ltr;">
                                    <div class="row justify-content-between">
                                        <div class="order-tracking @if($order->completed_time) completed @endif">
                                            <span class="is-complete"></span>
                                            <p>تم اكتمال الطلب <br><br><span>{{$order->completed_time}}</span></p>
                                        </div>
                                        <div class="order-tracking @if($order->start_time) completed @endif">
                                            <span class="is-complete"></span>
                                            <p>وقت بدء الغسيل<br><span>{{$order->start_time}}</span></p>
                                        </div>
                                        <div class="order-tracking @if($order->arrived_time) completed @endif">
                                            <span class="is-complete"></span>
                                            <p>وقت الوصول<br><span>{{$order->arrived_time}}</span></p>
                                        </div>
                                        <div class="order-tracking @if($order->moving_time) completed @endif">
                                            <span class="is-complete"></span>
                                            <p>وقت التحرك<br><span>{{$order->moving_time}}</span></p>
                                        </div>
                                        <div class="order-tracking @if($order->provider_delivery_time) completed @endif">
                                            <span class="is-complete"></span>
                                            <p>قبول الفني<br><span>{{$order->provider_delivery_time}}</span></p>
                                        </div>
                                        <div class="order-tracking @if($order->created_at) completed @endif">
                                            <span class="is-complete"></span>
                                            <p>وقت الأضافة<br><span>{{$order->created_at}}</span></p>
                                        </div>
                                    </div>
                                </div>