<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Style CSS -->
    <link rel="stylesheet" href="styles.css">

    <title>Simone International Dispatch Route Planning</title>
    
  </head>
  <body>
    <div class="container">
      <div class="left-panel open" id="leftPanel">
        <div class="tab">
          <button class="tablinks" onclick="openTab(event, 'Customers')" id="defaultOpen">Plan Dispatch</button>
        </div>
        <div id="Customers" class="tabcontent">
          <h4>Show Customers on Map</h4>
          <label for="deliveryDate">Select Delivery Date:</label>
          <input type="date" id="deliveryDate" class="date-picker" />
		  <label>Select Delivery Timeframe(s):</label>
			<div id="deliveryTimeframeContainer" class="checkbox-group">
			  <!-- Checkboxes will be dynamically added here -->
			</div>
          <div class="btn-group">
            <button id="clearMarkers" class="btn-primary">Clear Markers</button>
          </div>
          <label for="driversDropdown">Assign Driver:</label>
          <select id="driversDropdown" class="dropdown">
            <option value="" disabled selected>Select Driver</option>
          </select>
          <div class="btn-group">
            <button id="assignDriver" class="btn-primary">Assign to Driver</button>
            <button id="planRoute" class="btn-primary">Plan Route</button>
          </div>
          <div id="routeDetails" style="display: none;">
            <h4>Route Details</h4>
            <ul id="routeList"></ul>
          </div>
		  
<!-- Add Vehicle Type Selection Here -->
<label for="vehicleType">Select Vehicle Type:</label>
<select id="vehicleType" class="dropdown">
  <option value="" disabled selected>Select Vehicle Type</option> <!-- Placeholder Option -->
  <option value="car">Car</option>
  <option value="van">Van</option>
  <option value="boxTruck">Box Truck</option>
  <option value="semiTruck">Semi-Trailer Truck</option>
  <option value="refrigeratedTruck">Refrigerated Truck</option>
  <option value="flatbedTruck">Flatbed Truck</option>
</select>

		  
          <div class="btn-group">
            <button id="unassignDeliveries" class="btn-primary">Unassign Deliveries</button>
            <button id="showSummary" class="btn-primary">Show Assignment Summary</button>
          </div>
          <hr>
          <label for="driverFilterDropdown">Highlight/Filter Assignments by Driver:</label>
          <select id="driverFilterDropdown" class="dropdown">
            <option value="" selected>All Drivers</option>
          </select>
          <div class="btn-group">
            <button id="highlightMarkers" class="btn-primary">Highlight Dispatch</button>
            <button id="clearHighlight" class="btn-primary">Clear Highlight</button>
          </div>
          <div class="btn-group">
            <button id="filterMarkers" class="btn-primary">Filter Dispatch</button>
            <button id="clearFilter" class="btn-primary">Clear Filter</button>
          </div>
		  <div id="assignmentSummary" class="summary-panel" style="display: none;">
			<div class="modal-header">
			<h4>Assignment Summary</h4>
			<button id="closeSummary" class="close-btn" onclick="closeAssignmentModal()">×</button>
			</div>
			<div id="summaryContent" class="modal-body"></div>
			<div class="modal-actions">
				<button id="printSummary" class="btn-primary">Print</button>
			</div>
			<div class="modal-footer">
			
			</div>
          </div>
        </div>
      </div>
  
      <div class="main-content">
        <div id="map"></div>
        <div class="search-box-container">
          <input id="search-box" class="search-box controls" type="text" placeholder="Search Customer">
        </div>
      </div>

		<div id="customroutetravelInfoWindow" class="travelinfo-window">
		<button id="travelinfo-window-close" class="close-btn">×</button>
			<div id="routeinfoContent" class="travelinfo-content">
			<h4>Travel Info</h4>
			<p>Details will be displayed here...</p>
			</div>
				<div class="travelinfo-actions">
				<button class="print-btn" onclick="printInfoWindow()">Print</button>
				</div>
		</div>

    </div>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJ_2UapeDtbcEpUvZHNVma9R8T6fl9qLQ&libraries=places,geometry,drawing"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
    <script src="scripts.js"></script>
    <script src="customers.js"></script>
    <script src="drivers.js"></script>

  </body>
</html>