te

evidence-aut.html

@@ -128,28 +128,34 @@
               <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                 <i class="fas fa-user text-gray-400"></i>
               </div>
-              <input type="text" id="name" name="name" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" 
+              <input type="text" id="name" name="name" required title="Pouze písmena a mezery, bez čísel a speciálních znaků." pattern="^[A-Za-zÁČĎÉĚÍŇÓŘŠŤÚŮÝŽáčďéěíňóřšťúůýž\s\-]+$"
-                     placeholder="Zadejte jméno a příjmení" required>
+                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
             </div>
           </div>
-
+          
-          <!-- Vehicle Selection -->
           <div class="space-y-2">
             <label for="vehicle" class="block text-sm font-medium text-gray-700">Vozidlo</label>
             <div class="relative">
               <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                 <i class="fas fa-car text-gray-400"></i>
               </div>
-              <select id="vehicle" name="vehicle" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
+              <select id="vehicle" name="vehicle" required
-                <option value="">Vyberte vozidlo</option>
+                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue appearance-none">
-                <option value="Škoda Octavia">Škoda Octavia</option>
+                <option value="" selected disabled>Vyberte vozidlo...</option>
-                <option value="Škoda Superb">Škoda Superb</option>
+                <option value="VW Caddy - 4Z1 8241">VW Caddy - 4Z1 8241</option>
-                <option value="Škoda Kodiaq">Škoda Kodiaq</option>
+                <option value="VW Golf - 5Z5 8694">VW Golf - 5Z5 8694</option>
+                <option value="Škoda Fabia - 1Z3 5789">Škoda Fabia – 1Z3 5789</option>
+                <option value="BMW 218d - 6Z5 4739">BMW 218d – 6Z5 4739</option>
+                <option value="BMW 218d - 6Z5 4740">BMW 218d – 6Z5 4740</option>
+                <option value="Škoda Superb - 2BY 2398">Škoda Superb - 2BY 2398</option>
               </select>
+              <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                <i class="fas fa-chevron-down text-gray-400"></i>
+              </div>
             </div>
           </div>
-
+          
-          <!-- Date and Time Fields -->
+          <!-- Date and Time Fields - Departure -->
           <div class="grid md:grid-cols-2 gap-5">
             <div class="space-y-2">
               <label for="date_start" class="block text-sm font-medium text-gray-700">Datum odjezdu</label>
@@ -157,20 +163,24 @@
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-calendar text-gray-400"></i>
                 </div>
-                <input type="date" id="date_start" name="date_start" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
+                <input type="date" id="date_start" name="date_start" required
+                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
               </div>
             </div>
+            
             <div class="space-y-2">
               <label for="time_start" class="block text-sm font-medium text-gray-700">Čas odjezdu</label>
               <div class="relative">
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-clock text-gray-400"></i>
                 </div>
-                <input type="time" id="time_start" name="time_start" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
+                <input type="time" id="time_start" name="time_start" required
+                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
               </div>
             </div>
           </div>
-
+          
+          <!-- Date and Time Fields - Arrival -->
           <div class="grid md:grid-cols-2 gap-5">
             <div class="space-y-2">
               <label for="date_end" class="block text-sm font-medium text-gray-700">Datum příjezdu</label>
@@ -178,21 +188,55 @@
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-calendar text-gray-400"></i>
                 </div>
-                <input type="date" id="date_end" name="date_end" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
+                <input type="date" id="date_end" name="date_end" required
+                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
               </div>
             </div>
+            
             <div class="space-y-2">
               <label for="time_end" class="block text-sm font-medium text-gray-700">Čas příjezdu</label>
               <div class="relative">
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-clock text-gray-400"></i>
                 </div>
-                <input type="time" id="time_end" name="time_end" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
+                <input type="time" id="time_end" name="time_end" required
+                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
               </div>
             </div>
           </div>
-
+          
-          <!-- Odometer Fields -->
+          <div class="space-y-2">
+            <label for="destination" class="block text-sm font-medium text-gray-700">Cíl cesty</label>
+            <div class="suggest-container">
+              <div class="relative">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <i class="fas fa-map-marker-alt text-gray-400"></i>
+                </div>
+                <input type="text" id="destination" name="destination" required autocomplete="off"
+                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue"
+                  placeholder="Začněte psát pro vyhledání místa...">
+                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
+                  <i class="fas fa-search text-gray-400"></i>
+                </div>
+              </div>
+              <div id="suggest-list" class="suggest-list"></div>
+            </div>
+            <input type="hidden" id="destination-lat" name="destination-lat">
+            <input type="hidden" id="destination-lon" name="destination-lon">
+            <p class="text-xs text-gray-500">Powered by Mapy.cz</p>
+          </div>
+          
+          <div class="space-y-2">
+            <label for="purpose" class="block text-sm font-medium text-gray-700">Účel cesty</label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <i class="fas fa-briefcase text-gray-400"></i>
+              </div>
+              <input type="text" id="purpose" name="purpose" required
+                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
+            </div>
+          </div>
+          
           <div class="grid md:grid-cols-2 gap-5">
             <div class="space-y-2">
               <label for="km_start" class="block text-sm font-medium text-gray-700">Stav tachometru na začátku</label>
