@extends('layouts.website_layout')
@section('meta_title', $meta_data->meta_title)
@section('meta_description', $meta_data->meta_description)
@section('banner_image', "banners/".$banner_data->banner_image)
@section('canonical_tag', $meta_data->canonical_tag)
@section('content')
<main>
    @if(isset($home_page_section_blocks_array[3]))
    <div class="container-fluid banner show_pointer lazy" onclick="window.location.href='{{$home_page_section_blocks_array[3][0]['section_block_link']}}'" style="background: url({{url('/')}}/assets/images/sections/{{$home_page_section_blocks_array[3][0]['section_block_image']}}) no-repeat bottom center/cover;">
        <div class="row">
            <div class="banner__caption">
                <h1 class="bold-heading">{{$home_page_section_blocks_array[3][0]['section_block_title']}}</h1>
                <h4 class="regular-heading">{!!nl2br($home_page_section_blocks_array[3][0]['section_block_tag_line'])!!}</h4>
            </div>
        </div>
    </div>
    @endif
    @if(array_key_exists(1, $home_page_section_array) && array_key_exists(1, $home_page_section_blocks_array))
    <div class="container-fluid mainCategory">
        <div class="row custom_row mainCategory__title">
            <div class="col-12 text-center"> 
                <h2 class="bold-heading">{{$home_page_section_array[1]}}</h2>
            </div>
        </div>
        <div class="row custom_row mainCategory__section">
            @for($i = 0; $i < count($home_page_section_blocks_array); $i++)
            @if(array_key_exists(1, $home_page_section_blocks_array) && array_key_exists($i, $home_page_section_blocks_array[1]))
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 mainCategory__section__block">
                <div class="mainCategory__section__block__inner">
                    <div class="mainCategory__section__block__inner__img">
                        <a href="{{$home_page_section_blocks_array[1][$i]['section_block_link']}}"><img loading="lazy" src="{{url('/')}}/assets/images/sections/{{$home_page_section_blocks_array[1][$i]['section_block_image']}}" alt="{{$home_page_section_blocks_array[1][$i]['section_block_title']}}" class="img-fluid"></a>
                    </div>
                    <div class="mainCategory__section__block__inner__caption">
                        <h3 class="bold-heading">{{$home_page_section_blocks_array[1][$i]['section_block_title']}}</h3>
                        <p class="regular-heading">{{$home_page_section_blocks_array[1][$i]['section_block_tag_line']}}</p>
                    </div>
                </div>
            </div>
            @endif
            @endfor
        </div>
    </div>
    @endif
    @if(array_key_exists(5, $home_page_section_array) && isset($home_page_section_blocks_array[5]))
    <div class="container-fluid types">
        <div class="row">
            <div class="types__section owl-carousel owl-theme" id="types_slider">
                @for($i = 0; $i < count($home_page_section_blocks_array[5]); $i++)
                @if(array_key_exists(5, $home_page_section_blocks_array) && array_key_exists($i, $home_page_section_blocks_array[5]))
                <div class="types__section__block">
                    <div class="types__section__block__inner">
                        <div class="types__section__block__inner__img">
                            <a href="{{$home_page_section_blocks_array[5][$i]['section_block_link']}}">
                                <img loading="lazy" src="{{url('/')}}/assets/images/sections/{{$home_page_section_blocks_array[5][$i]['section_block_image']}}" alt="{{$home_page_section_blocks_array[5][$i]['section_block_title']}}" class="img-fluid">
                            </a>
                        </div>
                        <div class="types__section__block__inner__caption">
                            <h3 class="bold-heading">{{$home_page_section_blocks_array[5][$i]['section_block_title']}}</h3>
                            <p class="regular-heading">{{$home_page_section_blocks_array[5][$i]['section_block_tag_line']}}</p>
                        </div>
                    </div>
                </div>
                @endif
                @endfor
            </div>
        </div>
    </div>
    @endif
    @if(array_key_exists(2, $home_page_section_array) && array_key_exists(2, $home_page_section_blocks_array))
    <div class="container-fluid interior">
        <div class="row interior__title">
            <div class="col-12 text-center"> 
                <h2 class="bold-heading">{{$home_page_section_array[2]}}</h2>
            </div>
        </div>
        @if(count($home_page_section_blocks_array[2]) > 2)
        <div class="row interior__section">
            <ul class="interior__section__mobile">
                @for($i = 0; $i < (count($home_page_section_blocks_array[2]) - 2); $i++)
                @if(array_key_exists(2, $home_page_section_blocks_array) && array_key_exists($i, $home_page_section_blocks_array[2]))
                <li><a href="{{$home_page_section_blocks_array[2][$i]['section_block_link']}}">{{$home_page_section_blocks_array[2][$i]['section_block_title']}}</a></li>  
                @endif
                @endfor
            </ul>
            <div class="interior__section__slider owl-carousel owl-theme" id="interior_slider">
                @for($i = 0; $i < (count($home_page_section_blocks_array[2]) - 2); $i++)
                @if(array_key_exists(2, $home_page_section_blocks_array) && array_key_exists($i, $home_page_section_blocks_array[2]))
                <div class="interior__section__slider__item">
                    <div class="interior__section__slider__item__img">
                        <a href="{{$home_page_section_blocks_array[2][$i]['section_block_link']}}">
                            <img loading="lazy" src="{{url('/')}}/assets/images/sections/{{$home_page_section_blocks_array[2][$i]['section_block_image']}}" alt="{{$home_page_section_blocks_array[2][$i]['section_block_title']}}" class="img-fluid">
                        </a>
                    </div>
                    <div class="interior__section__slider__item__caption">
                        <h3 class="bold-heading">{{$home_page_section_blocks_array[2][$i]['section_block_title']}}</h3>
                    </div>
                </div>
                @endif
                @endfor
            </div>
        </div>
        @endif
    </div>
    <div class="container-fluid featuredCategory">
        <div class="row custom_row featuredCategory__section">
            @for($i = (count($home_page_section_blocks_array[2]) - 2); $i < count($home_page_section_blocks_array[2]); $i++)
            @if(array_key_exists(2, $home_page_section_blocks_array) && array_key_exists($i, $home_page_section_blocks_array[2]))
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 featuredCategory__section__block">
                <a  href="{{$home_page_section_blocks_array[2][$i]['section_block_link']}}" class="featuredCategory__section__block__inner">
                    <div class="featuredCategory__section__block__inner__img">
                            <img loading="lazy" src="{{url('/')}}/assets/images/sections/{{$home_page_section_blocks_array[2][$i]['section_block_image']}}" alt="{{$home_page_section_blocks_array[2][$i]['section_block_title']}}" class="img-fluid">
                    </div>
                    <div class="featuredCategory__section__block__inner__caption">
                        <h3 class="bold-heading">{{$home_page_section_blocks_array[2][$i]['section_block_title']}}</h3>
                        <p class="regular-heading">{{$home_page_section_blocks_array[2][$i]['section_block_tag_line']}}</p>
                    </div>
            </a>
            </div>
            @endif
            @endfor
        </div>
    </div>
    @endif
    @if(isset($home_page_section_blocks_array[4]))
    <div class="container-fluid promotional show_pointer lazy" @if(!empty($home_page_section_blocks_array[4][0]['section_block_link'])) onclick="window.location.href='{{$home_page_section_blocks_array[4][0]['section_block_link']}}'" @endif style="background: url({{url('/')}}/assets/images/sections/{{$home_page_section_blocks_array[4][0]['section_block_image']}}) no-repeat bottom center/cover;">
        <div class="row">
            <div class="promotional__caption">
                <h1 class="bold-heading">{{$home_page_section_blocks_array[4][0]['section_block_title']}}</h1>
                <h4 class="regular-heading">{!!nl2br($home_page_section_blocks_array[4][0]['section_block_tag_line'])!!}</h4>
            </div>
        </div>
    </div>
    @endif
    <div class="container-fluid benefits">
        <div class="row custom_row benefits__section">
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                <div class="benefits__section__block text-center">
                    <div class="benefits__section__block__icon">
                        <img loading="lazy" src="{{url('/')}}/assets/images/home/free-delivery.png" alt="" class="img-fluid">
                    </div>
                    <div class="benefits__section__block__caption">
                        <h3 class="bold-heading">Free delivery</h3>
                        <p class="regular-heading">On all orders, no minimum</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                <div class="benefits__section__block text-center">
                    <div class="benefits__section__block__icon">
                        <img loading="lazy" src="{{url('/')}}/assets/images/home/taxes-included.png" alt="" class="img-fluid">
                    </div>
                    <div class="benefits__section__block__caption">
                        <h3 class="bold-heading">Tax included</h3>
                        <p class="regular-heading">No surprises at checkout</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                <div class="benefits__section__block text-center">
                    <div class="benefits__section__block__icon">
                        <img loading="lazy" src="{{url('/')}}/assets/images/home/relax.png" alt="" class="img-fluid">
                    </div>
                    <div class="benefits__section__block__caption">
                        <h3 class="bold-heading">Relax</h3>
                        <p class="regular-heading">Call or email us anytime</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection