{% extends 'base.html' %}
{% block title %}Add Availability - TimeWheel Share{% endblock %}
{% block content %}
<div class="form-container">
    <div class="form-header">
        <h2>Add Vehicle Availability</h2>
        <p class="form-subtitle">Set when your vehicle will be available for booking</p>
    </div>
    
    <form method="post" class="availability-form">
        {% csrf_token %}
        
        <div class="form-group">
            <label for="vehicle-search">Select Vehicle</label>
            <div class="vehicle-selection-container">
                <!-- Vehicle Cards -->
                <div class="recommended-vehicles">
                    <div class="vehicle-cards">
                        {% for vehicle in form.vehicle.field.queryset %}
                            <div class="vehicle-card-small" data-vehicle-id="{{ vehicle.id }}" data-vehicle-name="{{ vehicle.make }} {{ vehicle.model }} ({{ vehicle.registration_number }})">
                                <div class="vehicle-card-content">
                                    <div class="vehicle-info">
                                        <h5>{{ vehicle.make }} {{ vehicle.model }}</h5>
                                        <p class="vehicle-reg">{{ vehicle.registration_number }}</p>
                                        {% if vehicle.year %}<span class="vehicle-year">{{ vehicle.year }}</span>{% endif %}
                                    </div>
                                    <div class="vehicle-stats">
                                        <div class="stat-item">
                                            <span class="stat-label">Recent Bookings</span>
                                            <span class="stat-value">{{ vehicle.availabilities.count }}</span>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="select-vehicle-btn">Select</button>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                
                <!-- Search Option -->
                <div class="search-option">
                    <p class="search-toggle">Can't find your vehicle? <a href="#" id="toggle-search">Search manually</a></p>
                    <div class="vehicle-search-container" id="manual-search" style="display: none;">
                        <input type="text" id="vehicle-search" placeholder="Type to search for your vehicle..." autocomplete="off">
                        <div class="search-icon">🔍</div>
                        <div class="search-loading" id="search-loading" style="display: none;">
                            <div class="loading-spinner"></div>
                        </div>
                        <div id="vehicle-dropdown" class="vehicle-dropdown" style="display: none;">
                            <!-- Dynamic results will be loaded here -->
                        </div>
                    </div>
                </div>
            </div>
            {{ form.vehicle.as_hidden }}
            {% if form.vehicle.errors %}
                <div class="error-message">{{ form.vehicle.errors.0 }}</div>
            {% endif %}
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="start-date">Start Date & Time</label>
                <div class="datetime-input-container">
                    <div class="date-time-row">
                        <div class="time-input">
                            <label for="start-time">Time</label>
                            <input type="time" id="start-time" name="start_time_input">
                        </div>
                        <div class="date-input">
                            <label for="start-date">Date</label>
                            <input type="date" id="start-date" name="start_date_input">
                        </div>
                    </div>
                    <div class="time-helpers">
                        <button type="button" class="helper-btn" data-action="now">Now</button>
                        <button type="button" class="helper-btn" data-action="tomorrow">Tomorrow</button>
                    </div>
                </div>
                {{ form.start_time.as_hidden }}
                {% if form.start_time.errors %}
                    <div class="error-message">{{ form.start_time.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="end-date">End Date & Time</label>
                <div class="datetime-input-container">
                    <div class="date-time-row">
                        <div class="time-input">
                            <label for="end-time">Time</label>
                            <input type="time" id="end-time" name="end_time_input">
                        </div>
                        <div class="date-input">
                            <label for="end-date">Date</label>
                            <input type="date" id="end-date" name="end_date_input">
                        </div>
                    </div>
                    <div class="time-helpers">
                        <button type="button" class="helper-btn" data-action="plus1">+1 Hour</button>
                        <button type="button" class="helper-btn" data-action="plus4">+4 Hours</button>
                        <button type="button" class="helper-btn" data-action="plus8">+8 Hours</button>
                    </div>
                </div>
                {{ form.end_time.as_hidden }}
                {% if form.end_time.errors %}
                    <div class="error-message">{{ form.end_time.errors.0 }}</div>
                {% endif %}
            </div>
        </div>

        <!-- Quick Duration Presets -->
        <div class="form-group">
            <label>Quick Duration Presets</label>
            <div class="duration-presets">
                <button type="button" class="preset-btn" data-duration="2">2 Hours</button>
                <button type="button" class="preset-btn" data-duration="4">4 Hours</button>
                <button type="button" class="preset-btn" data-duration="8">8 Hours</button>
                <button type="button" class="preset-btn" data-duration="12">12 Hours</button>
                <button type="button" class="preset-btn" data-duration="24">1 Day</button>
                <button type="button" class="preset-btn" data-duration="48">2 Days</button>
            </div>
        </div>

        <div class="form-group">
            <label for="{{ form.notes.id_for_label }}">Notes (Optional)</label>
            {{ form.notes }}
            {% if form.notes.errors %}
                <div class="error-message">{{ form.notes.errors.0 }}</div>
            {% endif %}
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save Availability</button>
            <a href="/vehicles/" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('vehicle-search');
    const dropdown = document.getElementById('vehicle-dropdown');
    const hiddenInput = document.querySelector('input[name="vehicle"]');
    const vehicleOptions = document.querySelectorAll('.vehicle-option');
    const vehicleCards = document.querySelectorAll('.vehicle-card-small');
    const selectButtons = document.querySelectorAll('.select-vehicle-btn');
    const toggleSearch = document.getElementById('toggle-search');
    const manualSearch = document.getElementById('manual-search');
    const helperButtons = document.querySelectorAll('.helper-btn');
    const presetButtons = document.querySelectorAll('.preset-btn');
    const startTimeInput = document.querySelector('input[name="start_time"]');
    const endTimeInput = document.querySelector('input[name="end_time"]');
    const startTimeField = document.getElementById('start-time');
    const startDateField = document.getElementById('start-date');
    const endTimeField = document.getElementById('end-time');
    const endDateField = document.getElementById('end-date');
    
    // Function to combine date and time into datetime string
    function combineDateTime(dateInput, timeInput) {
        if (!dateInput.value || !timeInput.value) return '';
        return `${dateInput.value}T${timeInput.value}`;
    }
    
    // Function to update hidden datetime fields
    function updateHiddenFields() {
        const startDateTime = combineDateTime(startDateField, startTimeField);
        const endDateTime = combineDateTime(endDateField, endTimeField);
        
        if (startDateTime) startTimeInput.value = startDateTime;
        if (endDateTime) endTimeInput.value = endDateTime;
    }
    
    // Add event listeners to update hidden fields when inputs change
    startTimeField.addEventListener('change', updateHiddenFields);
    startDateField.addEventListener('change', updateHiddenFields);
    endTimeField.addEventListener('change', updateHiddenFields);
    endDateField.addEventListener('change', updateHiddenFields);
    
    // Vehicle selection from cards
    selectButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const card = this.closest('.vehicle-card-small');
            const vehicleId = card.getAttribute('data-vehicle-id');
            const vehicleName = card.getAttribute('data-vehicle-name');
            
            console.log('Vehicle selected:', vehicleId, vehicleName); // Debug log
            
            // Update hidden input
            if (hiddenInput) {
                hiddenInput.value = vehicleId;
                console.log('Hidden input updated:', hiddenInput.value); // Debug log
            }
            
            // Visual feedback
            document.querySelectorAll('.vehicle-card-small').forEach(c => c.classList.remove('selected'));
            card.classList.add('selected');
            
            // Update button text
            selectButtons.forEach(btn => btn.textContent = 'Select');
            this.textContent = 'Selected ✓';
            
            // Show success message
            showSuccessMessage(`Selected: ${vehicleName}`);
            
            // Hide manual search if it's open
            if (manualSearch && manualSearch.style.display !== 'none') {
                manualSearch.style.display = 'none';
                toggleSearch.textContent = 'Search manually';
            }
        });
    });
    
    // Toggle manual search
    toggleSearch.addEventListener('click', function(e) {
        e.preventDefault();
        manualSearch.style.display = manualSearch.style.display === 'none' ? 'block' : 'none';
        this.textContent = manualSearch.style.display === 'none' ? 'Search manually' : 'Hide search';
    });
    
    // Manual search functionality with AJAX
    if (searchInput) {
        let searchTimeout;
        
        searchInput.addEventListener('focus', function() {
            if (this.value.trim()) {
                dropdown.style.display = 'block';
            }
        });
        
        searchInput.addEventListener('blur', function() {
            setTimeout(() => {
                dropdown.style.display = 'none';
            }, 200);
        });
        
        searchInput.addEventListener('input', function() {
            const query = this.value.trim();
            
            // Clear previous timeout
            if (searchTimeout) {
                clearTimeout(searchTimeout);
            }
            
            if (query.length < 2) {
                dropdown.style.display = 'none';
                return;
            }
            
            // Show loading spinner
            showLoadingSpinner();
            
            // Debounce search requests
            searchTimeout = setTimeout(() => {
                searchVehicles(query);
            }, 300);
        });
        
        function showLoadingSpinner() {
            const loadingSpinner = document.getElementById('search-loading');
            loadingSpinner.style.display = 'block';
            dropdown.style.display = 'block';
        }
        
        function hideLoadingSpinner() {
            const loadingSpinner = document.getElementById('search-loading');
            loadingSpinner.style.display = 'none';
        }
        
        function searchVehicles(query) {
            fetch(`/vehicles/api/search/?q=${encodeURIComponent(query)}`)
                .then(response => response.json())
                .then(data => {
                    hideLoadingSpinner();
                    displaySearchResults(data.vehicles);
                })
                .catch(error => {
                    hideLoadingSpinner();
                    console.error('Search error:', error);
                    showSearchError();
                });
        }
        
        function displaySearchResults(vehicles) {
            const dropdown = document.getElementById('vehicle-dropdown');
            
            if (vehicles.length === 0) {
                dropdown.innerHTML = '<div class="no-results">No vehicles found</div>';
                dropdown.style.display = 'block';
                return;
            }
            
            dropdown.innerHTML = vehicles.map(vehicle => `
                <div class="vehicle-option" data-value="${vehicle.id}" data-text="${vehicle.display_name}">
                    <div class="vehicle-option-info">
                        <span class="vehicle-name">${vehicle.make} ${vehicle.model}</span>
                        <span class="vehicle-reg">${vehicle.registration_number}</span>
                    </div>
                    <div class="vehicle-option-meta">
                        ${vehicle.year ? `<span class="vehicle-year">${vehicle.year}</span>` : ''}
                        <span class="availability-count">${vehicle.availability_count} bookings</span>
                    </div>
                </div>
            `).join('');
            
            dropdown.style.display = 'block';
            
            // Add click handlers to new options
            dropdown.querySelectorAll('.vehicle-option').forEach(option => {
                option.addEventListener('click', function() {
                    const value = this.getAttribute('data-value');
                    const text = this.getAttribute('data-text');
                    
                    searchInput.value = text;
                    hiddenInput.value = value;
                    dropdown.style.display = 'none';
                    
                    // Visual feedback
                    searchInput.style.borderColor = '#059669';
                    setTimeout(() => {
                        searchInput.style.borderColor = '';
                    }, 1000);
                    
                    showSuccessMessage(`Selected: ${text}`);
                });
            });
        }
        
        function showSearchError() {
            const dropdown = document.getElementById('vehicle-dropdown');
            dropdown.innerHTML = '<div class="search-error">Error searching vehicles. Please try again.</div>';
            dropdown.style.display = 'block';
        }
    }
    
    // Time helper buttons
    helperButtons.forEach(button => {
        button.addEventListener('click', function() {
            const action = this.getAttribute('data-action');
            const container = this.closest('.datetime-input-container');
            const timeInput = container.querySelector('input[type="time"]');
            const dateInput = container.querySelector('input[type="date"]');
            const now = new Date();
            let newTime;
            let newDate;
            
            switch(action) {
                case 'now':
                    newTime = now;
                    newDate = now;
                    break;
                case 'tomorrow':
                    newTime = now;
                    newDate = new Date(now.getTime() + (24 * 60 * 60 * 1000));
                    break;
                case 'plus1':
                    newTime = new Date(now.getTime() + (60 * 60 * 1000));
                    newDate = now;
                    break;
                case 'plus4':
                    newTime = new Date(now.getTime() + (4 * 60 * 60 * 1000));
                    newDate = now;
                    break;
                case 'plus8':
                    newTime = new Date(now.getTime() + (8 * 60 * 60 * 1000));
                    newDate = now;
                    break;
            }
            
            // Format time for input (HH:MM)
            const timeString = newTime.toTimeString().slice(0, 5);
            timeInput.value = timeString;
            
            // Format date for input (YYYY-MM-DD)
            const dateString = newDate.toISOString().slice(0, 10);
            dateInput.value = dateString;
            
            // Update hidden fields
            updateHiddenFields();
            
            // Visual feedback
            this.style.backgroundColor = '#059669';
            this.style.color = 'white';
            setTimeout(() => {
                this.style.backgroundColor = '';
                this.style.color = '';
            }, 1000);
            
            showSuccessMessage(`Set to ${action === 'now' ? 'current time' : action === 'tomorrow' ? 'tomorrow' : action.replace('plus', '+') + ' hours'}`);
        });
    });
    
    // Duration presets
    presetButtons.forEach(button => {
        button.addEventListener('click', function() {
            const duration = parseInt(this.getAttribute('data-duration'));
            const now = new Date();
            const endTime = new Date(now.getTime() + (duration * 60 * 60 * 1000));
            
            // Set start time to now
            const startTimeString = now.toTimeString().slice(0, 5);
            const startDateString = now.toISOString().slice(0, 10);
            startTimeField.value = startTimeString;
            startDateField.value = startDateString;
            
            // Set end time
            const endTimeString = endTime.toTimeString().slice(0, 5);
            const endDateString = endTime.toISOString().slice(0, 10);
            endTimeField.value = endTimeString;
            endDateField.value = endDateString;
            
            // Update hidden fields
            updateHiddenFields();
            
            // Visual feedback
            this.style.backgroundColor = '#059669';
            this.style.color = 'white';
            setTimeout(() => {
                this.style.backgroundColor = '';
                this.style.color = '';
            }, 1000);
            
            showSuccessMessage(`Set duration to ${duration} hours`);
        });
    });
    
    // Success message function
    function showSuccessMessage(message) {
        console.log('Success message:', message); // Debug log
        
        const existingMessage = document.querySelector('.success-message');
        if (existingMessage) {
            existingMessage.remove();
        }
        
        const successDiv = document.createElement('div');
        successDiv.className = 'success-message';
        successDiv.textContent = message;
        successDiv.style.cssText = 'background:#ecfdf5;color:#059669;padding:8px 12px;border-radius:6px;margin-top:8px;font-size:14px;border:1px solid #a7f3d0';
        
        const form = document.querySelector('.availability-form');
        form.insertBefore(successDiv, form.firstChild);
        
        setTimeout(() => {
            successDiv.remove();
        }, 3000);
    }
    
    // Debug function to check if elements are found
    function debugElements() {
        console.log('Debug Elements:');
        console.log('selectButtons found:', selectButtons.length);
        console.log('hiddenInput found:', !!hiddenInput);
        console.log('vehicleCards found:', vehicleCards.length);
        console.log('toggleSearch found:', !!toggleSearch);
        console.log('manualSearch found:', !!manualSearch);
    }
    
    // Run debug on load
    debugElements();
});
</script>
{% endblock %}