@extends('frontend.layouts.main')
@section('content')
<!--POP UP -->
        
        <style>
        
                    
            .modal-dialog {
                max-width: max-content; 
                margin-top: 180px
            }
            
            .imgpop {
                width: 600px; 
                aspect-ratio: 2;
                object-fit: cover;
            }

            
            @media only screen and (max-width: 768px) { 
                
                .modal-dialog {
                    margin-top: 98px
                }
                
                .imgpop {
                    width: 100%; 
                }
                
            }
            
            
            
        </style>


        <!-- Modal -->
        @if (popup())
        <div class="modal fade show" id="promo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-modal="true" role="dialog" style="display: block;">
          <div class="modal-dialog" style="">
            <div class="modal-content" style="background-color: transparent">
              <div class="modal-body" style="padding: 0px">
                <img src="{{ popup()->gambar }}" alt="{{ general()->brand }}" class="imgpop"/>
              </div>
            </div>
          </div>
        </div>
        @endif
<div id="content-primary" class="p-0">
    <div class="desktop-only">
        <div id="myCarouselDesktop" class="carousel slide" data-bs-ride="carousel" style="height: 100%">
            <div class="carousel-indicators">
                @foreach(banner() as $index => $slide)
                <button type="button" data-bs-target="#myCarouselDesktop" data-bs-slide-to="{{ $index }}" class="{{ $loop->first ? 'active' : '' }}" aria-current="{{ $loop->first ? 'true' : 'false' }}" aria-label="Slide {{ $index + 1 }}">
                             
                         </button>
                         @endforeach
            </div>
  <div class="carousel-inner" style="height: 100%">
      @foreach(banner() as $slide)
            <div class="carousel-item {{ $loop->first ? 'active' : '' }}" style="height: 100%">
          <img src="{{ $slide->gambar }}" class="d-block w-100 banner" alt="{{ general()->brand }}" style="height: 100%">
        </div>
        @endforeach
      </div>
</div>

</div>
                        <div class="mobile-only"><div class="banner shadow" style="margin:20px 20px 20px 20px; border:solid 2px #FFF; border-radius: 20px; box-shadow:rgba(0,0,0,1) 0px 0px 10px 0px; position: relative;">
     <img src="https://img.viva88athenae.com/pop/mobile-fgs.jpg" width="100%" alt="" style="border-radius: 20px; top: 0; left: 0; width: 100%; height: 100%; position: absolute;">
</div></div>
                        
                                    </div>
@endsection