 <div class="content-wrapper">
    <div class="container-fluid">
		
        <div class="row">
        	<div class="col-lg-12">
        		<div class="card">
        			<div class="card-body">
        				<div class="card-title">Whatsapp</div>
       					
        			</div>
        		</div>
        	</div>
        </div><!--End Row-->
        
        <div class="row">
        	<div class="col-lg-6">
        		<form action="#" method="post" method="post" enctype="multipart/form-data">
                <div class="row">
        			<div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                               
                                 <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Select Merchant</label>
                                        <div class="col-sm-9">
                                          
                                          <select name="merchant" id="broadcastmerchant" class="form-control">
													<option value="0">Select Store</option>
													<?php foreach($merchantoptions as $val){ 
													echo "<option value='".$val->merchantId."'>".$val->storename."</option>";
													}?>
                                                </select>
                        
                                        </div>
                                </div>
                                
                                <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Select Merchant Templates</label>
                                        <div class="col-sm-9">
                                          
                                          <select name="template" id="merchanttemplates" class="form-control">
                                            <option value="0">Select Store 1st</option>
                                        </select>
                        
                                        </div>
                                </div>
                                <div id="templatesdata">
                                	
                                </div>
                                <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Contacts <br/>(One Per Line)</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control"  name="contacts" id="input-21" placeholder="One Per Line"></textarea>
                                        </div>
                                </div>
                                 <div class="form-group row">
                                      <div class="col-sm-12">
                                        <button type="submit" name="submit" class="btn btn-primary px-5 pull-right"><i class="icon-lock"></i> Send Messages</button>
                                      </div>
                                    </div>
                              
                            </div>
                        </div>
                     </div>
                  </div>
                  </form>
                  
                  
        	</div>
<style>
.whatsapp-container{background:#ccc;min-height:550px;width:350px;margin-left:auto;margin-right:auto }
.topribben{height: 30px;background: #075E54;}
.waheader{min-height: 60px;background: #128C7E;font-size: 18px;
color: #fff;padding:12px}

.waheader i {padding:8px;}
.wabody{min-height: 450px;}

.wafooter .textarea{
width: 290px;height: auto;background: #fff;border-radius: 102px;padding: 12px 17px;color: #989898;font-size: 19px;display: inline-block;
}

.wafooter .textbutton{
width: 44px;
display: inline-block;
background: #075E54;
padding: 12px 16px;
vertical-align: top;
border-radius: 100px;
height: 43px;
}

.wamsg-left{
min-height: 63px;width: 272px;background: #fff;margin: 10px 5px;border-radius: 3px 15px 15px 15px;float: left;
}

.wamsg-right{
min-height: 63px;width: 272px;background:#fff9cb;padding: 12px;
color: #393939;margin: 10px 5px;border-radius: 15px 3px 15px 15px;float: right;
}

.prvhead{font-size: 12px;
color: #6a6a6a; margin-bottom:5px;}
.prvbody{margin-bottom:5px;}
.prvfooter{font-size: 12px;
color: #6a6a6a; margin-bottom:10px;}
</style>            
            <div class="col-lg-6">
            	<div class="whatsapp-container">
                	<div class="topribben"></div>
                    <div class="waheader">
                    	<i class="fa fa-chevron-left pull-left"> Abhishek Singhal</i>
                        
                        <i class="fa fa-video-camera pull-right"></i>
                        <i class="fa fa-phone pull-right"></i>
                        <i class="fa fa-ellipsis-v pull-right"></i>
                    </div>
                    <div class="wabody">
                    
                    	<div class="wamsg-left">
                        </div>
                        <div class="wamsg-right">
                        </div>
                        <div class="wamsg-left">
                        </div>
                        <div class="wamsg-right wamsg-prev">
                        </div>
                    </div>
                    <div class="wafooter">
                    	<div class="textarea">
                        	<i class="fa fa-smile-o pull-left"></i>
                        	<i class="fa fa-paperclip pull-right"></i>
                        	<i class="fa fa-camera pull-right"></i>                            
                        </div>
                        <div class="textbutton">
                        	<i class="fa fa-microphone"></i>
                        </div>
                    </div>                   
                    
                </div>
            </div>
        </div><!--End Row-->