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

    </article>
    <article class="container-fluid faqs pt-5 mb-0">
        <div class="row custom__row justify-content-end">
            <div class="col-12 col-md-11">
                <section class="row faqs__title mb-3">
                    <header class="col-12 pl-0">
                        <h2 class="secondary-heading">Here to help: Product FAQs</h2>
                    </header>
                </section>
                <section class="row faqs__categories mb-5">
                    <ul>
                        @php
                        $i = 0;
                        @endphp
                        @foreach($product_faq_categories as $product_faq_category_row)
                        <li data-faq-cat="{{Str::slug($product_faq_category_row->product_faq_category_name)}}" @if(empty($i)) class="active" @endif>{{$product_faq_category_row->product_faq_category_name}}</li>
                        @php
                        $i++;
                        @endphp
                        @endforeach
                    </ul>
                </section>
                @php
                $i = 0;
                @endphp
                @foreach($product_faq_categories as $product_faq_category_row)
                <section class="row faqs__content @if(empty($i)) active @endif" id="{{Str::slug($product_faq_category_row->product_faq_category_name)}}">
                    @if(isset($product_faqs_object->{$product_faq_category_row->id}))
                    @php
                    $j = 0;
                    @endphp
                    @foreach($product_faqs_object->{$product_faq_category_row->id} as $project_faqs_object_row)
                    <header class="col-12">
                        <h4>Q. {{$project_faqs_object_row->product_faq_question}} <p>{{$project_faqs_object_row->product_name}}</p><span></span></h4>
                        <details>
                            <summary class="paragraph">{{$project_faqs_object_row->product_faq_answer}}</summary>
                        </details>
                    </header>
                    @php
                    $j++;
                    @endphp
                    @endforeach
                    @endif
                </section>
                @php
                $i++;
                @endphp
                @endforeach
            </div>
        </div>
    </article>
    <article class="container-fluid randoms mt-5">
        <div class="row">
            <div class="col-12 col-md-6 randoms__block__left">
                <h3 class="mb-3">3D View</h3>
                <p class="paragraph">A holistic view of our products to help you get a better perspectie of our offering.</p>
                <a href="{{url('/')}}/complete-resources#3DView"><img src="{{url('/')}}/assets/images/home/right-arrow-black.png" alt="Link" class="img-fluid"></a>
            </div>
            <div class="col-12 col-md-6 randoms__block__right">
                <h3 class="mb-3">Product Catalogs</h3>
                <p class="paragraph">Select and download product catalogue(s) of interest.</p>
                <a href="{{url('/')}}/complete-resources#ProductCatalog"><img src="{{url('/')}}/assets/images/home/right-arrow-black.png" alt="Link" class="img-fluid"></a>
            </div>
        </div>
    </article>
</main>
@endsection