@extends('front.layout.app')
@section('content')

<style>
.crd {
    height: 240px;
    cursor: pointer;
}

.crd::before {
    background-image: unset;
}

.have .stroke::before {
    width: 50%;
}
.newcrd {
    padding-bottom: 45px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px){
.have .stroke {
    font-size: 42px;
    font-weight: 600;
    width: 100%;
    margin-bottom: 5px;
    color: #ffa700;
    margin-top: 9px;
}
.have .stroke::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -24px;
    background-color: #483398;
    height: 6px;
    width: 100%;
}

}
.crd{
    position: relative;
}
.crd .btt {
    position: absolute;
    inset: 0;
    background-color: rgb(255 171 0 / 48%);
    display: none;
    justify-content: center;
    align-items: center;
    
    transition: .5s;
}
.crd .btt button {
    background: #fff;
    height: 42px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Poppins';
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    cursor: pointer;
   
}
.crd:hover .btt{
   display: flex !important;
}
</style>

<main>
    <section class="main-banner katie">
        <div class="banner-img">
            <div class="img-box">
                <img class="img-fluid" src="{{ asset('assets/admin/uploads/photo_page/'.$photo->banner_image) }}" alt="">
            </div>
            <div class="content">
                {!! $photo->title !!}
                <!-- <h2 data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">PHOTO & <span>GIFS</span></h2> -->
                <p data-aos="fade-right" data-aos-delay="200" data-aos-duration="1000">{!! $photo->heading	  !!}</p>
            </div>
        </div>
    </section>

    <section class="have my-5 py-5">
        <div class="container">
            <div class="row mb-5 pb-5">
                <div class="col-6 col-lg-3">
                    <h3 class="stroke" id="changeValue">{!! $photo->section_heading	  !!}</h3>
                </div>
                <div class="col-6 col-lg-9 text-end">
                    <!--<select name="pg" class="slt" id="pg" onchange="ChangeValue(this.value);">-->
                    <!--    <option value="All Photo's">All Photo's</option>-->
                    <!--    <option value="All Gif's">All Gif's</option>-->
                    <!--    <option value="Most Recent Photo">Most Recent Photo</option>-->
                    <!--    <option value="Most Recent Gif's">Most Recent Gif's</option>-->
                    <!--</select>-->
                </div>
            </div>
            
            <div class="row gy-5">
              @if($gallery)  
               @php $counter = 0; @endphp
                @foreach($gallery as $galler)
                
                <div class="col-12 col-lg-3 col-md-4">
                    <div class="newcrd">
                    <a href="javascript:void(0)">
                        <div class="crd">
                            
                            <div class="btt">
                                <form action="">
                                    <input type="hidden" name="gallery_id" value="{{ $galler->id }}">
                                    <input type="hidden" name="amount" value="{{ $galler->album_price }}">
                                    <button>Unlock Album</button>
                                </form>
                            </div>
                            <img src="{{ asset('assets/admin/uploads/albums/'.$galler->album_image) }}" class="img-fluid" alt="">
                        </div>
                    </a>
                   
                    <ul>
                        <li>{!! $galler->album_name !!} ({{ (getRecordcounter('gallery',$galler->id)) }}) </li>
                        
                        <li class="text-end">
                            <span><span>$</span>{{ $galler->album_price }}</span>
                        </li>
                    </ul>
                    
                    <div class="platter"><a href="javascript:void(0)" class="theDifanchor addToCart" data-id="{{ $galler->id }}"> Add to cart </a></div>
                  
                </div>
                </div>
                @php $counter++; @endphp
                @endforeach
              @endif  
              
                <section class="pagi5867">
                    <div class="pagination d-flex justify-content-center">
                       {{ $gallery->links() }}
                    </div>
                </section>

            </div>
            
        </div>
    </section>
</main>

@section('script')
<script>
    
    $(document).ready(function(){
        $('.addToCart').on('click',function(e){
            e.preventDefault();
            var video_id = $(this).data('id');
            var qty = $('#cart-count').text();
            console.log(qty);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
            url: "{{ route('add.to.cart') }}", 
            method: 'POST',
            data:{video_id:video_id},
            success: function(data){
                
                if(data.success == true)
                {
                  toastr.success(data.msg);
                  $('#cart-count').text(data.qty);
                }    
                else if(data.error == true)
                {
                    toastr.error(data.msg);
                }
            },error: function() {
                
                toastr.error('Something went wrong, please try again.');
            }
        
                
            });
            
        });
        
    });
    
    
</script>

@endsection
@endsection