<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head.ejs')%>
</head>
<body>
    <div class="body-overlay">
        <header>
            <%- include('../partials/header.ejs')%>
        </header>
    <main>
        <div class="container">
            <h1>New Rental</h1>
            <form class="rentalContainer" action="/rentals" method="POST">
                <label for="vehicle">Vehicle: </label>
                <select name="vehicle" placeholder="vehicle">
                    <% vehicles.forEach(vehicle => { %>
                        <option value="<%= vehicle._id %>"><%= vehicle.name %></option>
                    <% }) %>
                </select>
                <label for="customer">Customer: </label>
                <input type="text" name="customer" placeholder="customer" /><br /> 
                <label for="rentalStartDate">Rental Start Date: </label>
                <input type="text" name="rentalStartDate" value="" />
                <script type="text/javascript">
                    $(function() {
                        $('input[name="rentalStartDate"]').daterangepicker({
                            singleDatePicker: true,
                            showDropdowns: true,
                            timePicker: true,
                            minYear: 2023,
                            locale: {
                                format: 'MM/DD/YYYY hh:mm A',
                                separator: " - ",
                                }
                        }, function(start, end, label) {
                        });
                    });
                </script>
                <label for="rentalEndDate">Rental End Date: </label>
                <input type="text" name="rentalEndDate" value="" />
                <script type="text/javascript">
                    $(function() {
                        $('input[name="rentalEndDate"]').daterangepicker({
                            singleDatePicker: true,
                            showDropdowns: true,
                            timePicker: true,
                            minYear: 2023,
                            locale: {
                                format: 'MM/DD/YYYY hh:mm A',
                                separator: " - ",
                                }
                        }, function(start, end, label) {
                        });
                    });
                </script>
                <label for="deliveryNeeded">Delivery Needed: </label>
                <select name="deliveryNeeded" placeholder="Delivery Needed">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select><br> 
                <label for="totalCost">Total Cost: </label>
                <input type="text" name="totalCost" placeholder="totalCost" /><br /> 
                <label for="rentalLocation">Rental Location: </label>
                <select name="rentalLocation" placeholder="rentalLocation">
                    <option value="Temple,TX">Temple,TX</option>
                    <option value="MCI Airport">Killeen,TX - MCI Airport</option>
                    <option value="Austin,TX">Austin,TX</option>
                    <option value="AUS Airport">Austin,TX - AUS Airport</option>
                </select>
                <label for="rentalStatus">Rental Status: </label>
                <select name="rentalStatus" placeholder="Select rentalStatus">
                    <option value="Pending">Pending</option>
                    <option value="In Progress">In Progress</option>
                    <option value="Awaiting Check-in">Awaiting Check-in</option>
                    <option value="Completed">Completed</option>
                </select><br>
                <input class="btn btn-primary btn-sm" type="submit" value="Create" />
            </form>
        </div>
    </main>
    <footer>
        <%- include('../partials/footer.ejs')%>
    </footer>
    </div>
  </body>
</html>