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

{% block extra_css %}

<style>

.form-wrapper{
    max-width:600px;
    margin:60px auto;
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
}

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

input,
select{
    width:100%;
    height:45px;
    border:1px solid #ddd;
    border-radius:12px;
    padding:10px;
    margin-bottom:15px;
}

.btn-success{
    width:100%;
    height:45px;
    border:none;
    border-radius:12px;
    background:#28a745;
    color:#fff;
    font-weight:bold;
}

.preview-image{
    width:200px;
    border-radius:10px;
    margin-top:10px;
    display:none;
}

#audio-preview{
    width:100%;
    margin-top:10px;
    display:none;
}

.progress-wrap{
    width:100%;
    height:8px;
    background:#eee;
    border-radius:20px;
    overflow:hidden;
    margin-top:10px;
}

.progress-bar{
    width:0%;
    height:100%;
    background:#28a745;
    transition:.2s;
}
.btn-success:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
</style>

{% endblock %}

{% block content %}

<div class="form-wrapper">

    <h2>ثبت پیشواز</h2>

    <form method="post">

        {% csrf_token %}

        {{ form.errors }}

        <label>عنوان</label>
        {{ form.title }}

        <label>کد ایرانسل</label>
        {{ form.code_mtn }}

        <label>کد همراه‌اول</label>
        {{ form.code_mci }}
        <label>مناسبت</label>
        {{ form.occasion }}

        <!-- COVER -->

        <label>کاور</label>

        <input type="file" id="cover-upload">

        <input type="hidden"
               name="cover"
               id="cover-path"
               value="{% if form.instance.cover %}{{ form.instance.cover }}{% endif %}">

        <img id="cover-preview"
             class="preview-image"
             src=" {{ form.instance.cover }} "
             style="{% if form.instance.cover %}display:block{% endif %}">

        <hr>

        <!-- AUDIO -->

        <label>فایل صوتی</label>

        <input type="file" id="audio-upload">

        <input type="hidden"
               name="audio_file"
               id="audio-path"
               value="{% if form.instance.audio_file %}{{ form.instance.audio_file }}{% endif %}">

        <audio id="audio-preview"
               controls
               style="{% if form.instance.audio_file %}display:block{% endif %}">
 
                <source src="{{ form.instance.audio_file }}">
 
        </audio>

        <!-- PROGRESS -->

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

        <br>

        <button type="submit"
                id="submit-btn"
                class="btn-success"
                disabled>

            ذخیره پیشواز

        </button>

    </form>

</div>

{% endblock %}

{% block extra_js %}

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

<script>

$(function () {

    let uploading = false;

    // =========================
    // CHECK SUBMIT
    // =========================
    function checkSubmit() {

        let coverOk = $('#cover-path').val();
        let audioOk = $('#audio-path').val();

        let ready = coverOk && audioOk && !uploading;

        $('#submit-btn').prop(
            'disabled',
            !ready
        );
    }

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

        let file = this.files[0];

        if (!file) return;

        let fd = new FormData();

        fd.append('file', file);

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

        uploading = true;

        checkSubmit();

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

        $.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 =
                                (e.loaded / e.total) * 100;

                            $('.progress-bar')
                                .css(
                                    'width',
                                    percent + '%'
                                );
                        }
                    }
                );

                return xhr;
            },

            success: function (res) {

                $('#cover-path')
                    .val(res.path);

                $('#cover-preview')
                    .attr('src', res.path)
                    .show();

                uploading = false;

                checkSubmit();
            },

            error: function () {

                uploading = false;

                alert('خطا در آپلود کاور');

                checkSubmit();
            }
        });
    });

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

        let file = this.files[0];

        if (!file) return;

        let fd = new FormData();

        fd.append('file', file);

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

        uploading = true;

        checkSubmit();

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

        $.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 =
                                (e.loaded / e.total) * 100;

                            $('.progress-bar')
                                .css(
                                    'width',
                                    percent + '%'
                                );
                        }
                    }
                );

                return xhr;
            },

            success: function (res) {

                $('#audio-path')
                    .val(res.path);

                $('#audio-preview')
                    .html(`
                        <source src="${res.path}">
                    `)
                    .show()[0]
                    .load();

                uploading = false;

                checkSubmit();
            },

            error: function () {

                uploading = false;

                alert('خطا در آپلود فایل صوتی');

                checkSubmit();
            }
        });
    });

    // =========================
    // INIT
    // =========================
    checkSubmit();

});

</script>

{% endblock %}