{*+**********************************************************************************
* The contents of this file are subject to the vtiger CRM Public License Version 1.1
* ("License"); You may not use this file except in compliance with the License
* The Original Code is: vtiger CRM Open Source
* The Initial Developer of the Original Code is vtiger.
* Portions created by vtiger are Copyright (C) vtiger.
* All Rights Reserved.
*************************************************************************************}

{strip}

<style>
#section_2{
display:none;
}
.p_text{
font-size:20px;
font-weight:600;
text-align:center;
}

.first-btn{
 background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px; 
  border-radius:5px;
}

.second-btn{
 background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius:5px;
}

table{
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.visitor-btn{
 background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}
  .ui-datepicker {
      font-size: 16px; /* Example font size */
      width: 350px; /* Example width */
    }
  .ui-datepicker-calendar {
      background-color: #C8F7E6; /* Example background color */
    }.
#first_tab_table{
font-size:16px;
}
.select_dates{
border:2px solid #04AA6D;
padding:10px;
width:200px;
background-color:#C8F7E6;
font-weight:600;
border-radius:5px;
}
</style>
	<div class='dashBoardTabContainer'>
		{include file="dashboards/DashBoardHeader.tpl"|vtemplate_path:$MODULE_NAME DASHBOARDHEADER_TITLE=vtranslate($MODULE, $MODULE)}
		<br><div class="dashboardBanner"></div>
		<div class="dashBoardTabContents clearfix">

	

			<!--astcrm custom code-->
			<div class="container-fluid">
				<button type="button" class="btn first-btn" id="first_tab">Request Screen</button>&emsp;
				<button type="button" class="btn second-btn" id="second_tab">Visit Info Screen</button>

			</div>	
			<hr style="border:1px solid black;">
	
			<!--section 1-->
			<div class="container mt-2 section_1" id="section_1">
				<div class="">	
				<label>Select Date</label>&emsp;
				<input type="text" id="datepicker" value="">
				</div><br>
				
				<div class="row">
				<div class="col-sm-6">
				<table class="table table-bordered" id="first_tab_table">
				    <thead style="background: #C8F7E6; color:black;">
				      <tr>
				        <th scope="col">Time Zone</th>
				        <th scope="col">Request</th>
					<th scope="col">Action</th>
				      </tr>
				    </thead>
				    <tbody>

				<tr>
				<td style="font-size:14px;font-weight:900;">9 AM - 10 AM</td>
				<td id="display_9_10" class="td_display" style="font-size:18px;text-align:right;font-weight:900;"></td>
				<td style="text-align:center;"><button type="button" class="btn visitor-btn" id="btn_9_10">Add Visitor</button></td>
				</tr>


				<tr>
                                 <td style="font-size:14px;font-weight:900;">10 AM - 11 AM</td>
                                 <td id="display_10_11" class="td_display" style="font-size:18px;text-align:right;font-weight:900;"></td>
                                <td style="text-align:center;"><button type="button" class="btn visitor-btn" id="btn_10_11">Add Visitor</button></td>
                                </tr>

				 <tr>
                                 <td style="font-size:14px;font-weight:900;">11 AM - 12 PM</td>
                                 <td id="display_11_12" class="td_display" style="font-size:18px;text-align:right;font-weight:900;"></td>
                                <td style="text-align:center;"><button type="button" class="btn visitor-btn" id="btn_11_12">Add Visitor</button></td>
                                </tr>

				 <tr>
                                 <td style="font-size:14px;font-weight:900;">12 PM - 1 PM</td>
                                 <td id="display_12_13" class="td_display" style="font-size:18px;text-align:right;font-weight:900;"></td>
                                <td style="text-align:center;"><button type="button" class="btn visitor-btn" id="btn_12_13">Add Visitor</button></td>
                                </tr>

				<tr>
                                 <td style="font-size:14px;font-weight:900;">1 PM - 2 PM</td>
                                 <td id="display_13_14" class="td_display" style="font-size:18px;text-align:right;font-weight:900;"></td>
                                <td style="text-align:center;"><button type="button" class="btn visitor-btn" id="btn_13_14">Add Visitor</button></td>
                                </tr>

				<tr>
                                 <td style="font-size:14px;font-weight:900;">2 PM - 3 PM</td>
                                 <td id="display_14_15" class="td_display" style="font-size:18px;text-align:right;font-weight:900;"></td>
                                <td style="text-align:center;"><button type="button" class="btn visitor-btn" id="btn_14_15">Add Visitor</button></td>
                                </tr>

				<tr>
                                 <td style="font-size:14px;font-weight:900;">3 PM - 4 PM</td>
                                 <td id="display_15_16" class="td_display" style="font-size:18px;text-align:right;font-weight:900;"></td>
                                <td style="text-align:center;"><button type="button" class="btn visitor-btn" id="btn_15_16">Add Visitor</button></td>
                                </tr>


				<tr>
                                 <td style="font-size:14px;font-weight:900;">4 PM - 5 PM</td>
                                 <td id="display_16_17" class="td_display" style="font-size:18px;text-align:right;font-weight:900;"></td>
                                <td style="text-align:center;"><button type="button" class="btn visitor-btn" id="btn_16_17">Add Visitor</button></td>
                                </tr>




				    </tbody>
				 </table>
				</div>
				</div>
			</div>	
			<!--section 1 end-->

			<!--section 2-->
			<div class="container section_2" id="section_2">
				<p class="text-cente p_text">Today's Schedule - <span id="display_date_in_ui"></span></p>

			<div>
			<select class="select_dates" aria-label="Default select example">
			  <option value="9 - 10">9 AM - 10 AM</option>
			  <option value="10 - 11">10 AM - 11 AM</option>
			  <option value="11 - 12">11 AM - 12 PM</option>
			<option value="12 - 13">12 PM - 1 PM</option>
			<option value="13 - 14">1 PM - 2 PM</option>
			<option value="14 - 15">2 PM - 3 PM</option>
			<option value="15 - 16">3 PM - 4 PM</option>
			<option value="16 - 17">5 PM - 6 PM</option>
			</select>
			</div>
			
			<br>
		<p style="text-align:right;font-weight:900;font-size:18px;">Total:&nbsp;<span id="totalCountRecord"></span></p>			
		<table class="table table-bordered mt-2" id="second_tab_table">
				    <thead style="background: #C8F7E6; color:black;">
				      <tr>
				        <th scope="col">Request ID</th>
				        <th scope="col">Visitor Name</th>
				        <th scope="col">Prisoner Name</th>
				        <th scope="col">Requested Time</th>
				      </tr>
				    </thead>
				    <tbody id="visit_Table_Data">
				     
				    </tbody>
				  </table>
			<div>
			<!--section 2 end-->
			
			<!--astcrm end-->
		



			<div class="gridster_{$TABID}">
				<ul>
					{assign var=COLUMNS value=2}
					{assign var=ROW value=1}
					{foreach from=$WIDGETS item=WIDGET name=count}
						{assign var=WIDGETDOMID value=$WIDGET->get('linkid')}

						{if $WIDGET->getName() eq 'MiniList'}
							{assign var=WIDGETDOMID value=$WIDGET->get('linkid')|cat:'-':$WIDGET->get('widgetid')}
						{elseif $WIDGET->getName() eq 'Notebook'}
							{assign var=WIDGETDOMID value=$WIDGET->get('linkid')|cat:'-':$WIDGET->get('widgetid')}
						{/if}
						{if $WIDGETDOMID}
							<li id="{$WIDGETDOMID}" {if $smarty.foreach.count.index % $COLUMNS == 0 and $smarty.foreach.count.index != 0} {assign var=ROWCOUNT value=$ROW+1} data-row="{$WIDGET->getPositionRow($ROWCOUNT)}" {else} data-row="{$WIDGET->getPositionRow($ROW)}" {/if}
								{assign var=COLCOUNT value=($smarty.foreach.count.index % $COLUMNS)+1} data-col="{$WIDGET->getPositionCol($COLCOUNT)}" data-sizex="{$WIDGET->getSizeX()}" data-sizey="{$WIDGET->getSizeY()}" {if $WIDGET->get('position') eq ""} data-position="false"{/if}
								class="dashboardWidget dashboardWidget_{$smarty.foreach.count.index}" data-url="{$WIDGET->getUrl()}" data-mode="open" data-name="{$WIDGET->getName()}">
							</li>
						{else}
							{assign var=CHARTWIDGETDOMID value=$WIDGET->get('reportid')}
							{assign var=WIDGETID value=$WIDGET->get('id')}
							<li id="{$CHARTWIDGETDOMID}-{$WIDGETID}" {if $smarty.foreach.count.index % $COLUMNS == 0 and $smarty.foreach.count.index != 0} {assign var=ROWCOUNT value=$ROW+1} data-row="{$WIDGET->getPositionRow($ROWCOUNT)}" {else} data-row="{$WIDGET->getPositionRow($ROW)}" {/if}
								{assign var=COLCOUNT value=($smarty.foreach.count.index % $COLUMNS)+1} data-col="{$WIDGET->getPositionCol($COLCOUNT)}" data-sizex="{$WIDGET->getSizeX()}" data-sizey="{$WIDGET->getSizeY()}" {if $WIDGET->get('position') eq ""} data-position="false"{/if}
								class="dashboardWidget dashboardWidget_{$smarty.foreach.count.index}" data-url="{$WIDGET->getUrl()}" data-mode="open" data-name="ChartReportWidget"> 
							</li>
						{/if}
					{/foreach}
				</ul>
				<input type="hidden" id=row value="{$ROWCOUNT}" />
				<input type="hidden" id=col value="{$COLCOUNT}" />
				<input type="hidden" id="userDateFormat" value="{$CURRENT_USER->get('date_format')}" />
			</div>
		</div>
	</div>
{/strip}


 
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
<script>

