@extends('frontend.layouts.app')
@section('title')
    Home
@endsection
@section('content')
@if( get_setting('home_section_one_status') == 1)
<div class="hmBannerSec__wr">
    <picture class="hmBnrBgOvrlayFigure__wr">
        <img src="{{ uploaded_asset(get_setting('home_section_one_bg_image'), 'assets/frontend/images/home-main-banner-overlay-bg.jpg')}}" loading="lazy" class="img-fluid" alt="home-main-banner-overlay-bg" width="2560" height="1463">
    </picture>
    <span class="hmBnrOvrlayElmnt d-none d-lg-block">
        <img src="images/home-banner-overlay-shape.png" loading="lazy" class="img-fluid" alt="home-banner-overlay-shape" width="338" height="694">
    </span>
    <div class="container position-relative">
        <div class="row row-gap-4 align-items-lg-center">
            <div class="col-lg-7 col-12">
                <div class="hmBnrContentBlock mt-lg-0 mt-5 text-lg-start text-center">
                    <div class="hmBnrContentHead mb-3">
                        <h2 class="hmBnrContentHeadTitle mb-0">{{ get_setting('home_section_one_title') }}</h2>
                    </div>
                    <div class="hmBnrContent">
                        <p>{!! get_setting('home_section_one_sub_title') !!}</p>
                    </div>
                    <div class="hmBnrBtnBlock w-100 d-flex flex-column flex-lg-row align-items-lg-center align-items-center justify-content-lg-start gap-12px mt-lg-40px mt-4">
                        <a href="{{ (get_setting('home_section_one_button_link_one') != '') ? url(get_setting('home_section_one_button_link_one', '/')) : '/' }}" class="btn btn-primary rounded-pill" role="button">
                            <span class="btnTitle">{{ strtoupper(get_setting('home_section_one_button_label_one')) }}</span>
                        </a>
                        <a href="{{ (get_setting('home_section_one_button_link_tow') != '') ? url(get_setting('home_section_one_button_link_tow', '/')) : '/' }}" class="btn btn-light rounded-pill" role="button">
                            <span class="btnTitle">{{ strtoupper(get_setting('home_section_one_button_label_tow')) }}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 col-12">
                <picture class="hmBnrFigure">
                    <img src="{{ uploaded_asset(get_setting('home_section_one_image'), 'assets/frontend/images/home-main-banner-bg.png')}}" loading="lazy" class="img-fluid" alt="home-main-banner-bg" width="603" height="597">
                </picture>
            </div>
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_tow_status') == 1)
<div class="hmResourceSec__wr py-lg-80px py-5">
    <picture class="hmResorcBgOvrlayFigure__wr">
        <img src="images/overlay-tri-angle-bg.jpg" loading="lazy" class="img-fluid" alt="overlay-tri-angle-bg" width="2560" height="1707">
    </picture>
    <div class="container position-relative">
        <div class="row row-gap-4">
            <div class="col-lg-3 col-12">
                <div class="hmResorcSecHead text-center text-lg-start">
                    <h2 class="hmRsorcSecHeadTitle mb-0">{{ get_setting('home_sec_tow_title') }}</h2>
                </div>
            </div>
            <div class="col-lg-9 col-12">
                <div class="hmResorcGridBlock">
                    <div class="row row-gap-4">
                        @if (loopType(json_decode(get_setting('home_sec_tow_block_title'), true)))
                            @foreach (json_decode(get_setting('home_sec_tow_block_title'), true) as $key => $value)
                                <div class="col-lg-6 col-sm-6 col-12">
                                    <div class="hmResorcBlock text-center text-sm-start">
                                        <div class="hmResorcIconBlock mb-lg-4 mb-3">
                                            <span class="hmResorcIcon">
                                                <img src="{{ uploaded_asset(getLoopSetting('home_sec_tow_block_icon', $key), 'assets/frontend/images/resource-icon-1.png') }}" loading="lazy" class="img-fluid" alt="resource-icon" width="40" height="40">
                                            </span>
                                        </div>
                                        <div class="hmResorsContentBlock">
                                            <h2 class="hmResorsTitle">{{$value}}</h2>
                                            <div class="hmResorsContent">
                                                <p>{!! getLoopSetting('home_sec_tow_block_desc', $key) !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_three_status') == 1)
<div class="hmAchivSec__wr bg-secondary py-lg-80px py-5">
    <span class="hmAchivOvrlayElmnt d-lg-block d-none">
        <img src="images/home-achive-overlay-shape.png" loading="lazy" class="img-fluid" alt="home-achive-overlay-shape" width="" height="">
    </span>
    <div class="container position-relative">
        <div class="row row-gap-4 gx-lg-5">
            <div class="col-lg-6 col-12">
                <div class="hmAchivHead text-center text-lg-start">
                    <h2 class="hmAchivHeadTitle mb-0">{{get_setting('home_sec_three_title')}}</h2>
                </div>
            </div>
            <div class="col-lg-6 col-12">
                <div class="hmAchivHeadContent text-center text-lg-start">
                    {!! get_setting('home_sec_three_desc') !!}
                </div>
            </div>
            <div class="col-12">
                <div class="counterBlockParent px-xxl-5">
                    <div class="row row-gap-4 gx-lg-4 gx-2 row-cols-lg-4 row-cols-sm-2 row-cols-2 justify-content-center">
                        @if (loopType(json_decode(get_setting('home_sec_three_card_count_value'), true)))
                            @foreach (json_decode(get_setting('home_sec_three_card_count_value'), true) as $key => $value)
                                <div class="col">
                                    <div class="counterBlock">
                                        <div class="hmCounterIconBlock">
                                            <span class="hmCounterIcon">
                                                <img src="{{ uploaded_asset(getLoopSetting('home_sec_three_card_icon', $key), 'images/counter-icon-1.png') }}" loading="lazy" class="img-fluid" alt="counter-icon" width="40" height="40">
                                            </span>
                                        </div>
                                        <div class="hmCounterContentBlock">
                                            <div class="counterNumBlock">
                                                <!-- <span class="count start">{{ $value }}</span> -->
                                                <span class="">{{ $value }}</span>
                                                <span>{{ getLoopSetting('home_sec_three_card_count_symbol', $key) }}</span>
                                            </div>
                                            <p>{{ getLoopSetting('home_sec_three_card_title', $key) }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_four_status') == 1)
{{-- Service Section --}}
<div class="hmServiceSec__wr py-lg-80px py-5">
    <picture class="hmServBgOvrlayFigure__wr">
        <img src="images/overlay-tri-angle-bg.jpg" loading="lazy" class="img-fluid" alt="overlay-tri-angle-bg" width="2560" height="1707">
    </picture>
    <div class="container position-relative">
        <div class="row row-gap-4 align-items-end">
            <div class="col-lg-auto col-12">
                <div class="hmServHead text-center text-lg-start">
                    <h2 class="hmServHeadTitle mb-0">{{get_setting('home_section_four_heading')}}</h2>
                </div>
            </div>
            <div class="col-lg col-12">
                <div class="hmServHeadContent text-center text-lg-start">
                    {!! get_setting('home_sec_four_desc') !!}
                </div>
            </div>
        </div>
        <div class="hmServGridBlock mt-lg-40px mt-4">
            <div class="row row-gap-4">
                @if($services->isNotEmpty())
                    @foreach ($services as $service)
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="serviceBlock">
                                <a href="{{route('service.detail', encrypt($service->id))}}">
                                    <picture class="serviceFigure">
                                        <img src="{{ uploaded_asset($service->image) }}"  loading="lazy" class="img-fluid" alt="service-bg" width="" height="" onerror="this.onerror=null;this.src='{{ asset('assets/backend/images/blog-placeholder.jpg') }}';">
                                    </picture>
                                    <div class="serviceContentBlock">
                                        <div class="servIconBlock">
                                            <span class="servIcon">
                                                <img src="images/resource-icon-1.png" loading="lazy" class="img-fluid" alt="resource-icon" width="40" height="40">
                                            </span>
                                        </div>
                                        <div class="serviceContent">
                                            <p class="serviceTitle">{{$service->title}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                @endif
                
                <div class="col-12">
                    <div class="hmServiceBtnBlock w-100 d-flex align-items-center justify-content-center mt-3">
                        <a href="{{(get_setting('home_section_four_btn_link') != '') ? url(get_setting('home_section_four_btn_link')) : '/'}}" class="btn btn-primary rounded-pill" role="button">
                            <span class="btnTitle">{{get_setting('home_section_four_btn_label')}}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_five_status') == 1)
<div class="hmProcessSec__wr bg-secondary text-white py-lg-80px py-5">
    <div class="container">
        <div class="row row-gap-4 align-items-end">
            <div class="col-lg-auto col-12">
                <div class="hmProcesHead text-center text-lg-start">
                    <h2 class="hmProcesHeadTitle mb-0">{{get_setting('home_sec_five_title')}}</h2>
                </div>
            </div>
            <div class="col-lg col-12">
                <div class="hmProcesHeadContent text-center text-lg-start">
                    {!! get_setting('home_sec_five_short_desc') !!}
                </div>
            </div>
        </div>
        <div class="processParent owl-carousel owl-theme hmProcesSlider__wr">
            @if (loopType(json_decode(get_setting('home_sec_five_steps'), true)))
                @foreach (json_decode(get_setting('home_sec_five_steps'), true) as $key => $value)
                    <div class="item">
                        <div class="processBlock">
                            <div class="processBlockInr">
                                <span class="processTitle">{{ $value }}</span>
                            </div>
                            <span class="processArrow"></span>
                        </div>
                    </div>
                @endforeach
            @endif
            
        </div>
        <div class="hmProcessContent text-center text-lg-start">
            {!! get_setting('home_sec_five_desc') !!}
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_six_status') == 1)
<div class="hmCalculateSec__wr pt-lg-128px pb-lg-80px py-5">
    <picture class="hmCalcOvrlayFigure__wr">
        <img src="images/overlay-tri-angle-bg.jpg" loading="lazy" class="img-fluid" alt="overlay-tri-angle-bg" width="2560" height="1707">
    </picture>
    <div class="container position-relative">
        <div class="hmCalcBoxBlock text-white">
            <picture class="hmCalcBoxOvrlayFigure__wr">
                <img src="{{uploaded_asset(get_setting('home_sec_six_bg_image'), 'images/calculate-box-overlay-bg.jpg')}}" loading="lazy" class="img-fluid" alt="calculate-box-overlay-bg" width="2560" height="1707">
            </picture>
            <div class="row row-gap-4 justify-content-lg-between align-items-lg-stretch position-relative">
                <div class="col-lg-5 col-12 d-flex align-self-lg-end">
                    <div class="hmCalcBoxContentBlock text-center text-lg-start">
                        <h2 class="hmCalcBoxTitle">{{ get_setting('home_sec_six_title') }}</h2>
                        <div class="hmCalcBoxContent">
                            {!! get_setting('home_sec_six_desc') !!}
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-12">
                    <div class="loanCalcFormBlock">
                        <div class="loanFormBlockHead text-center mb-4">
                            <p class="loanFormBlockHeadTitle mb-0">{{strtoupper(get_setting('home_sec_six_calc_title'))}}</p>
                        </div>
                        <form class="loanCalcForm" action="">
                            <div class="row gx-2">
                                <div class="col-sm-4 col-12 mb-3">
                                    <div class="form-group w-100 position-relative">
                                        <label class="form-label">Loan Amount<span>*</span></label>
                                        <input type="text" id="loan_amount" class="form-control loanAmntInputData autonumeric" placeholder="Loan Amount" value="100,000">
                                    </div>
                                </div>
                                <div class="col-sm-8 col-12 mb-3">
                                    <div class="form-group w-100 position-relative h-100 d-flex flex-column align-items-stretch justify-content-center pt-4">
                                        <div class="dataBlock__wr loanAmntDataBlock">
                                            <span class="minData__wr loanAmntMinData">AED 1000</span>
                                            <span class="maxData__wr loanAmntMaxData">AED 10,000,000</span>
                                        </div>
                                        <div class="loanAmntSlidrRange sliderRange__wr"></div>
                                    </div>
                                </div>
                                <div class="col-sm-4 col-12 mb-3">
                                    <div class="form-group w-100 position-relative">
                                        <label class="form-label">Interest Rate<span>*</span></label>
                                        <input type="text" class="form-control inrstRateInputData" placeholder="Interest Rate" value="10">
                                    </div>
                                </div>
                                <div class="col-sm-8 col-12 mb-3">
                                    <div class="form-group w-100 position-relative h-100 d-flex flex-column align-items-stretch justify-content-center pt-4">
                                        <div class="dataBlock__wr inrstRateDataBlock">
                                            <span class="minData__wr inrstRateMinData">0</span>
                                            <span class="maxData__wr inrstRateMaxData">20</span>
                                        </div>
                                        <div class="inrstRateSlidrRange sliderRange__wr"></div>
                                    </div>
                                </div>
                                <div class="col-sm-4 col-12 mb-3">
                                    <div class="form-group w-100 position-relative">
                                        <label class="form-label">Tenor (Months)<span>*</span></label>
                                        <input type="text" id="tenor_input" class="form-control tenorMInputData" placeholder="Tenor" value="120">
                                    </div>
                                </div>
                                <div class="col-sm-8 col-12 mb-3">
                                    <div class="form-group w-100 position-relative h-100 d-flex flex-column align-items-stretch justify-content-center pt-4">
                                        <div class="dataBlock__wr tenorDataBlock">
                                            <span class="minData__wr tenorMinData">1 Month</span>
                                            <!-- <span class="crntData__wr tenorCrntData">6 Months</span> -->
                                            <span class="maxData__wr tenorMaxData">360 Months</span>
                                        </div>
                                        <div class="tenorSlidrRange sliderRange__wr"></div>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="form-group w-100 position-relative loanMonthlyAmntFeild">
                                        <div class="dataBlock__wr dualDataBlock loanMonthlyAmntDataBlock">
                                            <span class="loanTitleLabel loanMonthlyAmntTitleLabel">Pay Monthly</span>
                                            <span class="loanData loanMonthlyData" id="monthly_emi_result">AED 2200</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="form-group w-100 position-relative loanMonthsFeild">
                                        <div class="dataBlock__wr dualDataBlock loanMonthsDataBlock">
                                            <span class="loanTitleLabel loanMonthsTitleLabel">Intrest Rate</span>
                                            <span class="" id="interest">10.00%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="form-group w-100 position-relative loanMonthsFeild">
                                        <div class="dataBlock__wr dualDataBlock loanMonthsDataBlock">
                                            <span class="loanTitleLabel loanMonthsTitleLabel">Term of Use</span>
                                            <span class="loanData loanMonthsData" id="terms">6 Months</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="form-group w-100 position-relative loanTtlAmntFeild">
                                        <div class="dataBlock__wr dualDataBlock loanTtlAmntDataBlock">
                                            <span class="loanTitleLabel loanTtlAmntTitleLabel">Total Payable Amount</span>
                                            <span class="loanData loanTtlAmntData" id="total_payable_result">AED 30000</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group w-100 btnBlock position-relative border-0 pb-0">
                                        <button class="btn btn-primary rounded-pill w-100" type="button" id="contact_modal"  data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                                            <span class="btnTitle">{{strtoupper(get_setting('home_sec_six_calc_btn_label'))}}</span>
                                            <span class="btnIcon d-sm-inline-flex d-none"><i class="fa-light fa-arrow-right-long"></i></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_seven_status') == 1)
<div class="hmPartnerSec__wr bg-white py-lg-80px py-5">
    <div class="container">
        <div class="hmPartnerHead text-center mb-lg-40px mb-4">
            <h2 class="hmPartnerHeadTitle mb-0">{{get_setting('home_sec_seven_title')}}</h2>
        </div>
    </div>
    <div class="container-fluid">
        <div class="owl-carousel owl-theme partnerSlider__wr">
            @if (loopType(json_decode(get_setting('home_sec_seven_brand'), true)))
                @foreach (json_decode(get_setting('home_sec_seven_brand'), true) as $key => $value)
                    <div class="item">
                        <picture class="logoFigure">
                            <img src="{{uploaded_asset($value, 'images/partner/logo1.png')}}" loading="lazy" class="img-fluid" alt="{{ getLoopSetting('home_sec_seven_brand_title', $key)}}" width="" height="">
                        </picture>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_eight_status') == 1)
<div class="hmWhySec__wr bg-secondary text-white">
    <span class="hmWhyOvrlayElmnt d-none d-lg-block">
        <img src="images/why-cta-overlay-shape.png" loading="lazy" class="img-fluid" alt="home-banner-overlay-shape" width="" height="">
    </span>
    <div class="container position-relative">
        <div class="row row-gap-4 align-items-lg-end">
            <div class="col-lg-5 col-12">
                <div class="hmWhyContentBlock py-lg-80px pt-5">
                    <div class="hmWhyContentHead text-center text-lg-start">
                        <h2 class="hmWhyContentHeadTitle">{{get_setting('home_sec_eight_title')}}</h2>
                        {!! get_setting('home_sec_eight_desc') !!}
                    </div>
                    <div class="hmWhyContent mt-lg-4 mt-3">
                        <div class="row row-gap-4">
                            @if (loopType(json_decode(get_setting('home_sec_eight_block_title'), true)))
                                @foreach (json_decode(get_setting('home_sec_eight_block_title'), true) as $key => $value)
                                    <div class="col-sm-6 col-12">
                                        <div class="hmWhyCtaBlock text-center text-lg-start">
                                            <div class="whyCtaIconBlock mb-lg-4 mb-3">
                                                <span class="whyCtaIcon">
                                                    <img src="{{uploaded_asset(getLoopSetting('home_sec_eight_block_icon', $key), 'images/why-cta-icon-1.png')}}" loading="lazy" class="img-fluid" alt="why-cta-icon" width="32" height="32">
                                                </span>
                                            </div>
                                            <div class="whyCtaContentBlock">
                                                <h2 class="whyCtaTitle">{{ getLoopSetting('home_sec_eight_block_title', $key) }}</h2>
                                                <div class="whyCtaContent">
                                                    {!! getLoopSetting('home_sec_eight_block_desc', $key) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            
                        </div>
                    </div>
                    <div class="btnBlock w-100 d-flex align-items-center justify-content-center justify-content-lg-start mt-lg-4 mt-3">
                        <a href="{{(get_setting('home_sec_eight_btn_link') != '' ? get_setting('home_sec_eight_btn_link') : '/')}}" class="btn btn-light rounded-pill" role="button">
                            <span class="btnTitle">{{get_setting('home_sec_eight_btn_label')}}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 col-12">
                <picture class="hmWhySecFigure">
                    <img src="{{uploaded_asset(get_setting('home_sec_eight_bg_image'), 'images/why-cta-bg.png')}} " loading="lazy" class="img-fluid" alt="why-cta-bg" width="" height="">
                </picture>
            </div>
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_nine_status') == 1)
<div class="hmOfferSec__wr py-lg-80px py-5">
    <picture class="hmOfferBgOvrlayFigure__wr">
        <img src="images/overlay-tri-angle-bg.jpg" loading="lazy" class="img-fluid" alt="overlay-tri-angle-bg" width="2560" height="1707">
    </picture>
    <div class="container position-relative">
        <div class="hmOfferSecHead text-center text-lg-start mb-lg-40px mb-4">
            <div class="row row-gap-4 align-items-lg-center">
                <div class="col-lg col-12">
                    <h2 class="hmOfferSecHeadTitle">Our Latest Mortgage Offers In Dubai And The UAE</h2>
                </div>
                <div class="col-lg-auto col-12 d-lg-block d-none">
                    <div class="hmOfferSecHeadOwlBtns">
                        <div id="offerSliderNav" class="owl-nav"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="owl-carousel owl-theme offerSlider__wr">
            @if(!empty(json_decode(get_setting('home_sec_nine_offers'), true)))
                @foreach(json_decode(get_setting('home_sec_nine_offers'), true) as $offer)
                @php 
                    $product = \App\Models\Product::findOrFail($offer);
                @endphp
                <div class="item">
                    <div class="offerBlock text-center">
                        <picture class="offerBlockFigure">
                            <img src="{{uploaded_asset(optional($product->bank)->image)}}" loading="lazy" class="img-fluid" alt="logo-bg" width="" height="">
                        </picture>
                        <div class="offerContentBlock">
                            <div class="offerContent">
                                <span class="offerContentPreText">Rates Starting From</span>
                                <span class="offerContentTitle">{!! $product->interest_rate_int !!} p.a</span>
                                <span class="offerContentText">{{ $product->mortgage_types_display }}</span>
                            </div>
                            <div class="btnBlock w-100 d-flex align-items-center justify-content-center mt-lg-4 mt-3">
                                <a href="#" class="btn btn-primary rounded-pill" role="button">
                                    <span class="btnTitle">LEARN MORE</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @endif
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_ten_status') == 1)
<div class="hmReviewSec__wr bg-white py-lg-80px py-5">
    <div class="container position-relative">
        <div class="hmReviewSecHead text-center text-lg-start mb-lg-40px mb-4">
            <div class="row row-gap-4 align-items-lg-center">
                <div class="col-lg col-12">
                    <h2 class="hmReviewSecHeadTitle">{{ get_setting('home_sec_ten_title', 'Our Testimonial') }}</h2>
                </div>
                <div class="col-lg-auto col-12 d-lg-block d-none">
                    <div class="hmReviewSecHeadOwlBtns">
                        <div id="reviewSliderNav" class="owl-nav"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="reviewSliderParent">
            <div class="owl-carousel owl-theme reviewSlider__wr">
                @if(\App\Models\Testimonial::where('status', 1)->get()->isNotEmpty())
                    @foreach(\App\Models\Testimonial::where('status', 1)->get() as $testimonial)
                        <div class="item">
                            <div class="reviewBlock">
                                <div class="reviewBlockHead">
                                    <span class="reviewAvtarBlock">
                                        <picture class="reviewAvtar">
                                            <img src="{{ ($testimonial->user != null) ? $testimonial->user->image : 'images/team-bg1.jpg'}}" loading="lazy" class="img-fluid" alt="avtar-bg" width="" height="">
                                        </picture>
                                    </span>
                                    <span class="reviewQuoteIcon">
                                        <img src="images/review-quote.png" loading="lazy" class="img-fluid" alt="review-quote" width="" height="">
                                    </span>
                                </div>
                                <div class="reviewBlockContent">
                                    {!! $testimonial->review !!}
                                </div>
                                <div class="reviewBlockFoot">
                                    <div class="reviewAuthInfoBlock">
                                        <div class="reviewAuthInfo">
                                            <span class="reviewAuthName">{{ ($testimonial->user != null) ? $testimonial->user->name : '' }}</span>
                                        </div>
                                        {{-- <span class="reviewAuthDesg">Managing Director</span> --}}
                                    </div>
                                    <div class="reviewRating">
                                        @for($i = 0; $i < $testimonial->rate; $i++)
                                        <i class="fa-solid fa-star"></i>
                                        @endfor
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_el_status') == 1)
<div class="hmBlogSec__wr py-lg-80px py-5">
    <div class="container">
        <div class="hmBlogSecHead text-center mb-lg-40px mb-4">
            <h2 class="hmBlogSecHeadTitle mb-0">{{get_setting('home_sec_eleven_title', 'Latest Blog')}}</h2>
        </div>
        <div class="row row-gap-4 justify-content-center">
            @if(\App\Models\OurBlog::where('status', 1)->get()->isNotEmpty())
                @foreach(\App\Models\OurBlog::where('status', 1)->orderBy('created_at', 'DESC')->take(6)->get() as $blog)
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="hmBlogBlock">
                            <div class="hmBlogFigureBlock">
                                <picture class="hmBlogFigure">
                                    <img src="images/blog-bg1.jpg" loading="lazy" class="img-fluid" alt="blog-bg" width="" height="">
                                </picture>
                                <div class="hmBlogDateBlock">
                                    <div class="hmBlogDate"><span>{{ date('d', strtotime($blog->created_at)) }}</span></div>
                                    <div class="hmBlogMonth"><span>{{ date('M', strtotime($blog->created_at)) }}</span></div>
                                </div>
                            </div>
                            <div class="hmBlogContentBlock">
                                <div class="hmBlogHead">
                                    <h2 class="hmBlogHeadTitle">{{ $blog->title }}</h2>
                                </div>
                                <div class="hmBlogContent">
                                    {!! \Illuminate\Support\Str::words(strip_tags($blog->content), 30, '...') !!}
                                </div>
                                <div class="btnBlock">
                                    <a href="{{route('blog', $blog->slug)}}" target="_blank" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
                                        <span class="btnTitle">Read more</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</div>
@endif

@if( get_setting('home_section_twel_status') == 1)
<div class="hmFaqSec__wr bg-white py-lg-80px py-5">
    <span class="hmFaqOvrlayElmnt d-none d-lg-block">
        <img src="images/home-faq-overlay-shape.png" loading="lazy" class="img-fluid" alt="home-faq-overlay-shape" width="304" height="630">
    </span>
    <div class="container position-relative">
        <div class="hmFaqSecHead text-center mb-lg-40px mb-4">
            <h2 class="hmFaqSecHeadTitle mb-0">{{get_setting('home_sec_twel_title', 'Fequently Asked Questions')}}</h2>
        </div>
        <ul class="faqAcordBlock">
            @if(\App\Models\FAQ::where('status', 1)->get()->isNotEmpty())
                @foreach(\App\Models\FAQ::where('status', 1)->orderBy('created_at', 'DESC')->get() as $faq)
                    <li class="item">
                        <div class="faqAcordHead">
                            <h2 class="faqAcordHeadTitle">{{ $faq->question }}</h2>
                        </div>
                        <div class="faqAcordBody">
                            {!! $faq->content !!}
                        </div>
                    </li>
                @endforeach
            @endif
        </ul>
    </div>
</div>
@endif


<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Get A Free Quote</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="contact_modal">
        <form class="hmContactFrom" action="{{route('enquiry.store', ['enqui'])}}" method="POST">
            @csrf
            <input type="hidden" name="sent_from" value="home_page_calculator">
            <div class="row">
                <div class="col-12">
                    <div class="form-group w-100 position-relative mb-10px">
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="Full Name">
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group w-100 position-relative mb-10px">
                        <input type="tel" name="mobile" class="form-control contactNumber__wr" placeholder="Mobile No">
                        <span class="text-danger" style="display: none" id="err_msg">Please enter valid mobile number</span>
                        <input type="hidden" name="mobile" id="mobile_value" class="@error('mobile') is-invalid @enderror"> 
                        @error('mobile') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group w-100 position-relative mb-10px">
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" placeholder="Email Address">
                        @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group w-100 position-relative mb-4">
                        <textarea class="form-control @error('message') is-invalid @enderror" name="message" rows="4" placeholder="Message..."></textarea>
                        @error('message') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group w-100 position-relative btnBlock">
                        <button class="btn btn-secondary rounded-pill w-100 px-sm-96px submitBtn" type="button" data-bs-dismiss="modal">
                            <span class="btnTitle">Cancel</span>
                        </button>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group w-100 position-relative btnBlock">
                        <button class="btn btn-primary rounded-pill w-100 px-sm-96px submitBtn" type="submit">
                            <span class="btnTitle">SEND</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
      </div>
     
    </div>
  </div>
</div>
@include('frontend.partials.enquiry')

@endsection

@section('script')
<script>
    $(document).ready(function(){
        amort(1000000, 10/100, 6)
        $( ".loanAmntSlidrRange" ).slider({
            range: "min",
            value: 100000, // Default value
            min: 1000,
            max: 10000000,
            step: 1000,
            slide: function (event, ui) {
                $(".loanAmntCrntData").text("AED " + ui.value);
                $('#loan_amount').val(ui.value);
                AutoNumeric.set('#loan_amount', ui.value);
                amort(ui.value, getValue().interestRate / 100, getValue().tenor)
            },
            change: function (event, ui) {
                $(".loanAmntCrntData").text("AED " + ui.value);
                amort(ui.value, getValue().interestRate / 100, getValue().tenor)
            }
        });

        $(document).on('focusout', "#loan_amount", function(){
            var loan_amount = parseInt( $.trim($(this).val()).replace(/,/g,''));
            $( ".loanAmntSlidrRange" ).slider( "option", "value", loan_amount);
        });


        // Initialize the displayed value
        $( ".inrstRateSlidrRange" ).slider({
            range: "min",
            value: 10, // Default value
            min: 0,
            max: 20,
            step: 0.01,
            slide: function (event, ui) {
                $(".inrstRateInputData").val(ui.value);
                $("#interest").text(number_format(ui.value)+'%');
                amort(getValue().loanAmount, ui.value / 100, getValue().tenor)

            },
            change: function (event, ui) {
                $("#interest").text(number_format(ui.value)+'%');
                amort(getValue().loanAmount, ui.value / 100, getValue().tenor)
            }
        });

        $(document).on('focusout', ".inrstRateInputData", function(){
            var intrest_rate = parseInt( $.trim($(this).val()).replace(/,/g,''));
            $( ".inrstRateSlidrRange" ).slider( "option", "value", intrest_rate);
        });

        // Initialize the displayed value
        
        $(".tenorSlidrRange").slider({
            range: "min",
            value: 120, // Default value (6 months)
            min: 6,   // Minimum value (1 month)
            max: 360,  // Maximum value (24 months)
            step: 1,  // Step interval (1 month)
            slide: function (event, ui) {
                $(".tenorCrntData").text(ui.value + " Months");
                amort(getValue().loanAmount, getValue().interestRate / 100, ui.value)

            },
            change: function (event, ui) {
                $(".tenorCrntData").text(ui.value + " Months");
                amort(getValue().loanAmount, getValue().interestRate / 100, ui.value)
            }
        });

        $(document).on('focusout', "#tenor_input", function(){
            var tenor = parseInt( $.trim($(this).val()).replace(/,/g,''));
            $( ".tenorSlidrRange" ).slider( "option", "value", tenor);
        });

        // Initialize the displayed value
        $(".tenorCrntData").text($(".tenorSlidrRange").slider("value") + " Months");
        $('.partnerSlider__wr').owlCarousel({
            items: 8,
            loop:true,
            autoplay: true,
            // autoplayTimeout: 1000,
            autoplayTimeout: 3000,
            autoplaySpeed: 3000,
            slideTransition: 'linear',
            autoplayHoverPause: true,
            margin:10,
            nav:true,
            navText: [ '<span class="fa-solid fa-chevron-left"></span>', '<span class="fa-solid fa-chevron-right"></span>' ],
            dots: false,
            responsive:{
                0:{
                    items:3
                },
                600:{
                    items:4
                },
                1000:{
                    items:6
                }
            }
        });
        $('.offerSlider__wr').owlCarousel({
            items: 3,
            loop:true,
            stagePadding: 2,
            autoplay: false,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            margin:24,
            nav:true,
            navContainer: '#offerSliderNav',
            navText: [ '<span class="fa-solid fa-chevron-left"></span>', '<span class="fa-solid fa-chevron-right"></span>' ],
            dots: false,
            responsive:{
                0:{
                    items:1,
                    navContainer: false,
                    nav:true
                },
                576:{
                    items:2,
                    navContainer: false,
                    nav:true
                },
                992:{
                    items:3,
                    navContainer: '#offerSliderNav',
                    nav:true
                }
            }
        });
        $('.reviewSlider__wr').owlCarousel({
            items: 3.1,
            loop:true,
            stagePadding: 2,
            autoplay: false,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            margin:24,
            nav:true,
            navContainer: '#reviewSliderNav',
            navText: [ '<span class="fa-solid fa-chevron-left"></span>', '<span class="fa-solid fa-chevron-right"></span>' ],
            dots: false,
            responsive:{
                0:{
                    items:1,
                    navContainer: false,
                    nav:true,
                    margin:12,
                },
                576:{
                    items:2,
                    navContainer: false,
                    nav:true,
                    margin:12,
                },
                992:{
                    items:3,
                    navContainer: '#reviewSliderNav',
                    nav:true,
                    margin:24,
                }
            }
        });
        $('.hmProcesSlider__wr').owlCarousel({
            items: 8,
            loop:false,
            // stagePadding: 2,
            autoplay: false,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            margin:18,
            nav:false,
            // navContainer: '#reviewSliderNav',
            navText: [ '<span class="fa-solid fa-chevron-left"></span>', '<span class="fa-solid fa-chevron-right"></span>' ],
            dots: false,
            responsive:{
                0:{
                    items:2
                },
                576:{
                    items:3
                },
                768:{
                    items:4
                },
                992:{
                    items:6
                },
                1200:{
                    items:7
                },
                1400:{
                    items:8
                }
            }
        });

        $('.faqAcordBlock > li > .faqAcordBody').hide();
        $('.faqAcordBlock > li > .faqAcordHead').click(function() {
            if ($(this).parent().hasClass("active")) {
                $(this).parent().removeClass("active").find(".faqAcordBody").slideUp();
            } else {
                $(".faqAcordBlock > li.active .faqAcordBody").slideUp();
                $(".faqAcordBlock > li.active").removeClass("active");
                $(this).parent().addClass("active").find(".faqAcordBody").slideDown();
            }
            return false;
        });
        
        function counter() {
            $(".count").each(function() {
                if ($(this).hasClass("start")) {
                    var elementTop = $(this).offset().top;
                    var elementBottom = elementTop + $(this).outerHeight();
                    var windowTop = $(window).scrollTop();
                    var windowBottom = windowTop + $(window).height();

                    if (elementBottom > windowTop && elementTop < windowBottom) {
                        var decimalPlaces;
                        if ($(this).text() % 1 === 0) {
                            decimalPlaces = 0;
                        } else {
                            decimalPlaces = $(this).text().toString().split(".")[1].length;
                        }

                        $(this).removeClass("start");
                        $(this).animate({
                            Counter: $(this).text()
                        }, {
                            duration: 4000,
                            easing: "swing",
                            step: function(value) {
                                $(this).text(value.toFixed(decimalPlaces).toLocaleString("en"));
                            }
                        });
                    }
                }
            });
        }
    });

    function amort(balance, interestRate = 10 / 100, terms){
        // console.log('amort called');
        //Calculate the per month interest rate
        var monthlyRate = interestRate/12;
        
        //Calculate the payment
        var payment = balance * (monthlyRate/(1-Math.pow(1+monthlyRate, -terms)));
        
        console.log(balance, interestRate, terms);
        //begin building the return string for the display of the amort table
        // $('#interest_rate_result').html(number_format(interestRate*100) + '%');
        $('#terms').html(terms+' MONTHS');
        $('#monthly_emi_result').html('AED '+number_format(payment));
        $('#total_payable_result').html('AED '+number_format(payment * terms));

    }

    function number_format (number, prec=2) {
          
        number = (number + '').replace(/[^0-9+\-Ee.]/g, '')
        var n = !isFinite(+number) ? 0 : +number
        var sep = ',' ;
        var dec = '.';
        var s = '';

        var toFixedFix = function (n, prec) {
            var k = Math.pow(10, prec)
            return '' + (Math.round(n * k) / k)
                .toFixed(prec)
        }

        s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
        if (s[0].length > 3) {
            s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep)
        }
        if ((s[1] || '').length < prec) {
            s[1] = s[1] || ''
            s[1] += new Array(prec - s[1].length + 1).join('0')
        }

        return s.join(dec)
    }

    var getValue = function() {
        return {
            loanAmount: Number($(".loanAmntSlidrRange").slider("value")) || 0,
            interestRate: Number($(".inrstRateSlidrRange").slider("value")) || 0,
            tenor: Number($(".tenorSlidrRange").slider("value")) || 0,
        };
    };

    $(document).ready(function(){
        @if(old('sent_from') == 'home_page_calculator' && $errors->any())
            console.log('Error Failed');
            
            $('#staticBackdrop').modal('show')
        @endif
    })

    
</script>
@endsection