@extends('admin.layout.app')
@section('style')
<style>
    .panel-success > .panel-heading{
        background-color: #98a6ad;
    }
</style>
@endsection
@section('content')

<div class="row">


    <div class="col-lg-12 table-custom">
        <div class="title-page sub-header-title-custom">
            <h5 style="color: inherit;"><a href="{{route('orders.index')}}"><span> الطلبات</span><i
                        class="fa fa-angle-left" style="padding: 0 5px; color:inherit;"></i></a><span>طلب رقم
                    {{ $order->id}} </span></h5>


        </div>

        <div class="panel panel-color panel-tabs panel-success m-t-10">
            <div class="panel-heading panel-heading-custom" style="background-color: #98a6ad;">
                <ul class="nav nav-pills">
                    <li class="active">
                        <a href="#navpills-1" data-toggle="tab" aria-expanded="true">البيانات الأساسية</a>
                    </li>
                    <li class="">
                        <a href="#navpills-2" data-toggle="tab" aria-expanded="false">العميل</a>
                    </li>
                    <li class="">
                        <a href="#navpills-3" data-toggle="tab" aria-expanded="false">السائق</a>
                    </li>
                </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div id="navpills-1" class="tab-pane    fade in active">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table m-0" style="width: 100%; ">

                                    <tbody>
                                        <tr>
                                            <td>رقم الطلب <span style="padding-right: 40px;">{{$order->id}}</span></td>
                                        </tr>
                                        <tr>
                                            <td>التاريخ <span style="padding-right: 40px;">{{$order->created_at}}</span></td>
                                        </tr>
                                        <tr>
                                            <td> العنوان  <span
                                                    style="padding-right: 40px;">{{$order->address}}</span></td>
                                        </tr>
                                        <tr>
                                            <td>   الحاله <span style="padding-right: 40px;">
                                                    {{$order->status}} </span></td>
                                        </tr>
                                        <tr>
                                            <td>   عدد الدبات <span style="padding-right: 40px;">
                                                    {{$order->items}} </span>
                                            </td>
                                        </tr>

                                            <td>   السعر <a href="agent-Details.html"
                                                    style="padding-right: 40px;">{{$order->price}} </a></td>
                                        </tr>
                                        <tr>
                                            <td>   نوع الماء <a href="agent-Details.html"
                                                    style="padding-right: 40px;">{{$order->Driver->water_type ?? ''}} </a></td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>





                        </div>
                    </div>

                    <div id="navpills-2" class="tab-pane fade">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-bordered table-striped text-center m-0">
                                    <thead>
                                        <tr>
                                            <th colspan="2" class="text-center">
                                                <img src=" {{ $order->User->image ?? '' }}" style="width: 100px; height: 100px;border-radius: 50%;border: 2px solid #2c0d0d;" />
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>الاسم</td>
                                            <td>{{$order->User->name ?? ''}}</td>
                                        </tr>
                                        <tr>
                                            <td>البريد الالكتروني</td>
                                            <td>{{$order->User->email ?? ''}}</td>
                                        </tr>
                                        <tr>
                                            <td>رقم الجوال</td>
                                            <td>{{$order->User->phone ?? ''}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                    </div>
                    <div id="navpills-3" class="tab-pane fade">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-bordered table-striped text-center m-0">
                                    <thead>
                                        <tr>
                                            <th colspan="2" class="text-center">
                                                <img src=" {{ $order->Driver->image ?? '' }}" style="width: 100px; height: 100px;border-radius: 50%;border: 2px solid #2c0d0d;" />
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>الاسم</td>
                                            <td>{{$order->Driver->name ?? ''}}</td>
                                        </tr>
                                        <tr>
                                            <td>البريد الالكتروني</td>
                                            <td>{{$order->Driver->email ?? ''}}</td>
                                        </tr>
                                        <tr>
                                            <td>رقم الجوال</td>
                                            <td>{{$order->Driver->phone ?? ''}}</td>
                                        </tr>
                                        <tr>
                                            <td> المدينه</td>
                                            <td>{{$order->Driver->City->city_ar ?? ''}}</td>
                                        </tr>
                                        <tr>
                                            <td> العنوان</td>
                                            <td>{{$order->Driver->address ?? ''}}</td>
                                        </tr>
                                        <tr>
                                            <td>  التقييم  <span
                                                    style="padding-right: 40px;">{{$order->DriverRate->rate ?? ''}}</span></td>
                                        </tr>
                                        <tr>
                                            <td> النوع</td>
                                            <td>{{$order->Driver->gender ?? ''}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                    </div>


                </div>
            </div><!-- end col -->

        </div>
        <!-- end row -->
    </div>
</div>
        @endsection
        @section('script')

        @endsection