{% extends "shop/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}Kontakt - Kasico Art & Design{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h1 class="h3 mb-0 text-center">Kontaktieren Sie uns</h1>
                </div>
                <div class="card-body p-4">
                    <!-- Kontaktinformationen -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-envelope fa-2x text-primary me-3"></i>
                                <div>
                                    <h5 class="mb-1">E-Mail</h5>
                                    <p class="mb-0">info@kasico-art.de</p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="fas fa-phone fa-2x text-primary me-3"></i>
                                <div>
                                    <h5 class="mb-1">Telefon</h5>
                                    <p class="mb-0">+49 123 456789</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-clock fa-2x text-primary me-3"></i>
                                <div>
                                    <h5 class="mb-1">Geschäftszeiten</h5>
                                    <p class="mb-0">Mo-Fr: 9:00 - 18:00 Uhr<br>Sa: 10:00 - 14:00 Uhr</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Kontaktformular -->
                    <form method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        {% if messages %}
                        <div class="alert alert-success mb-4">
                            {% for message in messages %}
                            {{ message }}
                            {% endfor %}
                        </div>
                        {% endif %}

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">Name *</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                                <div class="invalid-feedback">
                                    Bitte geben Sie Ihren Namen ein.
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="email" class="form-label">E-Mail *</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                                <div class="invalid-feedback">
                                    Bitte geben Sie eine gültige E-Mail-Adresse ein.
                                </div>
                            </div>
                            <div class="col-12">
                                <label for="subject" class="form-label">Betreff *</label>
                                <input type="text" class="form-control" id="subject" name="subject" required>
                                <div class="invalid-feedback">
                                    Bitte geben Sie einen Betreff ein.
                                </div>
                            </div>
                            <div class="col-12">
                                <label for="message" class="form-label">Ihre Nachricht *</label>
                                <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
                                <div class="invalid-feedback">
                                    Bitte geben Sie Ihre Nachricht ein.
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-paper-plane me-2"></i>Nachricht senden
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- FAQ Link -->
            <div class="text-center mt-4">
                <p class="text-muted">Haben Sie eine allgemeine Frage?</p>
                <a href="#" class="btn btn-outline-primary">
                    <i class="fas fa-question-circle me-2"></i>FAQ ansehen
                </a>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
// Formularvalidierung
(function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.classList.add('was-validated')
        }, false)
    })
})()
</script>
{% endblock %}

{% endblock %}