{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="search-container">
        {% if not city %}
        <div class="featured-intro">
            <p>Discover Events in Your City</p>
        </div>
        {% endif %}
        <form class="search-form" method="POST">
            <div class="search-bar">
                <div class="search-field location-field">
                    <i class="fas fa-map-marker-alt"></i>
                    <input type="text" name="city" placeholder="City" value="{{ city }}" required>
                </div>
                <div class="search-field date-range-field">
                    <i class="far fa-calendar-alt"></i>
                    <input type="text" class="date-range-input" placeholder="Select Dates" readonly>
                    <input type="date" id="start-date" name="start-date" min="{{ today }}" value="{{ start_date }}" class="hidden-date-input">
                    <input type="date" id="end-date" name="end-date" min="{{ today }}" value="{{ end_date }}" class="hidden-date-input">
                    <div class="date-range-picker">
                        <div class="date-range-header">
                            <span class="date-range-title">Select Date Range</span>
                            <button type="button" class="close-date-picker">&times;</button>
                        </div>
                        <div class="date-range-content">
                            <div class="date-picker">
                                <label for="start-date-picker">Start Date</label>
                                <input type="date" id="start-date-picker" min="{{ today }}">
                            </div>
                            <div class="date-picker">
                                <label for="end-date-picker">End Date</label>
                                <input type="date" id="end-date-picker" min="{{ today }}">
                            </div>
                        </div>
                        <div class="date-range-footer">
                            <button type="button" class="clear-dates">Clear</button>
                            <button type="button" class="apply-dates">Apply</button>
                        </div>
                    </div>
                </div>
                <div class="search-field search-term-field">
                    <i class="fas fa-search"></i>
                    <input type="text" name="search-term" placeholder="Search by Artist, Event, or Venue" value="{{ search_term }}">
                </div>
                <div class="search-actions">
                    <div class="filter-dropdown">
                        <button type="button" class="filter-toggle">
                            <i class="fas fa-filter"></i>
                        </button>
                        <div class="filter-menu">
                            <div class="filter-section">
                                <h4>Sort By</h4>
                                <label class="filter-option">
                                    <input type="radio" name="sort-by" value="date" {% if sort_by == 'date' %}checked{% endif %} onchange="this.form.submit()">
                                    <span>Date</span>
                                </label>
                                <label class="filter-option">
                                    <input type="radio" name="sort-by" value="relevance" {% if sort_by == 'relevance' %}checked{% endif %} onchange="this.form.submit()">
                                    <span>Relevance</span>
                                </label>
                            </div>
                            <div class="filter-section">
                                <h4>Event Type</h4>
                                <label class="filter-option">
                                    <input type="checkbox" name="event-type" value="music" {% if 'music' in event_types %}checked{% endif %} onchange="this.form.submit()">
                                    <span>Music</span>
                                </label>
                                <label class="filter-option">
                                    <input type="checkbox" name="event-type" value="sports" {% if 'sports' in event_types %}checked{% endif %} onchange="this.form.submit()">
                                    <span>Sports</span>
                                </label>
                                <label class="filter-option">
                                    <input type="checkbox" name="event-type" value="arts" {% if 'arts' in event_types %}checked{% endif %} onchange="this.form.submit()">
                                    <span>Arts & Theatre</span>
                                </label>
                                <label class="filter-option">
                                    <input type="checkbox" name="event-type" value="family" {% if 'family' in event_types %}checked{% endif %} onchange="this.form.submit()">
                                    <span>Family</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="search-btn">
                        <i class="fas fa-search"></i>
                        Search
                    </button>
                </div>
            </div>
        </form>
    </div>

    <h1 class="page-title">{% if city %}Events in {{ city }}{% else %}FEATURED EVENTS{% endif %}</h1>

    <div class="events-grid">
        {% if events %}
            {% for event in events %}
            <div class="event-card">
                <img src="{{ event.image_url }}" alt="{{ event.name }}" class="event-image">
                <div class="event-content">
                    <div class="event-header">
                        <h3>{{ event.name }}</h3>
                        <p class="city">{{ event.city }}</p>
                        <p class="price">{{ event.price }}</p>
                    </div>
                    <div class="event-divider"></div>
                    <div class="event-details">
                        <p class="location"><i class="fas fa-map-marker-alt"></i> {{ event.venue }}</p>
                        <p class="datetime"><i class="far fa-calendar-alt"></i> {{ event.date }}</p>
                        <p class="event-description">{{ event.description }}</p>
                        <a href="{{ event.url }}" target="_blank" class="book-btn">Find Tickets</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="no-events">
                <p>No events found. Try adjusting your search criteria.</p>
            </div>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dateRangeField = document.querySelector('.date-range-field');
    const dateRangeInput = document.querySelector('.date-range-input');
    const dateRangePicker = document.querySelector('.date-range-picker');
    const startDatePicker = document.getElementById('start-date-picker');
    const endDatePicker = document.getElementById('end-date-picker');
    const startDateInput = document.getElementById('start-date');
    const endDateInput = document.getElementById('end-date');
    const closeButton = document.querySelector('.close-date-picker');
    const clearButton = document.querySelector('.clear-dates');
    const applyButton = document.querySelector('.apply-dates');

    function formatDate(date) {
        if (!date) return '';
        const options = { month: 'short', day: 'numeric', year: 'numeric' };
        return new Date(date).toLocaleDateString('en-US', options);
    }

    function updateDateRangeDisplay() {
        const startDate = startDateInput.value;
        const endDate = endDateInput.value;
        
        if (startDate && endDate) {
            dateRangeInput.value = `${formatDate(startDate)} - ${formatDate(endDate)}`;
        } else if (startDate) {
            dateRangeInput.value = formatDate(startDate);
        } else {
            dateRangeInput.value = '';
        }
    }

    function closeDatePicker() {
        dateRangePicker.classList.remove('active');
    }

    dateRangeInput.addEventListener('click', function(e) {
        e.stopPropagation();
        dateRangePicker.classList.toggle('active');
    });

    closeButton.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeDatePicker();
    });

    clearButton.addEventListener('click', function() {
        startDateInput.value = '';
        endDateInput.value = '';
        startDatePicker.value = '';
        endDatePicker.value = '';
        updateDateRangeDisplay();
        closeDatePicker();
    });

    applyButton.addEventListener('click', function() {
        startDateInput.value = startDatePicker.value;
        endDateInput.value = endDatePicker.value;
        updateDateRangeDisplay();
        closeDatePicker();
    });

    // Close when clicking outside
    document.addEventListener('click', function(e) {
        if (!dateRangeField.contains(e.target)) {
            closeDatePicker();
        }
    });

    // Prevent clicks inside the picker from closing it
    dateRangePicker.addEventListener('click', function(e) {
        e.stopPropagation();
    });

    // Initialize with any existing values
    if (startDateInput.value) {
        startDatePicker.value = startDateInput.value;
    }
    if (endDateInput.value) {
        endDatePicker.value = endDateInput.value;
    }
    updateDateRangeDisplay();

    // Filter dropdown functionality
    const filterToggle = document.querySelector('.filter-toggle');
    const filterMenu = document.querySelector('.filter-menu');

    filterToggle.addEventListener('click', function(e) {
        e.stopPropagation();
        filterMenu.classList.toggle('active');
    });

    document.addEventListener('click', function(e) {
        if (!filterToggle.contains(e.target)) {
            filterMenu.classList.remove('active');
        }
    });
});

