@php
    $lotteryContent = getContent('lottery.content', true);
    $phases = \App\Models\Phase::available()
        ->latest('draw_date')
        ->limit(10)
        ->with('lottery')
        ->get();
        
    $colors = [
        "#FF339A",
        "#6600CC",
        "#00CC99",
        "#D6293A",
        "#1083e5",
        "#fd7f10",
        "#9D4FC6",
    ];
    
    $banners = \App\Models\Banner::latest()->get();
@endphp

<style>
    .lottery_section h3 {
        text-align: center;
        font-size: 26px;
        color: #1e1B49;
        text-transform: uppercase;
        font-family: MohrRounded-SemiBold;
    }
    
    .card {
        overflow: hidden;
        border-radius: 10px;
    }
    
    .lottery_section .inner {
        background-color: #FF339A;
        color: #fff;
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        border: none;
    }
    
    .lottery_section .inner .card-title {
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 28px;
        font-family: MohrRounded-Bold;
        text-transform: capitalize;
    }
    
    .lottery_section .inner .card-header {
        border-bottom: 1px solid #ffeb79 !important;
        padding: .7rem 1rem;
        background-color: #ffeb79;
    }
    
    .lottery_section .inner .prize {
        display: block;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        line-height: 0;
        font-family: MohrRounded-SemiBold;
    }
    
    .lottery_section .inner .price {
        text-align: center;
        margin-top: 4px;
        margin-bottom: 30px;
    }
    
    .lottery_section .inner .price span {
        font-size: 14px;
        font-weight: 500;
        padding: 0 4px;
        font-family: MohrRounded-SemiBold;
    }
    
    .lottery_section .inner .price strong {
        font-weight: bolder;
        font-size: 28px;
        text-shadow: 2px 2px 0 #000;
        font-family: MohrRounded-SemiBold;
    }
    
    .lottery_section .inner p {
        text-align: center;
        font-family: MohrRounded-SemiBold;
        font-size: 22px;
        line-height: 1.3;
        color: #fff;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, 1px 1px #000, -1px 1px #000;
        margin-bottom: 35px;
    }
    
    .lottery_section .inner .button {
        height: 54px;
        border-radius: 27px;
        padding: 0 32px;
        min-width: 160px;
        background-color: #fff;
        margin: 0 auto 14px auto;
        line-height: 1;
        display: block;
        text-transform: uppercase;
    }
    
    .lottery_section .inner .button a {
        color: #1e1B49;
        font-size: 20px;
        font-family: MohrRounded-SemiBold;
    }
    
    .cta-price {
        display: flex;
        align-items: center;
        height: 20px;
        border-radius: 10px;
        justify-content: center;
        text-align: center;
        padding: 0 20px;
        border-style: solid;
        border-width: 1px;
        border-color: #fff;
        width: fit-content;
        margin: 0 auto;
    }
    
    .cta-price span {
        font-family: MohrRounded-SemiBold;
        font-size: 12px;
        color: #fff;
        line-height: 1;
    }
    
    @media (max-width: 768px) {
        .lottery_section {
            padding-top: 10px !important;
        }
        
        .lottery_section h3 {
            font-size: 20px;
        }
    }
</style>

@php
    $i = 0;
@endphp


{{-- <section class="pt-50 pb-50">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-header text-center">
                    <h2 class="section-title">{{ __(@$lotteryContent->data_values->heading) }}</h2>
                </div>
            </div>
        </div><!-- row end -->
        <div class="row">
            <div class="col-lg-12">

                @include($activeTemplate . 'partials.lotteries')

            </div>
        </div>
        <div class="text-center">
            <a class="btn btn--base btn--capsule wow fadeInUp mt-3" data-wow-duration="0.5s" data-wow-delay="0.7s" href="{{ route('lottery') }}">@lang('View All')</a>
        </div>
    </div>
</section> --}}


@push('script')
    <script>
        $(document).ready(function(){
            $('.banner_slider').slick({
                dots: false,
                arrows: false,
                infinite: true,
                autoplay: true,
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1,
            })
                
            $('.lottery_slider_1').slick({
              dots: false,
              arrows: false,
              infinite: false,
              centerMode: false,
              variableWidth: false,
              autoplay: true,
              speed: 300,
              slidesToShow: 3,
              slidesToScroll: 1,
              responsive: [
                {
                  breakpoint: 1024,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                  }
                },
                {
                  breakpoint: 600,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                },
                {
                  breakpoint: 480,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                }
              ]
            });
            
            $('.lottery_slider_2').slick({
              dots: false,
              arrows: false,
              infinite: false,
              centerMode: false,
              variableWidth: false,
              autoplay: true,
              speed: 300,
              slidesToShow: 4,
              slidesToScroll: 1,
              responsive: [
                {
                  breakpoint: 1024,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                  }
                },
                {
                  breakpoint: 600,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                },
                {
                  breakpoint: 480,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                }
              ]
            });
        })
    </script>
@endpush
