{*+**********************************************************************************
* 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;
}

#section_3{
display:none;
}

#section_4{
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;
}

.third-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;
}

.fourth-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; 
  border: none;
  color: white;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
width:100px;
border-radius:5px;
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{
}

/* General Styling for the Select Dropdown */
.select_dates {
    width: 30%; /* Full width of the container */
    padding: 10px; /* Add spacing inside the dropdown */
    font-size: 16px; /* Make the text readable */
    color: #333; /* Dark text for contrast */
    background-color: #f9f9f9; /* Light background for dropdown */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    outline: none; /* Remove focus outline */
    transition: all 0.3s ease; /* Smooth hover and focus effects */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

/* Dropdown on Hover */
.select_dates:hover {
    background-color: #f1f1f1; /* Slightly darker background */
    border-color: #aaa; /* Darker border on hover */
    cursor: pointer; /* Pointer cursor */
}

/* Dropdown on Focus */
.select_dates:focus {
    border-color: #5cb85c; /* Green border when focused */
    box-shadow: 0 0 5px rgba(92, 184, 92, 0.5); /* Green glow effect */
}

/* Option Styling */
.select_dates option {
    padding: 10px; /* Add padding to options */
    background-color: #ffffff; /* White background for options */
    color: #333; /* Dark text for readability */
}

/* Highlight Selected Option */
.select_dates option:checked {
    background-color: #5cb85c; /* Green background for selected option */
    color: #ffffff; /* White text for contrast */
}



#datepicker, #startDate, #endDate, #todaysdatepicker {
    cursor: pointer;
    width: 200px; /* Adjust the width */
    padding: 10px; /* Add padding for better spacing */
    font-size: 16px; /* Set a readable font size */
    border: 1px solid #ccc; /* Light border for aesthetics */
    border-radius: 5px; /* Rounded corners */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    outline: none; /* Remove focus outline */
    transition: all 0.3s ease-in-out; /* Smooth transitions */
}

/* Change border color and box shadow on focus */
#datepicker:focus {
    border-color: #007bff; /* Highlight border color (blue) */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue glow */
}

/* Change border color and box shadow on focus */
#todaysdatepicker:focus {
    border-color: #007bff; /* Highlight border color (blue) */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue glow */
}


/* Change border color and box shadow on focus */
#startDate:focus {
    border-color: #007bff; /* Highlight border color (blue) */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue glow */
}


/* Change border color and box shadow on focus */
#endDate:focus {
    border-color: #007bff; /* Highlight border color (blue) */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue glow */
}


/* Add some style to the label */
label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    display: inline-block;
    margin-bottom: 5px; /* Add spacing between label and input */
}

/* Table Container */
#first_tab_table {
    width: 100%; /* Full-width table */
    border-collapse: collapse; /* Remove default spacing between cells */
    margin: 20px 0; /* Add space above and below */
    font-size: 16px; /* Make text readable */
    text-align: left; /* Align text to the left */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

/* Header Styling */
#first_tab_table thead {
    background-color: #C8F7E6; /* Light green */
    color: #333; /* Dark text for contrast */
    text-transform: uppercase; /* Capitalize headers */
    font-weight: bold; /* Bold header text */
}

/* Row Styling */
#first_tab_table tbody tr {
    border-bottom: 1px solid #ddd; /* Add border between rows */
    transition: background-color 0.3s ease; /* Add hover effect */
}

/* Alternating Row Colors */
#first_tab_table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Light gray for even rows */
}

/* Hover Effect */
#first_tab_table tbody tr:hover {
    background-color: #eafaf1; /* Light green highlight */
}

/* Cell Styling */
#first_tab_table td,
#first_tab_table th {
    padding: 12px 15px; /* Add padding inside cells */
    text-align: center; /* Center align text */
}

/* Request Column */
.td_display {
    text-align: right; /* Align numbers to the right */
    font-weight: bold; /* Make numbers stand out */
}