function sortEvents(value) {
    const eventsGrid = document.querySelector('.events-grid');
    const events = Array.from(eventsGrid.children);
    
    events.sort((a, b) => {
        switch(value) {
            case 'date':
                // Get datetime elements
                const dateA = a.querySelector('.datetime').textContent.trim();
                const dateB = b.querySelector('.datetime').textContent.trim();
                
                // Parse dates (Sat, Sept 19, 10:00AM EST)
                const parseDate = (dateStr) => {
                    const [day, month, dayNum, time] = dateStr.split(', ');
                    const [hours, minutes] = time.split(':');
                    const isPM = time.includes('PM');
                    let hour = parseInt(hours);
                    if (isPM && hour !== 12) hour += 12;
                    if (!isPM && hour === 12) hour = 0;
                    
                    // Create date object (using current year since it's not in the string)
                    const date = new Date();
                    date.setMonth(new Date(month + ' 1').getMonth());
                    date.setDate(parseInt(dayNum));
                    date.setHours(hour, parseInt(minutes));
                    return date;
                };
                
                return parseDate(dateA) - parseDate(dateB);
                
            case 'name':
                const nameA = a.querySelector('h3').textContent.toLowerCase();
                const nameB = b.querySelector('h3').textContent.toLowerCase();
                return nameA.localeCompare(nameB);
                
            case 'price':
                const priceA = a.querySelector('.price').textContent;
                const priceB = b.querySelector('.price').textContent;
                
                // Extract numeric values from price strings
                const getPriceValue = (priceStr) => {
                    const match = priceStr.match(/\$(\d+)/);
                    return match ? parseInt(match[1]) : 0;
                };
                
                return getPriceValue(priceA) - getPriceValue(priceB);
        }
    });
    
    // Clear and re-append sorted events
    events.forEach(event => eventsGrid.appendChild(event));
}
</script>
{% endblock %}