<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<title>Parking Lot</title>
</head>
<body>
<header class="shadow">
<div class="header-content d-flex justify-content-center p-2">
<img src="./img/parking.png" alt="" id="header-logo">
<div id="header-msg" class="ml-5 align-self-center">Parking Lot Management System</div>
</div>
</header>
<div class="container-md pt-5">
<div id="msg"></div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="card rounded-0 shadow">
<div class="card-header rounded-0">
<div class="card-title"><b>Parking Form</b></div>
</div>
<div class="card-body rounded-0">
<div class="container-fluid">
<form id="entryForm">
<div class="form-group">
<label for="owner">Car Owner/Driver:</label>
<input type="text" class="form-control rounded-0 shadow-sm" id="owner" placeholder="Mark Cooper">
</div>
<div class="form-group">
<label for="car">Car Brand/Model/Color:</label>
<input type="text" class="form-control rounded-0 shadow-sm" id="car" placeholder="Mitsubishi Montero">
</div>
<div class="form-group">
<label for="licensePlate">License Plate:</label>
<input type="text" class="form-control rounded-0 shadow-sm" id="licensePlate" placeholder="#######">
</div>
<button type="submit" class="btn mx-auto col-lg-5 col-md-6 col-sm-12 col-12 d-block mt-5 rounded-0 bg-gradient btn-primary" id="btnOne">Save</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-12">
<div class="card rounded-0 shadow">
<div class="card-header rounded-0">
<div class="card-title"><b>List of Parked Cars</b></div>
</div>
<div class="card-body rounded-0">
<div class="container-fluid">
<div class="mb-3 position-relative">
<input type="text" class="form-control rounded-0" id="searchInput" placeholder="Search...">
<span class="position-absolute material-symbols-outlined" style="right: 10px;top: calc(50% - 0.7rem);">search</span>
</div>
<div class="table-responsive">
<table class="table table-sm table-striped table-bordered " id="parkingTable">
<thead class="text-white" id="tableHead">
<tr>
<th scope="col">Owner</th>
<th scope="col">Car</th>
<th scope="col">License Plate</th>
<th scope="col">Entry Date</th>
<th scope="col">Exit Date</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-gradient bg-light mt-4">
<div class="container-md py-3">
<div class="lh-1 text-center">
<div class="text-center fs-6 text-body">Simple Parking Lote Management System in JS</div>
<div class="text-center fs-6"><a href="mailto:oretnom23@gmail.com">oretnom23@gmail.com</a></div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="./js/parking-core.js"></script>
</body>
</html>
