@extends('Frontend.layouts.app')
@section('content')
@php
$homeById = collect($home ?? [])->keyBy('id');
$h1 = $homeById->get(1);
$h2 = $homeById->get(2);
$h15 = $homeById->get(12);
$h16 = $homeById->get(13);
$h18 = $homeById->get(15);
$h19 = $homeById->get(16);
@endphp
<div id="content">
   <div id="homeSlider" class="relative">
      <div class="homeSlider owl-carousel">
         <!-- Slide 1: Image + Text -->
         @foreach($banners as $banner)
         <div class="item">
            @if($banner->title4 == 2)
            <div class="slidImg">
               <div class="deskImg">
                  <img src="{{ asset('storage/' . str_replace('\\', '/', $banner->desktop_image)) }}" alt="">
               </div>
               <div class="mobImg">
                  <img src="{{ asset('storage/' . str_replace('\\', '/', $banner->mobile_image)) }}" alt="">
               </div>
            </div>
            <div class="sldTxt">
               <div class="sldContent">
                  <h2>{!! $banner->title !!}</h2>
                  <p>{!! $banner->sub_title !!}</p>
                  @if(!empty($banner->title2))
                  <a href="{!! $banner->title2 !!}" class="applyNow">{!! $banner->title1 !!}</a>
                  @endif
               </div>
            </div>
            @else
            <div class="vidcontnr">
               <video muted playsinline loop>
                  <source src="{{ asset('storage/' . str_replace('\\', '/', $banner->desktop_image)) }}" type="video/mp4">
               </video>
            </div>
            <div class="sldTxt videotxt">
               <div class="sldContent">
                  <h2>{!! $banner->title !!}</h2>
                  @if(!empty($banner->title2))
                  <a href="{!! $banner->title2 !!}" class="applyNow">{!! $banner->title1 !!}</a>
                  @endif
               </div>
            </div>
            @endif
         </div>
         @endforeach
      </div>
   </div>
   <div id="locations">
      <div class="locTrack">
         <ul class="locList d-flex align-items-center">
            @foreach(array_filter(array_map('trim', explode(',', $setting->office ?? ''))) as $loc)
            <li>{{ $loc }}</li>
            @endforeach
         </ul>
         <!-- duplicate for seamless loop -->
         <ul class="locList d-flex align-items-center">
            @foreach(array_filter(array_map('trim', explode(',', $setting->office ?? ''))) as $loc)
            <li>{{ $loc }}</li>
            @endforeach
         </ul>
      </div>
   </div>
   <div id="features" class="d-flex align-items-center justify-content-center">
      <div class="featureOptn d-flex align-items-center justify-content-center">
         @if($h1 && (!empty($h1->gallery)))
         @php $featureImage = json_decode($h1->gallery, true); @endphp
         @foreach($featureImage as $image)
         <div class="featutr d-flex align-items-center sr-shuttle">
            <div class="featureImg"><img src="{{ asset('storage/' . str_replace('\\', '/', $image['filename'])) }}" alt=""></div>
            <div class="featureTxt">
               <h4>{{$image['alt']}}</h4>
            </div>
         </div>
         @endforeach
         @endif
      </div>
   </div>
   <div id="loanJourney">
      <div class="loanJrny">
         <div class="loanContainer">
            <div class="loanJourneyContent">
               <h2 class="sr-shuttle">@if(!empty($h2->name)){{ $h2->name }} @else Loan Journey @endif </h2>
               @if(!empty($h2->short_description))
               <p class="sr-shuttle">{!! $h2->short_description !!}</p>
               @endif
            </div>
            <!-- Owl Carousel Slider -->
            {{-- <div class="loanSectnWrap">
               <div class="journeys owl-carousel">
                  @if($journey && count($journey) > 0)
                  @foreach($journey as $j)
                  <div class="journeyoptn d-flex justify-content-center flex-column">
                     @if(!empty($j->desktop_image))
                     <div class="journeyImg sr-shuttle"><img src="{{ asset('storage/' . str_replace('\\', '/', $j->desktop_image)) }}" alt=""></div>
                     @endif
                     <div class="journeyContent d-flex align-items-center justify-content-center flex-column sr-shuttle">
                        <h5 class="journyHead">{{ $j->name }}</h5>
                        @if(!empty($j->subtitle))
                        <p class="journeyPara">{!! $j->subtitle !!}</p>
                        @endif
                        @if(!empty($j->other_title))
                        <a href="@if(!empty($j->link)) {{$j->link}} @else {{$j->slug}} @endif" class="applyLoan">{{ $j->other_title }}</a>
                        @endif
                     </div>
                  </div>
                  @endforeach
                  @endif
               </div>
            </div> --}}
         </div>
      </div>
      <div class="loanSolution">
         <div class="loanSolutionBg">
            <div class="loanSlutn d-flex sr-shuttle">
               <div class="loanSolutnIcn">
                  @if(!empty($solution->desktop_image))
                  <img src="{{ asset('storage/' . str_replace('\\', '/', $solution->desktop_image)) }}" alt="">
                  @endif
               </div>
               <div class="loanSolutnCntnt">
                  <h2 class="gradient-text">@if(!empty($solution->name)){{ $solution->name }} @else Loan Solution @endif </h2>
                  @if(!empty($solution->short_description))
                  <p>{!! $solution->short_description !!}</p>
                  @endif
                  @if(!empty($solution->other_title))
                  <a href="{{ $solution->link }}" class="applyBtn knowMore">{{ $solution->other_title }}</a>
                  @endif
               </div>
            </div>
         </div>
      </div>
   </div>
   <div id="analysisAndCalculator">
      <div class="analysisCalsi d-flex">
         <div class="analysis sr-shuttle">
            @if(!empty($analysis->desktop_image))
            <div class="analysisImg"><img src="{{ asset('storage/' . str_replace('\\', '/', $analysis->desktop_image)) }}" alt=""></div>
            @endif
            <div class="analysisCntnt">
               <h4>@if(!empty($analysis->name)){{ $analysis->name }} @else Analysis & Calculator @endif </h4>
               @if(!empty($analysis->other_title))
               <a href="{{ $analysis->link }}" class="applyBtn analysysBtn">{{ $analysis->other_title }}</a>
               @endif
            </div>
         </div>
         <div class="paymenyCalculator sr-shuttle">
            @if(!empty($payment->desktop_image))
            <div class="paymenyCalImg"><img src="{{ asset('storage/' . str_replace('\\', '/', $payment->desktop_image)) }}" alt=""></div>
            @endif
            @if(!empty($payment->name))
            <div class="paymenyCalCntnt">
               <h4>@if(!empty($payment->name)){{ $payment->name }} @else Payment Calculator @endif </h4>
               @if(!empty($payment->other_title))
               <a href="{{ $payment->link }}" class="applyBtn calculateBtn">{{ $payment->other_title }}</a>
               @endif
            </div>
            @endif
         </div>
      </div>
   </div>
   <div id="whyBabaLending">
      <div class="videoSectn">
         <div class="headerContainer">
            <div class="videoCntnt sr-shuttle">
               <h2>@if(!empty($why->name)){{ $why->name }} @else Why BABA Lending @endif </h2>
               @if(!empty($why->short_description))
               <p>{!! $why->short_description !!}</p>
               @endif
            </div>
            <div class="babaLendingVid sr-shuttle">
               <div class="video-thumbnail">
                  <div class="deskImg">
                     @if(!empty($why->desktop_image))
                     <img src="{{ asset('storage/' . str_replace('\\', '/', $why->desktop_image)) }}" alt="">
                     @endif
                  </div>
                  <div class="mobImg">
                     @if(!empty($why->mobile_image))
                     <img src="{{ asset('storage/' . str_replace('\\', '/', $why->mobile_image)) }}" alt="">
                     @endif
                  </div>
                </div>
                <video class="inline-video" playsinline controls>
                  <source src="{{ asset('storage/' .$why->quality_image ) }}" type="video/mp4">
                </video>
                
              
                <button class="video-close" type="button">×</button>
              
            </div>
         </div>
      </div>
   </div>
   <div id="borrowerJourney">
      <div class="borrowerSectn">
         <div class="headerContainer">
            <div class="borrower">
               <div class="borrowerCntnt sr-shuttle">
                  <h1>@if(!empty($borrowerJourney->name)){{ $borrowerJourney->name }} @else Our Borrower Journey @endif </h1>
                  @if(!empty($borrowerJourney->short_description))
                  <p>{!! $borrowerJourney->short_description !!}</p>
                  @endif
               </div>
            </div>
         </div>
         <div class="borrowerCntnr sr-shuttle">
            <div class="">
               <div class="embla borrowerSliderWrap">
                  <div class="borrowerNav desk">
                     <button class="embla__prev" type="button" aria-label="Previous"></button>
                     <button class="embla__next" type="button" aria-label="Next"></button>
                  </div>
                 
                  <div class="embla borrowerSlider">
                     <div class="embla__container">
                         @php $borrowerJourneys = json_decode($borrowerJourney->gallery, true); $h=0; @endphp
                  @foreach($borrowerJourneys as $key=>$bj)
                  @if(!empty($bj['filename']))
                        <div class="@if(!$key) embla__slide @endif borrowerSld">
                           <div class="borrowerSlds">
                              @if(!empty($bj['filename']))
                              <div class="borrowerSldImg"><img src="{{ asset('storage/' . str_replace('\\', '/', $bj['filename'])) }}" alt="{{ $bj['alt'] }}"></div>
                              @endif
                              <div class="borrowerSldCntnt">
                                 <h4 class="sr-shuttle">{!! $bj['alt'] !!}</h4>
                                 @if(!empty($bj['caption']))
                                 <p class="sr-shuttle">{!! $bj['caption'] !!}</p>
                                 @endif
                              </div>
                           </div>
                        </div>
                        @php $h++ @endphp
                  @endif
                  @endforeach
                     </div>
                  </div>
                  
               </div>
               @if($h15 && (!empty($h15->name) || !empty($h15->short_description)))
               <div class="brwCntntContainer">
                  <div class="brwsldrCntnt">
                     <h4 class="sr-shuttle">{{ $h15->name }} </h4>
                     @if(!empty($h15->short_description))
                     <p class="sr-shuttle">{!! $h15->short_description !!}</p>
                     @endif
                  </div>
               </div>
               @endif
            </div>
         </div>
      </div>
   </div>
   <div id="babaLendingExperience">
      <div class="babaLending">
         <div class="headerContainer">
            @if($h16 && (!empty($h16->name) || !empty($h16->description) || !empty($h16->desktop_image) || !empty($h16->mobile_image)))
            <div class="babaLndngCntnt">
               @if(!empty($h16->name))
               <h2 class="sr-shuttle">{{ $h16->name }}</h2>
               @endif
               @if(!empty($h16->description))
               <div class="sr-shuttle">{!! $h16->description !!}</div>
               @endif
            </div>
            @endif
         </div>
      </div>
      <div class="totalimae">
         @if(!empty($h16->desktop_image))
         <div class="hdesk"><img src="{{ asset('storage/' . str_replace('\\', '/', $h16->desktop_image)) }}" alt="{{ $h16->name }}"></div>
         @endif
         @if(!empty($h16->mobile_image))
         <div class="hmob"><img src="{{ asset('storage/' . str_replace('\\', '/', $h16->mobile_image)) }}" alt="{{ $h16->name }}"></div>
         @endif
      </div>
   </div>
   {!! $services !!}
   <div id="aboutBabaLending">
      <div class="abourbabaSectn">
         <div class="aboutCntnr">
            @if($h18 && (!empty($h18->name) || !empty($h18->description)))
            @if(!empty($h18->name))
            <h2 class="sr-shuttle">{{ $h18->name }}</h2>
            @endif
            @if(!empty($h18->description))
            <div class="sr-shuttle">{!! $h18->description !!}</div>
            @endif
            @endif
         </div>
      </div>
   </div>
   <div id="expertLendingGuidence">
      <div class="expertSectn">
         <div class="headerContainer">
            <div class="expertContent">
               @if($h19 && (!empty($h19->name) || !empty($h19->short_description)))
               @if(!empty($h19->name))
               <h2 class="sr-shuttle">{{ $h19->name }}</h2>
               @endif
               @if(!empty($h19->short_description))
               <p class="sr-shuttle">{{ $h19->short_description }}</p>
               @endif
               @endif
            </div>
            <div class="loanSectnWrap sr-shuttle">
               <div class="expertGuidenceSlider  owl-carousel">
                  @if(!empty($expertGuidence))
                  @php $expertGuidence = json_decode($expertGuidence->gallery, true); @endphp
                  @foreach($expertGuidence as $eg) @if(!empty($eg['filename']))    
                  <div class="expertSld">
                     <div class="expertVid">
                        <a href="{{ asset('Frontend/videos/'.$eg['caption'])  }}" class="open-video-popup">
                        <img src="{{ asset('storage/' . str_replace('\\', '/', $eg['filename'])) }}" alt="">
                        </a>
                     </div>
                     <div class="expertCntnt">
                        <p>{!! $eg['alt'] !!}</p>
                     </div>
                  </div>
                  @endif
                  @endforeach
                  @endif
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
{!! $testimonials !!}
{!! $applynow !!}
{!! $contactus !!}
</div>
@endsection