{% extends "base.html" %}

{% block title %}Контакты - Wanlanda{% endblock %}

{% block content %}
<h1 class="text-3xl sm:text-4xl font-bold mb-8 text-wanlanda-green">Контакты</h1>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="bg-white p-6 rounded-lg shadow">
        <h2 class="text-2xl font-bold mb-4 text-wanlanda-green">Контактная информация</h2>
        <p class="mb-2">Адрес: г. Новокузнецк, ул. Тольятти, д. 5Б, пом. 10</p>
        <p class="mb-2">Телефон: +7 (905) 906-84-65</p>
        <p class="mb-2">Email: anthillsib@gmail.com</p>
        <h3 class="text-xl font-bold mt-6 mb-2 text-wanlanda-green">Часы работы</h3>
        <p class="mb-2">Пн-Пт: 9:00 - 18:00</p>
        <!-- <p class="mb-2">Сб: 10:00 - 15:00</p> -->
        <p class="mb-2">Сб, Вс: выходной</p>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
        <h2 class="text-2xl font-bold mb-4 text-wanlanda-green">Напишите нам</h2>
        
        <form id="contactForm" onsubmit="submitForm(event)">
            <div class="mb-4">
                <label for="name" class="block text-gray-700 font-bold mb-2">Имя</label>
                <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sybiko-red" required>
            </div>
            <div class="mb-4">
                <label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
                <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sybiko-red" required>
            </div>
            <div class="mb-4">
                <label for="message" class="block text-gray-700 font-bold mb-2">Сообщение</label>
                <textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sybiko-red" required></textarea>
            </div>
            <button type="submit" class="bg-wanlanda-green hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Отправить</button>
        </form>
        <div id="formMessage" class="mt-4 text-center hidden"></div>

    </div>
</div>

<script>
    async function submitForm(event) {
        event.preventDefault();
        const form = event.target;
        const formData = new FormData(form);
        const formMessage = document.getElementById('formMessage');

        try {
            const response = await fetch('/submit-form', {
                method: 'POST',
                body: JSON.stringify(Object.fromEntries(formData)),
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            const result = await response.json();

            if (response.ok) {
                formMessage.textContent = 'Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.';
                formMessage.classList.remove('hidden', 'text-red-500');
                formMessage.classList.add('text-green-500');
                form.reset();
            } else {
                throw new Error(result.detail || 'Произошла ошибка при отправке формы.');
            }
        } catch (error) {
            formMessage.textContent = error.message;
            formMessage.classList.remove('hidden', 'text-green-500');
            formMessage.classList.add('text-red-500');
        }
    }
</script>
{% endblock %}