{% extends "layout.html" %}

{% block title %}
Contact Us - Eco Wildlife Tour | Ethical Safaris & Adventures in India
{% endblock %}

{% block content %}
<!-- breadcrum section -->
<section class="breadcrumb-section">
  <div class="breadcrumb-image-container">
    <img src="{{ url_for('static', filename='images/backgrounds/background.jpg') }}" alt="Contact Us Banner"
      class="w-100 breadcrumb-img">
    <div class="breadcrumb-overlay">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h2 class="text-white fw-bold mt-3">Contact Us</h2>
            <nav aria-label="breadcrumb" class="m-4">
              <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item"><a href="/" class="text-white-50">Home</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Contact Us</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Contact Section -->
<section class="contact-section p-3">
  <div class="container-fluid shadow-lg p-4 rounded-4">
    <div class="row justify-content-center">
      <!-- Optional info column (shows on larger screens) -->
      <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="info-card p-4 rounded-4 shadow-none">
          <h2>Have Any Questions?</h2>
          <p class="mb-3">Have questions or want to book a ride? We're here to help! Reach out to us for bookings,
            custom travel plans, or any inquiries. Our team is always ready to assist you.</p>
          <ul class="contact-section-item">
            <li>
              <div class="d-flex justify-content-start">
                <a href="#"><i class="fas fa-phone"></i></a>
                <span>Call or Whatsapp<br>+91 (000) 000-0000</span>
              </div>
            </li>
            <li>
              <div class="d-flex justify-content-start">
                <a href="#"><i class="fas fa-envelope"></i></a>
                <span>Email Us<br>info@ecowildlifetour.org</span>
              </div>
            </li>
            <li>
              <div class="d-flex justify-content-start">
                <a href="#"><i class="fas fa-location-dot"></i></a>
                <span>Locate Us<br>Somewhere Street, City, State - 112221, IN</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- Form column -->
      <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="card contact-card border-0 rounded-4 p-4 shadow-none animate__animated animate__fadeInUp">
          <h3 class="text-center mb-4 fw-bold text-success">Get in Touch</h3>

          <form id="contactForm" method="POST" action="{{ url_for('contact_us') }}" class="row">
            <!-- First Name -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
              <div class="mb-3 input-group">
                <span class="input-group-text bg-white border-end-0 rounded-start-pill">
                  <i class="fa-solid fa-user text-success"></i>
                </span>
                <input name="fname" type="text" class="form-control border-start-0 rounded-end-pill" id="first-name"
                  placeholder="First Name" required />
              </div>
            </div>

            <!-- Last Name -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
              <div class="mb-3 input-group">
                <span class="input-group-text bg-white border-end-0 rounded-start-pill">
                  <i class="fa-solid fa-user text-success"></i>
                </span>
                <input name="lname" type="text" class="form-control border-start-0 rounded-end-pill" id="last-name"
                  placeholder="Last Name" required />
              </div>
            </div>

            <!-- Email -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
              <div class="mb-3 input-group">
                <span class="input-group-text bg-white border-end-0 rounded-start-pill">
                  <i class="fa-solid fa-envelope text-success"></i>
                </span>
                <input name="email" type="email" class="form-control border-start-0 rounded-end-pill" id="email"
                  placeholder="Enter your email." required />
              </div>
            </div>

            <!-- Mobile -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
              <div class="mb-3 input-group">
                <span class="input-group-text bg-white border-end-0 rounded-start-pill">
                  <i class="fa-solid fa-phone text-success"></i>
                </span>
                <input name="mobile" type="tel" class="form-control border-start-0 rounded-end-pill" id="mobile"
                  placeholder="Enter your phone." pattern="[\d\+\-\s\(\)]{7,}" maxlength="10" minlength="10" required />
              </div>
            </div>

            <!-- Message -->
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
              <div class="mb-3">
                <textarea name="message" class="form-control rounded-4" id="message" rows="5"
                  placeholder="Write your message..." required></textarea>
              </div>
            </div>

            <!-- Submit Button -->
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
              <button type="submit" class="btn w-100 text-white rounded-pill submit-btn" name="send">
                <i class="fa-solid fa-paper-plane me-2"></i> Send
              </button>
            </div>
          </form>
          {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
          {% for category, message in messages %}
          <div class="text-center text-{{ category }} p-2 m-2" role="alert">
            {{ message }}
          </div>
          {% endfor %}
          {% endif %}
          {% endwith %}
        </div>
      </div>
      <!-- Map -->
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="ratio ratio-4x3 border-0 rounded-4 p-4 animate__animated animate__fadeInUp mt-3 shadow-none">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d475747.9863790554!2d85.82623337343752!3d21.3196625!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a1c1b74a340b9ef%3A0xb982f7315281779e!2sSARISUA%20WATERFALL%20KUPARI!5e0!3m2!1sen!2sin!4v1755938588847!5m2!1sen!2sin"
            title="Google Maps Location" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade">
          </iframe>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}