@extends('frontend.layouts.template-base')

@section('meta_tags')
    @include('frontend.layouts.meta-tags', ['title' => 'Contact Us', 'page' => 'contact-us'])
@endsection

@section('styles')

@endsection


@section('content')
    <!-- ── Page Banner ── -->
    <section class="contact-page-banner">
        <div class="container">
            <div class="row align-items-center gy-2">
                <div class="col-lg-12 justify-content-center align-items-center">
                    <h1>Need Help? Let's Talk</h1>
                </div>
                <div class="col-lg-12 justify-content-start text-white">
                    <p>Need assistance? We’re here to help with your orders, subscriptions, and more.</p>

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

    <div class="contact-page ">
    <div class="container contact-inner-sec space">

  <div class="info-grid row">
    <div class="col-lg-4 col-md-6 col-12">
          <div class="add-card dark">
      <div class="ic-label"><img src="{{ asset('assets/images/img/location-1.png') }}" alt=""> Address</div>
      <p>SF No: 157/3B, Vaidhehi Falls road, Narasipuram, Coimbatore 641109<br>India.</p>
    </div>
    </div>
    <div class="col-lg-4 col-md-6 col-12">
         <div class="add-card light">
      <div class="ic-label"><img src="{{ asset('assets/images/img/call-calling.svg') }}" alt=""> Phone Number</div>
      <p>+91 86800 22555</p>
      <p>+91 94440 82985</p>
    </div>

    </div>
    <div class="col-lg-4 col-md-6 col-12">
          <div class="add-card light">
      <div class="ic-label"><img src="{{ asset('assets/images/img/sms-tracking.svg') }}" alt=""> Email</div>
      <p>support@chotekisan.com</p>
    </div>

    </div>
  </div>

  <div class="main-section ">
   <div class="form-card">
      <h2>Get A Quote</h2>
      <div class="row">
          <div class="col-lg-7">
               <div class="fg row">
                <div class="div col-lg-12">
                    <div class="field-sec"><label>Name<span class="req">*</span></label><input type="text" placeholder="Enter Your Name"></div>
                </div>
                <div class="div col-lg-12">
                     <div class="field-sec"><label>Phone Number<span class="req">*</span></label>
                     <input type="number"
       class="form-control phone-number"
       placeholder="Enter Your Phone Number"
       min="0"
       onkeydown="return event.keyCode !== 38 && event.keyCode !== 40"
       onwheel="this.blur()"
       oninput="if(this.value.length > 10) this.value = this.value.slice(0,10)">
                </div>
                <div class="div col-lg-12">
                      <div class="field-sec"><label>Email </label><input type="email" placeholder="Enter Your Email"></div>
                </div>
                <div class="div col-lg-12">
                          <div class="field-sec full"><label>Message</label>
          <textarea placeholder="Enter your message"></textarea>
        </div>
                </div>
      </div>
      <button class="btn btn-orange">
        <span class="text">Submit</span> </button>
          </div>
</div>
<div class="col-lg-5">
             <div class="cta-panel">
      <div class="cta-img-wrap">
        <div class="cta-img-bg">
        <img src="{{ asset('assets/images/img/form-cta.avif') }}" alt="">
        </div>
        <div class="cta-overlay">
          <h3>Let's connect with us</h3>
          <p>We’re here to bring farm-fresh goodness to your table, feel free to reach out to us.</p>
        </div>
      </div>
    </div>
          </div>
      </div>

    </div>
  </div>
</div>
  <div class="map-card">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d250645.0554882337!2d76.80206761500611!3d11.013924255813574!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba859af2f971cb5%3A0x2fc1c81e183ed282!2sCoimbatore%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1779273748319!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
         <!-- <iframe
                    src="https://www.google.com/maps?q=SF%20No:%20157/3B,%20Vaidhehi%20Falls%20Road,%20Narasipuram,%20Coimbatore%20641109&output=embed"
                    width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe> -->
  </div>
