{% extends 'base.html' %}

{% block title %}Contact FinSight - We’re Here to Help{% endblock %}

{% block mystyle %}
<style>
    .contact-info i {
        font-size: 24px;
        margin-right: 10px;
        color: #007bff;
    }

    .map-container {
        height: 500px;
    }

    .map-container iframe {
        border: 0;
        width: 100%;
        height: 100%;
    }
</style>
{% endblock %}

{% block content %}

<!-- Hero Section -->
<div class="container1 text-center py-5">
    <div class="d-flex flex-column justify-content-center align-items-center h-100">
        <h1 class="display-4 font-weight-bold" data-aos="fade-up">Contact Us</h1>
        <p class="lead mt-3" data-aos="fade-up" data-aos-delay="300">
            Got questions? We’re here to help. Reach out to us anytime!
        </p>
    </div>
</div>

<div class="breaker11"></div>

<!-- Contact Information -->
<div class="container2 py-5">
    <h2 class="text-center font-weight-bold mb-4" data-aos="fade-up">Contact Details</h2>
    <div class="row text-center justify-content-center">
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="300">
            <div class="contact-info">
                <i class="fas fa-map-marker-alt"></i>
                <p>Kathmandu, Nepal</p>
            </div>
        </div>
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="500">
            <div class="contact-info">
                <i class="fas fa-envelope"></i>
                <p>Email: <a href="mailto:support@finsight.com">support@finsight.com</a></p>
            </div>
        </div>
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="700">
            <div class="contact-info">
                <i class="fas fa-mobile"></i>
                <p>Mobile: +977 9845507636</p>
            </div>
        </div>
    </div>
</div>

<div class="breaker21"></div>

<!-- Google Map -->
<div class="container1 text-center py-5">
    <h2 class="text-center font-weight-bold mb-4" data-aos="fade-up">Our Location</h2>
     <div class="row justify-content-center">
        <div class="col-md-11 col-12">
            <div class="map-container" data-aos="fade-up" data-aos-delay="300">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.5788344575166!2d85.3225829!3d27.6946184!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19150fb6a609%3A0x9fd38b1e05e515a6!2sKathmandu%2C%20Nepal!5e0!3m2!1sen!2sus!4v1694091379002"
                    style="border:0;width: 100%; height: 500px;" allowfullscreen="" loading="lazy">
                </iframe>
            </div>
        </div>
    </div>
</div>

<div class="breaker11"></div>

<!-- Contact Form -->
<div class="container2 py-5">
    <h2 class="text-center font-weight-bold mb-4" data-aos="fade-up">Send Us a Message</h2>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <form id="contactForm" data-aos="fade-up" data-aos-delay="300">
                <div class="form-group mb-4">
                    <label for="name">Your Name</label>
                    <input
                        type="text"
                        class="form-control"
                        id="name"
                        name="name"
                        placeholder="Enter your name"
                        value="{{ session['user']['name'] if 'user' in session else '' }}"
                        {% if 'user' in session %} readonly {% endif %}
                        required>
                </div>
                <div class="form-group mb-4">
                    <label for="email">Your Email</label>
                    <input
                        type="email"
                        class="form-control"
                        id="email"
                        name="email"
                        placeholder="Enter your email"
                        value="{{ session['user']['email'] if 'user' in session else '' }}"
                        {% if 'user' in session %} readonly {% endif %}
                        required>
                </div>
                <div class="form-group mb-4">
                    <label for="subject">Subject</label>
                    <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
                </div>
                <div class="form-group mb-4">
                    <label for="message">Message</label>
                    <textarea class="form-control" id="message" name="message" rows="5" placeholder="Write your message here..." required></textarea>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                </div>
            </form>
            <div id="responseMessage" class="alert text-center mt-4" role="alert" style="display: none;"></div>
        </div>
    </div>
</div>

<div class="breaker41"></div>

{% endblock %}

{% block myscript %}
<script>
document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();

    let name = document.getElementById('name').value;
    let email = document.getElementById('email').value;
    let subject = document.getElementById('subject').value;
    let message = document.getElementById('message').value;

    fetch('/send-message', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}&subject=${encodeURIComponent(subject)}&message=${encodeURIComponent(message)}`
    })
    .then(response => response.json())
    .then(data => {
        let responseMessage = document.getElementById('responseMessage');

        if (data.status === 'success') {
            responseMessage.textContent = data.message;
            responseMessage.classList.remove('alert-danger');
            responseMessage.classList.add('alert-success');
        } else {
            responseMessage.textContent = 'Error sending message. Please try again.';
            responseMessage.classList.remove('alert-success');
            responseMessage.classList.add('alert-danger');
        }

        // Display the message
        responseMessage.style.display = 'block';

        // Hide the message after 5 seconds
        setTimeout(function() {
            responseMessage.style.display = 'none';
        }, 5000);  // 5000 milliseconds = 5 seconds
    })
    .catch(error => {
        let responseMessage = document.getElementById('responseMessage');
        responseMessage.textContent = 'Error sending message. Please try again.';
        responseMessage.classList.remove('alert-success');
        responseMessage.classList.add('alert-danger');
        responseMessage.style.display = 'block';

        // Hide the message after 5 seconds
        setTimeout(function() {
            responseMessage.style.display = 'none';
        }, 5000);  // 5000 milliseconds = 5 seconds
    });
});
</script>
{% endblock %}