/* Buttons Styling */
.visitor-btn {
    display: inline-block; /* Align button properly */
    padding: 8px 15px; /* Add padding inside buttons */
    font-size: 14px; /* Adjust button text size */
    color: #fff; /* White text */
    background-color: #147c1c; /* Dark green color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth color transition */
}

/* Button Hover Effect */
.visitor-btn:hover {
    background-color: #06d71f; /* Light Green */
}

/* Time Column */
td:first-child {
    font-weight: bold;
    font-size: 14px;
}

/* Remove extra borders */
#first_tab_table th, #first_tab_table td {
    border: none;
}

/* Table Container */
#second_tab_table {
    width: 100%; /* Full-width table */
    border-collapse: collapse; /* Remove default spacing between cells */
    margin: 20px 0; /* Add space above and below */
    font-size: 16px; /* Make text readable */
    text-align: left; /* Align text to the left */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

/* Header Styling */
#second_tab_table thead {
    background-color: #C8F7E6; /* Light green */
    color: #333; /* Dark text for contrast */
    text-transform: uppercase; /* Capitalize headers */
    font-weight: bold; /* Bold header text */
}

/* Row Styling */
#second_tab_table tbody tr {
    border-bottom: 1px solid #ddd; /* Add border between rows */
    transition: background-color 0.3s ease; /* Add hover effect */
}

/* Alternating Row Colors */
#second_tab_table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Light gray for even rows */
}

/* Hover Effect */
#second_tab_table tbody tr:hover {
    background-color: #eafaf1; /* Light green highlight */
}

/* Cell Styling */
#second_tab_table td,
#second_tab_table th {
    padding: 12px 15px; /* Add padding inside cells */
    text-align: center; /* Center align text */
}

/* Remove extra borders */
#second_tab_table th, #second_tab_table td {
    border: none;
}

.customRangeDates{
        width: 20%; /* Full width of the container */
    padding: 10px; /* Add spacing inside the dropdown */
    font-size: 16px; /* Make the text readable */
    color: #333; /* Dark text for contrast */
    background-color: #f9f9f9; /* Light background for dropdown */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    outline: none; /* Remove focus outline */
    transition: all 0.3s ease; /* Smooth hover and focus effects */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for depth */    
}

.btn-download{
    padding: 12px; /* Add spacing inside the dropdown */
    font-size: 16px; /* Make the text readable */
    color: #ffffff; /* Dark text for contrast */
    background-color: #04AA6D; /* Light background for dropdown */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    outline: none; /* Remove focus outline */
}
</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>&emsp;
                                <button type="button" class="btn third-btn" id="third_tab">Appointments List</button>&emsp;
                                <button type="button" class="btn fourth-btn" id="fourth_tab">Export Data</button>&emsp;

			</div>	
			<hr style="border:1px solid black;">
	
			<!--section 1-->
			<div class="container mt-2 section_1" id="section_1">
				<div class="">	
				<label for="datepicker">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" style="text-align:center">Request</th>
					<th scope="col" style="text-align:center">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;"><span  class="visitor-btn" id="btn_9_10">Add Visitor</span></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>
				
				 <tr>
                                 <td style="font-size:14px;font-weight:900;">5 PM - 6 PM</td>
                                 <td id="display_17_18" 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_17_18">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" id="customTime">
                                        <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">4 PM - 5 PM</option>
                                        <option value="17 - 18">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" style="text-align:center;">Request ID</th>
				        <th scope="col" style="text-align:center;">Visitor Name</th>
				        <th scope="col" style="text-align:center;">Prisoner Name</th>
				        <th scope="col" style="text-align:center;">Requested Time</th>
					<th scope="col" style="text-align:center;">Generate Token</th>

				      </tr>
				    </thead>
				<tbody id="visit_Table_Data">
				     
				</tbody>
				</table>
			</div>
		
			<!--section 2 end-->

                        <!--section 3-->
                        
                        <div class="container section_3" id="section_3">

				 <div class="" style="margin:1% 15%">
                                <label for="datepicker">Select Date</label>&emsp;
                                <input type="text" id="todaysdatepicker" value="">
                                </div>
					
				<div class="container" style="margin:1% 15%">
				<button type="button" class="btn btn-success" id="visitordownloadReport" style="margin: 10px 10px;font-size: 16px;padding:10px">Visitor List</button>

				<button type="button" class="btn btn-success" id="prisonerdownloadReport" style="margin: 10px 10px;font-size: 16px;padding:10px">Prisoner List</button>
				</div>

                        </div>
			
			<!--section 3__astcrm end-->

			<!--section 4-->

                        <div class="container section_4" id="section_4">

                                <label for="datepicker">Start Date</label>&emsp;
                                <input type="text" id="startDate" value="">
                                &emsp;
                                <label for="datepicker">End Date</label>&emsp;
                                <input type="text" id="endDate" value="">

                                <br><br>

                                <div class="container" style="margin:2% 15%">

                                <button type="button" class="btn btn-success" id="meetingStatusReport" style="margin: 10px 10px;font-size: 16px;padding:10px">Export</button>
                                </div>

                        </div>

                        <!--section 4__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}

