Sindbad~EG File Manager

{% extends 'Backoffice/bo_layout.html' %}
{% block title %}Page{% endblock %}
{% block content %}
<!-- <div class="container d-flex justify-content-center "> -->
<div class="card p-3 mt-5">
    <form id="pageform">
        <input type="hidden" id="page_id" value="{{data.page_id or 0 }}" >
        <div class="row">
            <div class="col-12 mb-4 text-center">
                <h1>Page</h1>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-2 col-sm-12">
                <label ><b>Page Type <span class="text-danger">*</span> :</b></label>
            </div>
            <div class="col-md-4 col-sm-12">
                <select name="page_type" class="form-select" id="page_type">
                    <option value="">Select</option>
                    <option value="html" {% if data.page_type=="html" %}selected{% endif %}>HTML</option>
                    <option value="pdf" {% if data.page_type=="pdf" %}selected{% endif %}>PDF</option>
                    <option value="url" {% if data.page_type=="url" %}selected{% endif %}>URL</option>
                    <option value="download" {% if data.page_type=="download" %}selected{% endif %}>DOWNLOAD</option>
                </select>
            </div>
        </div>
        
        <div class="row mb-4" id="htmlupload">
            <div class="col-md-6 col-sm-12">
                <div>
                    <label ><b>Page data <span class="text-danger">*</span> :</b></label>
                </div>
                <div>
                    <textarea id="page_data" name="page_data" type="text" class="form-control" rows="15" cols="50">{{data.page_data or ''}}</textarea>
                </div>
            </div>

            <div class="col-md-6 col-sm-12 mt-md-0 mt-sm-3" id="previewct">
                <label for="previewScreen"><b>Preview :</b></label>
                <div id="previewScreen" name="previewScreen" type="text" class="form-control"></div>
            </div>
        </div>

        <div class="row mb-4" id="pdfupload">
            <div class="col-md-2 col-sm-12" >
                <label for="page_data2"><b>Upload File <span class="text-danger">*</span> :</b></label>
            </div>
            <div class="col-md-4 col-sm-12">
                <input type="file" id="pdfInput" name="pdfInput" accept="application/pdf">
                <textarea id="page_data2" name="page_data2" type="text" class="form-control" rows="12" cols="50" hidden>{{data.page_data or ''}}</textarea>
            </div>
        </div>

        <div class="row mb-4" id="pdfpreview">

            <div class="col-md-6 col-sm-12" id="previewct2">
                <label for="previewScreen"><b>Preview :</b></label>
                <div id="previewScreen2" name="previewScreen"  class="form-control"></div>
            </div>
        </div>

        
        <div class="row mb-4" id="urlct">
            <div class="col-md-2 col-sm-12 ">
                <label ><b>Url <span class="text-danger">*</span> :</b></label>
            </div>
            <div class="col-md-4 col-sm-12">
                <input id="urlData" name="urlData" type="text" class="form-control" value="{{data.page_data or ''}}">
            </div>
        </div>

        <div class="row mb-4" id="downloadct">
            <div class="col-md-2 col-sm-12 ">
                <label ><b>Download <span class="text-danger">*</span> :</b></label>
            </div>
            <div class="col-md-4 col-sm-12">
                <input id="DownloadData" name="DownloadData" type="text" class="form-control" value="{{data.page_data or ''}}">
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-2 col-sm-12 ">
                <label ><b>Page name <span class="text-danger">*</span> :</b></label>
            </div>
            <div class="col-md-4 col-sm-12">
                <input id="page_name" name="page_name" type="text" class="form-control" value="{{data.page_name or ''}}">
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-2 col-sm-4 ">
                <label for="is_visible"><b>IsVisible :</b></label>
            </div>
            <div class="col-md-4 col-sm-1 mt-2">
                <input type="checkbox" name="is_visible" id="is_visible" {% if data.is_visible==1 %} checked {% endif %}><br>
            </div>
            <div class="col-md-2 col-sm-12 offset-md-4 offset-sm-8 mt-sm-4">
                <button type="button" id="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>


    </form>
    <!-- <hr> -->
    <form id="form2" class="mb-5">

    </form>
</div>
<!-- </div>

     </div> -->
{% endblock %}


{% block script %}
<!-- 
    <script src="/static/js/jquery.min.js" charset="utf-8"></script>
    <script src="/static/js/jquery.validate.js" charset="utf-8"></script>
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->

<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js"></script> -->

