@extends('dashboard.layout.app')
@section('style')

<!--venobox lightbox-->
<link rel="stylesheet" href="{{ asset('/adminto/assets/plugins/magnific-popup/dist/magnific-popup.css')}}"/>
@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('jobs.index')}}"><span> الاعلانات</span><i class="fa fa-angle-left" style="padding: 0 5px; color:inherit;"></i></a><span>  {{ $post->title}}  </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-6">
                                                <table  class="table m-0" style="width: 100%; ">
                                                    
                                                    <tbody>
                                                        <tr>
                                                            <td>رقم المعدة   <span style="padding-right: 40px;">{{$post->id}}</span></td>
                                                        </tr>
                                        
                                                        <tr>
                                                            <td>  الصورة    <span style="padding-right: 40px;">
                                                                <img src="{{$post->image}}" width="150" height="150"/>
                                                                </span> <span style="padding-right: 40px;">
                                                                    </span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>الوصف    <span style="padding-right: 40px;">{{$post->description}} </span></td>
                                                        </tr>
                                                        
                                                    
                                                   

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

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

                                            {{-- <a href="assets/images/gallery/1.jpg" class="image-popup" >
                                                <img src="assets/images/gallery/1.jpg" class="thumb-img" alt="work-thumbnail">
                                            </a> --}}
                                            
                                        </div>
                                    </div>
                                    
                                    <div id="navpills-2" class="tab-pane fade">
                                        <div class="row">
                                            <div class="col-md-12">
                                            </div>

                                        </div>
                                    </div>
                                    <div id="navpills-3" class="tab-pane fade">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end col -->

                </div>
                <!-- end row -->
@endsection
@section('script')
<!-- Magnific popup -->
<script type="text/javascript" src="{{ asset('/adminto/assets/plugins/magnific-popup/dist/jquery.magnific-popup.min.js')}}"></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() {
        $('.image-popup').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            mainClass: 'mfp-fade',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,1] // Will preload 0 - before current, and 1 after the current image
            }
        });
    });
    $(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: 12,
         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:"location"
     });
} 
</script>
@endsection