<style>
.btn-token{
background-color:#04AA6D;
border-radius:5px;
color:white;
}
.popupStyle{
border-radius:10px;
border-color:#85929E;
font-size: 16px;
-webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  width:600px;
  padding:20px;
}
.btn-print-token{
background-color:#696A85;
border-radius:5px;
color:white;

}

@media print {
    #proceedToGenerateToken, #closepopup, #closedatapopup {
        display: none;
    }
}
</style>
 

		
	<div>
	<dialog id="tokenPopUp" class="popupStyle">
	
	<input type="hidden" id="ticketId">
	<input type="hidden" id="ticketNo">
	<p>Visitor Name: <span id="visitorName"></span><p>
	
	<hr>
	  <div class="text-center">
		<div><p style="font-size:16px;font-weight:800;color:green;display:none;" id="successMsg">Token generated success</p></div>
           <button id="proceedToGenerateToken">Proceed to Generate Token</button>
           <button id="closepopup">Close</button>
          </div>	
	</dialog>
	</div>



	<div>
	<dialog id="tokenDataPopUp" class="popupStyle">

		<div style="font-family: Arial, sans-serif; text-align: center;">
        <h2>Token Details</h2>
        <p><strong>Ticket Number:</strong> <span id="p_ticketNumber"></span></p>
        <p><strong>Date:</strong> <span id="p_date"></span></p>
        <p><strong>Chamber:</strong> <span id="p_chamber"></span></p>
        <p><strong>Token Number:</strong> <span id="p_tokenNumber"></span></p>
        <p><strong>Prisoner Name:</strong> <span id="p_contactName"></span></p>
    </div>
          <div class="text-center">
           <button id="proceedToGenerateToken" onclick="window.print()">Print</button>
           <button id="closedatapopup">Close</button>
          </div>
        </dialog>
	</div>


  <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>


<link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></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);
   		 }
		
      });

	 $("#todaysdatepicker").datepicker({
                 minDate: 0, // Disable previous dates
                dateFormat: 'dd-mm-yy',
                 onSelect: function(dateText) {
                 }
      });
 
	

	 $("#startDate").datepicker({
                 maxDate: 0, // Disable future dates
                dateFormat: 'dd-mm-yy',
                 onSelect: function(dateText) {
                 
		}
          });

	$("#endDate").datepicker({
                 maxDate: 0, // Disable future dates
                dateFormat: 'dd-mm-yy',
                 onSelect: function(dateText) {

                }
          });    

	//by default call the function 
	processSelectedDate(selectedDate);	


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

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

		// on click 1 tab hide second tab
		$('#section_2').hide(); 
                $('#section_3').hide();        
		$('#section_4').hide();
        	$('#section_1').show();
        
        });
        //end 1




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


        //third tab funcion	
	$('#third_tab').click(function(){
		
		// on click 2 tab hide first tab
		$('#section_1').hide();
		$('#section_2').hide();
                $('#section_3').show();
		$('#section_4').hide();
	});
	//end 3

	//fourth tab funcion     
        $('#fourth_tab').click(function(){

                // on click 2 tab hide first tab
                $('#section_1').hide();
                $('#section_2').hide();
                $('#section_4').show();
                $('#section_3').hide();
        });
        //end 4

	
	var defdata = {
                 time:'',
                 selectedDate: selectedDate
                }

                var defjsonString = JSON.stringify(defdata);
               localStorage.setItem("data", defjsonString);
	
