{% load static %}
{% block content %}
{% include 'profile/header.html' %}
{% load widget_tweaks %}
{% load jalali_tags %}

{% include 'profile/drawer.html' %}
<br><br><br><br>
{% load static %}
<link rel="stylesheet" href="{% static 'admin/jquery.ui.datepicker.jalali/themes/base/jquery-ui.min.css' %}">
<script src="{% static 'admin/js/django_jalali.min.js' %}"></script>

<div class="container">
    <h1 class="text-center bg-primary text-white p-3 rounded mb-4">
        {% if is_edit %}
            وییییرایش اطلاعات فردی
        {% else %}
            افزودن اطلاعات فردی
        {% endif %}
    </h1>
    
    <!-- فرم کاربر -->
    <form method="post" class="user-form">
        {% csrf_token %}

        {% include 'profile/message.html' %}

        <!-- اطلاعات کاربری -->
        <section class="form-section mb-4">
            <h3 class="h5">اطلاعات کاربری</h3>
            <div class="row">
                {% for field in user_form %}
                <div class="col-md-3 col-sm-6 col-12 mb-3">
                    <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }} <span
                            class="">*</span></label>
                    {{ field|add_class:"form-control" }}
                    {% if field.errors %}
                    <div class="text-danger mt-1">{{ field.errors }}</div>
                    {% endif %}
                </div>
                {% endfor %}

                {% for field in person_form %}
                <div class="col-md-3 col-sm-6 col-12 mb-3 ">
                    <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }} <span
                            class="">*</span></label>
                    {% if field.name == 'role' %}
                    <div class="custom-control custom-checkbox custom-control-inline">
                        {{ field }}
                    </div>
                    {% else %}
                    {{ field|add_class:"form-control" }}
                    {% endif %}
                    {% if field.errors %}
                    <div class="text-danger mt-1">{{ field.errors }}</div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </section>


        <!-- اطلاعات خصوصی -->
        <section class="form-section mb-4">
            <h3 class="h5">اطلاعات خصوصی</h3>
            <div class="row">
                {% for field in private_info_form %}
                <div class="col-md-3 col-sm-6 col-12 mb-3">
                    <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }} <span
                            class="text-danger"></span></label>
                    {{ field|add_class:"form-control" }}
                    {% if field.errors %}
                    <div class="text-danger mt-1">{{ field.errors }}</div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </section>

        <!-- اطلاعات تحصیلی -->
        <section class="form-section mb-4">
            <h3 class="h5">اطلاعات تحصیلی</h3>
            <div class="row">
                {% for field in edu_form %}
                <div class="col-md-3 col-sm-6 col-12 mb-3">
                    <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }} <span
                            class="text-danger"></span></label>
                    {{ field|add_class:"form-control" }}
                    {% if field.errors %}
                    <div class="text-danger mt-1">{{ field.errors }}</div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </section>

        <!-- اطلاعات دیگر -->
        <section class="form-section mb-4">
            <h3 class="h5">سایر اطلاعات</h3>
            <div class="row">
                {% for field in other_info_form %}
                <div class="col-md-3 col-sm-6 col-12 mb-3">
                    <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }} <span
                            class="text-danger"></span></label>
                    {{ field|add_class:"form-control" }}
                    {% if field.errors %}
                    <div class="text-danger mt-1">{{ field.errors }}</div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </section>

        <!-- اطلاعات فرهنگی -->
        <section class="form-section mb-4">
            <h3 class="h5">اطلاعات فرهنگی</h3>
            <div class="row">
                {% for field in cultural_form %}
                <div class="col-md-3 col-sm-6 col-12 mb-3">
                    <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }} <span
                            class="text-danger"></span></label>
                    {{ field|add_class:"form-control" }}
                    {% if field.errors %}
                    <div class="text-danger mt-1">{{ field.errors }}</div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </section>

        <section class="form-section mb-4">
            <h3 class="h5">آدرس‌ها</h3>
            {{ address_formset.management_form }}
            <div class="address-container" id="address-container">
                {% for form in address_formset %}
                <div class="address-form mb-3 p-3 border rounded shadow-sm">
                    <div class="row">
                        <!-- فیلد typee -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="{{ form.typee.id_for_label }}" class="form-label">{{ form.typee.label }}</label>
                            {{ form.typee|add_class:"form-control" }}
                            {% if form.typee.errors %}
                            <div class="text-danger mt-1">{{ form.typee.errors }}</div>
                            {% endif %}
                        </div>
        
                        <!-- فیلد address -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="{{ form.address.id_for_label }}" class="form-label">{{ form.address.label }}</label>
                            {{ form.address|add_class:"form-control" }}
                            {% if form.address.errors %}
                            <div class="text-danger mt-1">{{ form.address.errors }}</div>
                            {% endif %}
                        </div>
        
                        <!-- فیلد postal_code -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="{{ form.postal_code.id_for_label }}" class="form-label">{{ form.postal_code.label }}</label>
                            {{ form.postal_code|add_class:"form-control" }}
                            {% if form.postal_code.errors %}
                            <div class="text-danger mt-1">{{ form.postal_code.errors }}</div>
                            {% endif %}
                        </div>
        
                        <!-- فیلد tell -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="{{ form.tell.id_for_label }}" class="form-label">{{ form.tell.label }}</label>
                            {{ form.tell|add_class:"form-control" }}
                            {% if form.tell.errors %}
                            <div class="text-danger mt-1">{{ form.tell.errors }}</div>
                            {% endif %}
                        </div>
        
                        <!-- فیلد location -->
                        <div class="col-md-6 col-12 mb-3">
                            <label for="{{ form.location.id_for_label }}" class="form-label">{{ form.location.label }}</label>
                            {{ form.location|add_class:"form-control" }}
                            {% if form.location.errors %}
                            <div class="text-danger mt-1">{{ form.location.errors }}</div>
                            {% endif %}
                        </div>
                    </div>
        
                    {% if form.instance.pk %}
                    <div class="form-check">
                        {{ form.DELETE }}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            <button type="button" class="btn btn-success" id="add-address">افزودن آدرس</button>
        </section>
        
        <script>
            // اضافه کردن فرم‌های آدرس داینامیک
            document.getElementById('add-address').addEventListener('click', function () {
                let formCount = document.getElementById('id_form-TOTAL_FORMS');
                let currentCount = parseInt(formCount.value);

                // کپی کردن فرم آدرس اولیه
                let newForm = document.querySelector('.address-form').cloneNode(true);

                // تغییر id و name فیلدها به شکلی که به صورت داینامیک کار کنند
                newForm.innerHTML = newForm.innerHTML.replace(/-0-/g, `-${currentCount}-`);
                newForm.querySelectorAll('input, select, textarea').forEach(input => {
                    if (input.type !== 'hidden') {
                        input.value = '';
                    }
                });

                document.getElementById('address-container').appendChild(newForm);
                formCount.value = currentCount + 1;
            });
        </script>


        <!-- دکمه‌ها -->
        <div class="form-footer d-flex justify-content-between mt-3">
            <button type="submit" class="btn btn-primary">اضافه کردن</button>
            <a href="/meeting/council_members" class="btn btn-secondary">بازگشت</a>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('.jali').persianDatepicker({
            format: 'YYYY/MM/DD', // فرمت تاریخ شمسی
            initialValue: false,  // اگر می‌خواهید مقدار اولیه به‌صورت خودکار تنظیم شود، این را true کنید
            calendarType: 'jalali', // استفاده از تقویم جلالی
        });
    });
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll("input[name$='DELETE']").forEach(function(el) {
            el.checked = true;
        });
    });
