@extends('home.layouts.app')

@push('style')
 <meta property="og:title" content="{{ $obj['country']->metatag_title }}" />
 <meta property="og:description" content="{{ $obj['country']->metatag_description}}" />
 
 <meta name="keywords" content="{{ $obj['country']->metatag_keyword}}" />
<link rel="canonical" href="https://exprenza.com/countries/{{ $obj['country']->slug }}" />

<title>{{ $obj['country']->metatag_title }} | Exprenza</title>
<meta name="description" content="{{ $obj['country']->metatag_description }}">

<style>
  .read-more-btn {
    background-color: #f3f3f3;
    color: #333;
    padding: 10px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .read-more-btn::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #f76b1c, #784684);
    transition: all 0.3s ease;
  }

  .read-more-btn:hover::before {
    background: linear-gradient(90deg, #784684, #f76b1c);
  }

  .read-more-btn:hover {
    background-color: #e1e1e1;
    color: #000;
  }

  .page-banner {
    background: url("{{ homeTheme() }}/image/abt-banner.jpg") no-repeat center center;
    background-size: cover;
    height: 450px;
    /* Enough height for both title + breadcrumbs */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    text-align: center;
    padding-top: 100px;
    /* ensures space below navbar */
  }

  .page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background-color: rgba(10, 15, 25, 0.7);*/
    /* overlay */
    z-index: 0;
  }

  .banner-content {
    position: relative;
    z-index: 1;
  }

  .banner-title {
    font-size: 36px;
    margin-bottom: 10px;
  }

  .breadcrumb {
    font-size: 14px;
    margin-top: 143px

  }

  .breadcrumb a {
    color: #ddd;
    text-decoration: none;
    margin: 0 3px;
  }

  .breadcrumb span {
    color: #e74c3c;
  }

  .card {
    border-radius: 8px;
    background: #fff;
    width: 90% !important;
    padding-top: 20px !important;
  }

  .sticky-enquiry {
    position: sticky;

  }

  .btnen {
    background:#790fb4 !important;
  }

  .blog-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 40px 80px;
    max-width: 1200px;
    margin: 0 auto;
  }
    .blog-container > a:only-child {
  grid-column: 1; /* Align to the start of the grid */
  max-width: 350px; /* Keep card from getting too wide */
}

  .blog-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
  }

  .blog-card:hover {
    transform: translateY(-5px);
  }

  .blog-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  .card-content {
    padding: 20px;
  }

  .card-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
  }

  .meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
  }

  .card-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
  }

  .sticky-enquiry {
    position: sticky;
    top: 100px;
    /* space from top when scrolling */
    align-self: flex-start;
    /* ensures proper alignment inside flex/grid */
  }

  .container,
  .row,
  .col-md-4 {
    overflow: visible !important;
  }
  
.course-list li.active a {
  background-color: #790fb4 !important; /* Purple background */
  color: #fff !important;               /* White text */
  font-weight: bold;
  display: block; /* ensures the background fills the whole li area */
  padding: 8px 12px; /* optional: better spacing */
}

.btn-info{
    border-color: white !important;
}
</style>


@endpush

@section('content')
<!-- Banner -->
@php
$bannerImage = $obj['country']->main_image 
    ? asset('storage/country/' . $obj['country']->main_image) 
    : homeTheme() . '/image/abt-banner.jpg';
@endphp

<section class="page-banner" style="background: url('{{ $bannerImage }}') no-repeat center center; background-size: cover;">
  <div class="banner-content">
    <!--<h1 class="banner-title">{{ $obj['country']->title }}</h1>-->
    <nav class="breadcrumb">
      <a href="{{route('home.index')}}">Home</a> /
      <span>{{ $obj['country']->title }}</span>
    </nav>
  </div>
</section>

