{% extends "prk_template/base.html" %}



{% block content %}
<style>
	  table {
		  width: 100%;
		  border-collapse: collapse;
		  background-color: #fff;
	  }
	  th, td {
		  border: 1px solid #1abc9c;
		  padding: 4px;
		  text-align: left;
	  }
	  th {
		  background-color: #46c5ab;
		  font-size: 9px;
		  color: #fff;
	  }
	  td.number {
		  text-align: center;
	  }
	  .hidden {
		  display: none;
	  }
	  .expandable {
		  cursor: pointer;
	  }
	  .expandable:hover {
		  background-color: #f0f0f0;
	  }
	  .summary-row {
		  background-color: #e0e0e0;
		  font-weight: bold;
	  }  
   /* Loading Spinner Styles */
   .loading-spinner {
			  text-align: center;
		  }
  
		  .loading-spinner .fa-spinner {
			  font-size: 28px; /* Adjust size as needed */
			  color: #1abc9c; /* Change color as needed */
			  animation: spin 1s linear infinite;
		  }
  
		  /* Keyframes for spinning animation */
		  @keyframes spin {
			  0% { transform: rotate(0deg); }
			  100% { transform: rotate(360deg); }
		  }
  .input-row {
	  display: flex;
	  flex-wrap: wrap;
  }
  
  .col-2 {
	  flex: 0 0 16.67%; /* 2 out of 12 columns */
	  max-width: 16.67%; /* Adjust based on your grid system */
	  box-sizing: border-box; /* Ensure padding/margins are included */
	  
	  
  }
  /* Control the input height */
  .col-2 input,select {
	  height: 20px; /* Set your desired height */
	  padding: 0 10px; /* Optional: Add horizontal padding */
	  font-size: 10px; /* Optional: Set font size */
  }
  .col-3 input {
	  height: 20px; /* Set your desired height */
	  padding: 0 10px; /* Optional: Add horizontal padding */
	  font-size: 10px; /* Optional: Set font size */
  }
  .col-4 input {
	  height: 20px; /* Set your desired height */
	  padding: 0 10px; /* Optional: Add horizontal padding */
	  font-size: 10px; /* Optional: Set font size */
  }
  .col-2:last-child {
	  margin-right: 0; /* Remove margin for the last item */
  }
  
  @media (max-width: 768px) { /* Adjust for smaller screens */
	  .col-2 {
		  flex: 0 0 100%; /* Stack on smaller screens */
		  max-width: 100%;
	  }
  }
  
  .modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 10; /* Sit on top */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  .modal-content {
	  background-color: #fefefe;
	  margin: 15% auto; /* 15% from the top and centered */
	  padding: 20px;
	  border: 1px solid #888;
	  width: 80%; /* Could be more or less, depending on screen size */
	  overflow: auto; /* Enable scroll if needed */
  }
  
  .close {
	  color: #a71212;
	  float:right;
	  font-size: 28px;
	  font-weight: bold;
	  padding-left: 98%;
  }
  
  .close:hover,
  .close:focus {
	  color: #a71212;
	  text-decoration: none;
	  cursor: pointer;
  }
 
  
	 </style>
  
<div class="pcoded-main-container">
	<div class="pcoded-content">
		<!-- [ breadcrumb ] start -->
		<div class="page-header">
			<div class="page-block">
				<div class="row align-items-center">
					<div class="col-md-12">

						<button type="submit">Sales </button>
						<button type="submit">Add Item </button>
						<button type="submit">Add Customer </button>
					</div>
				</div>
			</div>
		</div>
		<!-- [ breadcrumb ] end -->
		<!-- [ Main Content ] start -->
		<div class="row">
			<!-- [ tabs ] start -->
			
			<div class="col-sm-12">
				
				<div class="card">
					<div class="card-body">
						<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
							<li class="nav-item">
								<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Print</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Park IN</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Park Out</a>
							</li>
						</ul>
						<div class="tab-content" id="pills-tabContent">
							<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
								
								<div class="alt" id="tbl_div">
									<table id="park_data">
									</table>
								 
								</div>
							</div>
							<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
								<form id="parkInForm" enctype="multipart/form-data">
									<label for="motorist_name">Motor Type:</label>
									<select id="motor_type" name="motor_type" required>
										<option value="">Select Motor Type</option>
										<option value="2W">2W</option>
										<option value="4W">4W</option>
									</select><BR>

									<label for="motorist_name">Motorist Name:</label>
									<input type="text" id="motorist_name" name="motorist_name" required><br><br>
							
									<label for="vehicle_plate_no">Vehicle Plate No:</label>
									<input type="text" id="vehicle_plate_no" name="vehicle_plate_no" required><br><br>
							
									<label for="attachment_file">Attachment:</label>
									<input type="file" id="attachment_file" name="attachment_file"><br><br>
							
									<button type="submit">Park In</button>
								</form>
							
								<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
								<script>
									document.getElementById('parkInForm').addEventListener('submit', function(event) {
										event.preventDefault(); // Prevent default form submission
							
										const formData = new FormData(this);
							
										axios.post('/park_in', formData, {
											headers: {
												'Content-Type': 'multipart/form-data',
												'Authorization': `Bearer ${localStorage.getItem('token')}` // Adjust as needed for your token
											}
										})
										.then(response => {
											alert(response.data.msg);
										})
										.catch(error => {
											alert(error.response.data.msg || 'An error occurred');
										});
									});
								</script>
							</div>
							<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
								<form id="infoForm">
									<label for="parking_id">Parking ID:</label>
									<input type="text" id="parking_id" name="parking_id" required>
									<button type="submit">Get Info</button>
								</form>
						
								<div id="parkingInfo" style="display:none;">
									<h2>Parking Info</h2>
									<p id="infoDisplay"></p>
									<button id="parkOutBtn">Park Out</button>
								</div>
						
								<div id="message"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<script>
				document.getElementById('infoForm').addEventListener('submit', async function (event) {
    event.preventDefault();

    const parkingId = document.getElementById('parking_id').value;
    const token = localStorage.getItem('token'); // Replace with your method to get JWT

    try {
        const response = await axios.post('/parking_info', { parking_id: parkingId }, {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        });

        // Display parking information
        const infoDisplay = document.getElementById('infoDisplay');
        infoDisplay.innerHTML = `
            ID: ${response.data.Park_Info.id}<br>
            Type: ${response.data.Park_Info.type}<br>
            Motorist: ${response.data.Park_Info.motorist}<br>
            Vehicle Plate No: ${response.data.Park_Info.Vehicle_plate_no}<br>
            Park In Time: ${response.data.Park_Info.park_in_time}
        `;
        document.getElementById('parkingInfo').style.display = 'block';

        // Set up Park Out button
        document.getElementById('parkOutBtn').onclick = async function () {
            await parkOut(parkingId);
        };
    } catch (error) {
        if (error.response) {
            document.getElementById('message').innerText = error.response.data.msg;
        } else {
            document.getElementById('message').innerText = "Network error";
        }
    }
});

async function parkOut(parkingId) {
    const token = localStorage.getItem('token'); // Replace with your method to get JWT

    try {
        const response = await axios.post('/park_out', { parking_id: parkingId }, {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        });
        document.getElementById('message').innerText = response.data.msg;
    } catch (error) {
        if (error.response) {
            document.getElementById('message').innerText = error.response.data.msg;
        } else {
            document.getElementById('message').innerText = "Network error";
        }
    }
}

			</script>
			<!-- [ tabs ] end -->
		</div>


		<!-- [ Main Content ] end -->
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

{% endblock %}