@extends('frontend.layouts.app')

@section('content')

@if( isset( $preview->preview_data ) )

@php  
  $menu = json_decode( $preview->preview_data ); 

@endphp



<section class="general-block">
  <div class="container">
    <div class="site-heading">
      <h2>{{ $menu->menu_heading_1 }}</h2>
    </div>
    <div class="row lightgallery-main" id="lightgallery1">
      
      @if( isset( $menu->menu_list_1 ) && count( $menu->menu_list_1 ) > 0 )

        @foreach( $menu->menu_list_1 as $menu1 )

          @php $imagePath1 = asset('menu/'.$menu1->image );@endphp

          <div class="col-md-6 col-lg-3">
            <div class="general-box">
              <div class="general-img gallery-select1" data-src="{{ $imagePath1 }}">
                <a href="javascript:void(0);" class=""><img src="{{ $imagePath1 }}" alt="{{ $menu1->title }}"></a>
              </div>
              <div class="general-title"><h3><a href="javascript:void(0);">{{  $menu1->title }}</a></h3></div>
              <button onclick="PrintImage('{{ $imagePath1 }}'); return false;" class="print-btn-clk"><i class="fas fa-print"></i> Print</button>
            </div>
          </div>

        @endforeach

      @endif
  
    </div>
    <!-- <div class="load-more"><a href="#">Load More<i class="fa fa-spinner" aria-hidden="true"></i></a></div> -->
  </div>
</section>


<section class="general-block">
  <div class="container">
    <div class="site-heading"><h2>{{  $menu->menu_heading_2 }}</h2></div>
    <div class="row lightgallery-main" id="lightgallery2">

      @if( isset( $menu->menu_list_2 ) && count( $menu->menu_list_2 ) > 0 )

        @foreach( $menu->menu_list_2 as $menu2 )

          @php $imagePath2 = asset('menu/'.$menu2->image );@endphp
          
          <div class="col-md-6 col-lg-4">
            <div class="general-box">
              <div class="general-img gallery-select1" data-src="{{$imagePath2 }}"><a href=""><img src="{{$imagePath2 }}" alt="{{ $menu2->title }}"></a></div>
              <div class="general-title"><h3><a href="javascript:void(0);">{{ $menu2->title }}</a></h3></div>
              <button onclick="PrintImage('{{$imagePath2 }}'); return false;" class="print-btn-clk"><i class="fas fa-print"></i> Print</button>
            </div>
          </div>

        @endforeach

      @endif

  </div>
  <!-- <div class="load-more"><a href="#">Load More<i class="fa fa-spinner" aria-hidden="true"></i></a></div> -->
</div>
</section>


<!-- #End Breakfast Speecials -->
<section class="general-block general-block--inner">
  <div class="container">
    <div class="site-heading"><h2>{{  $menu->menu_heading_3 }}</h2></div>
      <div class="row lightgallery-main" id="lightgallery3">
      @if( isset( $menu->menu_list_3 ) && count( $menu->menu_list_3 ) > 0 )

        @foreach( $menu->menu_list_3 as $menu3 )

          @php $imagePath3 = asset('menu/'.$menu3->image );@endphp

            <div class="col-md-6 col-lg-4">
              <div class="general-box">
                <div class="general-img gallery-select1" data-src="{{ $imagePath3 }}"><a href="javascript:void(0);"><img src="{{ $imagePath3 }}" alt="{{ $menu3->title }}"></a></div>
                <div class="general-title"><h3><a href="javascript:void(0)">{{ $menu3->title }}</a></h3></div>
                <button onclick="PrintImage('{{ $imagePath3 }}'); return false;" class="print-btn-clk"><i class="fas fa-print"></i> Print</button>
              </div>
            </div>

          @endforeach

      @endif
  
    </div>
    <!-- <div class="load-more"><a href="#">Load More<i class="fa fa-spinner" aria-hidden="true"></i></a></div> -->
  </div>
</section>

<section class="continue-edit-options">
 <div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="text-center" style="margin-bottom: 20px;">  
          <a href="{{route('preview.menu-ad.countinue')}}" class="btn btn-primary">Continue Menu Post</a>
          <a href="{{route('post-ad')}}?editAdPost={{$preview->id}}" class="btn btn-secondary">Edit Menu</a>
      </div>
    </div>
  </div>
</div>
</section>

<!-- #End Breakfast Speecials -->
@endif


@endsection

@section('head-css')


<link rel="stylesheet" href="{{ asset('frontend/css/lightcase.css') }}">

@endsection

@section('scripts')


<script type="text/javascript">
  function ImagetoPrint(source) {
    return "<html><head><script>function step1(){\n" +
    "setTimeout('step2()', 10);}\n" +
    "function step2(){window.print();window.close()}\n" +
    "</scri" + "pt></head><body onload='step1()'>\n" +
    "<img src='" + source + "' /></body></html>";
  }
  function PrintImage(source) {
    Pagelink = "about:blank";
    var pwa = window.open(Pagelink, "_new");
    pwa.document.open();
    pwa.document.write(ImagetoPrint(source));
    pwa.document.close();
  }

  // lightbox gallery
  lightGallery(document.getElementById('lightgallery1'),{
    selector: '.gallery-select1',
    download: true,
  })
  lightGallery(document.getElementById('lightgallery2'),{
    selector: '.gallery-select1',
    download: true,
  })
  lightGallery(document.getElementById('lightgallery3'),{
    selector: '.gallery-select1',
    download: true,
  })
</script>

@endsection