localStorage.setItem("dataa", 'test');

	//########## 9 - 10 ###############
	function btn_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 ##############
	function btn_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 ##############
	 function btn_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 ##############
	 function btn_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 ##############
	 function btn_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 ##############
	 function btn_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 ##############
	 function btn_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 ##############
	 function btn_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;
        });
	}


	//########## 17 -18 ##############
         function btn_17_18(){
         $('#btn_17_18').click(function(){

                var data = {
                 time:'17 - 18',
                 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 slot_17_18 = response['17 - 18'];
		
			var chambersAvail = response['chambers'];	
			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);
			$("#display_17_18").html(slot_17_18);
		
			var now = new Date();
			var currentHour = now.getHours();

			var slottime = response['chamber_freq'];

			var chambersPerHour = (60/slottime)*chambersAvail;

			console.log(chambersPerHour);

			// 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;


			

			//================9_10==========================//
			if(formattedDate == currentDate){
				if(currentHour <= '9'){
					if(slot_9_10 == chambersPerHour){
						$("#btn_9_10").text("Full");
						$("#btn_9_10").css("background-color", "#F53838");
					}else{
						$("#btn_9_10").show();
						$("#btn_9_10").css("cursor", "pointer");
						btn_9_10();
					}
				}else{
					$("#btn_9_10").text('Time Over');
					$("#btn_9_10").css("background-color", "#FF7400");
					$("#btn_9_10").css("cursor", "not-allowed");
						
				}
			}else{
				$("#btn_9_10").text('Add Visitor');
				$("#btn_9_10").css("cursor", "pointer");
				$("#btn_9_10").css("background-color", "#04AA6D");
				btn_9_10();
			}
			//=============End 9_10 ========================//


			 //================Time 10_11 ==========================//
                        if(formattedDate == currentDate){
                                if(currentHour <= '10'){
                                        if(slot_10_11 == chambersPerHour){
                                                $("#btn_10_11").text("Full");
                                                $("#btn_10_11").css("background-color", "#F53838");
                                        }else{
                                                $("#btn_10_11").show();
                                                $("#btn_10_11").css("cursor", "pointer");
                                                btn_10_11();
                                        }
                                }else{
                                        $("#btn_10_11").text('Time Over');
                                        $("#btn_10_11").css("background-color", "#FF7400");
					 $("#btn_10_11").css("cursor", "not-allowed");
                                }
                        }else{
                                $("#btn_10_11").text('Add Visitor');
                                $("#btn_10_11").css("cursor", "pointer");
                                $("#btn_10_11").css("background-color", "#04AA6D");
                                btn_10_11();
                        }
                        //=============TimeEnd 10_11 ========================//
			
			
			 //================Time 11_12 ==========================//
                        if(formattedDate == currentDate){
                                if(currentHour <= '11'){
                                        if(slot_11_12 == chambersPerHour){
                                                $("#btn_11_12").text("Full");
                                                $("#btn_11_12").css("background-color", "#F53838");
                                        }else{
                                                $("#btn_11_12").show();
                                                $("#btn_11_12").css("cursor", "pointer");
                                                btn_11_12();
                                        }
                                }else{
                                        $("#btn_11_12").text('Time Over');
                                        $("#btn_11_12").css("background-color", "#FF7400");
                                         $("#btn_11_12").css("cursor", "not-allowed");
                                }
                        }else{
                                $("#btn_11_12").text('Add Visitor');
                                $("#btn_11_12").css("cursor", "pointer");
                                $("#btn_11_12").css("background-color", "#04AA6D");
                                btn_11_12();
                        }
                        //=============TimeEnd 11_12 ========================//


                        //================12_13==========================//
                        if(formattedDate == currentDate){
                                if(currentHour <= '12'){
                                        if(slot_12_13 == chambersPerHour){
                                                $("#btn_12_13").text("Full");
                                                $("#btn_12_13").css("background-color", "#F53838");
                                        }else{
                                                $("#btn_12_13").show();
                                                $("#btn_12_13").css("cursor", "pointer");
                                                btn_12_13();
                                        }
                                }else{
                                        $("#btn_12_13").text('Time Over');
                                        $("#btn_12_13").css("background-color", "#FF7400");
                                        $("#btn_12_13").css("cursor", "not-allowed");

                                }
                        }else{
                                $("#btn_12_13").text('Add Visitor');
                                $("#btn_12_13").css("cursor", "pointer");
                                $("#btn_12_13").css("background-color", "#04AA6D");
                                btn_12_13();
                        }
                        //=============End 12_13 ========================//



                        //================13_14==========================//
                        if(formattedDate == currentDate){
                                if(currentHour <= '13'){
                                        if(slot_13_14 == chambersPerHour){
                                                $("#btn_13_14").text("Full");
                                                $("#btn_13_14").css("background-color", "#F53838");
                                        }else{
                                                $("#btn_13_14").show();
                                                $("#btn_13_14").css("cursor", "pointer");
                                                btn_13_14();
                                        }
                                }else{
                                        $("#btn_13_14").text('Time Over');
                                        $("#btn_13_14").css("background-color", "#FF7400");
                                        $("#btn_13_14").css("cursor", "not-allowed");

                                }
                        }else{
                                $("#btn_13_14").text('Add Visitor');
                                $("#btn_13_14").css("cursor", "pointer");
                                $("#btn_13_14").css("background-color", "#04AA6D");
                                btn_13_14();
                        }
                        //=============End 13_14 ========================//




                        //================14_15==========================//
                        if(formattedDate == currentDate){
                                if(currentHour <= '14'){
                                        if(slot_14_15 == chambersPerHour){
                                                $("#btn_14_15").text("Full");
                                                $("#btn_14_15").css("background-color", "#F53838");
                                        }else{
                                                $("#btn_14_15").show();
                                                $("#btn_14_15").css("cursor", "pointer");
                                                btn_14_15();
                                        }
                                }else{
                                        $("#btn_14_15").text('Time Over');
                                        $("#btn_14_15").css("background-color", "#FF7400");
                                        $("#btn_14_15").css("cursor", "not-allowed");

                                }
                        }else{
                                $("#btn_14_15").text('Add Visitor');
                                $("#btn_14_15").css("cursor", "pointer");
                                $("#btn_14_15").css("background-color", "#04AA6D");
                                btn_14_15();
                        }
                        //=============End 14_15 ========================//




                        //================15_16==========================//
                        if(formattedDate == currentDate){
                                if(currentHour <= '15'){
                                        if(slot_15_16 == chambersPerHour){
                                                $("#btn_15_16").text("Full");
                                                $("#btn_15_16").css("background-color", "#F53838");
                                        }else{
                                                $("#btn_15_16").show();
                                                $("#btn_15_16").css("cursor", "pointer");
                                                btn_15_16();
                                        }
                                }else{
                                        $("#btn_15_16").text('Time Over');
                                        $("#btn_15_16").css("background-color", "#FF7400");
                                        $("#btn_15_16").css("cursor", "not-allowed");

                                }
                        }else{
                                $("#btn_15_16").text('Add Visitor');
                                $("#btn_15_16").css("cursor", "pointer");
                                $("#btn_15_16").css("background-color", "#04AA6D");
                                btn_15_16();
                        }
                        //=============End 14_15 ========================//



                        //================16_17==========================//
                        if(formattedDate == currentDate){
                                if(currentHour <= '16'){
                                        if(slot_16_17 == chambersPerHour){
                                                $("#btn_16_17").text("Full");
                                                $("#btn_16_17").css("background-color", "#F53838");
                                        }else{
                                                $("#btn_16_17").show();
                                                $("#btn_16_17").css("cursor", "pointer");
                                                btn_16_17();
                                        }
                                }else{
                                        $("#btn_16_17").text('Time Over');
                                        $("#btn_16_17").css("background-color", "#FF7400");
                                        $("#btn_16_17").css("cursor", "not-allowed");

                                }
                        }else{
                                $("#btn_16_17").text('Add Visitor');
                                $("#btn_16_17").css("cursor", "pointer");
                                $("#btn_16_17").css("background-color", "#04AA6D");
                                btn_16_17();
                        }
                        //=============End 14_15 ========================//



			 //================17_18==========================//
                        if(formattedDate == currentDate){
                                if(currentHour <= '17'){
                                        if(slot_17_18 == chambersPerHour){
                                                $("#btn_17_18").text("Full");
                                                $("#btn_17_18").css("background-color", "#F53838");
                                        }else{
                                                $("#btn_17_18").show();
                                                $("#btn_17_18").css("cursor", "pointer");
                                                btn_17_18();
                                        }
                                }else{
                                        $("#btn_17_18").text('Time Over');
                                        $("#btn_17_18").css("background-color", "#FF7400");
                                        $("#btn_17_18").css("cursor", "not-allowed");

                                }
                        }else{
                                $("#btn_17_18").text('Add Visitor');
                                $("#btn_17_18").css("cursor", "pointer");
                                $("#btn_17_18").css("background-color", "#04AA6D");
                                btn_17_18();
                        }
                        //=============End 17_18 ========================//

	
		    } 
		});	
	
	}