<script>
    $(document).ready(function () {

        var dt = "{{data}}"
        var pg = "{{data.page_id}}"
        var pgtype = "{{data.page_type}}"
        var selected_images = [];
        var selected_images2 = [];
        var pageData = {
            "page_id": null,
            "page_name": null,
            "is_visible": null
        };
        var menu_update_st = {"status": null}

        $('#previewScreen').click(function () {
            var page_data = $('#page_data').val();
            $('#previewScreen').html(page_data)
        });

        if(dt !== "None"){
            clear_input()
            $('#submit').hide()

        }

        if(pgtype=="pdf"){
            $("#page_type").prop('disabled', true);
            $("#page_name").attr('readonly', true);
            $("#htmlupload").hide();
            $("#downloadct").hide();
            $("#urlct").hide();
            $("#pdfupload").show();
            $("#pdfpreview").show();
            $('#previewScreen2').html(
                `<embed src="data:application/pdf;base64,{{data.page_data or ''}}" type="application/pdf" width="100%" height="100%">`
            );
        }else if(pgtype=="url"){
            $("#htmlupload").hide();
            $("#pdfupload").hide();
            $("#pdfpreview").hide();
            $("#downloadct").hide();
            $("#urlct").show();
        }else if(pgtype=="download"){
            $("#htmlupload").hide();
            $("#pdfupload").hide();
            $("#pdfpreview").hide();
            $("#urlct").hide();
            $("#downloadct").show();
        }else if(pgtype=="html"){
            $("#htmlupload").show();
            $("#pdfupload").hide();
            $("#pdfpreview").hide();
            $("#urlct").hide();
            $("#downloadct").hide();
        }else{
            $("#htmlupload").hide();
            $("#pdfupload").hide();
            $("#pdfpreview").hide();
            $("#urlct").hide();
            $("#downloadct").hide();
        }

        var page_data_st ={
            page_st:null
        }

        function clear_input() {
            if(dt !== "None"){
                if(pgtype=="pdf"){
                    $("#urlData").val("")
                    $("#DownloadData").val("")
                    $("#page_data").val("")

                }
                else if(pgtype=="url"){
                    $("#page_data2").val("")
                    $("#DownloadData").val("")
                    $("#page_data").val("")
                }
                else if(pgtype=="download"){
                    $("#page_data2").val("")
                    $("#urlData").val("")
                    $("#page_data").val("")
                }
                else if(pgtype=="html"){
                    $("#page_data2").val("")
                    $("#urlData").val("")
                    $("#DownloadData").val("")

                }

            }
            else{
                $("#page_data2").val("")
                $("#urlData").val("")
                $("#DownloadData").val("")
                $("#page_data").val("")
                $("#page_name").val('');
            }
        }

        $('#page_type').on('change', function () {
            var page_type = $("#page_type").val()
            page_data_st.page_st = null
            clear_input()
            if(page_type == "pdf"){
                $("#htmlupload").hide();
                $("#downloadct").hide();
                $("#urlct").hide();
                $("#pdfupload").show();
                $("#pdfpreview").show();
                $("#page_name").attr('readonly', true);
            }else if(page_type=="url"){
                $("#htmlupload").hide();
                $("#pdfupload").hide();
                $("#pdfpreview").hide();
                $("#downloadct").hide();
                $("#urlct").show();
                $("#page_name").attr('readonly', false);
            }else if(page_type=="download"){
                $("#htmlupload").hide();
                $("#pdfupload").hide();
                $("#pdfpreview").hide();
                $("#urlct").hide();
                $("#downloadct").show();
                $("#page_name").attr('readonly', false);
            }else if(page_type=="html"){
                $("#htmlupload").show();
                $("#pdfupload").hide();
                $("#pdfpreview").hide();
                $("#urlct").hide();
                $("#downloadct").hide();
                $("#page_name").attr('readonly', false);
            }else{
                $("#htmlupload").hide();
                $("#pdfupload").hide();
                $("#pdfpreview").hide();
                $("#urlct").hide();
                $("#downloadct").hide();
                $("#page_name").attr('readonly', false);
            }
        });

        $('#pdfInput').on('change', function (event) {
                const file = event.target.files[0];
                if (file && file.type === 'application/pdf') {
                let FileName = file.name.replaceAll(" ", "_");
                $("#page_name").val(FileName);
                $("#page_name-error").html('');
                const reader = new FileReader();
                reader.onload = function (e) {
                    const base64String = e.target.result.split(',')[1];
                    $('#page_data2').val(base64String);
                    const pdfDataUrl = e.target.result;
                    $('#previewScreen2').html(
                    `<embed src="${pdfDataUrl}" type="application/pdf" width="100%" height="100%">`
                    );
                };
                reader.readAsDataURL(file); // Read file as Base64 Data URL
                } else {
                alert('Please upload a valid PDF file.');
                }
            });

        $("#page_name").keyup(function (){
            let FileName = $(this).val().replaceAll(" ", "_");
            $("#page_name").val(FileName)
        });

        var updateStatus ={
            page : false,
            menu : false
        }

        $('#submit').click(function () {
            validation()
            if(pgtype){
                $("#pdfInput").rules("remove");
            }
            if($("#page_data2").val().trim()!==""){
                page_data_st.page_st= $("#page_data2").val()
            }else if($("#urlData").val().trim()!==""){
                page_data_st.page_st= $("#urlData").val()
            }else if($("#DownloadData").val().trim()!==""){
                page_data_st.page_st= $("#DownloadData").val()
            }else if($("#page_data").val().trim()!==""){
                page_data_st.page_st= $("#page_data").val()
            }else{
                page_data_st.page_st = null
            }
            if ($("#pageform").valid()) {
                var page_data = $("#page_data").val()
                var page_type = $("#page_type").val();
                var page_name = $("#page_name").val();
                var is_visible = $("#is_visible").prop("checked");
                var as_id = "{{as_id}}";
                // var conf_key = "{{conf_key}}";
                var action = ""
                var page_id = $("#page_id").val();
                if (dt !== "None") {
                    action = "update";
                }
                $.ajax({
                    type: "POST",
                    url: "/upload_page/" + as_id ,
                    data: {
                        page_type: page_type,
                        page_data: page_data_st.page_st,
                        page_name: page_name,
                        is_visible: is_visible,
                        action: action,
                        page_id: page_id
                    },
                    dataType: "json",
                    success: function (data2) {
                        if (data2.action) {
                            if (dt == "None") {
                                alert(data2.action)
                                    
                            }
                            
                            // console.log(data2)
                            pageData.page_id = data2.PageData.page_id
                            pageData.page_name = data2.PageData.page_name
                            pageData.is_visible = data2.PageData.is_visible
                            var menuData=data2.menuData
                            // alert(menuData)
                            if(menuData){
                                if (dt !== "None") {
                                    $('#submit').hide()
                                }
                                else{
                                    getMenuAsset();
                                    $('#submit').hide()
                                    updateStatus.page = true
                                }

   
                            }
                            else{
                                alert('Page insert successfully!\n menu table has no data')
                            }
                            
                        } else {
                            if (dt == "None") {
                                alert(data2.msg)
                                    
                            }
                            
                        }


                    },
                });
            }
            else {return false}

        });

        function validation() {
            errorClass:'error',
            $("#pageform").validate({
                rules: {
                    page_type: {
                        required: true,
                    },
                    page_data: {
                        required: true,
                    },
                    page_name: {
                        required: true,
                    },
                    DownloadData:{
                        required: true,
                    },
                    pdfInput:{
                        required: true,
                    },
                    urlData:{
                        required: true,
                    }
                },
                messages: {
                    page_type: {
                        required: "Please select page type",
                    },
                    page_data: {
                        required: "Please enter the page data",
                    },
                    page_name: {
                        required: "please enter the page name",
                    },
                    DownloadData:{
                        required: "please enter the download data",
                    },
                    pdfInput:{
                        required: "please select the file",
                    },
                    urlData:{
                        required: "please enter the url data",
                    }
                },
                highlight: function(element) {
                $(element).parent().addClass('error')
                },
                unhighlight: function(element) {
                $(element).parent().removeClass('error')
                },
                submitHandler: function(form) {
                $('#pageform').submit();
                }
            });
        }

        if (dt !== "None") {
            getMenuAsset(page_id);
            
        }
        
        function getMenuAsset(ac) {
            var as_id = "{{as_id}}";
            // var conf_key = "{{conf_key}}";
            var action = ""
            var page_id = $('#page_id').val()

            if (page_id != 0) {
                action = "update";
                pageData.page_id = page_id
            }
            $.ajax({
                type: "GET",
                url: "/menu_asset/" + as_id ,
                data: {
                    page_id: pageData.page_id,
                    action: action
                },
                dataType: "json",
                success: function (data) {
                    $("#form2").html(data.html)
                    if (dt !== "None") {
                        $('#insert_menu').hide()
                        
                        if($('#update_dt').val() == 2){
                            
                            $('#insert_menu').show()
                        }
                        
                    }
                   

                }
            });
        }

        $("#form2").on("click", "#search_btn", function () {
            var search = $("#search").val().trim();
            var as_id = "{{as_id}}";
            // var conf_key = "{{conf_key}}";
            if (search.length == 0) {
                alert("Please enter a search term");
            } else {
                $.ajax({
                    type: "GET",
                    url: "/search_asset/" + as_id ,
                    data: {page_id: pageData.page_id,search_val: search},
                    dataType: "json",
                    success: function (data) {
                        $('#myModal').modal('hide');
                        $("#myModal").remove()
                        $("#form2").append(data.html)
                        $('#myModal').modal('show')
                    }
                });
            }
        });

        $("#form2").on("click",".modal-body",function(){
            $("input.image_select:checked").each(function () {
                $(this).closest(".imgCT2").addClass("active")
            })
            $("input.image_select").not(":checked").each(function () {
                $(this).closest(".imgCT2").removeClass("active")
            })
        })

        $("#form2").on("click", "#map_asset_page", function () {

            if ($("input.image_select:checked").length == 0) {
                alert("Please select the images");
            } else {
                $("input.image_select:checked").each(function () {
                    if (!selected_images.includes($(this).attr("id"))) {
                        selected_images.push($(this).attr("id"));

                    }
                });

                var as_id = "{{as_id}}";
                // var conf_key = "{{conf_key}}";
                var action = "";
                var page_id = $('#page_id').val();

                if (page_id != 0) {
                    action = "update";
                    $.ajax({
                        type: "POST",
                        url: "/map_asset_page/" + as_id ,
                        dataType: "json",
                        data: {
                            page_asset: selected_images,
                            page_id: pageData.page_id,
                            action: action
                        },
                        success: function (data2) {
                            alert(data2.msg)
                            if (data2.resaction == "update") {
                                $('#myModal').modal('hide');
                                getMenuAsset(data2.resaction)
                                selected_images = []
                            } else {}
                        }

                    })

                }
                else {
                    if (menu_update_st.status == true) {
                        $.ajax({
                            type: "POST",
                            url: "/map_asset_page/" + as_id,
                            dataType: "json",
                            data: {
                                page_asset: selected_images,
                                page_id: pageData.page_id,
                                action: action
                            },
                            success: function (data2) {
                                alert(data2.msg)
                                if (data2.resaction == "update") {
                                    $('#myModal').modal('hide');
                                    getMenuAsset(data2.resaction)
                                } else {
                                    window.location.href = data2.redirect;
                                }
                            },
                        })

                    } else {
                        alert("Please map menu title");
                    }
                }
            }

        });
        
        $("#form2").on("click", "#delete_asset_page_map", function () {
            if ($("input.image_select2:checked").length == 0) {
                alert("Please select the images");
            } else {

                $("input.image_select2:checked").each(function () {
                    if (!selected_images2.includes($(this).attr("id"))) {
                        selected_images2.push($(this).attr("id"));
                    }
                });

                var as_id = "{{as_id}}";
                // var conf_key = "{{conf_key}}";
                var action = "";

                if (dt !== "None") {
                    action = "delete";
                }

                $.ajax({
                    type: "POST",
                    url: "/delete_map_asset_page/" + as_id,
                    dataType: "json",
                    data: {
                        page_asset: selected_images2,
                        page_id: pageData.page_id,
                        action: action
                    },
                    success: function (data2) {
                        alert(data2.msg)
                        if (data2.resaction == "delete") {
                            getMenuAsset(data2.resaction)
                            selected_images2 = [];
                        } else {}
                    },
                })

            }
        });

        $("#form2").on("change", "#menu_title", function () {
            $("#menu_title").trigger("input").valid();
        })

        $("#form2").on("click", "#insert_menu", function () {
            $("#form2").validate({
                rules: {
                    menu_title: {
                        required: true,
                    },
                },
                messages: {
                    menu_title: {
                        required: "Please select menu title",
                    },
                },
            })
            if ($("#form2").valid()) {

                var menu_title = $('#menu_title').val();
                var as_id = "{{as_id}}";
                // var conf_key = "{{conf_key}}";
                var action = ""
                if (dt !== "None") {
                    action = "update";
                }
                $.ajax({
                    type: "POST",
                    url: "/menu_asset/" + as_id ,
                    dataType: "json",
                    data: {
                        menu_title: menu_title,
                        page_asset: selected_images,
                        page_id: pageData.page_id,
                        action: action
                    },
                    success: function (data2) {
                        updateStatus.menu = true;
                        if (dt == "None") {
                            alert(data2.msg)
                            menu_update_st.status = data2.menu_update_st;

                        }
                        else{
                            if(data2.menu_update_st == true){
                                alert("Page data updated")
                            }
                           
                        }

                    }
                })
            }
        })

        $("#form2").on("click","#update_data",function() {
            $('#submit').trigger("click")
            $('#insert_menu').trigger("click")
        })


    });



</script>
{% endblock %}