@@ -200,9 +244,14 @@
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-tachometer-alt text-gray-400"></i>
                 </div>
-                <input type="number" id="km_start" name="km_start" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
+                <input type="number" id="km_start" name="km_start" required min="0"
+                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
+                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                  <span class="text-gray-500">km</span>
+                </div>
               </div>
             </div>
+            
             <div class="space-y-2">
               <label for="km_end" class="block text-sm font-medium text-gray-700">Stav tachometru na konci</label>
               <div class="relative">
@@ -310,43 +359,8 @@
     const timeEnd = document.getElementById('time_end');
     const dateStart = document.getElementById('date_start');
     const dateEnd = document.getElementById('date_end');
-    const reservationId = document.getElementById('reservationId');
     
     let debounceTimer;
-
-    // Check for reservation data
-    function handleReservationData() {
-        const urlParams = new URLSearchParams(window.location.search);
-        const reservationId = urlParams.get('reservationId');
-
-        if (reservationId) {
-            // Get reservation data from localStorage
-            const reservationData = JSON.parse(localStorage.getItem(`reservation_${reservationId}`));
-            if (reservationData) {
-                // Fill form with reservation data
-                document.getElementById('name').value = reservationData.driver;
-                document.getElementById('vehicle').value = reservationData.vehicle;
-                
-                // Parse dates
-                const startDate = new Date(reservationData.start);
-                const endDate = new Date(reservationData.end);
-                
-                document.getElementById('date_start').value = startDate.toISOString().split('T')[0];
-                document.getElementById('time_start').value = startDate.toTimeString().split(' ')[0];
-                document.getElementById('date_end').value = endDate.toISOString().split('T')[0];
-                document.getElementById('time_end').value = endDate.toTimeString().split(' ')[0];
-                
-                // Set reservation ID
-                document.getElementById('reservationId').value = reservationId;
-                
-                // Show message
-                showMessage('Data byla načtena z rezervace.', 'success');
-            }
-        }
-    }
-
-    // Initialize form
-    handleReservationData();
     
     // Set default dates to today
     const today = new Date();

rezervace-aut.html

@@ -1111,19 +1111,22 @@
             <div class="modal-header">
                 <h3 class="text-xl font-semibold text-gray-900">Detail rezervace</h3>
             </div>
-            <div class="modal-content">
+            <div class="modal-body">
-                <span class="close">&times;</span>
+                <div class="info-grid">
-                <h2 class="text-xl font-bold mb-4">Detail rezervace</h2>
+                    <span class="info-label">Řidič:</span>
-                <div class="reservation-details">
+                    <span id="modalDriver"></span>
-                    <p><strong>Jméno:</strong> <span id="eventDriver"></span></p>
+                    
-                    <p><strong>Vozidlo:</strong> <span id="eventVehicle"></span></p>
+                    <span class="info-label">Vozidlo:</span>
-                    <p><strong>Datum od:</strong> <span id="eventStartDate"></span></p>
+                    <span id="modalVehicle"></span>
-                    <p><strong>Datum do:</strong> <span id="eventEndDate"></span></p>
+                    
-                </div>
+                    <span class="info-label">Začátek:</span>
-                <div class="mt-4">
+                    <span id="modalStart"></span>
-                    <button id="addEvidenceBtn" class="bg-brand-blue text-white px-4 py-2 rounded-lg hover:bg-brand-light-blue transition-colors">
+                    
-                        Přidat záznam jízdy
+                    <span class="info-label">Konec:</span>
-                    </button>
+                    <span id="modalEnd"></span>
+                    
+                    <span class="info-label">Účel:</span>
+                    <span id="modalPurpose"></span>
                 </div>
                 <button id="deleteReservation" class="delete-btn hidden">
                     <i class="fas fa-trash mr-2"></i>Zrušit rezervaci
@@ -1493,21 +1496,6 @@
                 },
                 eventClick: function(info) {
                     showEventModal(info.event);
-                    
-                    // Store event data for evidence integration
-                    const eventData = {
-                        id: info.event.id,
-                        driver: info.event.extendedProps.driver,
-                        vehicle: info.event.extendedProps.vehicle,
-                        start: info.event.startStr,
-                        end: info.event.endStr
-                    };
-                    
-                    // Store in localStorage with user authentication
-                    const userId = localStorage.getItem('userId');
-                    if (userId) {
-                        localStorage.setItem(`reservation_${info.event.id}`, JSON.stringify(eventData));
-                    }
                 },
                 dateClick: function(info) {
                     showReservationForm(info.date);