<%@ Page Title="Kiosk Banner" Language="C#" MasterPageFile="~/SunMaster.Master" AutoEventWireup="true" CodeBehind="KioskBanner.aspx.cs" Inherits="SUNWEB.KioskBanner" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <style type="text/css">
         .overlay
        {
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 0;
            height: 100%;
            width: 100%;
            top: 0;
            background-color: White;
            filter: alpha(opacity=60);
            opacity: 0.9;
            -moz-opacity: 1;
        }
        
        .LoadingDivCss
        {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }
        
        .LoadingImgCss
        {
            height: 100px;
            width: 100px;
        }

        .container {
            padding: 50px 10%;
        }

        .box {
            position: relative;
            background: #ffffff;
            width: 100%;
        }

        .box-header {
            color: #444;
            display: block;
            padding: 10px;
            position: relative;
            border-bottom: 1px solid #f4f4f4;
            margin-bottom: 10px;
        }

        .drop-zone {
            /* max-width: 200px;*/
            max-width: 100%;
            height: 300px;
            padding: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: "Quicksand", sans-serif;
            font-weight: 500;
            font-size: 20px;
            cursor: pointer;
            color: #cccccc;
            border: 4px dashed #009578;
            border-radius: 10px;
        }

        .drop-zone--over {
            border-style: solid;
        }

        .drop-zone__input {
            display: none;
        }

        .drop-zone__thumb {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            background-color: #cccccc;
            background-size: cover;
            position: relative;
        }

            .drop-zone__thumb::after {
                content: attr(data-label);
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 5px 0;
                color: #ffffff;
                background: rgba(0, 0, 0, 0.75);
                font-size: 14px;
                text-align: center;
            }

        .hiddenimg {
            display: none;
        }

        .hiddentxt {
            font-weight: bold;
            color: #F00;
            z-index: 99;
        }

            .hiddentxt a {
                color: #F00;
                text-decoration: none;
                z-index: 99;
            }

            .hiddentxt:hover ~ .hiddenimg {
                width: 100px;
                display: block;
                position: absolute;
                z-index: 2
            }
    </style>
    <asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
        <ContentTemplate>
            <table style="width: 100%; padding-bottom: 2px;">
                <tr>
                    <td>
                        <h5>KIOSK Banner Image</h5>
                    </td>

                    <td align="right" style="padding-bottom: 7px;">
                        <asp:Label ID="lblcurrent_db" runat="server" Style="color: transparent"></asp:Label>
                        <label for="validationCustom03">
                            <asp:Label ID="Label1" ForeColor="Gray" runat="server" Text="Branch Name"></asp:Label></label>
                        <asp:DropDownList ID="cmbBranches" CssClass="custom-select" Width="210px"
                            runat="server" AutoPostBack="true"
                            OnSelectedIndexChanged="cmbBranches_SelectedIndexChanged">
                        </asp:DropDownList>
                    </td>
                </tr>
            </table>

            <div class="container-fluid" style="overflow-x: auto;">
                <table class="table table-striped table-hover table-bordered">
                    <thead>
                        <tr>
                            <th scope="col" class="d-none">id</th>
                            <th scope="col">#</th>
                            <th scope="col">Image</th>
                            <th scope="col">Edit</th>
                            <th scope="col">Availabe</th>
                            <th scope="col">Remove</th>

                        </tr>
                    </thead>
                    <tbody id="tblbody">
                    </tbody>
                </table>
                <button type="button" class="btn btn-primary btn-sm" id="btnAddImage">Add Image</button>
            </div>


            <div class="row d-none">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="form-row">
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                    <caption>
                                        <label for="validationCustom03">
                                            FROM DATE
                                        </label>
                                        <asp:TextBox ID="txtStartDt" class="form-control" runat="server"></asp:TextBox>
                                        <asp:CalendarExtender ID="calFirstDueDate" Format="yyyy-MM-dd" runat="server" TargetControlID="txtStartDt" PopupPosition="BottomLeft" FirstDayOfWeek="Sunday"></asp:CalendarExtender>
                                    </caption>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                    <label for="validationCustom03">
                                        TO DATE
                                    </label>
                                    <asp:TextBox ID="txtEndDt" class="form-control" runat="server"></asp:TextBox>
                                    <asp:CalendarExtender ID="CalendarExtender1" Format="yyyy-MM-dd" runat="server" TargetControlID="txtEndDt" PopupPosition="BottomLeft" FirstDayOfWeek="Sunday"></asp:CalendarExtender>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                    <label for="validationCustom03">
                                        <asp:Label ID="lblBranchAliasName" ForeColor="Gray" runat="server" Text="Branch Name"></asp:Label></label>
                                    <asp:DropDownList ID="cmbBranches1" CssClass="custom-select"
                                        runat="server" AutoPostBack="true"
                                        OnSelectedIndexChanged="cmbBranches_SelectedIndexChanged">
                                    </asp:DropDownList>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                    <asp:Button ID="btnGetReports" runat="server" Text="Apply"
                                        CssClass="btn btn-primary" OnClick="btnGetReports_Click" OnClientClick="return validate()" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div>
                <h4>&nbsp;<asp:Label ID="lblGreeting" runat="server"></asp:Label></h4>
                <%--<asp:Button ID="btnPdf" runat="server" Text="PDF" 
            ToolTip="To Export  the Report Click Here"  CssClass="btn btn-secondary" 
            onclick="btnPdf_Click"/>--%>
            </div>

            <div class="modal fade" id="modalAddImage" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" style="width: 30vw">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Add Image</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="container-fluid">
                                <div class="drop-zone" id="img">
                                    <span class="drop-zone__prompt">Drop file here or click to upload</span>
                                    <input type="file" id="uploadimg" accept="image/*" name="myFile" class="drop-zone__input">
                                </div>
                                <div id="divnote" class="text-danger d-none">*Note: Please click the image to change.</div>
                                <%--     <div class="row">
                                    <div class="col">
                                        <div class="drop-zone">
                                            <span class="drop-zone__prompt">Drop file here or click to upload</span>
                                            <input type="file" id="uploadimg1" accept="image/*" name="myFile" class="drop-zone__input">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <button type="button" id="uploadFile" class="btn btn-secondary">Upload</button>
                                        <p id="status"></p>
                                    </div>
                                </div>--%>

                                <%-- <br />
                                <div class="progress" style="margin: 10px; margin-left: -3px;">
                                    <div class="progress-barAds">
                                    </div>
                                </div>--%>
                                <%-- <asp:Button ID="btnSaveImageAds" runat="server" CssClass="badge-brand" Text="Save" OnClick="btnSaveImageAds_Click" />--%>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="btnsave" class="btn btn-primary">Save</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
     <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <div class="overlay">
                <div class="LoadingDivCss">
                    <img alt="" src="IMG/Spinner.gif" class="LoadingImgCss" />
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <br />
    <script type="text/javascript">
  //$('#modalAddImage').modal('hide');
        function current_db(){          
            return document.getElementById("<%=lblcurrent_db.ClientID %>").innerHTML;
        }

        function loadCompanyDetails() {   
            let db = current_db().trim()      
            var data = {
                "c_id": '<%= Session["CM_ID"].ToString() %>',
                "c_alias": db
            }
            return data
        }

        generaterow(GET_AllBannerImage())
        $(document).on("click", "#btnAddImage", function () {
            $(".drop-zone__thumb").remove();
            $("#imageid").remove();
            if ($('span.drop-zone__prompt').length == 0) {
                let spantext = document.createElement('span')
                spantext.className = 'drop-zone__prompt'
                spantext.innerHTML = 'Drop file here or click to upload'
                document.getElementById('img').appendChild(spantext)
            }

            document.getElementById('divnote').className = 'd-none'
            $('#modalAddImage').modal('show');
        });


        $(document).on("click", "#btnsave", function () {
            var imgname = $('.drop-zone__thumb').attr("data-label");
            
            let db = current_db().trim()
            //console.log(db)
            if (imgname == undefined) {
                //alert("No file selected!");
                Swal.fire({
                    position: "center",
                    icon: "info",
                    text: "Please select file",
                    showConfirmButton: false,
                    timer: 1500
                }).then((result) => {

                });
                return false;
            }

            var filename = imgname.split(".")[0];
            //var filename = imgname
            var clientname = loadCompanyDetails()['c_id']
            var branchname = loadCompanyDetails()['c_alias']
            //console.log(uploadimg.files[0].size)
            if (uploadimg.files[0].size > 2500000) {
                //document.getElementById('dvMsg').style.display = "block";
                //alert("File size huge");
                Swal.fire({
                    position: "center",
                    icon: "info",
                    text: "File size huge",
                    showConfirmButton: false,
                    timer: 1500
                }).then((result) => {

                });
                return false;
            }

            Swal.fire({               
                text: 'Are you sure you want to save image?',
                showCancelButton: true,
                confirmButtonColor: '#008000',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: "No",
            }).then((isConfirm) => {
                if (isConfirm.value) {
                    var fd = new FormData();
                    fd.append("", uploadimg.files[0]);
                    let date = currentdate()                  
                    $.ajax({
                        url: 'https://www.suntoyo.online/api/FileService/Upload',
                        type: 'POST',
                        mimeType: "multipart/form-data",
                        data: fd,
                        crossDomain: true,
                        async: false,
                        success: function (datapath) {
                            if (document.getElementById('imageid') == null) {                                                           
                                let jsondata = 
                                    {
                                        "id": 0,
                                        "name": filename,
                                        "bannerimagepath":  JSON.parse(datapath)['dbPath'],
                                        "active": 1,
                                        "created_at": date
                                    }
                                    POST_BannerImage(jsondata)                                    
                            } else {                            
                                let id = document.getElementById('imageid').innerHTML                                
                                let data =   {
                                    "id": id,
                                    "name": filename,
                                    "path": JSON.parse(datapath)['dbPath'],
                                    "active": 1,
                                    "dbname": db
                                }
                                PUT_BannerImage(data)
                            }
                        },
                        beforeSend: function (request) {
                            request.setRequestHeader("clientName", clientname);
                            request.setRequestHeader("fileName", filename.toLowerCase());
                            request.setRequestHeader("branchName", branchname);
                        },
                        complete: function (data) {
                            Swal.fire({
                                position: "center",
                                icon: "success",
                                text: "New image successfully saved",
                                showConfirmButton: false,
                                timer: 1500
                            }).then((result) => {
                                document.getElementById('tblbody').innerHTML = ''
                                generaterow(GET_AllBannerImage())                                
                                $('#modalAddImage').modal('hide');
                            });
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                } else { }
                location.reload();
            }); 
        });

        $(document).on("click", "#btnedit", function () {
            
            $(".drop-zone__thumb").remove();
            $("#imageid").remove();
            var $row = $(this).closest("tr");
            var tdid = $row.find("td");
            let id = tdid[0].innerHTML.trim();
            
            let bannerimage = GET_AllBannerImage();
            bannerimage = bannerimage.filter((e) => e['id'] == id);
            
            let pid = document.createElement('p')
            pid.id = 'imageid'
            pid.innerHTML = id
            pid.className = 'd-none'
            document.getElementById('img').appendChild(pid)

            document.getElementById("divnote").className = "text-danger d-block"
            //dropZoneElement.querySelector(".drop-zone__prompt").remove();
            $(".drop-zone__prompt").remove();
            let divimg = document.createElement('div')
            divimg.className = 'drop-zone__thumb'
            divimg.id = 'bannerimg'          
            divimg.style.backgroundImage = "url(" + bannerimage[0]['bannerimagepath'] + "?" + parseInt(Math.random() * 1000000000, 10) + ")";
            divimg.style.width = "100%"
            divimg.setAttribute("data-label", bannerimage[0]['name'])
            document.getElementById('img').appendChild(divimg)            
            $('#modalAddImage').modal('show');
        });


        $(document).on("click", ".form-check-input", function () {            
            let db = current_db().trim()
            var $row = $(this).closest("tr");
            var tdid = $row.find("td");
            let id = tdid[0].innerHTML.trim();
            let bannerimage = GET_AllBannerImage();
            console.log(db)
            bannerimage = bannerimage.filter((e) => e['id'] == id);
            Swal.fire({
                text: 'Are you sure you want to changes?', 
                showCancelButton: true,
                confirmButtonColor: '#008000',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: "No",
                allowOutsideClick: false,
            }).then((isConfirm) => {       
                if (isConfirm.value) {
                    let id = bannerimage[0]['id'];
                    let name = bannerimage[0]['name']
                    let bannerimagepath = bannerimage[0]['bannerimagepath']
                     let is_available = document.getElementById('chkavailable' + id).checked;
                    if (is_available == false) {
                        is_available = 0
                    } else {
                        is_available = 1
                    }
                    
                    let data =   {
                        "id": id,
                        "name": name,
                        "path": bannerimagepath,
                        "active": is_available,
                        "dbname": db
                    }
                    PUT_BannerImage(data)
                    Swal.fire({
                        position: "center",
                        icon: "success",
                        text: "Changes successfully saved",
                        showConfirmButton: false,
                        timer: 1500
                    }).then((result) => {
                        document.getElementById('tblbody').innerHTML = ''
                        generaterow(GET_AllBannerImage())                        
                    });

                } else {           
                    if (bannerimage[0]['active'] == 1) {
                        document.getElementById('chkavailable' + id).checked = true;
                    } else {
                        //chkavailable.checked = false
                        document.getElementById('chkavailable' + id).checked = false;
                    }
                }
            });
        })
        
        $(document).on("click", "#btnremove", function () {
            let db = current_db().trim()
            var $row = $(this).closest("tr");
            var tdid = $row.find("td");
            let id = tdid[0].innerHTML.trim();
            Swal.fire({
                text: 'Are you sure you want remove this image?',
                showCancelButton: true,
                confirmButtonColor: '#008000',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: "No",
            }).then((isConfirm) => {               
                if (isConfirm.value) {                  
                    DELETE_BannerImage(id);
                    Swal.fire({
                        position: "center",
                        icon: "success",
                        text: "Image successfully removed",
                        showConfirmButton: false,
                        timer: 1500
                    }).then((result) => {
                        document.getElementById('tblbody').innerHTML = ''
                         generaterow(GET_AllBannerImage())
                        //tblbody
                    });

                }
            });
        });

        document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {    
            const dropZoneElement = inputElement.closest(".drop-zone");
          
            dropZoneElement.addEventListener("click", (e) => {             
                inputElement.click();              
            });

            inputElement.addEventListener("change", (e) => {
                
                if (inputElement.files.length) {
                    updateThumbnail(dropZoneElement, inputElement.files[0]);
                }
            });

            dropZoneElement.addEventListener("dragover", (e) => {
                e.preventDefault();
                dropZoneElement.classList.add("drop-zone--over");
            });

            ["dragleave", "dragend"].forEach((type) => {
                dropZoneElement.addEventListener(type, (e) => {
                    dropZoneElement.classList.remove("drop-zone--over");
                });
            });

            dropZoneElement.addEventListener("drop", (e) => {
                e.preventDefault();

                if (e.dataTransfer.files.length) {
                    inputElement.files = e.dataTransfer.files;
                    updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
                }

                dropZoneElement.classList.remove("drop-zone--over");
            });
        });

        function updateThumbnail(dropZoneElement, file) {
            let thumbnailElement = dropZoneElement.querySelector(".drop-zone__thumb");
          
            // First time - remove the prompt
            if (dropZoneElement.querySelector(".drop-zone__prompt")) {
                dropZoneElement.querySelector(".drop-zone__prompt").remove();
            }

            // First time - there is no thumbnail element, so lets create it
            if (!thumbnailElement) {
                thumbnailElement = document.createElement("div");
                thumbnailElement.classList.add("drop-zone__thumb");
                dropZoneElement.appendChild(thumbnailElement);
            }

            thumbnailElement.dataset.label = file.name;

            // Show thumbnail for image files
            if (file.type.startsWith("image/")) {
                const reader = new FileReader();

                reader.readAsDataURL(file);
                reader.onload = () => {
                    thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
                };
            } else {
                thumbnailElement.style.backgroundImage = null;
            }
        }

        function generaterow(data) {
            const tblbody = document.getElementById('tblbody')

            let x = 1
            $.each(data, function (key, item) {
                
                var tr = document.createElement('tr')

                var tdid = document.createElement('td')
                id = document.createTextNode(item['id']);
                tdid.className = 'd-none'
                id.innerHTML = item['id']

                //col1
                var tdno = document.createElement('td')
                var no = document.createElement('text')
                no.innerHTML = x

                //col2
                var tdname = document.createElement('td')
                var spantxt = document.createElement('span')
                spantxt.className = 'hiddentxt'

                var aname = document.createElement('a')
                aname.innerText = item['name']
  
                var spanimg = document.createElement('span')
                spanimg.className = 'hiddenimg'
                var img = document.createElement('img')
                img.src = item['bannerimagepath'] + "?" + parseInt(Math.random() * 1000000000, 10);
                img.style = 'height:30vh'

                //col3
                var tdedit = document.createElement('td')
                var btnedit = document.createElement('button')
                btnedit.type = 'button'
                btnedit.id = 'btnedit'
                btnedit.className = 'btn btn-primary btn-sm'
                btnedit.innerHTML = 'Edit Image'

                var aname = document.createElement('a')
                aname.innerText = item['name']

                var spanimg = document.createElement('span')
                spanimg.className = 'hiddenimg'
                var img = document.createElement('img')
                img.src = item['bannerimagepath'] + "?" + parseInt(Math.random() * 1000000000, 10);
                img.style = 'height:30vh'


                var tdavailable = document.createElement('td')
                var chkavailable = document.createElement('input')
                chkavailable.className = 'form-check-input m-0 position-static'
                chkavailable.type = 'checkbox'
                chkavailable.id = 'chkavailable' + item['id'];
                 chkavailable.checked = false;
                if(item['active'] == 1){
                    chkavailable.checked = true
                }
                

                var tdremove = document.createElement('td')
                var btnremove = document.createElement('button')
                btnremove.type = 'button'
                btnremove.id = 'btnremove'
                btnremove.className = 'btn btn-primary btn-sm'
                btnremove.innerHTML = 'Remove'


                tr.appendChild(tdid)
                tr.appendChild(tdno)    
                tr.appendChild(tdname)
                tr.appendChild(tdedit)         
                tr.appendChild(tdavailable)
                tr.appendChild(tdremove)


                tdid.appendChild(id)
                tdno.appendChild(no)
                tdname.appendChild(spantxt)
                tdname.appendChild(spanimg)
                tdedit.appendChild(btnedit)
                tdavailable.appendChild(chkavailable)
                tdremove.appendChild(btnremove)

                spantxt.appendChild(aname)
                spanimg.appendChild(img)

                tblbody.appendChild(tr)

                x++
            });

        }


        function currentdate() {
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
            var yyyy = today.getFullYear();

            let currentDate = `${yyyy}-${mm}-${dd}`;
            return currentDate;
        }

        //API's
        function POST_BannerImage(data) {
            var responseVal;
            $.ajax({
                type: "POST",
                url: "KioskBanner.aspx/POST_BannerImage",
                data: "{'jsondata':'" + JSON.stringify(data)  + "'}",
                async: false,
                contentType: 'application/json;charset=utf8',
                beforeSend: function () {
                    //modalLoad.style.display = "block";
                },
                complete: function (result) {
                    // modalLoad.style.display = "none";
                },
                dataType: 'json',
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                },
                success: function (result) {
                    responseVal = JSON.parse(result.d);
                }
            });
            return responseVal;
        }

        function PUT_BannerImage(data) {
            var responseVal;
            $.ajax({
                type: "POST",
                url: "KioskBanner.aspx/PUT_BannerImage",
                data: "{'jsondata':'" + JSON.stringify(data)  + "'}",
                async: false,
                contentType: 'application/json;charset=utf8',
                beforeSend: function () {
                    //modalLoad.style.display = "block";
                },
                complete: function (result) {
                    // modalLoad.style.display = "none";
                },
                dataType: 'json',
                error: function (jqXHR, textStatus, errorThrown) {
                    //console.log(errorThrown);
                },
                success: function (result) {
                    responseVal = JSON.parse(result.d);
                }
            });
            return responseVal;               
        }

        function GET_AllBannerImage(){
            var responseVal;
            $.ajax({
                type: "POST",
                url: "KioskBanner.aspx/GET_AllBannerImage",            
                async: false,
                contentType: 'application/json;charset=utf8',
                beforeSend: function () {
                    //modalLoad.style.display = "block";
                },
                complete: function (result) {
                    // modalLoad.style.display = "none";
                },
                dataType: 'json',
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                },
                success: function (result) {
                    responseVal = JSON.parse(result.d);
                }
            });
            return responseVal;
        }

        function DELETE_BannerImage(id){
            var responseVal;
            $.ajax({
                type: "POST",
                url: "KioskBanner.aspx/DELETE_BannerImage",            
                async: false,
                data: "{'id':" + id + "}",
                contentType: 'application/json;charset=utf8',
                beforeSend: function () {
                    //modalLoad.style.display = "block";
                },
                complete: function (result) {
                    // modalLoad.style.display = "none";
                },
                dataType: 'json',
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                },
                success: function (result) {
                    responseVal = JSON.parse(result.d);
                }
            });
            return responseVal;
        }
        
    </script>

</asp:Content>