<section class="whystudy">
  <div class="container">
    <div class="row">
      <div class="col-md-8 ">
        <h2 class="why-study-head">Study in {{ $obj['country']->main_title }} </h>
        <h2 class="why-study-para">{!! nl2br(e($obj['country']->main_description)) !!}</h2>

      </div>
      <div class="col-md-4 mt-4">
        <div class="card p-4 shadow-sm mx-auto sticky-enquiry ">
          <h4 class="mb-3">Enquiry Form</h4>
          <hr class="mb-3" style="width: 40px; border: 2px solid #ae56fc;">

          <form method="post" action="{{ route('home.enquiryForm.storec') }}" enctype="multipart/form-data">
            @csrf

            <div class="row">
              <div class="col-md-6 mb-4">
                <input type="text" class="form-control" placeholder="Name" id="name" name="name"  value="{{ old('name') }}">
              </div>
              <div class="col-md-6 mb-4">
                <input type="email" class="form-control" placeholder="Email" id="email" name="email"  value="{{ old('email') }}">
              </div>
            </div>
           <div class="col-md-12 mb-4">
    <select id="nearest_exprenza_office" name="nearest_exprenza_office" class="form-control">
        <option value="">Nearest Exprenza Office</option>
        <option value="ERNAKULAM" {{ old('nearest_exprenza_office') == 'ERNAKULAM' ? 'selected' : '' }}>ERNAKULAM</option>
        <option value="THRISSUR" {{ old('nearest_exprenza_office') == 'THRISSUR' ? 'selected' : '' }}>THRISSUR</option>
        <option value="KATTAPANA" {{ old('nearest_exprenza_office') == 'KATTAPANA' ? 'selected' : '' }}>KATTAPANA</option>
        <option value="CHALAKKUDY" {{ old('nearest_exprenza_office') == 'CHALAKKUDY' ? 'selected' : '' }}>CHALAKKUDY</option>
        <option value="PERINTHALMANNA" {{ old('nearest_exprenza_office') == 'PERINTHALMANNA' ? 'selected' : '' }}>PERINTHALMANNA</option>
    </select>
</div>

           <div class="col-md-12 mb-4">
    <select id="quick-country" name="country" class="form-control">
        <option value="">Select Country</option>
        @isset($homeData['country'])
            @foreach($homeData['country'] as $post)
                <option value="{{ $post->title }}" 
                    {{ old('country') == $post->title ? 'selected' : '' }}>
                    {{ $post->title }}
                </option>
            @endforeach
        @endisset
    </select>
</div>


           <div class="form-group row">
    <div class="col-12 mb-4">
        <select id="service" name="service_looking_for" class="form-control">
            <option value="">Service Looking For?</option>
            <option value="Study Abroad" {{ old('service_looking_for') == 'Study Abroad' ? 'selected' : '' }}>Study Abroad</option>
            <option value="Visa" {{ old('service_looking_for') == 'Visa' ? 'selected' : '' }}>Visa Assistance</option>
            <option value="IELTS Learning" {{ old('service_looking_for') == 'Language Training' ? 'selected' : '' }}>Language Training</option>
        </select>
    </div>
</div>
            <div class="mb-4">
              <input type="text" class="form-control" placeholder="Phone" id="phone" name="phone" value="{{ old('phone') }}">
            </div>

            <div class="row">

              <!--<div class=" mb-4">-->
              <!--  <input type="text" class="form-control" placeholder="Qualification" id="qualification" name="qualification" value="{{ old('qualification') }}">-->

              <!--</div>-->
            </div>


            <div class="mb-4">
              <textarea class="form-control" rows="4" placeholder="Your comment here..." id="message" name="message" value="{{ old('message') }}"></textarea>
            </div>
             <input type="hidden" name="recaptcha_token" id="recaptcha_token">
            <button type="submit" class="btn  btnen btn-info text-white w-100 fw-bold">
              TALK TO OUR EXPERTS
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  </div>
  </div>

</section>










