@extends('frontend::layouts.app')
@section('title', $projectDetails->meta_title)
@section('keywords', $projectDetails->meta_keywords)
@section('description', $projectDetails->meta_description)
@section('other_meta_tags')
    {!! $projectDetails->other_meta_tags !!}
@endsection
@section('content')
    <div id="pageWrapper" class="ProjectPage">

        <!-- Cmn_Banner -->
        <section id="InnerBanner">
            <picture>
                <source media="(min-width: 468px)" srcset="{{ $projectDetails->banner_image_value }}" />
                <img src="{{ $projectDetails->banner_mobile_image_value }}" width="1920" height="480"
                    alt="{{ $projectDetails->title }}" />
            </picture>
        </section>

        <!-- Project-Detail -->
        <section id="Project-Detail">
            <div class="container">
                <div class="dFlx CmnFlx">
                    <div class="lftSd">
                        @include('frontend::project.includes.sidebar')
                    </div>
                    <div class="ritSd">
                        <div class="cntWrap">
                            <h1>{{ $projectDetails->title }}</h1>
                            @if ($projectDetails->projectImages->isNotEmpty())
                                <div class="projectSlide owl-carousel">
                                    @foreach ($projectDetails->projectImages as $projectImage)
                                        <div class="item">
                                            <img src="{{ $projectImage->image_value }}" width="1920" height="480"
                                                alt="{{ $projectDetails->title }}" />
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <img src="{{ $projectDetails->image_value }}" width="1920" height="480"
                                    alt="{{ $projectDetails->title }}" />
                            @endif
                            {!! $projectDetails->description !!}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- TalkExpert -->
        <section id="TalkExpert">
            <div class="container">
                <div class="dFlx wow animate__fadeInUp animate__animated">
                    <div class="lftSd">
                        <div class="ttl">"{{ $projectCms->talk_expert_title }}"</div>
                        {!! $projectCms->talk_expert_description !!}
                    </div>
                    <div class="ritSd">
                        <a href="tel:{{ $siteCommonContent->formatted_phone_number }}" class="dflx"
                            aria-label="Call {{ $siteCommonContent->phone_number }}">
                            <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="37.577" height="14.227"
                                    viewBox="0 0 37.577 14.227">
                                    <path id="Path_11" data-name="Path 11"
                                        d="M50.483,41.847c-4.5-4.981-10.622-7.508-18.191-7.508s-13.7,2.528-18.2,7.508a2.312,2.312,0,0,0-.151,2.908l2.08,2.862a2.326,2.326,0,0,0,1.875.949,2.286,2.286,0,0,0,.774-.136L25.369,46a2.3,2.3,0,0,0,1.518-2.166V40.571a.986.986,0,0,1,.752-.939,19.269,19.269,0,0,1,9.3,0,.986.986,0,0,1,.752.939v3.265A2.3,2.3,0,0,0,39.208,46l6.7,2.427a2.316,2.316,0,0,0,2.649-.809l2.08-2.862A2.312,2.312,0,0,0,50.483,41.847Z"
                                        transform="translate(-13.5 -34.339)" fill="#fff" />
                                </svg>
                            </div>
                            <div class="cntSec">
                                <div class="subtl">Talk to our Expert</div>
                                <div class="numb">{{ $projectCms->talk_expert_phone_number }}</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        @if ($faqs->isNotEmpty())
            <!-- faqSec -->
            <section id="faqSec">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="lftB wow animate__fadeIn animate__animated">
                                <div class="title wow animate__fadeIn animate__animated">{!! $projectCms->faq_title !!}</div>
                                {!! $projectCms->faq_description !!}
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="ritB wow animate__fadeIn animate__animated">
                                <div class="accordion" id="accr1">
                                    @foreach ($faqs as $faq)
                                        <div class="accordion-item">
                                            <div class="accordion-header" id="hd{{ $loop->iteration }}">
                                                <button
                                                    class="accordion-button{{ $loop->iteration == 1 ? '' : ' collapsed' }}"
                                                    type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#cd{{ $loop->iteration }}"
                                                    aria-expanded="{{ $loop->iteration == 1 ? 'true' : 'false' }}"
                                                    aria-controls="cd{{ $loop->iteration }}"
                                                    aria-label="{{ $faq->question }}">
                                                    {{ $faq->question }}
                                                </button>
                                            </div>
                                            <div id="cd{{ $loop->iteration }}"
                                                class="accordion-collapse collapse{{ $loop->iteration == 1 ? ' show' : '' }}"
                                                aria-labelledby="hd{{ $loop->iteration }}" data-bs-parent="#accr1">
                                                <div class="accordion-body">
                                                    <p>{{ $faq->answer }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
    </div>
@endsection
@push('js')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            $('.projectSlide').owlCarousel({
                loop: true,
                rewind: true,
                autoplay: false,
                autoplayTimeout: 3500,
                autoplayHoverPause: true,
                responsiveClass: true,
                nav: false,
                dots: false,
                items: 1,
                margin: 7,
                navText: ['<span>prev</span>', '<span>next</span>'],
            });
        });
    </script>
@endpush