@extends('layouts.website_layout')
@section('meta_title', $brand->meta_title)
@section('meta_description', $brand->meta_description)
@section('canonical_tag', "brands/".$brand->product_brand_url_slug)
@section('brand_image', "product-brand/".$brand->brand_logo)
@section('content')
<main>
    <article class="container-fluid innerBanner p-0">
        <figure>
            <img src="{{url('/')}}/assets/images/banners/{{$brand->banner_image}}" alt="{{$brand->product_brand_name}}" class="img-fluid desktop_image">
            <img src="{{url('/')}}/assets/images/banners/{{$brand->banner_image_mobile}}" alt="{{$brand->product_brand_name}}" class="img-fluid mobile_image">
            <figcaption class="custom__row slider-heading">
                {!!nl2br($brand->banner_caption)!!}
                <p class="paragraph mt-4">{!!nl2br($brand->banner_description)!!}</p>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{url('/')}}/products">Products</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{$brand->product_brand_name}}</li>
                    </ol>
                </nav>
            </figcaption>
        </figure>

    </article>

    <article class="container-fluid productCatIntro sbc">
        <section class="row custom__row justify-content-center">
            <header class="col-12 col-md-12 col-lg-12 pb-4">
                <h2 class="primary-heading mb-4">{{$brand->introduction_title}}</h2>
                <p class="paragraph">{!!nl2br($brand->introduction_description)!!}</p>
            </header>
        </section>
    </article>
    <article class="container-fluid brandsInto mb-5">
        <div class="row custom__row">
            <div class="col-12 col-md-11 m-auto">
                <div class="row">
                    <div class="col-12 col-md-6 brandsInto__image">
                        <div class="brandsInto__image__inner">
                            <img src="{{url('/')}}/assets/images/product-brand/{{$brand->brand_logo}}" alt="{{$brand->product_brand_name}}" class="img-fluid">
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <h2 class="primary-heading mb-4">{{$brand->product_brand_name}}</h2>
                        {!!nl2br($brand->brand_description)!!}
                    </div>
                </div>
            </div>
        </div>
    </article>
    @if(!empty(count($product_brand_developments)))
    <article class="container-fluid development" id="our-development">
        <div class="row custom__row">
            <header class="col-12 col-md-6 development__title">
                <h3 class="primary-heading">Recent Developments</h3>
            </header>
            <div class="col-12 col-md-6 development__nav">
                <div class="left"><img src="{{url('/')}}/assets/images/home/left-arrow-black.png" alt="Slide left" class="img-fluid"></div>
                <div class="number"> 1 / {{ceil(count($product_brand_developments)/2)}} </div>
                <div class="right"><img src="{{url('/')}}/assets/images/home/right-arrow-black.png" alt="Slide Right" class="img-fluid"></div>
            </div>
            <div class="col-12 development__slider owl-carousel">
                @foreach($product_brand_developments as $product_brand_development_row)
                <figure>
                    <img src="{{url('/')}}/assets/images/product-brand/{{$product_brand_development_row->product_brand_development_thumbnail}}" alt="{{$product_brand_development_row->product_brand_development_caption}}" class="img-fluid">
                    <figcaption>
                        <h3>{{$product_brand_development_row->product_brand_development_caption}}</h3>
                        <p class="paragraph">{{$product_brand_development_row->product_brand_development_description}}</p>
                        @if(!empty($product_brand_development_row->product_brand_development_link))
                        <a href="{{$product_brand_development_row->product_brand_development_link}}" target="_blank" class="link">Learn More</a>
                        @endif
                    </figcaption>
                </figure>
                @endforeach
            </div>
        </div>
    </article>
    @endif
    <div class="container-fluid">
        <section class="row custom__row justify-content-center productIntro__filter mb-5">
            <div class="col-12 col-md-10 col-lg-10 text-center">
                <div class="row justify-content-center">
                    <div class="col-12 col-md-4 productIntro__filter__block">
                        <div class="productIntro__filter__block__dropdown"><label class="product_family_placeholder">Select Product Family </label><span><img src="{{url('/')}}/assets/images/global/dorpdown-arrow.png" alt="Filter Product" class="img-fluid"></span>
                        </div>
                        <div class="productIntro__filter__block__list">
                            <div class="reset reset_product_categories d-none" >
                                <div><span><i class="fa fa-times" aria-hidden="true"></i></span> Clear</div>
                            </div>
                            <div class="product__family">
                                @foreach($product_categories as $product_category_row)
                                <label class="label">{{$product_category_row->product_category_name}}<input type="checkbox" class="checkbox filter_category_checkbox" value="{{$product_category_row->product_category_url_slug}}"><span class="checkmark"></span></label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="row custom__row pt-5">
            @include('product_block')
        </div>
    </div>
        
        
    </article>
</main>
@endsection