<section>
  <div class="container">
    <div class="row ">

      <div class="col-md-8 ">
        <h2 class="course-heading">{{ $obj['country']->title_2 }}</h2>
        <div style="font-size: 14px; line-height: 26px; margin: 15px 0px;">{!! nl2br(e($obj['country']->description_2)) !!}</div>

        <button class="btn-course1" data-bs-toggle="modal" data-bs-target="#staticBackdrop-quick-enquiry">Enquiry</button>
        <button class="btn-course2" onclick="window.location.href = 'https://wa.me/{{ isset($homeData['social']) ? $homeData['social']->whatsapp : '' }}';">WhatsApp</button>
        <button class="btn-course3" onclick="window.location.href = 'tel:@isset($homeData['social']){{ $homeData['social']->phone }}@endisset'">Call Us</button>


      </div>
     <div class="col-md-4 p-4">
  <div class="sidebar">
    <ul class="course-list">
  <li class="{{ request()->is('countries/study-in-poland') ? 'active' : '' }}">
    <a ria-label="Learn more about studying in poland "  href="{{ route('home.countries', 'study-in-poland') }}">Poland</a>
  </li>
  <li class="{{ request()->is('countries/study-in-latvia') ? 'active' : '' }}">
    <a ria-label="Learn more about studying in  latvia"  href="{{ route('home.countries', 'study-in-latvia') }}">Latvia</a>
  </li>
  <li class="{{ request()->is('countries/study-in-georgia') ? 'active' : '' }}">
    <a ria-label="Learn more about studying in  georgia"  href="{{ route('home.countries', 'study-in-georgia') }}">Georgia</a>
  </li>
  <li class="{{ request()->is('countries/study-in-finland') ? 'active' : '' }}">
    <a ria-label="Learn more about studying in finland "  href="{{ route('home.countries', 'study-in-finland') }}">Finland</a>
  </li>
  <li class="{{ request()->is('countries/study-in-germany') ? 'active' : '' }}">
    <a ria-label="Learn more about studying in germany "  href="{{ route('home.countries', 'study-in-germany') }}">Germany</a>
  </li>
  <li class="{{ request()->is('countries/study-in-uk') ? 'active' : '' }}">
    <a ria-label="Learn more about studying in  uk"  href="{{ route('home.countries', 'study-in-uk') }}">UK</a>
  </li>
</ul>
  </div>
</div>
    </div>
  </div>
</section>

@isset($obj["country"]->footer_content)
@if($obj["country"]->footer_content != null)
@php
$desktopContent = $obj["country"]->footer_content;
$mobileContent = $obj["country"]->footer_content;

$desktopContent = preg_replace('/<h2(.*?)>/', '<h2$1 class="p-1" style="font-weight: 200;font-size: 36px;">', $desktopContent);
    $desktopContent = preg_replace('/<h1(.*?)>/', '<h1$1 class="p-1" style="font-weight: 100;">', $desktopContent);
        $desktopContent = preg_replace('/<p(.*?)>/', '<p$1  style="font-size: 14px; text-align: justify !important">', $desktopContent);

            $mobileContent = preg_replace('/<h2(.*?)>/', '<h2$1 class="pb-1 pt-1" style="font-weight: 100;">', $mobileContent);
                $mobileContent = preg_replace('/<h1(.*?)>/', '<h1$1 class="pb-1 pt-1" style="font-weight: 100;">', $mobileContent);
                    $mobileContent = preg_replace('/<p(.*?)>/', '<p$1 class="p-1" style="font-size: 14px; text-align: justify">', $mobileContent);
                        @endphp
                        <section>
                          <div class="container p-5 d-none d-sm-none d-md-block">
                            <div class="row">
                              <div class="col-lg-8 text-center">
                                <div id="desktop-content-container" style="height: 300px; overflow: hidden;">
                                  {!! $desktopContent !!}
                                </div>
                                <div class="">
                                  <button id="desktop-read-more-btn" class="read-more-btn mt-5" onclick="toggleReadMore('desktop')">Read More</button>
                                </div>
                              </div>


                              <div class="col-md-4 p-4">
    <div class="recent-posts-card shadow-sm p-4 rounded">
        <h4 class="recent-title">
            <span class="title-bar"></span> Recent Posts
        </h4>
         @foreach($obj['country']->re_country_blog as $blog)

        <div class="recent-post-item d-flex mb-4">
            <img src="{{ asset('storage/country/'. $blog->thumbnail) }}" class="post-thumb rounded" alt="Best study abroad consultancy in Kochi">
            <div class="ms-3">
                <small class="text-muted">
                    <i class="bi bi-calendar-event"></i>{{ $blog->published_date }}
                </small>
                <h6 class="mt-1 mb-0">
                    <a ria-label="Learn more about studying in  "  href="{{ route('home.show', $blog->slug) }}" class="post-link">{{$blog->title}}</a>
                </h6>
            </div>
        </div>

   @endforeach

       
    </div>