// Call the processSelectedDate function every 5 seconds
	setInterval(function () {
    		processSelectedDate(selectedDate);
	}, 5000);
		
		
		/*var selectedOption = "9 - 10";
		getVisitScreenFilterTime(selectedOption); 	
		 $('.select_dates').change(function() {
       			 var selectedOption = $(this).val();
       			getVisitScreenFilterTime(selectedOption);	        
     		 });*/

		 // Determine the default selected option based on the current time

		const now = new Date();
    		const currentHour = now.getHours();
    		const currentMinutes = now.getMinutes();

   		 let selectedOption = '9 - 10'; // Default value
		 if (currentHour >= 9 && currentHour < 18) {
            		selectedOption = currentHour + ' - ' + (currentHour + 1);
    		}

    		// Set the default selected option
    		$('.select_dates').val(selectedOption);

		// Trigger the function with the default selected option
    		getVisitScreenFilterTime(selectedOption);

    		// Add a change event listener to the select element
    		$('.select_dates').change(function () {
        		// Get the newly selected option
        		var selectedOption = $(this).val();

        		// Trigger the function with the new selected option
        		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);
				
				console.log(datares);

				$('#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;
				}

				if(datares.count > 0){		
				datares.result.map((res) => {
				
				if(res.generateToken == '0'){
					/*var generateButton = '<button type="button" class="btn btn-token" id="generateTokenBtn" onclick=generateToken("'+res.ticketId+'","'+res.ticketNo+'","'+res.visitorName+'")>Generate Token</button>';*/

					var generateButton = '<button type="button" class="btn btn-token" id="generateTokenBtn" onclick=\'generateToken("'+res.ticketId+'","'+res.ticketNo+'","'+res.visitorName.replace(/"/g, '&quot;')+'")\'>Generate Token</button>';

				}else{
					var generateButton = '<button type="button" class="btn btn-print-token" id="printTokenBtn" onclick=\'printToken("'+res.ticketId+'","'+res.ticketNo+'","'+res.visitorName.replace(/"/g, '&quot;')+'")\'>Print Token</button>';
				}
				
visitTableData +='<tr style="height:2px;text-align:center;"><td>'+res.ticketNo+'</td><td>'+res.visitorName+'</td><td>'+res.prisonerName+'</td><td>'+res.visitTime+'</td><td style="text-align:center;">'+generateButton+'</td></tr>';
document.getElementById("visit_Table_Data").innerHTML = visitTableData;
});			
}

			    } 
		
			});
	
		}
	
		//section 2 end ajax function


});


		  //generate token function starts here
                function generateToken(ticketId,ticketNo,visitorName){
                       // alert(ticketId);
			var ticketId = ticketId;
			var ticketNo = ticketNo;
			$('#visitorName').html(visitorName);
			$('#ticketId').val(ticketId);
			$('#ticketNo').val(ticketNo);
			tokenPopUp.showModal();
                }    


		$('#proceedToGenerateToken').click(function(){
			var getTicketId = $('#ticketId').val();
			var getTicketNo = $('#ticketNo').val();
			$('#proceedToGenerateToken').hide();
		//	alert(getTicketId+'=='+getTicketNo);

			  $.ajax({
                           type: 'POST',
                           dataType: 'text',
                           //url: 'generateToken.php',
                           url: 'newGenerateToken.php',
                           data: {
                             'ticketId':getTicketId,
                             'ticketNo':getTicketNo
                           },
                          success:function(res){
                                	$('#successMsg').show();
					getVisitScreenFilterTime();				
                          	}
                        });

		});

		$('#closepopup').click(function(){
			tokenPopUp.close();
			location.reload();
		});

		$('#closedatapopup').click(function(){
                        tokenDataPopUp.close();
                });


		//print token function
		function printToken(ticketid, ticketNumber, visitorName){

			tokenDataPopUp.showModal();
		//	alert(ticketid+'--'+ticketNumber+'--'+visitorName);
			$.ajax({
                           type: 'POST',
                           dataType: 'json',
                           //url: 'generateToken.php',
                           url: 'getTokenDetails.php',
                           data: {
                             'ticketId':ticketid,
                           },
                          success:function(res){
                                     console.log(res);
				    	var ticketNumber = res.details[0].ticketNumber;
					var date = res.details[0].date;
					var chamber = res.details[0].chamber;
					var tokenNumber = res.details[0].tokenNumber;
					var contactName = res.details[0].contactName;
              

						

					$('#p_ticketNumber').html(ticketNumber);
					$('#p_date').html(date);
					$('#p_chamber').html(chamber);
					$('#p_tokenNumber').html(tokenNumber);
					$('#p_contactName').html(contactName);

					              
                                }
                        });


		}


		$('#meetingStatusReport').on('click',function(){
                        var sDate = $('#startDate').val();
			var eDate = $('#endDate').val();

                        if(sDate == '' || eDate == ''){
                                alert('Invalid Date');
                                return 0;
                        }else{
                                /*window.location.href='./meetingStatusReport.php?sDate='+sDate+'&eDate='+eDate;*/

				alert('In Progress');
                        }
                });



                $('#visitordownloadReport').on('click',function(){
                        var sDate = $('#todaysdatepicker').val();
                        
                        if(sDate == ''){
                                alert('Invalid Date');
                                return 0;
                        }else{
                                window.location.href='./visitordownloadReport.php?sDate='+sDate;
                        }
                });

		$('#prisonerdownloadReport').on('click',function(){
                        var sDate = $('#todaysdatepicker').val();
                       
                        if(sDate == ''){
                                alert('Invalid Date');
                                return 0;
                        }else{
                                window.location.href='./prisonerdownloadReport.php?sDate='+sDate;
                        }
                });





                
</script>
