@extends('web.layouts.layout')
<title>@yield('meta_title', 'About Online Course')</title>
<meta name="description" content="@yield('')">
<meta name="keywords" content="@yield('')">
@section('content')
<main>
  <!-- breadcrumb area start -->
  <section class="bd-breadcrumb-area p-relative fix z-index-11">
    <div class="bd-breadcrumb-bg-two" data-background="assets/images/breadcrumb/breadcrumb-bg-2.webp"></div>
    <div class="bd-breadcrumb-wrapper p-relative">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <div class="bd-breadcrumb style-two d-flex-center">
              <div class="bd-breadcrumb-content">
                <h1 class="bd-breadcrumb-title">Contact Us</h1>
                <div class="bd-breadcrumb-list"> <span><a href="/">Home</a></span> <span class="divider"><i class="fa-regular fa-angle-right"></i></span> <span class="active">Contact Us</span> </div>
              </div>
            </div>
          </div>
        </div>
       </div>
    </div>
  </section>
  <section class="bd-contact-address-area section-space primary-bg">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-6 col-lg-8">
          <div class="bd-section-title-wrapper section-title-space text-center"> <span class="bd-section-subtitle">Locations</span>
            <h2 class="bd-section-title mb-20">Our Offices</h2>
          </div>
        </div>
      </div>
      <div class="row gy-30">
        <div class="col-xl-4 col-lg-6 col-md-6">
          <div class="bd-contact-address-box">
            <div class="icon"> <i class="fa-light fa-map-marker-alt"></i> </div>
            <div class="content">
              <h6 class="title">Office</h6>
              <p>{!!$contactus_list->office_address??""!!}</p>
             </div>
          </div>
        </div>
        <div class="col-xl-4 col-lg-6 col-md-6">
          <div class="bd-contact-address-box">
            <div class="icon"> <i class="fa-light fa-phone"></i> </div>
            <div class="content">
              <h6 class="title">Call Us</h6>
              <p>{!!$contactus_list->call_us??""!!}</p>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-lg-6 col-md-6">
          <div class="bd-contact-address-box">
            <div class="icon"> <i class="fa-light fa-envelope"></i> </div>
            <div class="content">
              <h6 class="title">Email Us</h6>
              <p><a href="/cdn-cgi/l/email-protection#88f3a9a9acebe7e6fce9ebfcfdfbd7e4e1fbfca5b6ede5e9e1e4d7fdfbb7b7afafa9a9f5">  {!!$contactus_list->email_us??''!!} </a></p>
            </div>
          </div>
        </div>
       </div>
      <div class="row">
        <div class="col-xl-12">
          <div class="bd-contact-map">
            <iframe width="100%" height="450" id="gmap_canvas" src="https://maps.google.com/maps?q=PRIA+Head+Office%3A+42%2C+Tughlakabad+Institutional+Area%2C+Vayusenabad%2C+New+Delhi%2C+Delhi+110062&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="bd-contact-form-area section-space">
    <div class="container">
      <div class="row gy-30 justify-content-between align-items-center">
        <div class="col-xl-6 col-lg-6">
          <div class="bd-contact-form-wrapper">
            <div class="bd-section-title-wrapper section-title-space">
              <h2 class="bd-section-title mb-20">Get in touch</h2>
              @if(session('success'))
              <div class="alert alert-success mt-3">
                  {{ session('success') }}
              </div>
              @endif
              <p class="bd-section-paragraph">Our friendly team would love to hear from you.</p>
            </div>
            <div class="bd-contact-form">
           <form action="{{ route('contact-store') }}" method="post" id="contactForm">
    @csrf
    <div class="row gy-30">
        <div class="col-md-12">
            <div class="form-input-box">
                <div class="form-input-title">
                    <label for="firstName">Full Name<span>*</span></label>
                </div>
                <div class="form-input">
                    <input name="firstName" id="firstName" type="text" placeholder="Full Name">
                </div>
                <div class="text-danger error" id="firstNameError"></div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="form-input-box">
                <div class="form-input-title">
                    <label for="emailAddress">Email Address<span>*</span></label>
                </div>
                <div class="form-input">
                    <input name="email" id="emailAddress" type="email" placeholder="Email Address">
                </div>
                <div class="text-danger error" id="emailError"></div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="form-input-box">
                <div class="form-input-title">
                    <label for="subject">Mobile No<span>*</span></label>
                </div>
                <div class="form-input">
                    <input name="phone" id="subject" type="text" placeholder="Mobile">
                </div>
                <div class="text-danger error" id="phoneError"></div>
            </div>
        </div>

        <div class="col-xxl-12">
            <div class="form-input-box mb-15">
                <div class="form-input-title">
                    <label for="message">Message<span>*</span></label>
                </div>
                <div class="form-input">
                    <textarea id="message" name="message" placeholder="Message"></textarea>
                </div>
                <div class="text-danger error" id="messageError"></div>
            </div>

            <div class="checkbox-option">
                <input id="course-check-1" name="course_check_1" type="checkbox">
                <label for="course-check-1">
                    You agree to our friendly 
                    <span class="text-border-highlights">
                        <a href="{{route('privacy.policy')}}">privacy policy</a>
                        <span class="theme-black h-1px bottom-0"></span>
                    </span>.
                </label>
                <div class="text-danger error" id="checkboxError"></div>
            </div>
        </div>

        <div class="col-xxl-12">
            <div class="bd-contact-form-btn">
                <button class="bd-btn btn-primary w-100" type="submit">Submit</button>
            </div>
        </div>
    </div>
</form>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
    let valid = true;

    // Clear previous errors
    document.querySelectorAll('.error').forEach(el => el.textContent = '');

    // Full Name
    const fullName = document.getElementById('firstName').value.trim();
    if (fullName === '') {
        document.getElementById('firstNameError').textContent = 'Full Name is required.';
        valid = false;
    }

    // Email
    const email = document.getElementById('emailAddress').value.trim();
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (email === '') {
        document.getElementById('emailError').textContent = 'Email is required.';
        valid = false;
    } else if (!emailPattern.test(email)) {
        document.getElementById('emailError').textContent = 'Enter a valid email address.';
        valid = false;
    }

    // Phone
    const phone = document.getElementById('subject').value.trim();
    if (!/^\d{10}$/.test(phone)) {
        document.getElementById('phoneError').textContent = 'Enter a valid 10-digit mobile number.';
        valid = false;
    }

    // Message
    const message = document.getElementById('message').value.trim();
    if (message === '') {
        document.getElementById('messageError').textContent = 'Message is required.';
        valid = false;
    }

    // Checkbox
    const checkbox = document.getElementById('course-check-1');
    if (!checkbox.checked) {
        document.getElementById('checkboxError').textContent = 'You must agree to the privacy policy.';
        valid = false;
    }

    if (!valid) e.preventDefault(); // Prevent form submission if invalid
});
</script>

            </div>
          </div>
        </div>
        <div class="col-xl-6 col-lg-6">
          <div class="bd-contact-form-thumb"><img src="assets/images/contact/contact-thumb.webp" alt="images"></div>
        </div>
      </div>
    </div>
  </section>
</main>
@endsection