</div>
                            </div>
                          </div>

                          <div class="container p-2 d-block d-sm-block d-md-none">
                            <div class="row">
                              <div class="col-lg-8 text-center">
                                <div id="mobile-content-container" style="height: 300px; overflow: hidden;">
                                  {!! $mobileContent !!}
                                </div>
                                <div class="">
                                  <button id="mobile-read-more-btn" class="read-more-btn mt-3 mb-3" onclick="toggleReadMore('mobile')">Read More</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </section>
                        @endif
                        @endisset



                        <div class="blog-container">
                          @foreach($obj['country']->re_country_blog as $blog)
                          <a ria-label="Learn more about studying in  "  href="{{ route('home.show', $blog->slug) }}" class="blog-card-link">
                            <div class="blog-card">
                              <img src="{{ asset('storage/country/'. $blog->thumbnail) }}" alt="Best study abroad consultancy in Kochi">
                              <div class="card-content">
                                <h3>{{ $blog->title }}</h3>
                                <div class="meta">
                                  <span>📅 {{ $blog->published_date }}</span>
                                </div>
                                <p>{{$blog->short_description}}</p>
                              </div>
                            </div>
                          </a>
                          @endforeach



                        </div>
                        <!-- <section style="background-color: #eed4d0;">
    <div class="container">
      <div class="row">


  <div class="col-md-6 center">
    <h3 class="side-form-head">Book Your <br><span style="color: #d83f87;">Free Consultation </span>with<br>the best Study Advisor</h3>
     <p style="text-align:left; font-weight: 600; margin: 0px 55px;">Being one of the best study abroad consultants in Kochi</p>

  </div>
  <div class="col-md-6" style="margin: 35px 0px;">
   <form class="course-form" id="consultationForm" >
    @csrf
      <div class="row">
        <div class="col-12">
            <div class="input-group" style="width: 49%; float: left;">
                <label>NAME</label>
                   <input class="zz" type="text" id="name" name="name" placeholder=""   >
               </div>

               <div class="input-group" style="width: 49%; float: right;">
                <label>PHONE</label>
                 <input class="zz" type="text" id="phone" name="phone" placeholder=""  >
             </div>
         </div>
        <div class="col-12">
            <div class="input-group" style="width: 49%; float: left;">
                <label>E-MAIL</label>
                   <input class="zz" type="email" id="email" name="email" placeholder=""  >
               </div>

               <div class="input-group" style="width: 49%; float: right;">
                <label>QUALIFICATION</label>
                 <input class="zz" type="text" id="qualification" name="qualification" placeholder=""  >
             </div>
        </div>
      </div>
   <div class="input-group" style="width: 100%; float: right;">
    <label>MESSAGE</label>
    <textarea class="zz" id="message" name="message" rows="4" placeholder=""  ></textarea>
 </div>
     <div class="input-group" style="justify-content: left;">
         {{-- <button class="enquire-submit">Submit</button> --}}
        <input type="submit" class="btn enquire-submit">

     </div>
  </form>
  </div>
  </div>
  </div>
  </section> -->

                        <section>
                          <div class="container">
                            <div class="row">
                              <div class="col-md-6"><img src="{{homeTheme()}}/image/whyschoose.png" alt="Best study abroad consultancy in Kochi" class="choose-img"></div>
                              <div class="col-md-6">
                                <div class="why-box">
                                  <h1 class="why-head">Why Choose Us-Why <span style="font-weight: bolder!important; color: red;">study abroad</span> consultants ?</h1>
                                  <ul class="why-table">
                                    <li class="why-li"><img src="{{homeTheme()}}/image/bullet-arrow.png" alt="To Top-Ranked Universities & Business School" width="3%" style="margin-right: 10px;">To Top-Ranked Universities & Business School</li>
                                    <li class="why-li"><img src="{{homeTheme()}}/image/bullet-arrow.png" alt="Year Master's Programmes" width="3%" style="margin-right: 10px;">Year Master's Programmes</li>
                                    <li class="why-li"><img src="{{homeTheme()}}/image/bullet-arrow.png" alt="Paid Internship during study" width="3%" style="margin-right: 10px;">Paid Internship during study</li>
                                    <li class="why-li"><img src="{{homeTheme()}}/image/bullet-arrow.png" alt="Great Part-Time Job Market for International Students" width="3%" style="margin-right: 10px;">Great Part-Time Job Market for International Students</li>
                                    <li class="why-li"><img src="{{homeTheme()}}/image/bullet-arrow.png" alt="Government Subsidies & Discounts in the form of Social Security" width="3%" style="margin-right: 10px;">Government Subsidies & Discounts in the form of Social Security</li>
                                    <li class="why-li"><img src="{{homeTheme()}}/image/bullet-arrow.png" alt="French Scholarships" width="3%" style="margin-right: 10px;">French Scholarships</li>
                                    <li class="why-li"><img src="{{homeTheme()}}/image/bullet-arrow.png" alt="Up to 2 Year Post Study Job Search (PSW/APS) Visa" width="3%" style="margin-right: 10px;">Up to 2 Year Post Study Job Search (PSW/APS) Visa</li>
                                  </ul>
                                </div>
                              </div>

                              <!-- <div class="col-md-3"></div> -->
                            </div>
                          </div>
                        </section>

                        @if($obj['country']->re_country_university_courses->count() > 0)
                        <section>
                          <div class="container">
                            <Div class="row margin-sm">
                              <div class="col-md-12">
                                <h2 class="course-ul-head"> Here is a list of top courses to study in {{ $obj['country']->main_title }}</h2>
                                <hr class="hr" width="60%" />
                              </div>
                              @php
                              $country_blog_chunk = $obj['country']->re_country_university_courses->unique('courses_id')->chunk(ceil($obj['country']->re_country_university_courses->unique('courses_id')->count() / 3));
                              @endphp
                              @foreach ($country_blog_chunk as $item)
                              <div class="col-md-4">
                                <ul class="sub-course-ul">
                                  @foreach ($item as $post)
                                  <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;"> {{ $post->re_courses?->title }} </li>
                                  @endforeach
                                </ul>
                              </div>
                              @endforeach

                              {{-- <div class="col-md-4">
        <ul class="sub-course-ul">
          <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Business Management</li>
                              <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Supply Chain Management</li>
                              <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Fashion & Luxury Brand Management</li>
                              <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Data Analytics, Data Science and AI</li>
                              <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Hospitality & Tourism Management</li>
                              </ul>
                            </div>
                            <div class="col-md-4">
                              <ul class="sub-course-ul">
                                <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Business Management</li>
                                <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Supply Chain Management</li>
                                <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Fashion & Luxury Brand Management</li>
                                <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Data Analytics, Data Science and AI</li>
                                <li><img src="{{homeTheme()}}/image/bullet-arrow2.png" width="3%" style="margin-right: 10px;">Hospitality & Tourism Management</li>
                              </ul>
                            </div> --}}
                          </Div>
                          </div>
                        </section>
                        @endif
                    
                        @if($obj['country']->re_country_university_courses->count() > 0)
                        <section class="" >
                          <div class="container">
                            <h1 class="partener-head">Our Partnering Universities</h1>
                            <p class="partener-subhead" data-aos="zoom-in" data-aos-duration="1000">Our Global Partnering Universities/Institutions</p>

                            <div class="owl-carousel owl-theme jj">
                              @foreach ($obj['country']->re_country_university_courses->unique('universities_id') as $item)
                              <div class="item">
                                <div class="brand-box">
                                  <img class="brand-img" src="{{ asset('storage/universities/' . $item->re_university?->image) }}" alt="{{ $item->re_university?->image }}">
                                </div>
                              </div>
                              @endforeach

                              {{-- <div class="item">
            <div class="brand-box">
              <img class="brand-img" src="{{homeTheme()}}/image/brand/INSEEC.png">
                            </div>
                          </div>
                          <div class="item">
                            <div class="brand-box">
                              <img class="brand-img" src="{{homeTheme()}}/image/brand/neoma.png">
                            </div>
                          </div>
                          <div class="item">
                            <div class="brand-box">
                              <img class="brand-img" src="{{homeTheme()}}/image/brand/psb paris school.png">
                            </div>
                          </div>
                          <div class="item">
                            <div class="brand-box">
                              <img class="brand-img" src="{{homeTheme()}}/image/brand/skema.png">
                            </div>
                          </div>
                          <div class="item">
                            <div class="brand-box">
                              <img class="brand-img" src="{{homeTheme()}}/image/brand/the american business school.png">
                            </div>
                          </div>
                          <div class="item">
                            <div class="brand-box">
                              <img class="brand-img" src="{{homeTheme()}}/image/brand/vistula.png">
                            </div>
                          </div> --}}

                          </div>
                          </div>
                        </section>
                        @endif
                        @if($obj['country']->re_country_visa_images->count() > 0)
                        <section>
                          <div class="container">
                            <div class="row box-flag">
                              <h2 class="visa-head">Yearly Success of Over 1,000 Student Visas</h2>
                              @foreach ($obj['country']->re_country_visa_images as $item)
                              <div class="col-md-2"><img class="visa-img" src="{{ asset('storage/countryVisaImage/'.  $item->image ) }}"></div>
                              @endforeach

                              {{-- <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0001_Layer 6.jpg">
                            </div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0002_Layer 10 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0003_Layer 6 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0004_Layer 5.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0005_Layer 9 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0006_Layer 7 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0007_Layer 4.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0008_Layer 3.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0009_Layer 20 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0010_Layer 3 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0011_Layer 17 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0012_Layer 12 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0013_Layer 5 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0014_Layer 11 copy.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0015_Layer 2.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0016_Layer 1.jpg"></div>
                            <div class="col-md-2"><img class="visa-img" src="{{homeTheme()}}/image/visa/Untitled-1_0017_Layer 8 copy.jpg"></div> --}}
                          </div>
                          </div>
                        </section>
                        @endif
           

                        @if($obj['country']->re_country_qa->count() > 0)
                        <section style="background-color:#ead6fb; padding: 3rem 0rem;">
                          <div class="container">
                            <div class="row">
                              <div class="col-lg-12">
                                <h2 class="monts text-center mb-4">FAQ's</h2>
                              </div>
                            </div>
                          </div>
                          <div class="container">
                            <div class="accordion" id="accordionExample">
                              <div class="row">
                                @foreach ($obj['country']->re_country_qa as $key => $qa)
                                <div class="col-lg-6 col-md-6 col-sm-12 mb-4">
                                  <div class="accordion-item">
                                    <h6 class="accordion-header" id="heading{{ $key }}">
                                      <button class="accordion-button d-flex justify-content-between align-items-center collapsed"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#collapse{{ $key }}"
                                        aria-expanded="false"
                                        aria-controls="collapse{{ $key }}"
                                        style="font-size: 14px; background-color: #fff; color: #4e4e4d; min-height: 4rem;">
                                        {{ $qa->question }}
                                        <span class="chevron-icon-wrapper">
                                          <i class="bi bi-chevron-down"></i>
                                        </span>
                                      </button>
                                    </h6>
                                    <div id="collapse{{ $key }}" class="accordion-collapse collapse"
                                      aria-labelledby="heading{{ $key }}" data-bs-parent="#accordionExample">
                                      <div class="accordion-body" style="background-color: #0000000a;font-size: 14px;">
                                        {!! $qa->answer !!}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                @endforeach
                              </div>
                            </div>
                          </div>
                        </section>
                        @endif
                        @include('home.status')


                        @endsection

                        @push('script')







                        @if(session('success'))
                        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
                        <script>
                          Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: '{{ session('success ') }}',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                          });
                        </script>
                        @endif
                        <script>
                          $('.jj').owlCarousel({
                            loop: true,
                            margin: 10,
                            autoplay: true,
                            nav: true,
                            responsive: {
                              0: {
                                items: 3
                              },
                              600: {
                                items: 4
                              },
                              1000: {
                                items: 7
                              }
                            }
                          })
                        </script>
                        <script>
                          document.addEventListener('click', function(e) {
                            // Hamburger menu
                            if (e.target.classList.contains('hamburger-toggle')) {
                              e.target.children[0].classList.toggle('active');
                            }
                          })


                          // appoinment-form
                          $('#consultationForm').submit(async function(event) {
                            event.preventDefault();

                            const form = $(this);
                            const formData = new FormData(this);
                            const url = '{{route('home.consultation.store')}}';

                            // Clear previous validation feedback
                            form.find('.form-control').removeClass('is-invalid');
                            form.find('.invalid-feedback').remove();

                            try {
                              const response = await axios.post(url, formData, {
                                headers: {
                                  'Accept': 'application/json',
                                  'Content-Type': 'multipart/form-data'
                                }
                              });

                              if (response.data) {
                                alert('Success');
                                form.trigger("reset");
                              }
                            } catch (error) {
                              if (error.response.status === 422) {
                                const errors = error.response.data.errors;
                                $.each(errors, function(field, messages) {
                                  const inputField = form.find('[name="' + field + '"]');
                                  inputField.addClass('is-invalid');
                                  inputField.after('<div class="invalid-feedback">' + messages.join('<br>') + '</div>');
                                });
                              } else {
                                console.error(error);
                                alert('An error occurred. Please try again later.');
                              }
                            }
                          });
                        </script>

                        <script>
                          function toggleReadMore(type) {
                            var contentContainer, readMoreBtn;

                            if (type === 'desktop') {
                              contentContainer = document.getElementById('desktop-content-container');
                              readMoreBtn = document.getElementById('desktop-read-more-btn');
                            } else {
                              contentContainer = document.getElementById('mobile-content-container');
                              readMoreBtn = document.getElementById('mobile-read-more-btn');
                            }

                            if (contentContainer.style.height === '300px') {
                              contentContainer.style.height = 'auto';
                              contentContainer.style.overflow = 'visible';
                              readMoreBtn.innerText = 'Read Less';
                            } else {
                              contentContainer.style.height = '300px';
                              contentContainer.style.overflow = 'hidden';
                              readMoreBtn.innerText = 'Read More';
                            }
                          }
                        </script>
                        
                        
                        
                        <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
                        <script>
                            grecaptcha.ready(function () {
                                grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', { action: 'submit' }).then(function (token) {
                                    document.getElementById('recaptcha_token').value = token;
                                });
                            });
                        </script>
                        @endpush