@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>باص رقم {{ $bus->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> -->
                                    
                                </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">
                                                @if( 1 )
                                                <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;">{{$bus->id ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>نوع الباص  <span style="padding-right: 40px;"> {{$bus->BusType->name ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>اسم الباص    <span style="padding-right: 40px;"> {{$bus->BusClass->name ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم السائق <span style="padding-right: 40px;"> {{$bus->Driver->name ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم المندوب <span style="padding-right: 40px;"> {{$bus->attendant_name ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> الصورة <span style="padding-right: 40px;"> <img src="{{GetImage($bus->attendant_image ?? '')}}" width="150" height="150"> </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> الشسية <span style="padding-right: 40px;"> {{$bus->chassis ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم المالك <span style="padding-right: 40px;"> {{$bus->owner_name ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> الموديل <span style="padding-right: 40px;"> {{$bus->model ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> نوع الرحلة <span style="padding-right: 40px;"> {{$bus->trip_type ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> المرحلة التعليمية <span style="padding-right: 40px;"> {{$bus->EducationalLevel->name ?? ''}} </span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                @else
                                                <div class="alert alert-warning">
                                                    <i class="fa fa-warning"></i>
                                                    للم يتم تحديد حافلة           
                                                </div>
                                                @endif
                                            </div>

                                                @if( 1 )
                                            <div class="col-md-4">
                                                <div class="box-map-map">
                                                    {{$bus->source_address ?? ''}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$bus->source_lat ?? ''}}" data-long="{{$bus->source_long ?? ''}}" data-address="{{$bus->source_address ?? ''}}"></div>
                                                    
                                                </div>
                                                <div class="box-map-map">
                                                    {{$bus->destination_address ?? ''}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$bus->destination_lat ?? ''}}" data-long="{{$bus->destination_long ?? ''}}" data-address="{{$bus->destination_address ?? ''}}"></div>
                                                </div>
                                            </div>
                                                @endif
                                        </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 class="text-center" colspan="4">البيانات الأساسية</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @if($bus->Driver()->first())
                                                        @php
                                                        $driver = $bus->Driver()->first();
                                                        @endphp
                                                        <tr>
                                                            <td>الاسم</td>
                                                            <td>{{$driver->name}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>البريد الالكتروني</td>
                                                            <td>{{$driver->email}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>رقم الجوال</td>
                                                            <td>{{$driver->phone}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>الصورة الشخصية</td>
                                                            <td>
                                                                <img src="{{GetImage($driver->image)}}" height="150" width="200">
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>رقم الهوية</td>
                                                            <td>{{$driver->identity}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>صورة الهوية</td>
                                                            <td>
                                                                <img src="{{$driver->identity_image}}" height="150" width="200">
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>رقم الرخصة</td>
                                                            <td>{{$driver->license}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>صورة الرخصة</td>
                                                            <td>
                                                                <img src="{{$driver->license_image}}" height="150" width="200">
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>رقم الاستمارة</td>
                                                            <td>{{$driver->form}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>صورة الاستمارة</td>
                                                            <td>
                                                                <img src="{{$driver->form_image}}" height="150" width="200">
                                                            </td>
                                                        </tr>
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>

                                            <div class="col-md-6">
                                            </div>

                                            
                                            
                                        </div>
                                    </div>

                                    <!-- <div id="navpills-3" class="tab-pane fade">
                                        
                                    </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=AIzaSyBK34Sy92YNH1Y3uUjiq-QwVfJsSHSmYKE&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'), $( this ).attr('data-address'))
        });
    });
    function initializeMap(div, lat, long, address){
        // alert(3);
     var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(long));
     var myOptions = {
         zoom: 8,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
         }
      map = new google.maps.Map(div, myOptions);
      var infowindow = new google.maps.InfoWindow({
          content: address
        });
      var marker = new google.maps.Marker({
          position: myLatlng, 
          map: map,
      title:"Fast marker"
     });
       marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
} 
</script>
@endsection