</script>

<script>
    // Persian Datepicker
    $(document).ready(function () {
        $('.jali').persianDatepicker({
            format: 'YYYY/MM/DD',
            autoClose: true,
            theme: 'blue',
            initialValue: false,
            altField: '.jalali_date',
            altFormat: 'YYYY/MM/DD',
            closeAfterSelect: true,
            calendarType: 'persian',
            minDate: new Date(),
            maxDate: '2050/12/30',
            yearRange: [1300, 1450],
        });
    });

    // اضافه کردن فرم‌های آدرس داینامیک
    document.getElementById('add-address').addEventListener('click', function () {
        let formCount = document.getElementById('id_form-TOTAL_FORMS');
        let currentCount = parseInt(formCount.value);

        let newForm = document.querySelector('.address-form').cloneNode(true);
        newForm.innerHTML = newForm.innerHTML.replace(/-0-/g, `-${currentCount}-`);
        newForm.querySelectorAll('input, select, textarea').forEach(input => {
            if (input.type !== 'hidden') {
                input.value = '';
            }
        });

        document.getElementById('address-container').appendChild(newForm);
        formCount.value = currentCount + 1;
    });
</script>

<style>
    .text-danger {
    color: red;
    font-weight: bold;
}

    .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
        background-color: #007bff;
        border-color: #007bff;
        /* رنگ مرز */
    }

    .custom-checkbox .custom-control-label::before {
        border-radius: 0.25rem;
        background-color: #f8f9fa;
        /* رنگ پس‌زمینه پیش‌فرض */
        border-color: #ced4da;
        /* رنگ مرز پیش‌فرض */
    }

    .custom-checkbox .custom-control-label {
        padding-left: 1.5rem;
        position: relative;
    }

    .custom-checkbox .custom-control-label::before {
        position: absolute;
        top: 0.25rem;
        left: -1.5rem;
        width: 1rem;
        height: 1rem;
        border-radius: 0.25rem;
        content: '';
        background-color: #fff;
        border: 1px solid #ced4da;
    }


    /* استایل کلی فرم‌ها */
    .user-form {
        background-color: #f9f9f9;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* عنوان فرم */
    .user-form h3.h5 {
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
    }

    /* استایل برای هر بخش فرم */
    .form-section {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .form-section h3 {
        font-size: 18px;
        margin-bottom: 15px;
        color: #0056b3;
    }

    /* استایل ورودی‌ها */
    .form-control {
        padding: 10px;
        font-size: 16px;
        border-radius: 8px;
        border: 1px solid #ccc;
        margin-top: 5px;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

    /* استایل برای برچسب‌ها */
    .form-label {
        font-weight: 600;
        font-size: 16px;
    }

    /* استایل برای خطاهای فرم */
    .text-danger {
        font-size: 14px;
        color: #e74c3c;
        margin-top: 5px;
    }

    /* دکمه‌ها */
    .btn-primary,
    .btn-secondary,
    .btn-success {
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 8px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .btn-primary {
        background-color: #007bff;
        border: none;
    }

    .btn-primary:hover {
        background-color: #0056b3;
    }

    .btn-secondary {
        background-color: #6c757d;
        border: none;
    }

    .btn-secondary:hover {
        background-color: #5a6268;
    }

    .btn-success {
        background-color: #28a745;
        border: none;
    }

    .btn-success:hover {
        background-color: #218838;

    }

/* استایل برای نمایش در لپ‌تاپ‌ها و دستگاه‌های بزرگتر */
.form-check-inline {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* تعداد ستون‌ها */
    gap: 20px; /* فاصله بین چک‌باکس‌ها */
    align-items: center; /* چینش عمودی برای هم‌راستا کردن چک‌باکس‌ها */
}

.form-check-inline label {
    display: flex;
    align-items: center; /* چک‌باکس و متن در کنار هم قرار بگیرند */
}

.form-check-inline input[type="checkbox"] {
    margin-right: 5px; /* فاصله کمتر چک‌باکس از متن */
}

/* استایل برای نمایش در گوشی‌های موبایل */
@media (max-width: 768px) {
    .form-check-inline {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* تغییر تعداد ستون‌ها در موبایل */
        gap: 10px; /* فاصله کمتر در موبایل */
    }

    .form-check-inline label {
        justify-content: start; /* برچسب‌ها به سمت چپ در موبایل */
    }
}



    .form-check {
        display: flex;
        justify-content: flex-start;
        margin-right: 10px;
    }
    
</style>
{% endblock %}