@extends('layouts.master')

@section('meta')
    <title>{{ __('message.promotion') }}</title>
    <meta name="description" content="{{__('message.description')}}">
    <meta name="keywords" content="{{__('message.title')}}">
    <link rel="canonical" href="{{route('home')}}"/>
    <meta property="og:title" content="{{__('message.title')}}" />
    <meta property="og:description" content="{{__('message.description')}}" />
    <meta property="og:type" content="game" />
    <meta property="og:url" content="{{route('home')}}" />
    <meta property="og:image" content="{{asset('cover-web.png')}}" />
    <meta name="twitter:title" content="{{__('message.title')}}" />
    <meta name="twitter:description" content="{{__('message.description')}}" />
@endsection

@push('css')

@endpush

@section('content')
    {{-- Promotion --}}
    <div class="casino-game my-0 promotion">
        <div class="border-red">
            <?php
                $pro = $promotions->first();
            ?>
            <img src="{{asset($pro->feature_image)}}" alt="Promotion" width="100%">
        </div>
        {{-- <h1 class="mb-0">{{__('message.promotion')}}</h1> --}}
        <div class="list-item pt-0">
            <div class="row">
                @foreach($promotions as $index=>$promotion)
                    @if($index>0)
                        <div class="col-12 col-sm-12 col-md-6 col-lg-6 px-0 px-sm-1 px-md-1 my-1 my-lg-1">
                            @if (!empty($promotion->embed_url)) 
                            <div class="ratio ratio-16x9">
                                <a href="{{route('promotion-detail',$promotion)}}">
                                    <iframe src="{{ $promotion->embed_url }}" title="welcome to supermaster789" allowfullscreen></iframe>
                                </a>
                            </div>
                            @endif
                            <div href="#" class="text-decoration-none img-hover-zoom--quick-zoom">
                                @if (empty($promotion->embed_url))  
                                <div class="img-item">
                                    <a href="{{route('promotion-detail',$promotion)}}">
                                        <img src="{{ asset($promotion->feature_image) }}" alt="" width="100%">
                                    </a>
                                </div>
                                @endif
                                <div class="content-pro">
                                    <p>{!! Str::limit($promotion->description, 120, '...') !!}</p>
                                    
                                    <div class="row my-1">
                                        <div class="col-4">
                                            <button class="btn btn-warning btn-sm rounded-pill more-detail mx-md-2" data-bs-toggle="modal" data-bs-target="#promotion-{{$promotion->id}}"><i class="fas fa-exclamation-circle"></i>
                                                {{__('message.read more')}}</button>
                                        </div>
                                        <div class="col-8 align-self-center">
                                            <div class="d-flex justify-content-end social-share">
                                                <div class="fb-share-button mx-2" data-href="{{ route('promotion-detail',$promotion->id)}}" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ route('promotion-detail',$promotion->id)}}%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
                                                <script async src="https://telegram.org/js/telegram-widget.js?15" data-telegram-share-url="{{ route('promotion-detail',$promotion->id)}}"></script>
                                                <div class="line-it-button mx-2" data-lang="en" data-type="share-a" data-ver="3" data-url="{{ route('promotion-detail',$promotion->id)}}" data-color="default" data-size="small" data-count="false" style="display: none;"></div>
                                                <script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="promotion-{{$promotion->id}}" tabindex="-1" aria-labelledby="promotionContent-{{$promotion->id}}"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header py-2 px-3">
                                        <h5 class="modal-title text-warning font-k" id="promotionContent-{{$promotion->id}}"><i class="fas fa-gift"></i> {{__('message.promotion')}}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <img src="{{ asset($promotion->feature_image) }}" alt="Promotion" class="w-100 mb-2">
                                        @if (!empty($promotion->embed_url))    
                                        <div class="ratio ratio-16x9">
                                            <iframe src="{{ $promotion->embed_url }}" title="welcome to supermaster789" allowfullscreen></iframe>
                                        </div>
                                        @endif
                                        {!! $promotion->description !!}
                                    </div>
                                    <div class="modal-footer p-1">
                                        <button type="button" class="btn btn-warning rounded-pill btn-sm" data-bs-dismiss="modal"><i class="far fa-times-circle"></i> {{__('message.close')}}</button>
                                        <!-- <button type="button" class="btn btn-primary rounded-pill">Save changes</button> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
@endsection

@push('scripts')

@endpush