@extends('main')
@section('title')
{{ $reference->title }}

@endsection
@section('styles')
<style>
#wrap {
  max-width: 660px;
  margin: 100px auto;
}

</style>
@endsection

@section('content')

  <div class="page-header">
    <div class="row-inner">
        <h1 class="page-title">{{ $reference->title }}</h1>
        <nav class="breadcrumbs-trail" role="navigation"><a href="{{ Route('mobily.site.home.page') }}" class="home">{{ __('Home') }}</a> <span class='breadcrumbs-separator'>&raquo;</span> {{ $reference->title }}</nav>
    </div>
</div>

<section class="wpb_row main_row  no-seperator ipad_full_width" style="padding-top:20px; padding-bottom:20px;">
                                <div class="row-inner">
                                  <div class="wpb_column vc_column_container vc_col-sm-4">
                                      <div class="vc_column-inner ">
                                          <div class="wpb_wrapper">
                                            @if ($reference->image)
                                       <div class="wpb_wrapper">
                                         <div class="wpb_single_image wpb_content_element vc_align_left">
                                             <figure class="wpb_wrapper vc_figure">
                                                 <div class="vc_single_image-wrapper vc_box_outline  vc_box_border_chino">
                                                   <a  class="prettyphoto" rel="prettyPhoto['gall']" href="{{ asset($reference->image) }}">
                                                     <img width="400" height="300" src="{{ asset($reference->image) }}" class="grow vc_single_image-img attachment-full" alt="{{ $reference->title }}"  />
                                                   </a>
                                                 </div>
                                             </figure>
                                         </div>
                                       </div>
                                     @endif
                                           <div class="vc_empty_space" style="height: 20px"><span class="vc_empty_space_inner"></span></div>
                                         <div class="row-inner">
                                           @foreach ($reference->files as $key => $image)
                                             <div class="wpb_column vc_column_container vc_col-sm-4">
                                                 <div class="vc_column-inner ">
                                                     <div class="wpb_wrapper">
                                                       <div class="wpb_single_image wpb_content_element vc_align_left">
                                                           <figure class="wpb_wrapper vc_figure">
                                                               <div class="vc_single_image-wrapper   vc_box_border_grey">
                                                                 <a  class="prettyphoto" rel="prettyPhoto['gall']" href="{{ asset(getReferenceFileURL().$image->file) }}">
                                                                   <img width="400" height="300" src="{{ asset(getReferenceFileURL().$image->file) }}" class="grow vc_single_image-img attachment-full" alt="{{ $reference->title }}"  />
                                                                 </a>
                                                               </div>
                                                           </figure>
                                                       </div>
                                                     </div>
                                                 </div>
                                             </div>
                                           @endforeach
                                         </div>


                                          </div>
                                      </div>
                                  </div>
                                    <div class="wpb_column vc_column_container vc_col-sm-8">
                                        <div class="vc_column-inner ">
                                            <div class="wpb_wrapper">
                                                <div class="wpb_single_image wpb_content_element vc_align_left">

                                                      {!!$reference->content!!}
                                                      <div class="clearfix">  </div>
                                                      <hr />
                                                      @if ($reference->pdf)

                                                        <div class="row-inner">
                                                          <div class="wpb_column vc_column_container vc_col-sm-6">
                                                              <div class="vc_column-inner ">
                                                                <span class=""><b>{{ __('For More Information') }}</b></span>
                                                                <p ><a target="_blank" title="{{ __('Pdf Information Download') }}" href="{{ asset($reference->pdf ) }}"><img style="max-height: 50px;margin-top:15px;" src="{{ asset('images/pdf-download.png') }}"></a><a title="{{ __('Pdf Information Viwer') }}" href="{{ asset($reference->pdf ) }}?iframe=true&amp;width=90%&amp;height=100%" rel="prettyPhoto"><img style="max-height: 50px;margin-top:15px;" src="{{ asset('images/pdf-view.png') }}"></a></p>
                                                              </div>
                                                            </div>
                                                            </div>
                                                          @endif


                                                      <div class="clearfix">  </div>

                                                    
                                                      <hr />



                                                      <div class="clearfix">  </div>

                                                      <div class="d_inline_middle m_left_5 addthis_widget_container">

                                                                      <!-- AddThis Button BEGIN -->
                                                                      <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                                                                      <a class="addthis_button_preferred_1"></a>
                                                                      <a class="addthis_button_preferred_2"></a>
                                                                      <a class="addthis_button_preferred_3"></a>
                                                                      <a class="addthis_button_preferred_4"></a>
                                                                      <a class="addthis_button_compact"></a>
                                                                      </div>
                                                                      <!-- AddThis Button END -->
                                                                    </div>
                                                                    <div class="clearfix">  </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </section>
  @endsection
  @section('scripts')
