<%@ Page Title="WhatsApp Integration" Language="C#" MasterPageFile="~/SunMaster.Master" AutoEventWireup="true" CodeBehind="WhatsappIntegration.aspx.cs" Inherits="SUNWEB.WhatsappIntegration" %>
<%@ Register Assembly="AjaxControlToolkit" TagPrefix="asp" Namespace="AjaxControlToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

     <!-- Bootstrap -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
 <style>
     .chat-bubble {
         padding: 8px 12px;
         border-radius: 10px;
         margin-bottom: 6px;
         max-width: 70%;
     }
     .chat-out { background: #28a745; color: white; margin-left: auto; }
     .chat-in { background: #444; color: white; margin-right: auto; }
 </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

   <asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
  <ContentTemplate>
       <table style="margin-left: 1%; width: 98%;">
       <tr>
      <td style="font-size:large; width: 50%; font-family:'Open Sans', sans-serif; font-weight:bolder;">
       WHATSAPP INTEGRATION 
     </td>    
     
     </tr>
     </table>
    

      <div class="row">
                 
                          <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="Blue" runat="server" Text="Branch Name"></asp:Label></label>
                                              <asp:DropDownList ID="cmbBranches" 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>




         <body class="bg-dark text-light">
    <form id="form1" runat="server">

        <div class="container-fluid py-3">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h3>WhatsApp Integration</h3>

                <asp:Button ID="btnApiKey" runat="server" Text="API Key" CssClass="btn btn-outline-light btn-sm"
                    OnClick="btnApiKey_Click" />
            </div>

            <div class="row g-3">

                <!-- LEFT: CONTACT LIST -->
                <div class="col-lg-3">
                    <div class="card bg-secondary text-light">
                        <div class="card-body">
                            <h6>Contacts</h6>

                            <asp:TextBox ID="txtSearch" runat="server" CssClass="form-control form-control-sm mb-2"
                                placeholder="Search..."></asp:TextBox>

                            <asp:ListBox ID="lstContacts" runat="server" CssClass="form-select"
                                AutoPostBack="true" OnSelectedIndexChanged="lstContacts_SelectedIndexChanged"
                                Style="height:350px;"></asp:ListBox>

                            <hr />
                            <h6>Templates</h6>

                            <asp:ListBox ID="lstTemplates" runat="server" CssClass="form-select"
                                Style="height:150px;"></asp:ListBox>

                            <asp:Button ID="btnUseTemplate" runat="server" Text="Insert Template"
                                CssClass="btn btn-sm btn-primary mt-2" OnClick="btnUseTemplate_Click" />
                        </div>
                    </div>
                </div>

                <!-- CENTER: CHAT -->
                <div class="col-lg-6">
                    <div class="card bg-secondary text-light h-100">
                        <div class="card-header">
                            <asp:Label ID="lblChatTitle" runat="server" Text="Select a contact"></asp:Label>
                        </div>

                        <div class="card-body" style="height:380px; overflow:auto;" id="chatContainer">

                            <asp:Repeater ID="rptMessages" runat="server">
                                <ItemTemplate>
                                    <div class='<%# Eval("CssClass") %>'>
                                        <%# Eval("MessageText") %><br />
                                        <span class="small text-muted"><%# Eval("Time") %></span>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>

                        </div>

                        <div class="card-footer">
                            <asp:TextBox ID="txtMessage" TextMode="MultiLine" CssClass="form-control mb-2"
                                runat="server" Rows="2"></asp:TextBox>

                            <asp:Button ID="btnSend" runat="server" Text="Send"
                                CssClass="btn btn-success" OnClick="btnSend_Click" />
                        </div>
                    </div>
                </div>

                <!-- RIGHT: CONTACT INFO -->
                <div class="col-lg-3">
                    <div class="card bg-secondary text-light">
                        <div class="card-body">
                            <h6>Contact Details</h6>

                            <asp:Label ID="lblDetails" runat="server" Text="Select contact"></asp:Label>

                            <hr />
                            <h6>Logs</h6>

                            <asp:Literal ID="litLogs" runat="server"></asp:Literal>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </form>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>



     </div>
     </ContentTemplate>
     </asp:UpdatePanel>




</asp:Content>
