{*+**********************************************************************************
* The content of this file is subject to the CRMTiger Pro license.
 * ("License"); You may not use this file except in compliance with the License
 * The Initial Developer of the Original Code is vTiger
 * The Modified Code of the Original Code owned by https://crmtiger.com/
 * Portions created by CRMTiger.com are Copyright(C) CRMTiger.com
 * All Rights Reserved.
************************************************************************************}
{literal}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="layouts/v7/modules/CTWhatsApp/assets/css/reset.css">
    <link rel="stylesheet" href="layouts/v7/modules/CTWhatsApp/assets/css/style.css">
    <link rel="stylesheet" href="stylesheet.css">
    
    <script src="layouts/v7/modules/CTWhatsApp/assets/js/jquery.emojiarea.js"></script>
        
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet">
{/literal}
{strip}
    <div class="modelContainer modal-dialog">
        <head>
        <script>
			$(function() {
				$('.modelContainer').draggable({
					start: function() {
					},
					stop: function() {
					}
				});
        $("#mymin").click(function(){
          $(".conversation").slideToggle();
          $(".myModal").toggleClass("whatsapp-bottom");
          $("#minmax").toggleClass("fa-window-maximize");
        });
			});
		</script>
        <style>
			.whatsapp-bottom .modelContainer {
				inset: unset !important;
				left: 0px !important;
				bottom: 0px !important;
				right: 0px !important;
				display: inline-block;
				top: 0px !important;
				height: 100% !important;
			}
						.whatsapp-bottom {
				left: 43px !important;
				bottom: 0 !important;
				top: auto !important;
				right: auto !important;
				height: 67px !important;
				width: 100% !important;
			}
            .whatsapp-bottom .modal-dialog{
              margin: 5px !important;
            }
            html {
              box-sizing: border-box;
              height: 100%;
              margin: 0;
              padding: 0;
            }
            body {
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
              font-family: "Roboto", sans-serif;
              margin: 0;
              padding: 0;
              height: 100%;
            }
            .chat .user-bar {
              height: 55px;
              background: #005e54;
              color: #fff;
              padding: 0 8px;
              font-size: 24px;
              position: relative;
              z-index: 1;
            }
            .chat .user-bar div {
              float: left;
              transform: translateY(-50%);
              position: relative;
              top: 50%;
            }
            .chat .user-bar .actions {
              float: right;
              margin: 0 0 0 20px;
            }
            .chat .user-bar .name {
              font-size: 17px;
              font-weight: 600;
              text-overflow: ellipsis;
              letter-spacing: 0.3px;
              margin: 0 0 0 8px;
              overflow: hidden;
              white-space: nowrap;
              width: auto;
            }
            .chat .user-bar .status {
              display: block;
              font-size: 13px;
              font-weight: 400;
              letter-spacing: 0;
              width:auto;
            }
            .chat .conversation {
              height: calc(100% - 12px);
              position: relative;
              background: #ffffff url("layouts/v7/modules/CTWhatsApp/images/bg.png") repeat;
              z-index: 0;
            }
            .chat .conversation .conversation-container {
              height: calc(100% - 68px);
              box-shadow: inset 0 10px 10px -10px #000000;
              overflow-x: hidden;
              padding: 0 16px;
              margin-bottom: 5px;
              scrollbar-width: thin;
            }
            .chat .message {
              color: #000;
              clear: both;
              line-height: 18px;
              font-size: 15px;
              padding: 8px;
              position: relative;
              margin: 8px 0;
              max-width: 80%;
              word-wrap: break-word;
            }
            .chat .message:after {
              position: absolute;
              content: "";
              width: 0;
              height: 0;
              border-style: solid;
            }
            .chat .message:first-child {
              margin: 16px 0 8px;
            }
            .chat .message.received {
              background: #fff;
              border-radius: 0px 5px 5px 5px;
              float: left;
              box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
            }
            .chat .message.received .metadata {
              padding: 0 0 0 16px;
            }
            .chat .message.received:after {
              border-width: 0px 10px 10px 0;
              border-color: transparent #fff transparent transparent;
              top: 0;left: -10px;
            }
            .chat .message.sent {
              background: #e1ffc7;
              border-radius: 5px 0px 5px 5px;
              float: right;
            }
            .chat .message.sent:after {
              border-width: 0px 0 10px 10px;
              border-color: transparent transparent transparent #e1ffc7;
              top: 0;
              right: -10px;
            }
            .chat .conversation-compose {
              display: flex;
              flex-direction: row;
              align-items: flex-end;
              overflow: hidden;
              height: 50px;
              width: 100%;
              z-index: 2;
            }
            .chat .conversation-compose div,
            .chat .conversation-compose input {
              background: #fff;
              height: 100%;
            }
            .chat .conversation-compose .emoji {
              display: flex;
              align-items: center;
              justify-content: center;
              background: white;
              border-radius: 5px 0 0 5px;
              flex: 0 0 auto;
              margin: 3px 1px 1px 7px;
              width: 48px; 
              height: 48px;
            }
            .chat .emoji i{
                font-size: 20px;
                color:#666;
            }
            .chat .conversation-compose .input-msg {
              border: 0;
              flex: 1 1 auto;
              font-size: 16px;
              margin: 0;
              outline: none;
              min-width: 50px;
            }
            .chat .conversation-compose .photo {
              flex: 0 0 auto;
              border-radius: 0 0 5px 0;
              text-align: center;
              position: relative;
              width: 48px;
            }
            .chat .conversation-compose .photo:after {
              border-width: 0px 0 10px 10px;
              border-color: transparent transparent transparent #fff;
              border-style: solid;
              position: absolute;
              width: 0;
              height: 0;
              content: "";
              top: 0;
              right: -10px;
            }
            .chat .conversation-compose .photo i {
              display: block;
              color: #7d8488;
              font-size: 20px;
              transform: translate(-50%, -50%);
              position: relative;
              top: 50%;
              left: 50%;
            }
            .chat .conversation-compose .send {
              background: transparent;
              border: 0;
              cursor: pointer;
              flex: 0 0 auto;
              margin-left: 8px;
              margin-right: 8px;
              padding: 0;
              position: relative;
              outline: none;
            }
            .chat .conversation-compose .send .circle {
              background: #008a7c;
              border-radius: 50%;
              color: #fff;
              position: relative;
              width: 48px;
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .chat .circle i{
                font-size:25px;
            }
            .chat .conversation {
                height: calc(100vh - 220px);
            }
            .chat .conversation .conversation-container {
                height: calc(100vh - 280px);
            }
            .chat .metadata .time {
                color: 
                rgba(0, 0, 0, .45);
                font-size: 11px;
                display: inline-block;
            }
            .chat .metadata {
                display: inline-block;
                float: right;
                padding: 0 0 0 7px;
                position: relative;
                bottom: -4px;
            }
            .modal-dialog{
                width: 400px;
            }
            img {
              border-radius: 50%;
            }
			input#filename_detail{
				visibility: hidden;
			}
              </style>
        </head>
        <body>
            <div class="chat" style="width: 120%;">
				<input type="hidden" name='whatsapppoupopen' id='whatsapppoupopen' value="true">
                <input type="hidden" name="module_name" id="module_name" value="{$SORCEMODULENAME}">
				<input type="hidden" name='currentdatetime' id='currentdatetime' value="{$CURRENTDATETIME}">
				<input type="hidden" name='whatsappstorageurl' id='whatsappstorageurl' value="{$WHATSAPPSTORAGEURL}">
				<input type="hidden" name='currentusername' id='currentusername' value="{$CURRENUSERNAME}">
                <div class="chat-container" style="border: solid 1px #005e54;">
                    <input type="hidden" name="mobileno" id="mobileno" value="{$MOBILEPHONE}">
                    <input type="hidden" name="module_recordid" id="module_recordid" value="{$RECORDID}">
                    <div id="call" class="user-bar">
                        <div class="name" style="white-space: nowrap;width: 160px;overflow: hidden;text-overflow: ellipsis;" title="{$FULLNAME}">
                            {if $IMAGE eq '_'}
								<img src="layouts/v7/modules/CTWhatsApp/image/profileimage.png" alt="Avatar" style="width:40px">&nbsp;&nbsp;
							{else}
								<img src="{$IMAGE}" alt="{$FULLNAME}" style="width:40px;height: 40px;">&nbsp;&nbsp;
							{/if}
                            <span id="name">{$FULLNAME}</span>
                        </div>
						<!--//Add Comment-->
                        {if $COMMENTMODULEENABLE eq 1}
    						<div id="commentsdate" style="margin-left: 214px;cursor: pointer;">
    							<i class="fa fa-comments" aria-hidden="true"></i>
    						</div>
                        {/if}
						<!--//Add Comment-->
                        <div class="pull-right ">
                          <button type="button" class="close" aria-label="Close" data-dismiss="modal">
                            <span aria-hidden="true" style="margin-left:7px;color: white;" class="fa fa-close" ></span>
                          </button>
                          <button type="button" class="close" style="margin-left:7px"  id="mymin">
                            <span aria-hidden="true" class="fa fa-minus" id="minmax" style="color: white;"></span>
                          </button>
                        </div>
                    </div>
                    {if $AUTHTOKEN == '' || $WHATSAPPSTATUS == 0 || $WHATSAPPSTATUS == 2}
                      {if $ISADMIN eq 'on'}
                        <div class="conversation">
                            <div class="conversation-container"><br><br>
                                <center><img src="layouts/v7/modules/CTWhatsApp/images/noconfiguration.png" style="width: 80px;"/></center>
                                <br>
                                <b><center><p>{vtranslate('LBL_NOTCONFIGURATION1','CTWhatsApp')}</p></center>
                                <br>
                                
                                <center><span>&nbsp;&nbsp;<button class="btn btn-success newqrcodescan" onclick="window.location.href='{$SCANQRCODE}'">{vtranslate('LBL_SCANQRCODE','CTWhatsApp')}</button></span></center>
                                
                            </div>
                        </div>
                      {else}
                      <div class="conversation">
                            <div class="conversation-container"><br><br>
                          <br>
                          <center><img src="layouts/v7/modules/CTWhatsApp/images/noconfiguration.png" style="width: 80px;"/></center>
                          <br>
                          <b><center><p>{vtranslate('LBL_NOTCONFIGURATION1','CTWhatsApp')}</p></center>
                          <br>
                          <center><p>{vtranslate('LBL_NOTCONFIGURATION2','CTWhatsApp')}</p></center>
                          <br>
                                            <center>{vtranslate('LBL_NOTCONFIGURATION3','CTWhatsApp')}</center><br>
                          <center><p>{vtranslate('LBL_NOTCONFIGURATION4','CTWhatsApp')}</p></center></b>
                          <br>
                        </div>
                      </div>
                      {/if}
                    {else}
                        <div class="conversation">
                            <div class="conversation-container">
                                <span id="ap">
                                    {foreach key=RECEIVEDMSGKEY item=RECEIVEDMSGVALUE from=$RECEIVEDMSG}
                                        {if $RECEIVEDMSGVALUE['type'] eq 'Recieved'}
                                            <div class="message received">
    											{if preg_match('/.csv/', $RECEIVEDMSGVALUE['message']) || preg_match('/.txt/', $RECEIVEDMSGVALUE['message']) || preg_match('/.pdf/', $RECEIVEDMSGVALUE['message']) || preg_match('/.mp4/', $RECEIVEDMSGVALUE['message']) || preg_match('/.docx/', $RECEIVEDMSGVALUE['message'])}
    												<a href="{$RECEIVEDMSGVALUE['message']}" target=_blank>{$RECEIVEDMSGVALUE['message']}</a>
    											{else if preg_match('/.CTWhatsAppStorage/', $RECEIVEDMSGVALUE['message'])}
    												<img src="{$RECEIVEDMSGVALUE['message']}" style="height: 60px;"></img>
    											{else}
    												<p>{$RECEIVEDMSGVALUE['message']}</p>
    											{/if}
                                                <span class="metadata">
    												<span class="time"><b>{$RECEIVEDMSGVALUE['sendername']}</b>&nbsp;&nbsp; {$RECEIVEDMSGVALUE['createdtime']}</span>&nbsp;
    											</span>&nbsp;
                                            </div>
                                            {if preg_match('/.CTWhatsAppStorage/', $RECEIVEDMSGVALUE['message'])}
                                            {else}
                                                &nbsp;&nbsp;
                                                <span class="editField" style="float: left;"><img src="layouts/v7/modules/CTWhatsApp/images/editcontent.png" style="width: 15px;" title="{vtranslate('LBL_EDITFIELD','CTWhatsApp')} {vtranslate('Contacts','Contacts')}"></span>
                                            {/if}
                                        {else}
                                            <div class="message sent">
    											{if preg_match('/.csv/', $RECEIVEDMSGVALUE['message']) || preg_match('/.txt/', $RECEIVEDMSGVALUE['message']) || preg_match('/.pdf/', $RECEIVEDMSGVALUE['message']) || preg_match('/.mp4/', $RECEIVEDMSGVALUE['message']) || preg_match('/.docx/', $RECEIVEDMSGVALUE['message'])}
    												<a href="{$RECEIVEDMSGVALUE['message']}" target=_blank>{$RECEIVEDMSGVALUE['message']}</a>
    											{else if preg_match('/.CTWhatsAppStorage/', $RECEIVEDMSGVALUE['message'])}
    												<img src="{$RECEIVEDMSGVALUE['message']}" style="height: 60px;"></img>
    											{else}
    												{$RECEIVEDMSGVALUE['message']}
    											{/if}
                                                <span class="metadata">
    												<span class="time"><b>{$RECEIVEDMSGVALUE['sendername']}</b>&nbsp;&nbsp; {$RECEIVEDMSGVALUE['createdtime']}</span>&nbsp;
    												{if $RECEIVEDMSGVALUE['whatsapp_chatid'] eq ''}
    													<img src="layouts/v7/modules/CTWhatsApp/images/unread.png"/>	
    												{else}
    													<img src="layouts/v7/modules/CTWhatsApp/images/read.png"/>	
    												{/if}
    											</span>&nbsp;
                                            </div>
                                        {/if}
                                    {/foreach}
                                </span>
                            </div>
                            <form id="form" class="conversation-compose" data-emojiarea data-type="unicode" data-global-picker="false">
                                <div class="emoji emoji-button">
                                    <i class="fa fa-grin">&#x1f604;</i>
                                </div>
                                <textarea id="input1" class="input-msg write_msg" name="input" placeholder="{vtranslate('Type Message','CTWhatsApp')}" autocomplete="off" autofocus="" style="border:1px solid;border-radius:15px;height: 48px;"></textarea>
                                <div class="photo">
                                    <!--Add attachment-->
    								<div class="image-upload">
    									<label for="filename_detail">
    									<input type="hidden" name="selectfile_data" id="selectfile_data" value="">
    									<img src="layouts/v7/modules/CTWhatsApp/image/attach.png" class="uploadimage" style="width: 23px;margin: 17px 0px 0px 0px;border-radius: 0%;"/>
    									<input type="file" name="filename_detail" id="filename_detail" class="imageclick"/>
    									</label>
    								</div>
    								<!--Add attachment-->
                                </div>
                                <span id="speak"></span>
                                <span class="send msg_send_btn">
                                    <div class="circle">
                                        <i class="fa fa-paper-plane" aria-hidden="true"></i>
                                    </div>
                                </span>
                            </form>
                        </div>
                    {/if}
                </div>
            </div>
        </body>
    </div>
{strip}
