@extends('layouts.app')

@section('content')
    <div class="container-fluid casino-bonuses-banner">
        <div class="container">
            <div class="row top-bonuses">
                <div class="col-12 p-0">
                    <div class="owl-carousel owl-theme">
                        @if(isset($featured_bonus_1))
                            <div class="item first"
                                 style="background-image: url('/uploads/offers/{{$featured_bonus_1->cover_img}}')">
                                <div class="h-100 w-100 image-mask">
                                    <div class="top-bonus-descr">BONUS OF THE WEEK</div>
                                    <div class="top-bonus-title text-white">
                                        {{$featured_bonus_1->short_content}}
                                    </div>
                                    <button class="btn btn-primary align-bottom roboto-bold view-all"
                                            onclick="window.location.href='/{{$featured_bonus_1->company->slug}}'">
                                        READ MORE
                                    </button>
                                </div>
                            </div>
                        @endif
                        @if(isset($featured_bonus_2))
                            <div class="item second"
                                 style="background-image: url('/uploads/offers/{{$featured_bonus_2->cover_img}}')">
                                <div class="h-100 w-100 image-mask">
                                    <div class="top-bonus-descr">BONUS OF THE WEEK</div>
                                    <div class="top-bonus-title text-white">
                                        {{$featured_bonus_2->short_content}}
                                    </div>
                                    <button class="btn btn-primary align-bottom roboto-bold view-all"
                                            onclick="window.location.href='/{{$featured_bonus_2->company->slug}}'">
                                        READ MORE
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container mb-0 p-lg-0">
        <div class="row pb-3">
            <div class="col-7 main-deposit-bonuses">
                <h2 class="roboto-regular">First Deposit Bonuses</h2>
                <p class="roboto-regular">Deposite his old age, the professor is quick at finding new casino bonuses for
                    himself, and the players. Here are few deposit bonuses, that our professor has recently
                    reviewed.</p>
            </div>
            <div class="col-5 text-right align-middle">
                <button class="btn btn-primary roboto-bold view-all">VIEW ALL</button>
            </div>
        </div>
    </div>
    <div class="container casinos-list">
        <hr>
        <div class="row  owl-carousel owl-theme casinos-carousel">
            @foreach($first_deposit_bonuses as $offer)
                @include('partials.offer',['width'=>4,'offer'=>$offer])
            @endforeach
        </div>
    </div>
    <div class="container mb-0 p-0">
        <div class="row">
            <div class="col-12 pl-5 pt-4 mb-5" style="color:#ffffff; height:150px; background-color: #15004d; background-image: url('/images/baner_1.png');">
                <h3 class="roboto-regular">PROVABLY FAIR</h3>
                <h3 class="roboto-regular font-weight-bold">GAMES</h3>
            </div>
        </div>
    </div>
    <div class="container mb-0 p-lg-0">
        <div class="row pb-3">
            <div class="col-7 main-deposit-bonuses">
                <h2 class="roboto-regular">No Deposit Bonuses</h2>
                <p class="roboto-regular">Deposite his old age, the professor is quick at finding new casino bonuses for
                    himself, and the players. Here are few deposit bonuses, that our professor has recently
                    reviewed.</p>
            </div>
            <div class="col-5 text-right align-middle">
                <button class="btn btn-primary roboto-bold view-all">VIEW ALL</button>
            </div>
        </div>
    </div>
    <div class="container casinos-list">
        <hr>
        <div class="row">
            @foreach($no_deposit_bonuses as $offer)
                @include('partials.offer',['width'=>4,'offer'=>$offer])
            @endforeach
        </div>
    </div>
@endsection