<script type="text/javascript">
            function eggbfc(winw, resultoption) {
                var lasttop = winw,
                    lastbottom = 0,
                    smallest = 9999,
                    largest = 0,
                    samount = 0,
                    lamoung = 0,
                    lastamount = 0,
                    resultid = 0,
                    resultidb = 0,
                    responsiveEntries = [{
                        width: 1400,
                        amount: 3
                    }, {
                        width: 1170,
                        amount: 3
                    }, {
                        width: 1024,
                        amount: 3
                    }, {
                        width: 960,
                        amount: 3
                    }, {
                        width: 778,
                        amount: 3
                    }, {
                        width: 640,
                        amount: 3
                    }, {
                        width: 480,
                        amount: 1
                    }];
                if (responsiveEntries != undefined && responsiveEntries.length > 0)
                    jQuery.each(responsiveEntries, function(index, obj) {
                        var curw = obj.width != undefined ? obj.width : 0,
                            cura = obj.amount != undefined ? obj.amount : 0;
                        if (smallest > curw) {
                            smallest = curw;
                            samount = cura;
                            resultidb = index;
                        }
                        if (largest < curw) {
                            largest = curw;
                            lamount = cura;
                        }
                        if (curw > lastbottom && curw <= lasttop) {
                            lastbottom = curw;
                            lastamount = cura;
                            resultid = index;
                        }
                    })
                if (smallest > winw) {
                    lastamount = samount;
                    resultid = resultidb;
                }
                var obj = new Object;
                obj.index = resultid;
                obj.column = lastamount;
                if (resultoption == "id")
                    return obj;
                else
                    return lastamount;
            }
            if ("even" == "even") {
                var coh = 0,
                    container = jQuery("#esg-grid-52-1");
                var cwidth = container.width(),
                    ar = "800:532",
                    gbfc = eggbfc(jQuery(window).width(), "id"),
                    row = 4;
                ar = ar.split(":");
                aratio = parseInt(ar[0], 0) / parseInt(ar[1], 0);
                coh = cwidth / aratio;
                coh = coh / gbfc.column * row;
                var ul = container.find("ul").first();
                ul.css({
                    display: "block",
                    height: coh + "px"
                });
            }
            var essapi_52;
            jQuery(document).ready(function() {
                essapi_52 = jQuery("#esg-grid-52-1").tpessential({
                    gridID: 52,
                    layout: "even",
                    forceFullWidth: "off",
                    lazyLoad: "off",
                    row: 4,
                    loadMoreAjaxToken: "5bbd90dafb",
                    loadMoreAjaxUrl: "http://mnkythemes.com/quince/wp-admin/admin-ajax.php",
                    loadMoreAjaxAction: "Essential_Grid_Front_request_ajax",
                    ajaxContentTarget: "ess-grid-ajax-container-",
                    ajaxScrollToOffset: "0",
                    ajaxCloseButton: "off",
                    ajaxContentSliding: "on",
                    ajaxScrollToOnLoad: "on",
                    ajaxNavButton: "off",
                    ajaxCloseType: "button",
                    ajaxCloseInner: "false",
                    ajaxCloseStyle: "light",
                    ajaxClosePosition: "tr",
                    space: 10,
                    pageAnimation: "scale",
                    paginationScrollToTop: "off",
                    spinner: "spinner5",
                    evenGridMasonrySkinPusher: "off",
                    lightBoxMode: "single",
                    animSpeed: 1000,
                    delayBasic: 1,
                    mainhoverdelay: 1,
                    filterType: "multi",
                    filterLogic: "or",
                    showDropFilter: "hover",
                    filterGroupClass: "esg-fgc-52",
                    googleFonts: ['Open+Sans:300,400,600,700,800', 'Raleway:100,200,300,400,500,600,700,800,900', 'Droid+Serif:400,700'],
                    aspectratio: "800:532",
                    responsiveEntries: [{
                        width: 1400,
                        amount: 3
                    }, {
                        width: 1170,
                        amount: 3
                    }, {
                        width: 1024,
                        amount: 3
                    }, {
                        width: 960,
                        amount: 3
                    }, {
                        width: 778,
                        amount: 3
                    }, {
                        width: 640,
                        amount: 3
                    }, {
                        width: 480,
                        amount: 1
                    }]
                });

                try {
                    jQuery("#esg-grid-52-1 .esgbox").esgbox({
                        padding: [0, 0, 0, 0],
                        afterLoad: function() {
                            if (this.element.hasClass("esgboxhtml5")) {
                                var mp = this.element.data("mp4"),
                                    ogv = this.element.data("ogv"),
                                    webm = this.element.data("webm");
                                this.content = '<div style="width:100%;height:100%;"><video autoplay="true" loop="" class="rowbgimage" poster="" width="100%" height="auto"><source src="' + mp + '" type="video/mp4"><source src="' + webm + '" type="video/webm"><source src="' + ogv + '" type="video/ogg"></video></div>';
                                var riint = setInterval(function() {
                                    jQuery(window).trigger("resize");
                                }, 100);
                                setTimeout(function() {
                                    clearInterval(riint);
                                }, 2500);
                            };
                        },
                        beforeShow: function() {
                            this.title = jQuery(this.element).attr('lgtitle');
                            if (this.title) {
                                this.title = "";
                                this.title = '<div style="padding:0px 0px 0px 0px">' + this.title + '</div>';
                            }
                        },
                        afterShow: function() {},
                        openEffect: 'fade',
                        closeEffect: 'fade',
                        nextEffect: 'fade',
                        prevEffect: 'fade',
                        openSpeed: 'normal',
                        closeSpeed: 'normal',
                        nextSpeed: 'normal',
                        prevSpeed: 'normal',
                        helpers: {
                            media: {},
                            title: {
                                type: ""
                            }
                        }
                    });

                } catch (e) {}

            });
        </script>
        <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-5306f8f674bfda4c"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        //  $("a[rel^='prettyPhoto']").prettyPhoto();
           $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});
       });
     </script>
  @endsection