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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  
   <%-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> --%>
</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>
    .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>BANNER TIME SCHEDULE PAGE </h5>
                        <asp:HiddenField ID="hidvalue" runat="server" />
                    </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;">
                <%--    <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                       Multiple Image
                    </label>
                </div>--%>
                <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">Action</th>
                            <th scope="col">Start Time</th>
                            <th scope="col">End Time</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="btnAddBanner">Add Banner</button>
            </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>
            <!-- Modal Add Banner-->
            <div class="modal fade" id="modalAddBanner" 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 Banner</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>

            <!-- Modal Add Banner Schedule-->
            <div class="modal fade" id="modalSetBannerSchedule" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Set Banner Schedule</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="row g-3 align-items-center d-none">
                                    <div class="col-2">
                                        <label for="bannerid" class="col-form-label">Banner</label>
                                    </div>
                                    <div class="col-auto">
                                        <input type="text" id="bannerid" class="form-control-plaintext fs-5 fw-bold" readonly value="1">
                                    </div>
                                </div>
                                <div class="row g-3 align-items-center pb-2">
                                    <div class="col-2">
                                        <label for="bannername" class="col-form-label">Banner :</label>
                                    </div>
                                    <div class="col-auto">
                                        <input type="text" id="bannername" class="form-control-plaintext fs-5 fw-bold" readonly value="Banner Name">
                                    </div>
                                </div>
                                <div class="row g-3 align-items-center pb-2">
                                    <div class="col-2">
                                        <label for="start_at" class="col-form-label">Start at :</label>
                                    </div>
                                    <div class="col-auto">
                                        <input type="time" id="txtstart_at" class="form-control" value="00:00" style="        width: 10vw">
                                    </div>

                                </div>
                                <div class="row g-3 align-items-center pb-2">
                                    <div class="col-2">
                                        <label for="end_at" class="col-form-label">End at :</label>
                                    </div>
                                    <div class="col-auto">
                                        <input type="time" id="txtend_at" class="form-control" value="00:00" style="        width: 10vw">
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="btnsaveschedule" 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>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script src="sunScript/bannerscript.js"></script>
    <script src="sunScript/api.js"></script>
    <script>
        function readWebConfig() {
            var conStr = '<%=ConfigurationManager.ConnectionStrings["API_BaseURL"].ConnectionString %>'
            return conStr
        }

        function current_db(){
          
            return document.getElementById("<%=lblcurrent_db.ClientID %>").innerHTML;
        }

       <%-- function current_db1(){
            let db =  document.getElementById("<%=lblcurrent_db.ClientID %>").innerHTML;
            console.log(db)
        }--%>

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

            
  
    </script>
</asp:Content>
