{% extends "base.html" %}

{% block title %}{{ 'Edit Event' if event else 'Create Event' }} - Grassroots Events{% endblock %}

{% block extra_css %}
<style>
    .location-badge {
        display: inline-block;
        background-color: #f0f0f0;
        padding: 4px 12px;
        margin: 4px;
        border-radius: 20px;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    .location-badge:hover {
        background-color: #dc3545;
        color: white;
    }
    .location-badge.selected {
        background-color: #dc3545;
        color: white;
    }
    .readonly-field {
        background-color: #e9ecef;
        cursor: not-allowed;
    }
    .help-text {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 4px;
    }
    .venue-suggestion {
        transition: all 0.2s;
    }
    .venue-suggestion:hover {
        transform: translateX(5px);
    }
    .badge-usage {
        font-size: 0.7rem;
    }
    /* Compact action buttons */
    .action-buttons {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }
    .action-buttons .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header bg-danger text-white">
                <h4 class="mb-0"><i class="fas fa-{% if event %}edit{% else %}plus-circle{% endif %} me-2"></i>{{ 'Edit Event' if event else 'Create New Event' }}</h4>
            </div>
            <div class="card-body">
                <form method="POST" id="eventForm">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label for="name" class="form-label">Event Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" 
                                   value="{{ event.name if event else '' }}" required>
                        </div>
                        
                        <div class="col-12 mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="3">{{ event.description if event else '' }}</textarea>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label for="event_date" class="form-label">Event Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="event_date" name="event_date" 
                                   value="{{ event.event_date.strftime('%Y-%m-%d') if event else '' }}" required>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label for="start_time" class="form-label">Start Time <span class="text-danger">*</span></label>
                            <input type="time" class="form-control" id="start_time" name="start_time" 
                                   value="{{ event.start_time.strftime('%H:%M') if event else '09:00' }}" required>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label for="end_time" class="form-label">End Time <span class="text-danger">*</span></label>
                            <input type="time" class="form-control" id="end_time" name="end_time" 
                                   value="{{ event.end_time.strftime('%H:%M') if event else '17:00' }}" required>
                        </div>
                        
                        <!-- Venue Selection Section -->
                        <div class="col-12 mb-3">
                            <label class="form-label">Venue / Location <span class="text-danger">*</span></label>
                            
                            <!-- Frequently Used Venues - DYNAMIC from database -->
                            {% if suggested_venues %}
                            <div class="mb-3">
                                <small class="text-muted">
                                    <i class="fas fa-star text-warning me-1"></i>
                                    Suggested Venues (based on your usage):
                                </small>
                                <div class="row mt-2">
                                    {% for venue in suggested_venues %}
                                    <div class="col-md-6 mb-2">
                                        <div class="venue-suggestion border rounded p-2 d-flex justify-content-between align-items-center" 
                                             style="cursor: pointer;" 
                                             onclick="selectVenue('{{ venue.name|escape }}', event)">
                                            <div>
                                                <i class="fas fa-map-marker-alt text-danger me-2"></i>
                                                <strong>{{ venue.name }}</strong>
                                                {% if venue.is_default %}
                                                <span class="badge bg-danger ms-1">Default</span>
                                                {% endif %}
                                                {% if venue.is_shared %}
                                                <span class="badge bg-info ms-1">Shared</span>
                                                {% endif %}
                                                <div class="small text-muted">
                                                    {% if venue.constituency %}{{ venue.constituency }}{% endif %}
                                                    {% if venue.capacity %} • Capacity: {{ venue.capacity }}{% endif %}
                                                    {% if venue.is_shared %}
                                                    <i class="fas fa-share-alt text-info ms-1"></i> From nearby GROs
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                {% if venue.usage_count > 0 %}
                                                <span class="badge bg-secondary badge-usage d-block mb-1">
                                                    Used {{ venue.usage_count }}x
                                                </span>
                                                {% endif %}
                                                {% if venue.is_permanent == False and venue.usage_count > 0 %}
                                                <button type="button" class="btn btn-sm btn-outline-success w-100" 
                                                        onclick="event.stopPropagation(); saveVenueToPermanent('{{ venue.name|escape }}')"
                                                        style="font-size: 0.7rem; padding: 2px 8px;">
                                                    <i class="fas fa-save"></i> Save to My Venues
                                                </button>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            
                            <div class="alert alert-info alert-sm p-2 mb-2">
                                <small><i class="fas fa-info-circle"></i> Click on any suggested venue above to auto-fill</small>
                            </div>
                            {% else %}
                            <div class="alert alert-warning alert-sm p-2 mb-2">
                                <small><i class="fas fa-exclamation-triangle"></i> No frequent venues yet. <a href="{{ url_for('create_venue') }}">Add your first venue</a> to see suggestions here.</small>
                            </div>
                            {% endif %}
                            
                            <!-- Custom Venue Input -->
                            <div class="mt-2">
                                <label for="venue" class="form-label">Or enter custom location:</label>
                                <input type="text" class="form-control" id="venue" name="venue" 
                                       value="{{ event.venue if event else '' }}" 
                                       placeholder="Enter venue name or address"
                                       autocomplete="off" required>
                                <div class="help-text">Select a suggested venue above or type a custom location.</div>
                            </div>
                        </div>
                        
                        <!-- Constituency (Read-only) -->
                        <div class="col-md-6 mb-3">
                            <label for="constituency" class="form-label">Constituency</label>
                            <input type="text" class="form-control readonly-field" id="constituency" name="constituency" 
                                   value="{{ event.constituency if event else current_user.constituency or '' }}" 
                                   readonly>
                            <div class="help-text">Auto-filled from your profile (read-only)</div>
                        </div>
                        
                        <!-- Sub-Division (Read-only) -->
                        <div class="col-md-6 mb-3">
                            <label for="sub_division" class="form-label">Sub-Division</label>
                            <input type="text" class="form-control readonly-field" id="sub_division" name="sub_division" 
                                   value="{{ event.sub_division if event else current_user.sub_division or '' }}" 
                                   readonly>
                            <div class="help-text">Auto-filled from your profile (read-only)</div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="expected_participants" class="form-label">Expected Participants</label>
                            <input type="number" class="form-control" id="expected_participants" name="expected_participants" 
                                   value="{{ event.expected_participants if event else '0' }}" min="0">
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="organising_gro_contact" class="form-label">Contact Number</label>
                            <input type="text" class="form-control" id="organising_gro_contact" name="organising_gro_contact" 
                                   value="{{ event.organising_gro_contact if event else '' }}">
                        </div>
                        
                        <!-- GRA Section -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="gra_attending" name="gra_attending" 
                                           {% if event and event.gra_attending %}checked{% endif %}>
                                    <label class="form-check-label" for="gra_attending">
                                        <i class="fas fa-user-tie"></i> GRA Attending
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6" id="gra_confirmed_col" style="display: {% if event and event.gra_attending %}block{% else %}none{% endif %}">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="gra_attending_confirmed" name="gra_attending_confirmed" 
                                           {% if event and event.gra_attending_confirmed %}checked{% endif %}>
                                    <label class="form-check-label" for="gra_attending_confirmed">
                                        <i class="fas fa-check-circle text-success"></i> GRA Attendance Confirmed
                                    </label>
                                </div>
                            </div>
                        </div>

                            <!-- GRA Name - Commented out as requested -->
                            <!-- <div class="col-md-6">
                                <label for="gra_name" class="form-label">GRA Name</label>
                                <input type="text" class="form-control" id="gra_name" name="gra_name" 
                                       value="{{ event.gra_name if event else '' }}">
                            </div> -->

                        <!-- GRA Times Row (Start and End Time side by side) -->
                        <div class="row mb-3" id="gra_times_row" style="display: {% if event and event.gra_attending %}flex{% else %}none{% endif %}; flex-wrap: wrap;">
                            <div class="col-md-6">
                                <label for="gra_start_time" class="form-label">GRA Start Time</label>
                                <input type="time" class="form-control" id="gra_start_time" name="gra_start_time" 
                                       value="{{ event.gra_start_time.strftime('%H:%M') if event and event.gra_start_time else '' }}">
                                <div class="help-text">When will the GRA arrive?</div>
                            </div>
                            <div class="col-md-6">
                                <label for="gra_end_time" class="form-label">GRA End Time</label>
                                <input type="time" class="form-control" id="gra_end_time" name="gra_end_time" 
                                       value="{{ event.gra_end_time.strftime('%H:%M') if event and event.gra_end_time else '' }}">
                                <div class="help-text">When will the GRA depart?</div>
                            </div>
                        </div>

                        {% if event %}
                        <div class="col-md-6 mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" id="status" name="status">
                                <option value="scheduled" {% if event.status == 'scheduled' %}selected{% endif %}>Scheduled</option>
                                <option value="cancelled" {% if event.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                                <option value="completed" {% if event.status == 'completed' %}selected{% endif %}>Completed</option>
                            </select>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="mt-4 d-flex gap-2">
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-save me-1"></i> Save Event
                        </button>
                        <a href="{{ url_for('events') }}" class="btn btn-secondary">
                            <i class="fas fa-times me-1"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Store event ID as a JavaScript variable
    var currentEventId = {{ event.id if event else 'null' }};
    
    // Toggle GRA fields
    const graCheckbox = document.getElementById('gra_attending');
    const graConfirmedCol = document.getElementById('gra_confirmed_col');
    const graTimesRow = document.getElementById('gra_times_row');
    const graStartTimeInput = document.getElementById('gra_start_time');
    const graEndTimeInput = document.getElementById('gra_end_time');

    function toggleGRAFields() {
        const isChecked = graCheckbox ? graCheckbox.checked : false;
        // Show/hide the confirmation checkbox column
        if (graConfirmedCol) graConfirmedCol.style.display = isChecked ? 'block' : 'none';
        // Show/hide the times row with flex display
        if (graTimesRow) {
            graTimesRow.style.display = isChecked ? 'flex' : 'none';
            graTimesRow.style.flexWrap = 'wrap';
        }
    }

    if (graCheckbox) {
        graCheckbox.addEventListener('change', toggleGRAFields);
    }
    
    // Initial state
    toggleGRAFields();
    
    // Real-time venue conflict checking
    const venueInput = document.getElementById('venue');
    const eventDateInput = document.getElementById('event_date');
    const startTimeInput = document.getElementById('start_time');
    const endTimeInput = document.getElementById('end_time');
    const conflictWarningDiv = document.createElement('div');
    conflictWarningDiv.className = 'alert alert-warning mt-2';
    conflictWarningDiv.style.display = 'none';
    conflictWarningDiv.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i> <span id="conflictMessage"></span>';

    // Insert warning after venue input
    if (venueInput && venueInput.parentNode) {
        venueInput.parentNode.appendChild(conflictWarningDiv);
    }

    let conflictCheckTimeout;

    function checkVenueConflict() {
        const venue = venueInput ? venueInput.value : '';
        const eventDate = eventDateInput ? eventDateInput.value : '';
        const startTime = startTimeInput ? startTimeInput.value : '';
        const endTime = endTimeInput ? endTimeInput.value : '';
        
        // Don't check if any field is empty
        if (!venue || !eventDate || !startTime || !endTime) {
            conflictWarningDiv.style.display = 'none';
            return;
        }
        
        // Don't check if times are invalid
        if (startTime >= endTime) {
            conflictWarningDiv.style.display = 'block';
            document.getElementById('conflictMessage').innerHTML = '⚠️ End time must be after start time.';
            conflictWarningDiv.className = 'alert alert-danger mt-2';
            return;
        }
        
        // Clear previous timeout
        if (conflictCheckTimeout) clearTimeout(conflictCheckTimeout);
        
        conflictCheckTimeout = setTimeout(function() {
            fetch('/api/check-venue-conflict', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    venue: venue,
                    event_date: eventDate,
                    start_time: startTime,
                    end_time: endTime,
                    exclude_id: currentEventId
                })
            })
            .then(function(response) { return response.json(); })
            .then(function(data) {
                if (data.has_conflict) {
                    conflictWarningDiv.style.display = 'block';
                    document.getElementById('conflictMessage').innerHTML = data.message;
                    conflictWarningDiv.className = 'alert alert-danger mt-2';
                } else {
                    conflictWarningDiv.style.display = 'none';
                }
            })
            .catch(function(error) {
                console.error('Error checking conflict:', error);
            });
        }, 500);
    }

    // Add event listeners for real-time checking
    if (venueInput) venueInput.addEventListener('change', checkVenueConflict);
    if (venueInput) venueInput.addEventListener('blur', checkVenueConflict);
    if (eventDateInput) eventDateInput.addEventListener('change', checkVenueConflict);
    if (startTimeInput) startTimeInput.addEventListener('change', checkVenueConflict);
    if (endTimeInput) endTimeInput.addEventListener('change', checkVenueConflict);
    
    // Function to select a venue
    function selectVenue(venueName, clickEvent) {
        const venueInputEl = document.getElementById('venue');
        if (venueInputEl) {
            venueInputEl.value = venueName;
            venueInputEl.focus();
            
            venueInputEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
            
            // Highlight the selected venue card
            const cards = document.querySelectorAll('.venue-suggestion');
            cards.forEach(card => {
                card.style.backgroundColor = '';
                card.style.borderColor = '';
            });
            
            // Use the passed event parameter
            if (clickEvent && clickEvent.currentTarget) {
                clickEvent.currentTarget.style.backgroundColor = '#f8f9fa';
                clickEvent.currentTarget.style.borderColor = '#dc3545';
            }
            
            // Trigger conflict check after selecting venue
            checkVenueConflict();
        }
    }


    function saveVenueToPermanent(venueName) {
        if (confirm(`Save "${venueName}" to your permanent venues?`)) {
            fetch('/api/save-venue-to-permanent', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ venue_name: venueName })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Venue saved to your permanent venues!');
                    location.reload();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Failed to save venue');
            });
        }
    }
    
    // Validate GRA times (GRA start time cannot be after GRA end time)
    function validateGRATimes() {
        if (graStartTimeInput && graEndTimeInput && graCheckbox && graCheckbox.checked) {
            const graStartTime = graStartTimeInput.value;
            const graEndTime = graEndTimeInput.value;
            
            if (graStartTime && graEndTime) {
                const graTimeWarning = document.getElementById('graTimeWarning');
                
                if (graStartTime >= graEndTime) {
                    graEndTimeInput.setCustomValidity('GRA end time must be after GRA start time');
                    if (!graTimeWarning) {
                        const warning = document.createElement('div');
                        warning.id = 'graTimeWarning';
                        warning.className = 'alert alert-danger mt-2';
                        warning.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i> GRA End time must be after GRA Start time.';
                        graEndTimeInput.parentNode.appendChild(warning);
                    } else {
                        graTimeWarning.style.display = 'block';
                    }
                    return false;
                } else {
                    graEndTimeInput.setCustomValidity('');
                    const graTimeWarning = document.getElementById('graTimeWarning');
                    if (graTimeWarning) graTimeWarning.style.display = 'none';
                    return true;
                }
            }
        }
        return true;
    }
    
    // Add GRA time validation listeners
    if (graStartTimeInput) {
        graStartTimeInput.addEventListener('change', validateGRATimes);
        graStartTimeInput.addEventListener('blur', validateGRATimes);
    }
    if (graEndTimeInput) {
        graEndTimeInput.addEventListener('change', validateGRATimes);
        graEndTimeInput.addEventListener('blur', validateGRATimes);
    }
    
    // Live validation for event times
    function validateTimes() {
        if (startTimeInput && endTimeInput) {
            const startTime = startTimeInput.value;
            const endTime = endTimeInput.value;
            
            if (startTime && endTime) {
                if (startTime >= endTime) {
                    endTimeInput.setCustomValidity('End time must be after start time');
                    // Show warning message
                    const timeWarning = document.getElementById('timeWarning');
                    if (!timeWarning) {
                        const warning = document.createElement('div');
                        warning.id = 'timeWarning';
                        warning.className = 'alert alert-danger mt-2';
                        warning.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i> End time must be after start time.';
                        endTimeInput.parentNode.appendChild(warning);
                    } else {
                        timeWarning.style.display = 'block';
                    }
                    checkVenueConflict();
                } else {
                    endTimeInput.setCustomValidity('');
                    const timeWarning = document.getElementById('timeWarning');
                    if (timeWarning) timeWarning.style.display = 'none';
                    checkVenueConflict();
                }
            }
        }
    }
    
    if (startTimeInput && endTimeInput) {
        startTimeInput.addEventListener('change', validateTimes);
        endTimeInput.addEventListener('change', validateTimes);
        // Also validate on blur to ensure user sees warning
        startTimeInput.addEventListener('blur', validateTimes);
        endTimeInput.addEventListener('blur', validateTimes);
    }
    
    // Form submit validation
    const eventForm = document.getElementById('eventForm');
    if (eventForm) {
        eventForm.addEventListener('submit', function(e) {
            const startTime = startTimeInput ? startTimeInput.value : '';
            const endTime = endTimeInput ? endTimeInput.value : '';
            const graStartTime = graStartTimeInput ? graStartTimeInput.value : '';
            const graEndTime = graEndTimeInput ? graEndTimeInput.value : '';
            const isGraAttending = graCheckbox ? graCheckbox.checked : false;
            
            if (startTime && endTime && startTime >= endTime) {
                e.preventDefault();
                alert('Please fix the following error:\n\nEnd time must be after start time.');
                return false;
            }
            
            if (isGraAttending && graStartTime && graEndTime && graStartTime >= graEndTime) {
                e.preventDefault();
                alert('Please fix the following error:\n\nGRA End time must be after GRA Start time.');
                return false;
            }
        });
    }
</script>
{% endblock %}