</div>

    <!-- ── Contact Section ── -->
    <!-- <section class="contact-section">
        <div class="container">
            <div class="row g-4 align-items-stretch">
                <div class="col-lg-4 col-md-5">
                    <div class="info-card">
                        <h2>Contact Us</h2>
                        <p>We’re here to bring farm-fresh goodness to your table, feel free to reach out to us.</p>

                        <div class="info-item">
                            <div class="info-icon"><i class="fas fa-map-marker-alt"></i></div>
                            <div class="info-text">
                                <h6>Address</h6>
                                <span>SF No: 157/3B, Vaidhehi Falls road, Narasipuram, Coimbatore 641109<br>India.</span>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon"><i class="fas fa-envelope"></i></div>
                            <div class="info-text">
                                <h6>Email</h6>
                                <span>support@chotekisan.com</span>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon"><i class="fas fa-phone"></i></div>
                            <div class="info-text">
                                <h6>Phone Number</h6>
                                <span>+91 86800 22555</span>
                                <span>+91 94440 82985</span>
                            </div>
                        </div>
                    </div>
                </div>
>
                <div class="col-lg-8 col-md-7">
                    <div class="form-card">
                        <h2>Get in Touch</h2>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Full Name <span class="req">*</span></label>
                                <input type="text" class="form-control" placeholder="Enter Your Name" />
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Company Name <span class="req">*</span></label>
                                <input type="text" class="form-control" placeholder="Enter Your Email" />
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Phone <span class="req">*</span></label>
                                <input type="tel" class="form-control" placeholder="Enter Your Phone Number" maxlength="10"
                                    inputmode="numeric" pattern="[0-9]*"
                                    oninput="this.value=this.value.replace(/[^0-9]/g,'')" />
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Email <span class="req">*</span></label>
                                <input type="email" class="form-control" placeholder="Enter Your Email" />
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Postal Code</label>
                                <input type="text" class="form-control" placeholder="Enter Your Pin Code" />
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Business Address (Not Home Address)</label>
                                <input type="text" class="form-control" placeholder="Enter Your Business Address" />
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Country</label>
                                <input type="text" class="form-control auto-fetch" placeholder="Auto Fetch" readonly />
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">City</label>
                                <input type="text" class="form-control auto-fetch" placeholder="Auto Fetch" readonly />
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">State</label>
                                <input type="text" class="form-control auto-fetch" placeholder="Auto Fetch" readonly />
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Inquiry Reason</label>
                                <select class="form-select">
                                    <option value="" disabled selected>Select Reason</option>
                                    <option>Product Inquiry</option>
                                    <option>Other</option>
                                </select>
                            </div>

                            <div class="col-12">
                                <label class="form-label">Message</label>
                                <textarea class="form-control" placeholder="Enter Here"></textarea>
                            </div>

                            <div class="col-12">
                                <button type="button" class="btn-submit">
                                    Submit <i class="bi bi-arrow-up-right"></i>
                                </button>
                            </div>

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

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

    <!-- ── Map Section ── -->
    <!-- <section class="map-section">
        <div class="container">
            <div class="map-wrapper">
                <iframe
                    src="https://www.google.com/maps?q=SF%20No:%20157/3B,%20Vaidhehi%20Falls%20Road,%20Narasipuram,%20Coimbatore%20641109&output=embed"
                    width="100%" height="450" style="border:0; border-radius:12px;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>
    </section> -->
@endsection

@section('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {
    const phoneInput = document.querySelector(".phone-number");

    // Prevent arrow up/down increment
    phoneInput.addEventListener("keydown", function (e) {
        if (e.key === "ArrowUp" || e.key === "ArrowDown") {
            e.preventDefault();
        }
    });

    // Restrict to 10 digits only
    phoneInput.addEventListener("input", function () {
        this.value = this.value.replace(/\D/g, '').slice(0, 10);
    });

    // Prevent mouse wheel increment
    phoneInput.addEventListener("wheel", function (e) {
        e.preventDefault();
    });
});
</script>
@endsection