@extends('layouts.app-frontend')

@section('content')
    <link rel="stylesheet" href="{{asset('css/promo.css')}}">

    <div class="content promo">
         
        <section class="promo__slider__container">
            <div class="promo__slider__content">
                <div class="row">
                @if(count($promos) > 0)
                @foreach($promos as $promo)
                <!-- <div class="promo__slider__item">
                    <div class="promo__slider__item__image">
                        <img src="{{ env('SUB_DIRECTORY').Storage::url($promo->image_banner) }}" alt="{{$promo->name}}" class="img-fluid">
                    </div>
                    @if($promo->template == 0 )
                    <div class="promo__slider__item__text top">
                    @elseif($promo->template == 1)
                    <div class="promo__slider__item__text bottom">
                    @elseif($promo->template == 2)
                    <div class="promo__slider__item__text d-none">
                    @endif
                        <p class="title">{{$promo->name}}</p>
                        <p class="content">{{$promo->description}}</p>
                        <div class="promo__slider__item__button">Lihat Promo</div>
                    </div>
                    @if($promo->template == 2)
                    <div class="promo__slider__item__overlay">
                        <div class="promo__slider__item__button">Lihat Promo</div>
                    </div>
                    @endif
                </div> -->
                                @if(count($promos) == 1)
                <div class="col-12 col-lg-6 mx-auto">
                @endif

                @if(count($promos) == 2)
                <div class="col-12 col-lg-6">
                @endif

                @if(count($promos) > 2)
                <div class="col-12 col-lg-4 mx-auto">
                @endif
                    <div class="promo__slider__item__title text-center">
                        <span>Promo </span>
                    </div>
                    <div class="promo__slider__item__image">
                        <img src="{{ env('SUB_DIRECTORY').Storage::url($promo->image_banner) }}" alt="{{$promo->name}}" class="img-fluid">
                    </div>
                    @if($promo->template == 0 )
                    <div class="promo__slider__item__text top">
                    @elseif($promo->template == 1)
                    <div class="promo__slider__item__text bottom">
                    @elseif($promo->template == 2)
                    <div class="promo__slider__item__text d-none">
                    @endif
                        <p class="title">{{$promo->name}}</p>
                        <p class="content">{{$promo->description}}</p>
                        <div class="promo__slider__item__button" data-numbering="">Lihat Promo</div>
                    </div>
                    @if($promo->template == 2)
                    <div class="promo__slider__item__overlay">
                        <div class="promo__slider__item__button" data-numbering="">Lihat Promo</div>
                    </div>
                    @endif
                </div>
                @endforeach
                </div>
                @else
                <div class="row">
                    <div class="col-12 text-center">
                        <h1 style="font-size: 28px;font-weight: bold;margin:0;">Mohon Maaf</h1>
                        <h2 style="font-size: 21px;font-weight: 400;">Untuk sementara sedang tidak ada promo yang sedang berjalan.</h2>
                    </div>
                </div>
                @endif
            </div>
        </section>
        
    </div>

        <section class="promo__description__container">
            <div class="promo__description__content">
                @if(count($promos) > 0)
                @foreach($promos as $promo)
                <div class="promo__description__item" data-numbering="">
                    <div class="promo__description__close">
                        <p class="close">X</p>
                    </div>
                    <div class="promo__description__header">
                        <div class="row">
                            <div class="col-12">
                                <p class="title text-center">{{$promo->name}}</p>
                                <!-- <p class="content text-center">{{$promo->description}}</p> -->
                            </div>
                        </div>
                    </div>
                    <div class="promo__description__text">
                        <p>{!!$promo->detail!!}</p>
                        
                        <div class="agree-button">
                            <!-- <form action="{{$promo->slug}}" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('Please indicate that you have read and agree to the Terms and Conditions and Privacy Policy'); return false; }"> -->
                            <form action="{{$promo->slug}}">

                            <input type="checkbox" name="checkbox" value="check" id="agree" /> Saya telah membaca dan menyetujui Syarat dan Ketentuan dan Kebijakan Privasi
                            <br/>
                            <input type="submit" name="submit" value="submit" disabled />

                            </form>
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </section>
    </div>

@endsection