{% extends 'shop/base.html' %}
{% load static %}
{% block title %}Contact Us - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <!-- 🌟 Page Header -->
    <div class="text-center mb-5">
        <h1 class="fw-bold display-5 contact-title">Get in Touch</h1>
        <p class="contact-subtext">We’d love to hear from you! Reach out to us for any inquiries or assistance.</p>
    </div>

    <div class="row g-5">
        <!-- 📧 Contact Form -->
        <div class="col-md-6">
            <div class="card contact-card shadow-lg p-4 border-0 rounded-4">
                <h2 class="fw-bold mb-4 contact-heading"><i class="fas fa-envelope-open-text me-2"></i> Send Us a Message</h2>
                <form id="contactForm" method="post" action="{% url 'contact' %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="name" class="form-label fw-bold">Your Name</label>
                        <input type="text" class="form-control contact-input" id="name" name="name" placeholder="Enter your full name" required>
                        <small class="form-text help-text">Please enter your full name.</small>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label fw-bold">Email Address</label>
                        <input type="email" class="form-control contact-input" id="email" name="email" placeholder="Enter your email" required>
                        <small class="form-text help-text">We will never share your email with anyone else.</small>
                    </div>
                    <div class="mb-3">
                        <label for="subject" class="form-label fw-bold">Subject</label>
                        <input type="text" class="form-control contact-input" id="subject" name="subject" placeholder="Enter the subject" required>
                        <small class="form-text help-text">Specify the purpose of your message.</small>
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label fw-bold">Message</label>
                        <textarea class="form-control contact-input" id="message" name="message" rows="5" placeholder="Write your message here" required></textarea>
                        <small class="form-text help-text">Provide as much detail as possible for a quick response.</small>
                    </div>
                    <button type="submit" id="submitButton" class="btn contact-btn w-100">
                        <i class="fas fa-paper-plane"></i> Send Message
                    </button>
                </form>
            </div>
        </div>

        <!-- 📍 Contact Information -->
        <div class="col-md-6">
            <div class="card contact-card shadow-lg p-4 border-0 rounded-4">
                <h2 class="fw-bold mb-4 contact-heading"><i class="fas fa-phone-alt me-2"></i> Contact Details</h2>
                <ul class="list-unstyled">
                    <li class="mb-3">
                        <i class="fas fa-phone-alt contact-icon me-2"></i>
                        <strong>Phone:</strong> +93 701900324
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-envelope contact-icon me-2"></i>
                        <strong>Email:</strong> info@nanatradings.com
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-map-marker-alt contact-icon me-2"></i>
                        <strong>Address:</strong> Nana Tradings, Kabul, Afghanistan
                    </li>
                </ul>

                <h2 class="fw-bold mt-4 contact-heading"><i class="fas fa-share-alt me-2"></i> Follow Us</h2>
                <div class="d-flex gap-3">
                    <a href="#" class="social-btn"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-linkedin-in"></i></a>
                 </div>
            </div>
        </div>
    </div>
</div>

<!-- 🎨 Custom Styling -->
<style>
/* 🌟 Contact Page Title */
.contact-title {
    color: #148818;
}

.contact-subtext {
    color: #444;
}

/* ✅ Dark Mode Adjustments */
.dark-mode .contact-title {
    color: #00e676;
}

.dark-mode .contact-subtext {
    color: #bbb;
}

/* ✅ Form & Cards */
.contact-card {
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    background: white;
}

.contact-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.dark-mode .contact-card {
    background: #2b2b2b;
    color: white;
}

/* ✅ Form Inputs */
.contact-input {
    border: 2px solid #148818;
    border-radius: 8px;
    padding: 10px;
    font-size: 16px;
    background-color: white;
    color: black;
}

.contact-input::placeholder {
    color: #666;
    opacity: 1;
}

.dark-mode .contact-input {
    background: #333;
    color: white;
    border-color: #00c853;
}

.dark-mode .contact-input::placeholder {
    color: #bbb;
}

/* ✅ Help Text */
.help-text {
    font-size: 13px;
    color: #666;
}

.dark-mode .help-text {
    color: #bbb;
}

/* ✅ Submit Button */
.contact-btn {
    background: linear-gradient(135deg, #148818, #0c5f0c);
    color: white;
    font-weight: bold;
    border-radius: 8px;
    padding: 10px 16px;
    transition: all 0.3s ease-in-out;
}

.contact-btn:hover {
    background: linear-gradient(135deg, #0c5f0c, #148818);
    transform: translateY(-2px);
}

/* 🎨 Social Media Buttons */
.social-btn {
    font-size: 20px;
    padding: 10px;
    width: 45px;
    height: 45px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    color: #148818;
    border: 2px solid #148818;
    background-color: transparent;
}

.social-btn:hover {
    transform: scale(1.1);
    background-color: #148818;
    color: white;
}

.dark-mode .social-btn {
    color: #00e676;
    border-color: #00e676;
}

.dark-mode .social-btn:hover {
    background-color: #00e676;
    color: black;
}

/* ✅ Responsive Design */
@media (max-width: 768px) {
    .social-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}
</style>

<!-- ✅ SweetAlert2 for Form Handling -->

<script>
    document.getElementById('contactForm').addEventListener('submit', function (e) {
        e.preventDefault(); // Prevent default form submission

        const formData = new FormData(this);
        const submitButton = document.getElementById('submitButton');

        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';

        fetch(this.action, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            body: formData,
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: 'Message Sent!',
                    text: data.message,
                }).then(() => {
                    window.location.href = "{% url 'contact' %}";
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: data.message,
                });
                submitButton.disabled = false;
                submitButton.innerHTML = '<i class="fas fa-paper-plane"></i> Send Message';
            }
        })
        .catch(error => {
            Swal.fire({
                icon: 'error',
                title: 'Unexpected Error',
                text: 'Something went wrong. Please try again later.',
            });
            submitButton.disabled = false;
            submitButton.innerHTML = '<i class="fas fa-paper-plane"></i> Send Message';
        });
    });
</script>

<!-- 🎨 Custom Styling -->
<style>
/* 🎨 Social Media Buttons */
.social-btn {
    font-size: 20px;
    padding: 10px;
    width: 45px;
    height: 45px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    color: #148818; /* ✅ Green Icons */
    border: 2px solid #148818;
    background-color: transparent;
}

.social-btn:hover {
    transform: scale(1.1);
    background-color: #148818; /* ✅ Green Background on Hover */
    color: white; /* ✅ White Icon on Hover */
}

/* ✉️ Contact Form & Info Cards */
.card {
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
}

.card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 🟢 Custom Submit Button */
.custom-btn {
    background: linear-gradient(135deg, #148818, #0c5f0c);
    color: white;
    font-weight: bold;
    border-radius: 8px;
    padding: 10px 16px;
    transition: all 0.3s ease-in-out;
}

.custom-btn:hover {
    background: linear-gradient(135deg, #0c5f0c, #148818);
    transform: translateY(-2px);
}

/* ✅ Responsive Design */
@media (max-width: 768px) {
    .social-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}
</style>
{% endblock %}