$(document).ready(function(){
 jQuery.noConflict();


	var selectedDate = new Date();
	var year = selectedDate.getFullYear();
	//var month = selectedDate.getMonth() + 1; // Note: Month is zero-based, so we add 1
	//var date = selectedDate.getDate();

	 var month = ('0' + (selectedDate.getMonth() + 1)).slice(-2); // Add leading zero and slice to take last 2 characters
	  var date = ('0' + selectedDate.getDate()).slice(-2); // Add leading zero and slice to take last 2 characters
	
	//by default set today date
	selectedDate = date+'-'+month+'-'+year;

	 $("#datepicker").datepicker({
	       	 minDate: 0, // Disable previous dates
		dateFormat: 'dd-mm-yy',
		 onSelect: function(dateText) {
  			 // Output the selected date to the console
     			 console.log("Selected Date: " + dateText);
			selectedDate = dateText;
			processSelectedDate(dateText);
   		 }
		
      }); 
	
	//by default call the function 
	processSelectedDate(selectedDate);	


	 $("#datepicker").datepicker("setDate", new Date());
	//by default second tab hide
	$('#section_2').hide();
		
		

	//first tab funcion    
        $('#first_tab').click(function(){

		// on click 1 tab hide second tab
		$('#section_2').hide();        

        	$('#section_1').show();
        
        });
        //end 1




	//second tab funcion	
	$('#second_tab').click(function(){
		
		// on click 2 tab hide first tab
		$('#section_1').hide();
		$('#section_2').show();
	
	});
	//end 2
	


	//########## 9 - 10 ###############
	$('#btn_9_10').click(function(){
		
		var data = {
		 time:'9 - 10',
		 selectedDate: selectedDate
		}

		var jsonString = JSON.stringify(data);
		localStorage.setItem("data", jsonString);
		var baseUrl = '/vms/index.php?module=HelpDesk&view=Edit&app=SUPPORT';
		window.location.href = baseUrl;
	});

	
	//########## 10 - 11 ##############
	 $('#btn_10_11').click(function(){
                
                var data = {
                 time:'10 - 11',
                 selectedDate: selectedDate
                }

                var jsonString = JSON.stringify(data);
                localStorage.setItem("data", jsonString);
                var baseUrl = '/vms/index.php?module=HelpDesk&view=Edit&app=SUPPORT';
                window.location.href = baseUrl;
        });

	
	//########## 11 -12 ##############
	 $('#btn_11_12').click(function(){
                
                var data = {
                 time:'11 - 12',
                 selectedDate: selectedDate
                }

                var jsonString = JSON.stringify(data);
                localStorage.setItem("data", jsonString);
                var baseUrl = '/vms/index.php?module=HelpDesk&view=Edit&app=SUPPORT';
                window.location.href = baseUrl;
        });

		
	 //########## 12 -13 ##############
         $('#btn_12_13').click(function(){
                
                var data = {
                 time:'12 - 13',
                 selectedDate: selectedDate
                }

                var jsonString = JSON.stringify(data);
                localStorage.setItem("data", jsonString);
                var baseUrl = '/vms/index.php?module=HelpDesk&view=Edit&app=SUPPORT';
                window.location.href = baseUrl;
        });


	 //########## 13 -14 ##############
         $('#btn_13_14').click(function(){
                
                var data = {
                 time:'13 - 14',
                 selectedDate: selectedDate
                }

                var jsonString = JSON.stringify(data);
                localStorage.setItem("data", jsonString);
                var baseUrl = '/vms/index.php?module=HelpDesk&view=Edit&app=SUPPORT';
                window.location.href = baseUrl;
        });


	 //########## 14 -15 ##############
         $('#btn_14_15').click(function(){
                
                var data = {
                 time:'14 - 15',
                 selectedDate: selectedDate
                }

                var jsonString = JSON.stringify(data);
                localStorage.setItem("data", jsonString);
                var baseUrl = '/vms/index.php?module=HelpDesk&view=Edit&app=SUPPORT';
                window.location.href = baseUrl;
        });


	 //########## 15 -16 ##############
         $('#btn_15_16').click(function(){
                
                var data = {
                 time:'15 - 16',
                 selectedDate: selectedDate
                }

                var jsonString = JSON.stringify(data);
                localStorage.setItem("data", jsonString);
                var baseUrl = '/vms/index.php?module=HelpDesk&view=Edit&app=SUPPORT';
                window.location.href = baseUrl;
        });

		
	//########## 16 -17 ##############
         $('#btn_16_17').click(function(){
                
                var data = {
                 time:'16 - 17',
                 selectedDate: selectedDate
                }

                var jsonString = JSON.stringify(data);
                localStorage.setItem("data", jsonString);
                var baseUrl = '/vms/index.php?module=HelpDesk&view=Edit&app=SUPPORT';
                window.location.href = baseUrl;
        });

	
	//ajax function call
	function processSelectedDate(dateText){	
		$.ajax({
		   type: 'POST',
		   dataType: 'json',
		   url: 'getRequestScreenData.php',
		   data: {
		     'selectedDate':selectedDate
		   },
		    success:function(response){
			
			var slot_9_10 = response['9 - 10'];
			var slot_10_11 = response['10 - 11'];
			var slot_11_12 = response['11 - 12'];
			var slot_12_13 = response['12 - 13'];
			var slot_13_14 = response['13 - 14'];
			var slot_14_15 = response['14 - 15'];
			var slot_15_16 = response['15 - 16'];
			var slot_16_17 = response['16 - 17'];
			
			var currentDate = response['current_date'];
			var currentTime = response['current_time'];
			$("#display_9_10").html(slot_9_10);
			$("#display_10_11").html(slot_10_11);
			$("#display_11_12").html(slot_11_12);
			$("#display_12_13").html(slot_12_13);
			$("#display_13_14").html(slot_13_14);
			$("#display_14_15").html(slot_14_15);
			$("#display_15_16").html(slot_15_16);	
			$("#display_16_17").html(slot_16_17);
		
			var now = new Date();
			var currentHour = now.getHours();

			// Get the day, month, and year components
			var day = now.getDate();
			var month = now.getMonth() + 1; // January is 0, so we add 1 to get the correct month
			var year = now.getFullYear();

			// Format the day, month, and year components with leading zeros if needed
			day = (day < 10) ? '0' + day : day;
			month = (month < 10) ? '0' + month : month;
			var formattedDate = day + '-' + month + '-' + year;

			/*
			if(formattedDate == currentDate && currentHour <= '9'){
				$("#btn_9_10").html("<span>Yes</span>");
			}else{
				$("#btn_9_10").html("<span>No</span>");
			}*/
	
			if(formattedDate == currentDate){
				$("#btn_9_10").show();
			}else{
				$("#btn_9_10").show();
			}
			
			/*
			if(slot_9_10 == '20'){
				$("#btn_9_10").replaceWith("<span id='btn_9_10' style='font-weight:900;color:red;font-size:18px;'>Full</span>");
			}

			
                        if(slot_10_11 == '20'){
                                $("#btn_10_11").replaceWith("<span id='btn_10_11' style='font-weight:900;color:red;font-size:18px;'>Full</span>");
                        }
                        
                        if(slot_11_12 == '20'){
                                $("#btn_11_12").replaceWith("<span id='btn_11_12' style='font-weight:900;color:red;font-size:18px;'>Full</span>");
                        }

                        
                        if(slot_12_13 == '20'){
                                $("#btn_12_13").replaceWith("<span id='btn_12_13' style='font-weight:900;color:red;font-size:18px;'>Full</span>");
                        }

                        
                        if(slot_13_14 == '20'){
                                $("#btn_13_14").replaceWith("<span id='btn_13_14' style='font-weight:900;color:red;font-size:18px;'>Full</span>");
                        }

                        
                        if(slot_14_15 == '20'){
                                $("#btn_14_15").replaceWith("<span id='btn_14_15' style='font-weight:900;color:red;font-size:18px;'>Full</span>");
                        }


                        
                        if(slot_15_16 == '20'){
                                $("#btn_15_16").replaceWith("<span id='btn_15_16' style='font-weight:900;color:red;font-size:18px;'>Full</span>");
                      	}
                        
                        if(slot_16_17 == '20'){
                                $("#btn_16_17").replaceWith("<span id='btn_16_17' style='font-weight:900;color:red;font-size:18px;'>Full</span>");
                        }*/
							
	
			

		
		    } 
		});	
	
	}
		
		
		var selectedOption = "9 - 10";
		getVisitScreenFilterTime(selectedOption); 	
		 $('.select_dates').change(function() {
       			 var selectedOption = $(this).val();
       			getVisitScreenFilterTime(selectedOption);	        
     		 });

			
		//section 2 ajax function
		 var display_date_ui = new Date();
	        var d_year = display_date_ui.getFullYear();
		var d_month = ('0' + (display_date_ui.getMonth() + 1)).slice(-2); // Add leading zero and slice to take last 2 characters
        	var d_date = ('0' + display_date_ui.getDate()).slice(-2); // Add leading zero and slice to take last 2 characters
	
		var combineDate = d_date+'-'+d_month+'-'+d_year;
		$('#display_date_in_ui').html(combineDate);


		function getVisitScreenFilterTime(selectedOption){
		 var visitTableData = '';

			$.ajax({
			   type: 'POST',
			   dataType: 'text',
			   url: 'getVisitInfoScreenData.php',
			   data: {
			     'postTime':selectedOption
			   },
			  success:function(res){
				

			
				//console.log(res);
				var datares = JSON.parse(res);
				
				$('#totalCountRecord').html(datares.count);
				if(datares.result == 'No Data'){
					$('#totalCountRecord').html(datares.count);
					visitTableData +="<tr style='padding:12px;text-align:center;height:30px;'>No Data</tr>";
					document.getElementById("visit_Table_Data").innerHTML = visitTableData;
				}

	
				datares.result.map((res) => {
visitTableData +="<tr style='height:2px;'><td>"+res.ticketNo+"</td><td>"+res.visitorName+"</td><td>"+res.prisonerName+"</td><td>"+res.visitTime+"</td></tr>";
document.getElementById("visit_Table_Data").innerHTML = visitTableData;
});
			    } 
			
			});
	
		}
		//section 2 end ajax function

});

</script>
