@extends('admin.layout.app')
@section('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="#"><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">
                                <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>
                                    <li class="">
                                        <a href="#navpills-4" 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-8">
                                                <table  class="table m-0" style="width: 100%; ">
                                                    <thead >
                                                        <tr>
                                                            <th colspan="4" class="text-center">البيانات الأساسية</th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>رقم الطلب  <span style="padding-right: 40px;">{{ $order->id }}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم العميل <span style="padding-right: 40px;">{{$order->Parent->name ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> رقم الجوال   <span style="padding-right: 40px;"> {{$order->Parent->phone ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>نوع الحافلة <span style="padding-right: 40px;"> {{$order->BusType->name ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>اسم الحافلة   <span style="padding-right: 40px;"> {{$order->BusClass->name ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>الكميه المطلوبه    <span style="padding-right: 40px;"> {{$order->OrderSon()->count() }} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>الحاله<span style="padding-right: 40px;"> {{__('dashboard.'.$order->status)}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>حالة الدفع<span style="padding-right: 40px;">
                                                                @if($order->paied == '1')
                                                                تم الدفع
                                                                @else
                                                                لم يتم الدفع
                                                                @endif
                                                            </span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="box-map-map">
                                                    {{$order->source_address}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$order->source_lat}}" data-long="{{$order->source_long}}"></div>
                                                    
                                                </div>
                                                <div class="box-map-map">
                                                    {{$order->school_address}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$order->school_lat}}" data-long="{{$order->school_long}}"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="navpills-2" class="tab-pane fade">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <table  class="table m-0" style="width: 100%; ">
                                                    <thead >
                                                        <tr>
                                                            <th colspan="4" class="text-center">البيانات الأساسية</th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>رقم   <span style="padding-right: 40px;">{{$order->Parent->id ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم  <span style="padding-right: 40px;">
                                                                <a href="{{route('users.show',$order->Parent->id ?? 0)}}">
                                                                    {{$order->Parent->name ?? ''}}
                                                                </a>
                                                            </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> رقم الجوال   <span style="padding-right: 40px;"> {{$order->Parent->phone ?? ''}}</span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <!-- <div class="col-md-4">
                                                <div class="box-map-map">
                                                    <div id="gmaps-markers" class="gmaps"></div>
                                                </div>
                                            </div> -->

                                            
                                            
                                        </div>
                                    </div>

                                    <div id="navpills-3" class="tab-pane fade">
                                        <div class="row">
                                            <div class="col-md-8">
                                                @if( $order->Bus()->first() )
                                                @php
                                                    $bus = $order->Bus()->first();
                                                @endphp
                                                <table  class="table m-0" style="width: 100%; ">
                                                    <thead >
                                                        <tr>
                                                            <th colspan="4" class="text-center">البيانات الأساسية</th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                        </tr>
                                                    </thead>
                                                    
                                                    <tbody>
                                                        <tr>
                                                            <td>رقم الباص    </td><td>{{$bus->id ?? ''}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>نوع الباص   </td><td> {{$bus->BusType->name ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td>فئة المعدة     </td><td> {{$bus->BusClass->name ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم السائق  </td><td> {{$bus->Driver->name ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم المرافق  </td><td> {{$bus->attendant_name ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td> صورة المرافق  </td><td> <img src="{{GetImage($bus->attendant_image ?? '')}}" width="150" height="150"> </td>
                                                        </tr>
                                                        <tr>
                                                            <td>رقم  الشاسية  </td><td> {{$bus->chassis ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم المالك  </td><td> {{$bus->owner_name ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td> الموديل  </td><td> {{$bus->model ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td> نوع الرحلة  </td><td> {{$bus->trip_type ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td> المرحلة التعليمية  </td>
                                                            <td> {{$bus->EducationalLevel->name ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td> عدد المقاعد  </td>
                                                            <td> {{$bus->seats ?? ''}} </td>
                                                        </tr>
                                                        <tr>
                                                            <td> عرض الباص  </td>
                                                            <td>
                                                                <a href="{{route('buses.show',$bus->id)}}">عرض</a>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                @else
                                                <div class="alert alert-warning">
                                                    <i class="fa fa-warning"></i>
                                                    للم يتم تحديد حافلة           
                                                </div>
                                                @endif
                                            </div>

                                                @if( $order->Bus()->first() )
                                            <div class="col-md-4">
                                                <div class="box-map-map">
                                                    {{$order->Bus->source_address ?? ''}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$order->Bus->source_lat ?? ''}}" data-long="{{$order->Bus->source_long ?? ''}}"></div>
                                                    
                                                </div>
                                                <div class="box-map-map">
                                                    {{$order->Bus->destination_address ?? ''}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$order->Bus->destination_lat ?? ''}}" data-long="{{$order->Bus->destination_long ?? ''}}"></div>
                                                </div>
                                            </div>
                                                @endif

                                            <!-- <div class="col-md-4">
                                                <div class="box-map-map">
                                                    <div id="gmaps-markers" class="gmaps"></div>
                                                </div>
                                            </div> -->

                                            
                                            
                                        </div>
                                    </div>
                                    <div id="navpills-4" class="tab-pane fade">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <table class="datatable-buttons table tab-pane-custom table-striped table-bordered"  style="width: 100%;">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>اسم </th>
                                                        <th>الجنس</th>
                                                        <th>الصورة</th>
                                                        <th>تعديل</th>
                                                        <th>عرض</th>
                                                    </tr>
                                                </thead>

                                                @foreach($order->Son()->get() as $item)
                                                    <tr>
                                                        <td> {{$item->id}}</td>
                                                        <td> <a href="{{route('sons.show',$item->id)}}">{{$item->name}}</a></td>
                                                        <td>{{__('dashboard.'.$item->gender)}}</td>
                                                        <td>
                                                            <img src="{{$item->image}}" width="200" height="150">
                                                        </td>
                                                        <td><a href="/dashboard/sons/{{$item->id}}/edit"><i class="fa fa-pencil  m-r-10" style="color: #188ae2;"></i> تعديل</a></td>
                                                        
                                                        <td>
                                                            <a href="{{route('sons.show', $item->id)}}" class="btn waves-effect btn-default pull-right client-info" > عرض </a>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                            </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end col -->

                </div>
                <!-- end row -->
@endsection
@section('script')
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyCob-v1r_8bpOUPIm4TiaxrD3roc_XLFFo&language=ar"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // gmaps
        $('.gmaps').each(function(i, obj) {
            //test
            console.log($( this ).attr('data-lat'));
            // console.log(i);
            initializeMap(obj, $( this ).attr('data-lat'), $( this ).attr('data-long'))
        });
    });
    function initializeMap(div, lat, long){
        // alert(3);
     var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(long));
     var myOptions = {
         zoom: 16,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
         }
      map = new google.maps.Map(div, myOptions);
      var marker = new google.maps.Marker({
          position: myLatlng, 
          map: map,
      title:"Fast marker"
     });
} 
</script>
@endsection