@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>الحوالة رقم {{ $transaction->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">
                                                <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;">{{ $transaction->id }}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم ولي الامر <span style="padding-right: 40px;">{{$transaction->Parent->name ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> من  بنك <span style="padding-right: 40px;"> {{$transaction->from_bank ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> الي بنك   <span style="padding-right: 40px;"> {{$transaction->to_bank ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> الايبان   <span style="padding-right: 40px;"> {{$transaction->iban ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> المبلغ   <span style="padding-right: 40px;"> {{$transaction->money ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> صورة الحوالة   <span style="padding-right: 40px;">
                                                                <img src="{{ GetImage( $transaction->image ) }}" width="150" height="150">
                                                            </span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="box-map-map">
                                                    {{$transaction->source_address}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$transaction->source_lat}}" data-long="{{$transaction->source_long}}"></div>
                                                    
                                                </div>
                                                <div class="box-map-map">
                                                    {{$transaction->school_address}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$transaction->school_lat}}" data-long="{{$transaction->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;">{{$transaction->Parent->id ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم  <span style="padding-right: 40px;">
                                                                <a href="{{route('users.show',$transaction->Parent->id ?? 0)}}">
                                                                    {{$transaction->Parent->name ?? ''}}
                                                                </a>
                                                            </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> رقم الجوال   <span style="padding-right: 40px;"> {{$transaction->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">
                                                <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;">{{ $transaction->Order->id }}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> اسم العميل <span style="padding-right: 40px;">{{$transaction->Order->Parent->name ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td> رقم الجوال   <span style="padding-right: 40px;"> {{$transaction->Order->Parent->phone ?? ''}}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>نوع المعده  <span style="padding-right: 40px;"> {{$transaction->Order->BusType->name ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>اسم المعده    <span style="padding-right: 40px;"> {{$transaction->Order->BusClass->name ?? ''}} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>الكميه المطلوبه    <span style="padding-right: 40px;"> {{$transaction->Order->OrderSon()->count() }} </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>الحاله<span style="padding-right: 40px;"> {{__('dashboard.'.$transaction->Order->status)}} </span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="box-map-map">
                                                    {{$transaction->Order->source_address}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$transaction->Order->source_lat}}" data-long="{{$transaction->Order->source_long}}"></div>
                                                    
                                                </div>
                                                <div class="box-map-map">
                                                    {{$transaction->Order->school_address}}
                                                    <div id="gmaps-markers" class="gmaps" data-lat="{{$transaction->Order->school_lat}}" data-long="{{$transaction->Order->school_long}}"></div>
                                                </div>
                                            </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: 8,
         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