Sindbad~EG File Manager

{% extends 'Backoffice/bo_layout.html' %}
{% block title %}Tab Menu {% endblock %}
{% block content %}
<div class="container">
    <input type="hidden" name="" id="as_id" value="{{as_id}}">
    <input type="hidden" id="tab_id" name="tab_id" value="{{datas.tab_id}}">
    <form action="" id="tab_menu_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">Tab Menu</h3>
            </div>
        </div>
        <div class="row p-3">
            <div class="col"><label for="" class="form-label">Tab Name <span class="text-danger">*</span> :</label>
            </div>
            <div class="col"><input type="text" class="form-control tab_name" id="tab_name" name="tab_name" value="{{datas.tab_name}}">
            </div>
        </div>
        <div class="row p-3">
            <div class="col"><label for="" class="form-label">Tab Data :</label>
            </div>
            <div class="col"><input type="file" class="form-control tab_data" id="tab_data" name="tab_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.tab_data}}" alt="" id="tab_img" style="width: 100px; height: 150px;">
                {% else %}
                <img src="" alt="" id="tab_img" style="width: 100px; height: 150px;">
                {% endif %}
            </div>
        </div>
        <!-- <div class="row ">
            <div class="col-12"><textarea name="" id="tab_basecode" class="form-control"
                    hidden>{{datas.tab_data}}</textarea></div>
        </div> -->
        <div class="row p-3">
            <div class="col">
                <label for="" class="form-label">Tab Content :</label>
            </div>
            <div class="col">
                <input type="text" class="form-control tab_content" id="tab_content" name="tab_content" value="{{datas.tab_content}}" style="text-transform:lowercase;">
                
            </div>
            
        </div>
        
        <div class="row p-3">
            <div class="col"><label for="" class="form-label">Page Id :</label>
            </div>
            <div class="col">
                <input type="number" class="form-control page_id" id="page_id" name="page_id" value="{{datas.page_id}}">
            </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">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 mt-3 align-items-center">
            <div class="col"><a href="{{url_for('backoffice.ViewTabMenuIndex',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
        $("#tab_menu_form").validate({
            rules: {
                tab_name: {
                    required: true
                },
                // page_id: {
                //     required: true
                // },
                order_by: {
                    required: true
                },

            },
            messages: {
                tab_name: {
                    required: "Please enter a tab name"
                },
                // page_id: {
                //     required: "Please select an page id "
                // },
                order_by: {
                    required: "Please select an order by"
                },

            },
        });

        // Tab Data Image Hide And Show
        if ($("#tab_img").attr('src') == '') {
            $("#tab_img").hide();
        } else {
            $("#tab_img").show();
        }
        
    // Tab Data Input Change
        $('#tab_data').change(function () {
            var file = $("#tab_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;
                    $("#tab_img").attr('src', img_view).show();
                    // $("#tab_basecode").val(basecode);

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

    });

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

            var fd = new FormData();
            var tab_id = $("#tab_id").val();
            var as_id = $("#as_id").val();
            var tab_name = $("#tab_name").val();
            // var tab_basecode = $("#tab_basecode").val();
            var tab_file = $("#tab_data")[0].files[0];
            var tab_content = $("#tab_content").val();
            var page_id = $("#page_id").val();
            var is_visible = $("#is_visible").val();
            var order_by = $("#order_by").val();

            // fd.append('confid', confid);
            fd.append('tab_name', tab_name);
            fd.append('tab_file', tab_file);
            fd.append('tab_content', tab_content);
            fd.append('page_id', page_id);
            fd.append('is_visible', is_visible);
            fd.append('order_by', order_by);

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

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

                }
            });
        }
        else {
            return false;
        }

    });
</script>
{% endblock %}