{% extends 'auth_base.html' %}
{% load static %}

{% block extra_css %}

<link href="{% static 'vendor/jquery/select2.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/jquery/persian-datepicker.min.css' %}" rel="stylesheet">

<style>
    /* =========================
   WRAPPER
========================= */
    .form-wrapper {
        max-width: 560px;
        margin: 70px auto;
        background: rgba(255, 255, 255, 0.97);
        padding: 35px;
        border-radius: 22px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    }

    .form-wrapper h2 {
        text-align: center;
        margin-bottom: 25px;
        font-weight: bold;
    }

    label {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }

    /* inputs */
    input,
    select,
    textarea {
        width: 100%;
        height: 45px;
        border-radius: 12px;
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 10px;
        transition: 0.2s;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
        outline: none;
    }

    /* button */
    .btn-success {
        width: 100%;
        border-radius: 12px;
        padding: 10px;
        font-weight: bold;
        background: #28a745;
        color: white;
        border: none;
    }

    /* file */
    .file-item {
        border: 1px dashed #ccc;
        padding: 12px;
        border-radius: 12px;
        margin-bottom: 12px;
        position: relative;
        background: #fafafa;
    }

    .file-remove {
        position: absolute;
        top: 8px;
        left: 10px;
        color: red;
        cursor: pointer;
        font-size: 12px;
    }

    /* preview */
    .file-preview {
        font-size: 13px;
        margin-top: 8px;
    }

    /* poster */
    #poster-preview {
        max-width: 100%;
        margin-top: 10px;
        display: none;
        border-radius: 10px;
    }

    /* =========================
   PROGRESS BAR
========================= */
    .progress-bar-wrap {
        width: 100%;
        height: 7px;
        background: #eee;
        border-radius: 10px;
        margin-top: 8px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        width: 0%;
        background: #28a745;
        transition: width 0.2s;
    }

    /* =========================
   SELECT2 ROUND STYLE FIX
========================= */
    .select2-container--default .select2-selection--single {
        height: 45px !important;
        border-radius: 12px !important;
        border: 1px solid #ddd !important;
        display: flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
    }

    .select2-container--default .select2-selection--single:focus {
        border-color: #667eea !important;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
    }

    .select2-selection__rendered {
        line-height: 30px !important;
        padding-right: 10px !important;
    }

    .select2-selection__arrow {
        height: 45px !important;
    }
</style>

{% endblock %}

{% block content %}

<div class="form-wrapper">

    <h2><i class="fa-solid fa-upload"></i> بارگزاری مراسم</h2>

    <form method="post">
        {% csrf_token %}
        {{ form.errors }}

        <label>نام مراسم</label>
        {{ form.title }}

        <label>دسته‌بندی</label>
        <select id="category-tree" name="category"></select>
        <label>مناسبت</label>

        <select name="occasion" id="occasion-select">
            <option value="">انتخاب مناسبت</option>
            {% for o in occasions %}
            <option value="{{ o.id }}">{{ o.title }}</option>
            {% endfor %}
        </select>
        <label>پوستر</label>
        <input type="file" id="poster-upload">
        <input type="hidden" name="poster" id="poster-path">
        <img id="poster-preview">

        <label>تاریخ</label>
        <input type="text" name="date" id="date-fa">

        <hr>

        <h4><i class="fa-solid fa-file-circle-plus"></i> فایل‌های مراسم</h4>

        <div id="files-container"></div>

        <button type="button" id="add-file" class="btn btn-secondary">
            + افزودن فایل
        </button>

        <br><br>

        <button type="submit" id="submit-btn" class="btn btn-success"  >
            ذخیره مراسم
        </button>

    </form>

</div>

{% endblock %}

{% block extra_js %}

<script src="{% static 'vendor/jquery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'vendor/jquery/select2.min.js' %}"></script>
<script src="{% static 'vendor/jquery/persian-date.min.js' %}"></script>
<script src="{% static 'vendor/jquery/persian-datepicker.min.js' %}"></script>




