{% extends 'base.html' %}
{% load static %}
{% block title %}تماس با ما {% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/website/contact.css' %}">

{% endblock %}

{% block content %}
  <main class="container my-5">


<div class="container my-5">

    <!-- Header -->
    <div class="contact-header mb-5">
        <h1> تماس با ما</h1>
        <p>ما همیشه آماده پاسخگویی به سوالات و نیازهای شما هستیم</p>
    </div>
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show mb-4" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}
{% endif %}
    <div class="row g-4">

        <!-- فرم تماس -->
        <div class="col-lg-7">
            <div class="contact-form-card p-4">
                <h3><i class="bi bi-chat-dots"></i> فرم تماس</h3>
             <form method="post" class="mt-3">
    {% csrf_token %}
    <div class="row g-3">
        <div class="col-md-6">
            <label class="form-label">نام و نام خانوادگی</label>
            <input type="text" class="form-control" name="name" required>
        </div>

        <div class="col-md-6">
            <label class="form-label">شماره تماس</label>
            <input type="text" class="form-control" name="phone" required>
        </div>

        <div class="col-12">
            <label class="form-label">موضوع</label>
            <input type="text" class="form-control" name="title" required>
        </div>

        <div class="col-12">
            <label class="form-label">پیام</label>
            <textarea class="form-control" name="description" rows="5"></textarea>
        </div>

        <div class="col-12 text-start">
            <button type="submit" class="btn btn-submit mt-2">
                <i class="fa-solid fa-paper-plane"></i> ارسال پیام
            </button>
        </div>
    </div>
</form>
            </div>
        </div>

        <!-- اطلاعات تماس -->
        <div class="col-lg-5">
            <div class="contact-info-card p-4">
                <h3><i class="bi bi-info-circle"></i> اطلاعات تماس</h3>

        

                <div class="contact-info-item">
                    <div class="contact-info-icon">
                       <i class="fa-solid fa-circle-info"></i>
                    </div>
                    <div class="text-end">
                        <h5>ارتباط مستقیم </h5>
                        <p>در صورت استفاده نکردن فرم میتواند با شماره زیر  یا در پلتفرم ها با ما ارتباط بگیرید</p>
                    </div>
                </div>

                <a href="tel:09107800921" style=" text-decoration: none;">
                <div class="contact-info-item">
                    <div class="contact-info-icon"><i class="fa-solid fa-phone"></i></div>
                    <div class="text-end text-white">
                        <h4>تلفن</h5>
                        <p style="margin-top: 10px; font-size: 20px;">۰۹۳۰۲۸۹۳۲۰۰</p>
                    </div>
                </div>
</a>
     



                <div class="mt-4">
                    <h5 class="mb-3" style="color: var(--text-primary); font-weight: 600;">
                        شبکه‌های اجتماعی
                    </h5>
                    <div class="d-flex justify-content-center gap-3">
                        <div class="d-flex justify-content-center gap-3">
                            <a href="https://ble.ir/tahadarvishi" class="social-link">
                                <img src="{% static 'icons/bale.svg' %}" alt="Bale" width="32" height="32">
                            </a>
                            <a href="https://eitaa.com/tahadarvishi" class="social-link">
                                <img src="{% static 'icons/eitaa.svg' %}" alt="Ita" width="32" height="32">
                            </a>
                            <a href="https://rubika.ir/taha_darviishi" class="social-link">
                                <img src="{% static 'icons/rubik.svg' %}" alt="Rubika" width="32" height="32">
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
</main>
{% endblock %}