@extends('home.layouts.app')

@push('style')
<link rel="canonical" href="https://exprenza.com/courses/{{ $obj['courses']->slug }}" />



<style>
    a:link, a:active, a:visited, a:hover {
        color: #7a10ba;
    }
</style>
@endpush

@section('content')

 <section style="    margin-top: 10%;">
  <div class="container">
    <div class="row">
      <div class="col-md-6 d-flex align-items-center">
        <div class="courses-main">
          <img src="{{ asset('storage/courses/'. $obj['courses']->main_image) }}" alt="{{ $obj['courses']->main_title }}" style="width: 100%;">
        </div>
      </div>
      <div class="col-md-6 ">
        <h1 class="course-heading">{{ $obj['courses']->main_title }}</h1>
        <div style="margin: 15px 5px; font-size: 14px;">{!! $obj['courses']->main_description !!}</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>
      </div>
 </section>
 {{-- <section style="background-color: #efefef!important">
  <div class="container">
    <div class="row">
      <h1 class="course-heading"></h1>
      <div class="col-md-2">
        <div class="sub-course-box">
          <img class="sub-course-img" src="{{homeTheme()}}/image/courses/book.png">
        <div class="sub-course-head">Bachelor's degree in Graphic Design</div>

      </div>
      </div>
      <div class="col-md-2">
        <div class="sub-course-box">
          <img class="sub-course-img" src="{{homeTheme()}}/image/courses/education.png">
        <div class="sub-course-head">Bachelor's degree in International relations</div>

      </div>
      </div>
      <div class="col-md-2">
        <div class="sub-course-box">
          <img class="sub-course-img" src="{{homeTheme()}}/image/courses/graduation.png">
        <div class="sub-course-head">Bachelor’s degree in Management</div>

      </div>
      </div>
      <div class="col-md-2">
        <div class="sub-course-box">
          <img class="sub-course-img" src="{{homeTheme()}}/image/courses/lesson.png">
        <div class="sub-course-head">Bachelor’s degree in Management</div>

      </div>
      </div>
      <div class="col-md-2">
        <div class="sub-course-box">
          <img class="sub-course-img"  src="{{homeTheme()}}/image/courses/online-course.png">
        <div class="sub-course-head">Bachelor’s degree in Management</div>

      </div>
      </div>
      <div class="col-md-2">
        <div class="sub-course-box">
          <img class="sub-course-img" src="{{homeTheme()}}/image/courses/online-education (1).png">
        <div class="sub-course-head">Bachelor’s degree in Management</div>

      </div>
      </div>
    </div>
  </div>
</section> --}}

<section style="background-image:url(image/study-abroad2.jpg); width: 100%; height: auto;">
<div class="container">
  <div class="row">
    <div class="col-md-6" style="margin: 35px 0px;">
<h1 class="free-head">
Find Study Abroad Courses <span>Apply Now For 2025 Intakes</span>
</h1>
<p style="font-size: 16px;">It is a long established fact that a reader will be distracted by the readable content</p>
<hr class="hr"/>
<div><button class="course-btn" data-bs-toggle="modal" data-bs-target="#staticBackdrop-find-course">Find a course</button></div>
<div><button class="course-btn">Enquiry</button></div>
    </div>
    <div class="col-md-6">
      <img src="" style="width: 60%; display: block; margin: 55px auto;">
    </div>
  </div>
</div>
</section>




<section  style="background-color: #ead6fb;">
<div class="container-fluid">
  <div class="row">


<div class="col-md-6 col-12 d-flex justify-content-center">
  <div class="container-form shadow-lg p-4 rounded" style="background:#fff; max-width:500px; width:100%;">


    <form id="consultationForm">
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="name" class="form-label" style="color:#280d34; font-weight:600;">Name</label>
      <input class="form-control zz" type="text" id="name" name="name" placeholder="Enter your full name">
    </div>

    <div class="col-md-6 mb-3">
      <label for="email" class="form-label" style="color:#280d34; font-weight:600;">E-mail</label>
      <input class="form-control zz" type="email" id="email" name="email" placeholder="Enter your email address">
    </div>

    <div class="col-md-6 mb-3">
      <label for="phone" class="form-label" style="color:#280d34; font-weight:600;">Phone</label>
      <input class="form-control zz" type="text" id="phone" name="phone" placeholder="Enter your phone number">
    </div>

    <div class="col-md-6 mb-3">
      <label for="qualification" class="form-label" style="color:#280d34; font-weight:600;">Qualification</label>
      <input class="form-control zz" type="text" id="qualification" name="qualification" placeholder="Enter your qualification">
    </div>

    <div class="col-12 mb-3">
      <label for="message" class="form-label" style="color:#280d34; font-weight:600;">Message</label>
      <textarea class="form-control zz" id="message" name="message" rows="4" placeholder="Write your message..."></textarea>
    </div>
    <input type="hidden" name="recaptcha_token" id="recaptcha_token">

    <div class="col-12 d-grid">
      <button type="submit" class="btn submit" style="background:#790fb4; color:#fff; font-weight:600; border:none; border-radius:8px; padding:10px;">
        Submit
      </button>
    </div>
  </div>
</form>
  </div>
</div>
      <div class="col-md-6 center ">
<div class="cos" style="margin-top: 10px;">
        <h3 class="side-form-head"style="text-align:left; font-size:30px;line-height:40px" >Book Your Free Consultation</h3>
        <p style="text-align:left; font-size :16px; margin: 0px 50px;">Book your free consultation with the best study advisor today. As one of the leading study abroad consultants in Kochi, we guide you through course selection, university applications, scholarships, and visas—step by step. Get expert, personalized advice and start your journey with confidence.</p>
        <div style="    margin: 5px 40px;">
          <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>
</div>
</div>
</div>
</section>

<section class="" >
 @if($obj['courses']->re_country_university_courses->count() > 0)

<div class="container">
<h1 class="partener-head">Our Partnering Universities</h1>
<p class="partener-subhead">Our Global Partnering Universities/Institutions</p>

<div class="owl-carousel owl-theme jj">
@isset($obj['courses'] )
@php
$get_university = $obj['courses']->re_country_university_courses->unique('universities_id');
@endphp
@foreach ($get_university 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
@endisset
      {{--
      <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>
                                                    @endif

</section>








@endsection

@push('script')
<script>
    $('.jj').owlCarousel({
      loop:true,
      margin:10,
     autoplay:true,
      nav:true,
      responsive:{
          0:{
              items:3
          },
          600:{
              items:4
          },
          1000:{
              items:7
          }
      }
    });


// 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>
@endpush