@extends('frontend.layouts.app')

@section('content')

<div class="flyer-detail-sec-wrapper">
  @if( isset( $flyers->event_start_date ) && isset( $flyers->event_end_date ) )
  <div class="flyer-detail-section">
    <div class="container">
      <div class="heading-section" style="text-align: center;padding:10px 0px;">
        <h3>Flyers ( {!! $flyers->contact_name !!} )</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>
      <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( $menuList1 ) && !empty( $menuList1 ) && count( (array) $menuList1 ) > 0 )

              @foreach( $menuList1 as $key => $flyer )
              @if( isset( $flyer->image ) )
                @php  $imageUrl = asset('flyers/'.$flyer->image); @endphp

                <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>
        <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>
      </div>
    </div>
  </div>
  @endif

@if( isset( $flyers->coupon_start_date )  && isset( $flyers->coupon_end_date ) )
  <div class="flyer-detail-section flyer-detail-section-two">
    <div class="container">
      <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>
      <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( $menuList2 ) && !empty( $menuList2 ) && count( $menuList2 ) > 0  )

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

                      @foreach( $menuList2 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( $menuList2 ) && !empty( $menuList2 ) && count( $menuList2 ) > 3 )

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

                      @foreach( $menuList2 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( $menuList2 ) && !empty( $menuList2 ) && count( $menuList2 ) > 6  )

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

                      @foreach( $menuList2 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>
        <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>
      </div>
    </div>
  </div>
@endif

@if( isset( $flyers->option_c_start_date  )  && isset( $flyers->option_c_end_date ) )
  <div class="flyer-detail-section flyer-detail-section-two">
    <div class="container">
      <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 ) )  }}
          @if( isset( $flyers->website ) )
            <p><a href="{{ esc_url( $flyers->website ) }}" class="" target="_blank">{{ esc_url( $flyers->website ) }}</p>
          @endif
        </div>
      </div>
      <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">
                <div class="col-4"></div>
                @if( isset( $menuList3 )  && !empty( $menuList3 ) && count( $menuList3 ) > 0 )

                @foreach( $menuList3 as $key => $flyer )
                @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 }}" >
                          <img class="img-responsive" src="{{ $imageUrl }}" alt="Thumb-1" style="height: 50%;object-fit: cover;">
                          <div class="inner-search-icon"><i class="fas fa-search"></i></div>
                      </li>
                    </div>
                  @endif
                @endforeach
                @endif
                <div class="col-4"></div>
              </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>

@endif

</div>
@endsection

@section('head-css')
<link rel="stylesheet" href="{{ asset('frontend/css/lightcase.css') }}">
@endsection

@section('scripts')
<script>
  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