<script>
    $(function () {

        // =========================
        // UPLOAD STATE (FIXED)
        // =========================
        let uploadCount = 0;
        let uploadedDone = 0;

        function checkReady() {

            // اگر هیچ فایلی نیست
            if (uploadCount <= 0) {
                $('#submit-btn').prop('disabled', false);
                return;
            }
            // اگر هنوز آپلودها کامل نشده
            $('#submit-btn').prop('disabled', uploadCount !== uploadedDone);
        }


        // =========================
        // CATEGORY TREE
        // =========================
        function flatten(data, level = 0) {
            let res = [];
            data.forEach(i => {
                res.push({
                    id: i.id,
                    text: "▸".repeat(level) + i.text,
                    disabled: i.disabled
                });
                if (i.children) {
                    res = res.concat(flatten(i.children, level + 1));
                }
            });
            return res;
        }

        $('#category-tree').select2({
            placeholder: "انتخاب دسته‌بندی",
            width: "100%",
            minimumResultsForSearch: Infinity,
            ajax: {
                url: "{% url 'category_tree' %}",
                dataType: "json",
                processResults: d => ({ results: flatten(d) })
            }
        });


        // =========================
        // FILE BLOCK
        // =========================
        function fileBlock() {
            return `
    <div class="file-item">
        <span class="file-remove">✖</span>

        <select name="file_type[]">
            <option value="image">Image</option>
            <option value="video">Video</option>
            <option value="audio">Audio</option>
         </select>
        <select name="file_style[]">
            <option value="zamineh">زمینه</option>
            <option value="shoore">شور</option>
            <option value="namahanag">نماهنگ</option>
            <option value="rozeh">روضه</option>
            <option value="naghmeh">نغمه</option>
            <option value="vahed">واحد</option>
            <option value="tak">تک</option>
            <option value="noheh">نوحه</option>


        </select>

        <input type="text" name="file_title[]" placeholder="عنوان">
<label style="font-size:12px">تگ‌ها</label>
<select name="tags[]" class="tags-select" multiple="multiple" style="width:100%"></select>




<input type="hidden"
       name="is_pin[]"
       class="is-pin-hidden"
       value="False">

<label style="font-size:12px">پین؟</label>
<input type="checkbox"
       class="is-pin">

<label style="font-size:12px">مناسبت</label>
<select name="file_occasion[]" class="file-occasion">
    <option value="">انتخاب مناسبت</option>
    {% for o in occasions %}
    <option value="{{ o.id }}">{{ o.title }}</option>
    {% endfor %}
</select>
        <label style="font-size: 12px;"> (فقط صوت)کاور بالای سایت </label>
        <input type="file" class="cover-desktop-upload">
        <input type="hidden" name="cover_desktop_path[]" class="cover-desktop-path">

        <label style="font-size: 12px;">کاور اصلی</label>
        <input type="file" class="cover-upload">
        <input type="hidden" name="cover_path[]" class="cover-path">
        <input type="hidden" name="thumbnail[]" class="thumbnail-path">
        <label style="font-size: 12px;">فایل</label>
        <input type="file" class="file-upload">
        <input type="hidden" name="file_path[]" class="file-path">

        <div class="progress-bar-wrap">
            <div class="progress-bar"></div>
        </div>

        <div class="file-preview"></div>
    </div>`;
        }

        $('#files-container').append(fileBlock());

        $('#add-file').click(function () {
            $('#files-container').append(fileBlock());
        });

        $(document).on('click', '.file-remove', function () {

            let item = $(this).closest('.file-item');

            // اگر هنوز در حال آپلود بوده
            if (item.data('uploading') === true) {
                uploadCount--;
            }

            // اگر قبلاً کامل شده بوده
            if (item.data('done') === true) {
                uploadedDone--;
            }

            item.remove();
            checkReady();
        });


        // =========================
        // FILE UPLOAD (FIXED + SAFE)
        // =========================
                $(document).on('change', '.cover-desktop-upload', function () {

            let input = $(this);
            let file = this.files[0];
            let item = input.closest('.file-item');

            let fd = new FormData();
            fd.append('file', file);
            fd.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            uploadCount++;
            item.data('uploading', true);

            $('#submit-btn').prop('disabled', true);

            item.find('.progress-bar').css('width', '0%');

            checkReady();

            $.ajax({
                url: "{% url 'upload' %}",
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,

                xhr: function () {
                    let xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener("progress", function (e) {
                        if (e.lengthComputable) {
                            let percent = Math.round((e.loaded / e.total) * 100);
                            item.find('.progress-bar').css('width', percent + '%');
                        }
                    });

                    return xhr;
                },

                success: function (res) {

                    uploadedDone++;

                    item.data('uploading', false);
                    item.data('done', true);

                    item.find('.cover-desktop-path').val(res.path);
                    item.find('.file-preview').html("✔ آپلود شد");

                    checkReady();
                },

                error: function () {

                    uploadCount--;
                    item.data('uploading', false);

                    item.find('.file-preview').html("❌ خطا در آپلود");

                    checkReady();
                }
            });
        });

        $(document).on('change', '.cover-upload', function () {

            let input = $(this);
            let file = this.files[0];
            let item = input.closest('.file-item');

            let fd = new FormData();
            fd.append('file', file);
                fd.append('type', 'cover');

            fd.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            uploadCount++;
            item.data('uploading', true);

            $('#submit-btn').prop('disabled', true);

            item.find('.progress-bar').css('width', '0%');

            checkReady();

            $.ajax({
                url: "{% url 'upload' %}",
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,

                xhr: function () {
                    let xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener("progress", function (e) {
                        if (e.lengthComputable) {
                            let percent = Math.round((e.loaded / e.total) * 100);
                            item.find('.progress-bar').css('width', percent + '%');
                        }
                    });

                    return xhr;
                },

                success: function (res) {

                    uploadedDone++;

                    item.data('uploading', false);
                    item.data('done', true);

                    item.find('.cover-path').val(res.poster);
                    // 🎯 thumbnail
                    item.find('.thumbnail-path').val(res.thumbnail);

                    item.find('.file-preview').html("✔ کاور + thumbnail ساخته شد");
                    checkReady();
                },

                error: function () {

                    uploadCount--;
                    item.data('uploading', false);

                    item.find('.file-preview').html("❌ خطا در آپلود");

                    checkReady();
                }
            });
        });

        $(document).on('change', '.file-upload', function () {

            let input = $(this);
            let file = this.files[0];
            let item = input.closest('.file-item');

            let fd = new FormData();
            fd.append('file', file);
            fd.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            uploadCount++;
            item.data('uploading', true);

            $('#submit-btn').prop('disabled', true);

            item.find('.progress-bar').css('width', '0%');

            checkReady();

            $.ajax({
                url: "{% url 'upload' %}",
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,

                xhr: function () {
                    let xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener("progress", function (e) {
                        if (e.lengthComputable) {
                            let percent = Math.round((e.loaded / e.total) * 100);
                            item.find('.progress-bar').css('width', percent + '%');
                        }
                    });

                    return xhr;
                },

                success: function (res) {

                    uploadedDone++;

                    item.data('uploading', false);
                    item.data('done', true);

                    item.find('.file-path').val(res.path);
                    item.find('.file-preview').html("✔ آپلود شد");

                    checkReady();
                },

                error: function () {

                    uploadCount--;
                    item.data('uploading', false);

                    item.find('.file-preview').html("❌ خطا در آپلود");

                    checkReady();
                }
            });
        });


        // =========================
        // POSTER UPLOAD
        // =========================
        $('#poster-upload').on('change', function () {

            let file = this.files[0];
            let fd = new FormData();

            fd.append('file', file);
            fd.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            $.ajax({
                url: "{% url 'upload' %}",
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,

                success: function (res) {
                    $('#poster-path').val(res.path);
                    $('#poster-preview').attr('src', res.path).show();
                }
            });
        });


        // =========================
        // DATE PICKER
        // =========================
        $('#date-fa').persianDatepicker({
            format: 'YYYY-MM-DD',
            autoClose: true
        });

    });


$('#occasion-select').select2({
    width: '100%'
});
$(document).on('click', '.file-occasion', function () {

    if ($(this).hasClass('select2-hidden-accessible')) {
        return;
    }

    $(this).select2({
        width: '100%'
    }).select2('open');
});

$(document).on('change', '.is-pin', function () {

    let hidden = $(this)
        .closest('.file-item')
        .find('.is-pin-hidden');

    if ($(this).is(':checked')) {
        hidden.val('True');
    } else {
        hidden.val('False');
    }
});
$(document).on('focus', '.tags-select', function () {
    if ($(this).hasClass("select2-hidden-accessible")) return;

    $(this).select2({
         width: "100%",
        ajax: {
            url: "{% url 'tag_search' %}",
            dataType: "json",
            delay: 250,
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: data.results
                };
            }
        }
    });
});
</script>

{% endblock %}