{% load static %}

<section id="contact" class="contact section">

  <div class="container" data-aos="fade-up" data-aos-delay="100">
    <div class="contact-main-wrapper">

      <div class="map-wrapper">
  <iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3531.8895268987826!2d85.3299898!3d27.720696999999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb1907b0522ead%3A0x392af32fe87dd0ea!2sRadiant%20Infotech%20Nepal%20Pvt.%20Ltd.!5e0!3m2!1sen!2snp!4v1776877078262!5m2!1sen!2snp" 
    width="100%" height="50%" style="border:0;" 
    allowfullscreen="" loading="lazy" 
    referrerpolicy="no-referrer-when-downgrade">
  </iframe>
 </div>

      <div class="contact-content">

        <div class="contact-cards-container" data-aos="fade-up" data-aos-delay="300">

          <div class="contact-card">
            <div class="icon-box">
              <i class="bi bi-geo-alt"></i>
            </div>
            <div class="contact-text">
              <h4>Our Office</h4>
              <p> Radiant Building, Tukucha Marga, Naxal, Bhatbhateni, Kathmandu Nepal</p>
            </div>
          </div>

          <div class="contact-card">
            <div class="icon-box">
              <i class="bi bi-envelope"></i>
            </div>
            <div class="contact-text">
              <h4>Email Us</h4>
              <p>info@radiantnepal.com</p>
            </div>
          </div>

          <div class="contact-card">
            <div class="icon-box">
              <i class="bi bi-telephone"></i>
            </div>
            <div class="contact-text">
              <h4>Call Us</h4>
              <p>01-4545765 , 01-4524311</p>
            </div>
          </div>

          <div class="contact-card">
            <div class="icon-box">
              <i class="bi bi-clock"></i>
            </div>
            <div class="contact-text">
              <h4>Business Hours</h4>
              <p>Sunday–Friday: 9AM – 6PM</p>
            </div>
          </div>

        </div>

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

<style>
  
.file-upload-wrapper {
  position: relative;
  margin-top: 1rem;
}

.file-upload-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: white;
  border: 2px dashed rgba(5, 150, 82, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-upload-label:hover {
  border-color: #059652;
  background: #e6f4ed;
}

.file-upload-label i {
  font-size: 1.2rem;
  color: #059652;
}

.file-upload-label span {
  color: #5a6c7e;
  font-size: 0.9rem;
}

.file-upload-label .file-name {
  color: #059652;
  font-weight: 500;
}

input[type="file"] {
  display: none;
}

.file-info {
  margin-top: 8px;
  font-size: 0.75rem;
  color: #5a6c7e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-info i {
  font-size: 0.8rem;
}

.remove-file {
  color: #dc3545;
  cursor: pointer;
  margin-left: auto;
  display: none;
}

.remove-file:hover {
  text-decoration: underline;
}

.form-submit button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.loading, .error-message, .sent-message {
  display: none;
  padding: 12px;
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.loading {
  background: #e3f2fd;
  color: #0c5460;
}

.error-message {
  background: #f8d7da;
  color: #721c24;
}

.sent-message {
  background: #d4edda;
  color: #155724;
}
</style>

{% block extra_js %}
<script>
  /*
   * Contact Form Handler (Home Page)
   *
   * This script handles two main functionalities:
   *
   * 1. FILE UPLOAD VALIDATION:
   *    - Validates file size (max 10MB) before form submission
   *    - Validates allowed file types: PDF, DOC, DOCX, JPG, PNG, TXT, ZIP
   *    - Shows selected file name and provides "Remove file" option
   *    - Prevents invalid files from being submitted
   *
   * 2. AJAX FORM SUBMISSION:
   *    - Intercepts form submission to send data asynchronously
   *    - Disables submit button during processing to prevent double submission
   *    - Shows loading/error/success states to the user
   *    - Uses FormData for file upload support
   *    - Extracts CSRF token from cookies for Django security
   *    - Handles JSON response from backend and displays appropriate messages
   *    - Automatically resets form and scrolls to feedback message on success
   */
  document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('contactForm');
    const fileInput = document.getElementById('attachment_home');
    const fileNameSpan = document.querySelector('.file-name');
    const removeFileBtn = document.querySelector('.remove-file');
    const submitBtn = document.getElementById('submitBtn');
    const loading = form.querySelector('.loading');
    const errorMsg = form.querySelector('.error-message');
    const sentMsg = form.querySelector('.sent-message');

    fileInput.addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (file) {
        if (file.size > 10 * 1024 * 1024) {
          alert('File size must be less than 10MB');
          fileInput.value = '';
          fileNameSpan.textContent = '';
          removeFileBtn.style.display = 'none';
          return;
        }

        const allowedTypes = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'txt', 'zip'];
        const fileExt = file.name.split('.').pop().toLowerCase();
        if (!allowedTypes.includes(fileExt)) {
          alert('File type not allowed. Please upload PDF, DOC, DOCX, JPG, PNG, TXT, or ZIP files.');
          fileInput.value = '';
          fileNameSpan.textContent = '';
          removeFileBtn.style.display = 'none';
          return;
        }

        fileNameSpan.textContent = file.name;
        removeFileBtn.style.display = 'inline-block';
      } else {
        fileNameSpan.textContent = '';
        removeFileBtn.style.display = 'none';
      }
    });

    removeFileBtn.addEventListener('click', function() {
      fileInput.value = '';
      fileNameSpan.textContent = '';
      removeFileBtn.style.display = 'none';
    });

    form.addEventListener('submit', async function(e) {
      e.preventDefault();

      loading.style.display = 'block';
      errorMsg.style.display = 'none';
      sentMsg.style.display = 'none';

      submitBtn.disabled = true;

      const formData = new FormData(form);

      try {
        const response = await fetch("{% url 'contact_submit' %}", {
          method: 'POST',
          body: formData,
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRFToken': document.cookie.match(/csrftoken=([^;]+)/)?.[1] || '',
          },
        });

        const result = await response.json();
        loading.style.display = 'none';

        if (result.success) {
          sentMsg.style.display = 'block';
          form.reset();
          fileNameSpan.textContent = '';
          removeFileBtn.style.display = 'none';

          sentMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });

          setTimeout(() => {
            sentMsg.style.display = 'none';
          }, 5000);
        } else {
          errorMsg.textContent = result.message || 'Something went wrong. Please try again.';
          errorMsg.style.display = 'block';
          errorMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      } catch (err) {
        console.error('Error:', err);
        loading.style.display = 'none';
        errorMsg.textContent = 'Network error. Please check your connection and try again.';
        errorMsg.style.display = 'block';
      } finally {
        submitBtn.disabled = false;
      }
    });
  });
</script>
{% endblock %}