@extends('frontend.layouts.app')

@section('content')

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

@php  
  $flyers = json_decode( $preview->preview_data );
  //dump($flyers);
 // dump( count ( (array) $flyers->flyers_option_a ) );
 // exit;
@endphp


<div class="flyer-detail-sec-wrapper">
  <div class="flyer-detail-section">
    <div class="container">
      @if( isset(  $flyers->event_start_date  ) && isset(  $flyers->event_end_date  ) )
      <div class="heading-section" style="text-align: center;padding:10px 0px;">
        <h3>Flyers</h3>
        <div class="info">
          Valid from {{ date( 'F j, Y', strtotime( $flyers->event_start_date ) ) }} to {{ date( 'F j, Y', strtotime( $flyers->event_end_date ) )  }}
        </div>
      </div>
      @endif
      <div id="carouselFlyerControls" class="carousel slide flyers-carousel" data-ride="carousel">
        <div class="carousel-inner">
          <ul id="lightgallery1" class="list-unstyled d-flex lightgallery-main">
            
            @if( isset( $flyers->flyers_option_a ) && !empty( $flyers->flyers_option_a ) && count( (array) $flyers->flyers_option_a ) > 0 )

              @foreach( $flyers->flyers_option_a as $key => $flyer )

                @php  $imageUrl = asset('flyers/'.$flyer->image); @endphp
                @if( isset( $flyer->image ) )
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                  <div class="row">
                    <div class="col-12">
                      <button onclick="PrintImage('{{ $imageUrl }}'); return false;" class="print-btn-clk"><i class="fas fa-print"></i> Print</button>
                      <li class=" gallery-select1" data-src="{{ $imageUrl }}" >
                        <a href="" class="">                
                          <img class="img-responsive" src="{{ $imageUrl }}" alt="Thumb-1" style="height: 368px;object-fit: cover;">
                          <div class="inner-search-icon"><i class="fas fa-search"></i></div>
                        </a>
                      </li>
                    </div>
                  </div>
                </div>
                @endif
              @endforeach

            @endif
           
          </ul>
        </div>
        @if( isset( $flyers->flyers_option_a ) && !empty( $flyers->flyers_option_a ) && count( (array) $flyers->flyers_option_a ) > 1 )
        <a class="carousel-control-prev" href="#carouselFlyerControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselFlyerControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        @endif
      </div>
    </div>
  </div>

  <div class="flyer-detail-section flyer-detail-section-two">
    <div class="container">
      @if( isset(  $flyers->coupon_start_date  ) && isset(  $flyers->coupon_end_date  ) )
      <div class="heading-section" style="text-align: center;padding:10px 0px;">
        <h3>Coupon</h3>
        <div class="info">
          Valid from {{ date( 'F j, Y', strtotime( $flyers->coupon_start_date ) ) }} to {{ date( 'F j, Y', strtotime( $flyers->coupon_end_date ) )  }}
        </div>
      </div>
      @endif
      <div id="carouselTwoControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <ul id="lightgallery2" class="list-unstyled d-flex lightgallery-main">

              @if( isset( $flyers->flyers_option_b ) && !empty( $flyers->flyers_option_b ) && count( $flyers->flyers_option_b ) > 0 )

                <div class="carousel-item active">
                  <div class="row">

                      @foreach( $flyers->flyers_option_b as $key => $flyer )
                        @if( $key >= 0 && $key < 3 )
                        @if( isset( $flyer->image ) )
                          @php  $imageUrl = asset('flyers/'.$flyer->image); @endphp
                          <div class="col-4">
                            <button onclick="PrintImage('{{ $imageUrl }}'); return false;" class="print-btn-clk"><i class="fas fa-print"></i> Print</button>
                            <li class=" gallery-select1" data-src="{{ $imageUrl }}" >
                              <a href="" class="">                
                                <img class="img-responsive" src="{{ $imageUrl }}" alt="Thumb-1" style="height: 261px;object-fit: cover;">
                                <div class="inner-search-icon"><i class="fas fa-search"></i></div>
                              </a>
                            </li>
                          </div>
                        @endif

                        @endif
                  
                      @endforeach 
                    
                    </div>
                </div>

              @endif


              @if( isset( $flyers->flyers_option_b ) && !empty( $flyers->flyers_option_b ) && count( $flyers->flyers_option_b ) > 3  )

                <div class="carousel-item">
                  <div class="row">

                      @foreach( $flyers->flyers_option_b as $key => $flyer )

                          @if( $key > 2 && $key < 6 )
                          @if( isset( $flyer->image ) )
                          @php  $imageUrl = asset('flyers/'.$flyer->image); @endphp
                          <div class="col-4">
                            <button onclick="PrintImage('{{ $imageUrl }}'); return false;" class="print-btn-clk"><i class="fas fa-print"></i> Print</button>
                            <li class=" gallery-select1" data-src="{{ $imageUrl }}" >
                              <a href="" class="">                
                                <img class="img-responsive" src="{{ $imageUrl }}" alt="Thumb-1" style="height: 261px;object-fit: cover;">
                                <div class="inner-search-icon"><i class="fas fa-search"></i></div>
                              </a>
                            </li>
                          </div>
                          @endif
                          @endif

                      @endforeach 
                    
                    </div>
                </div>

              @endif


              @if( isset( $flyers->flyers_option_b ) && !empty( $flyers->flyers_option_b ) && count( $flyers->flyers_option_b ) > 6 )

                <div class="carousel-item">
                  <div class="row">

                      @foreach( $flyers->flyers_option_b as $key => $flyer )

                          @if( $key > 5 && $key < 9 )
                          @if( isset( $flyer->image ) )
                          @php  $imageUrl = asset('flyers/'.$flyer->image); @endphp
                          <div class="col-4">
                            <button onclick="PrintImage('{{ $imageUrl }}'); return false;" class="print-btn-clk"><i class="fas fa-print"></i> Print</button>
                            <li class=" gallery-select1" data-src="{{ $imageUrl }}" >
                              <a href="" class="">                
                                <img class="img-responsive" src="{{ $imageUrl }}" alt="Thumb-1" style="height: 261px;object-fit: cover;">
                                <div class="inner-search-icon"><i class="fas fa-search"></i></div>
                              </a>
                            </li>
                          </div>
                          @endif
                          @endif

                      @endforeach 
                    
                    </div>
                </div>

              @endif
          
          </ul>
        </div>
        @if( isset( $flyers->flyers_option_b ) && !empty( $flyers->flyers_option_b ) && count( $flyers->flyers_option_b ) > 0 &&  count( $flyers->flyers_option_b ) > 1)
        <a class="carousel-control-prev" href="#carouselTwoControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselTwoControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        @endif
      </div>
    </div>
  </div>

  <div class="flyer-detail-section flyer-detail-section-two">
    <div class="container">
      @if( isset(  $flyers->option_c_start_date  ) && isset(  $flyers->option_c_end_date  ) )
      <div class="heading-section" style="text-align: center;padding:10px 0px;">
        <h3>Page Flyers</h3>
        <div class="info">
          Valid from {{ date( 'F j, Y', strtotime( $flyers->option_c_start_date ) ) }} to {{ date( 'F j, Y', strtotime( $flyers->option_c_end_date ) )  }}
           <p><a href="{{ esc_url( $flyers->website ) }}" target="_blank">{{ $flyers->website }}</a></p>
        </div>
      </div>
      @endif
      <div id="carouselThreeControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <ul id="lightgallery3" class="list-unstyled d-flex lightgallery-main">
            <div class="carousel-item active">
              <div class="row">
                @if( isset( $flyers->flyers_option_c )  && !empty( $flyers->flyers_option_c ) && count( $flyers->flyers_option_c ) > 0 )

                @foreach( $flyers->flyers_option_c as $key => $flyer )
                @if( isset( $flyer->image ) )
                  @php  $imageUrl = asset('flyers/'.$flyer->image); @endphp
                    <div class="col-12">
                      <button onclick="PrintImage({{ $imageUrl }}); return false;" class="print-btn-clk"><i class="fas fa-print"></i> Print</button>
                      <li class=" gallery-select1" data-src="{{ $imageUrl }}" >
                        <a href="{{ esc_url( $flyers->website ) }}" class="" target="_blank">                
                          <img class="img-responsive" src="{{ $imageUrl }}" alt="Thumb-1" style="height: 936px;object-fit: cover;">
                          <div class="inner-search-icon"><i class="fas fa-search"></i></div>
                        </a>
                      </li>
                    </div>
                @endif
                @endforeach


                @endif
              </div>
            </div>
           
          </ul>
        </div>
        <!-- <a class="carousel-control-prev" href="#carouselThreeControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselThreeControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a> -->
      </div>
    </div>
  </div>
</div>

<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.flyers-ad.countinue')}}" class="btn btn-primary">Continue Flyers Post</a>
          <a href="{{route('post-ad')}}?editAdPost={{$preview->id}}" class="btn btn-secondary">Edit Flyers</a>
      </div>
    </div>
  </div>
</div>
</section>
@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