Sindbad~EG File Manager

{% extends 'Backoffice/bo_layout.html' %}
{% block title %}Banner {% endblock %}
{% block content %}
<div class="container">
    <input type="hidden" name="" id="as_id" value="{{as_id}}">
    <input type="hidden" id="ban_id" value="{{datas.ban_id}}">
    <form action="" id="banner_form" class="p-5 text-dark" enctype="multipart/form-data">
        <div class="row p-2">
            <div class="col-12 text-center">
                <h3 class="text-center text-dark fw-bold">Banner</h3>
            </div>
        </div>
        <div class="row p-3">
            <div class="col"><label for="" class="form-label">Banner Name <span class="text-danger">*</span> :</label>
            </div>
            <div class="col"><input type="text" class="form-control banner_name" id="banner_name" name="banner_name"
                    value="{{datas.banner_name}}">
            </div>
        </div>
        <div class="row p-3">
            <div class="col"><label for="" class="form-label">Banner Data :</label>
            </div>
            <div class="col"><input type="file" class="form-control banner_data" id="banner_data" name="banner_data"
                    value="">
            </div>
        </div>
        <div class="row p-3">
            <div class="col"></div>
            <div class="col ms-2">
                {% if datas %}
                <img src="data:image;base64,{{datas.banner_data}}" alt="" id="banner_img"
                    style="width: 100px; height: 150px;">
                {% else %}
                <img src="" alt="" id="banner_img" style="width: 100px; height: 150px;">
                {% endif %}
            </div>
        </div>
        <!-- <div class="row ">
            <div class="col-12"><textarea name="" id="banner_basecode" class="form-control"
                    hidden>{{datas.banner_data}}</textarea></div>
        </div> -->
        <div class="row p-3">
            <div class="col"><label for="" class="form-label">Banner Type <span class="text-danger">*</span> :</label>
            </div>
            <div class="col"><select name="banner_type" id="banner_type" class="form-select banner_type">
                    <option value="image">Image</option>
                </select></div>
        </div>
        <div class="row p-3">
            <div class="col"><label for="" class="form-label">Order By <span class="text-danger">*</span> :</label>
            </div>
            <div class="col"><input type="number" class="form-control order_by" id="order_by" name="order_by"
                    value="{{datas.order_by}}"></div>
        </div>
        <div class="row p-3">
            <div class="col"><label for="" class="form-label">Is Visible</label></div>
            <div class="col">
                {% if datas and datas.is_visible|int==1 %}
                <input type="checkbox" class="form-check-input" name="is_visible" id="is_visible" checked value="1">
                {% elif datas and datas.is_visible|int==0 %}
                <input type="checkbox" class="form-check-input" name="is_visible" id="is_visible" value="0">
                {% else %}
                <input type="checkbox" class="form-check-input" name="is_visible" id="is_visible" checked value="1">
                {% endif %}
            </div>
        </div>
        <div class="row p-3">
            <div class="col"><label for="" class="form-label">Banner View</label></div>
            <div class="col"><input type="text" class="form-control banner_view" id="banner_view"
                    value="{{datas.banner_view or ''}}"></div>
        </div>
        <div class="row mt-3 align-items-center">
            <div class="col"><a href="{{url_for('backoffice.ViewBannerIndex',as_id=as_id)}}"
                    class="btn btn-primary ms-3 back_btn" id="back_btn">BACK</a>
            </div>
            <div class="col text-end">
                <button type="button" class="btn btn-primary" id="submit_btn">Submit</button>
            </div>
        </div>
    </form>
</div>
{% endblock %}
{% block script %}

<script type="text/javascript">
    var BaseUrl = document.location.origin;
    // var confkey = "{{conf_key}}"

    $(document).ready(function () {

    // Form Validate
        $("#banner_form").validate({
            rules: {
                banner_name: {
                    required: true
                },
                order_by: {
                    required: true
                },

            },
            messages: {
                banner_name: {
                    required: "Please enter a banner name"
                },
                order_by: {
                    required: "Please select an order by"
                },

            },
        });

    // Banner Data Image Hide And Show
        if ($("#banner_img").attr('src') == '') {
            $("#banner_img").hide();
        } else {
            $("#banner_img").show();
        }
        
    // Banner Data Input Change
        $('#banner_data').change(function () {
            var file = $("#banner_data")[0].files[0];
            if (file.type.startsWith("image/")) {
                var reader = new FileReader();
                reader.onload = function () {
                    // var basecode = reader.result.replace(/^data:image\/\w+;base64,/, "");
                    var img_view = reader.result;
                    $("#banner_img").attr('src', img_view).show();
                    // $("#banner_basecode").val(basecode);

                };
                reader.readAsDataURL(file);
            }
            else{
                alert("Sorry, we can only accept image files.")
            }
        });

    });

// Submit Button
    $("#submit_btn").click(function () {
        if ($("#banner_form").valid()) {
            if ($("#is_visible").is(":checked") == true) {
                $("#is_visible").val(1);
            }
            else {
                $("#is_visible").val(0);
            }

            var fd = new FormData();
            var ban_id = $("#ban_id").val();
            var as_id = $("#as_id").val();
            var banner_name = $("#banner_name").val();
            var banner_file = $("#banner_data")[0].files[0];
            var banner_type = $("#banner_type").val();
            var order_by = $("#order_by").val();
            var is_visible = $("#is_visible").val();
            var banner_view = $("#banner_view").val();

            // fd.append('confid', confid);
            fd.append('banner_name', banner_name);
            fd.append('banner_file', banner_file);
            fd.append('banner_type', banner_type);
            fd.append('order_by', order_by);
            fd.append('is_visible', is_visible);
            fd.append('banner_view', banner_view);

            $.ajax({
                url: BaseUrl + "/post_banner/" + ban_id + "/" + as_id,
                type: 'POST',
                data: fd,
                contentType: false,
                processData: false,
                cache: false,
                dataType: 'json',

                success: function (data) {
                    window.location.href = BaseUrl + "/view_banner/" + as_id;

                }
            });
        }
        else {
            return false;
        }

    });
</script>
{% endblock %}
<!-- </body>
</html> -->