{% extends "layout.html.twig" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid px-0">
    
    <!-- Header Section -->
    <div class="row g-0 bg-light border-bottom mb-4">
        <div class="col-12 p-3">
            <div class="container">
                <div class="row align-items-start">
                    <!-- Left 1/2: Logo and Title -->
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <img src="/lendables/logo_offerhour_600.png" 
                                 alt="Offer Hour" 
                                 style="width: 100px; height: 100px; object-fit: contain;" 
                                 class="me-3">
                            <div>
                                <h1 class="h3 mb-0">Offer an Hour of Your Time</h1>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Right 1/2: Subtitle -->
                    <div class="col-md-6">
                        <div class="midi">
                            We mean <b>one hour</b> -- this is not a handyman or housecleaning or furniture-moving service. It's a way to offer your time to help others. 
                            <br><br>
                            Any of us might need someone to hold the ladder while we paint, or to drive us to the store, or run an errand, or put in screens. An hour can make a huge difference!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Section -->
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6">
            <form id="offerHourForm" class="needs-validation" novalidate>
                
                <!-- Title -->
                <div class="mb-3">
                    <label for="title" class="form-label fw-bold">What kind of help are you able to offer?</label>
                    <select class="form-control" id="title" name="title" required>
                        <option value="">Select type of help...</option>
                        <option value="Light Effort" selected>Light Effort</option>
                        <option value="Driving Preferred">Driving Preferred</option>
                        <option value="Conversation time">Conversation time</option>
                        <option value="Anything">Anything</option>
                    </select>
                    <div class="invalid-feedback">Please select the type of help you can offer.</div>
                </div>

                <!-- Description -->
                <div class="mb-3">
                    <label for="description" class="form-label fw-bold">Anything else to know?</label>
                    <textarea class="form-control" id="description" name="description" rows="4" 
                              placeholder="e.g., Dog walking a specialty, Computer stuff, Love to garden, etc."></textarea>
                </div>

                <!-- Date -->
                <div class="mb-3">
                    <label for="date" class="form-label fw-bold">Date Available</label>
                    <input type="date" class="form-control" id="date" name="date" required>
                    <div class="invalid-feedback">Please select a date.</div>
                </div>

                <!-- Time Range -->
                <div class="row mb-3">
                    <div class="col-6">
                        <label for="startTime" class="form-label fw-bold">Start Time</label>
                        <select class="form-control" id="startTime" name="startTime" required>
                            <option value="">Select start time...</option>
                            <option value="06:00">6:00 AM</option>
                            <option value="06:30">6:30 AM</option>
                            <option value="07:00">7:00 AM</option>
                            <option value="07:30">7:30 AM</option>
                            <option value="08:00">8:00 AM</option>
                            <option value="08:30">8:30 AM</option>
                            <option value="09:00">9:00 AM</option>
                            <option value="09:30">9:30 AM</option>
                            <option value="10:00">10:00 AM</option>
                            <option value="10:30">10:30 AM</option>
                            <option value="11:00">11:00 AM</option>
                            <option value="11:30">11:30 AM</option>
                            <option value="12:00">12:00 PM</option>
                            <option value="12:30">12:30 PM</option>
                            <option value="13:00">1:00 PM</option>
                            <option value="13:30">1:30 PM</option>
                            <option value="14:00">2:00 PM</option>
                            <option value="14:30">2:30 PM</option>
                            <option value="15:00">3:00 PM</option>
                            <option value="15:30">3:30 PM</option>
                            <option value="16:00">4:00 PM</option>
                            <option value="16:30">4:30 PM</option>
                            <option value="17:00">5:00 PM</option>
                            <option value="17:30">5:30 PM</option>
                            <option value="18:00">6:00 PM</option>
                            <option value="18:30">6:30 PM</option>
                            <option value="19:00">7:00 PM</option>
                            <option value="19:30">7:30 PM</option>
                            <option value="20:00">8:00 PM</option>
                            <option value="20:30">8:30 PM</option>
                            <option value="21:00">9:00 PM</option>
                            <option value="21:30">9:30 PM</option>
                            <option value="22:00">10:00 PM</option>
                        </select>
                        <div class="invalid-feedback">Please select a start time.</div>
                    </div>
                    <div class="col-6">
                        <label for="endTime" class="form-label fw-bold">End Time</label>
                        <select class="form-control" id="endTime" name="endTime" required>
                            <option value="">Select end time...</option>
                            <option value="06:30">6:30 AM</option>
                            <option value="07:00">7:00 AM</option>
                            <option value="07:30">7:30 AM</option>
                            <option value="08:00">8:00 AM</option>
                            <option value="08:30">8:30 AM</option>
                            <option value="09:00">9:00 AM</option>
                            <option value="09:30">9:30 AM</option>
                            <option value="10:00">10:00 AM</option>
                            <option value="10:30">10:30 AM</option>
                            <option value="11:00">11:00 AM</option>
                            <option value="11:30">11:30 AM</option>
                            <option value="12:00">12:00 PM</option>
                            <option value="12:30">12:30 PM</option>
                            <option value="13:00">1:00 PM</option>
                            <option value="13:30">1:30 PM</option>
                            <option value="14:00">2:00 PM</option>
                            <option value="14:30">2:30 PM</option>
                            <option value="15:00">3:00 PM</option>
                            <option value="15:30">3:30 PM</option>
                            <option value="16:00">4:00 PM</option>
                            <option value="16:30">4:30 PM</option>
                            <option value="17:00">5:00 PM</option>
                            <option value="17:30">5:30 PM</option>
                            <option value="18:00">6:00 PM</option>
                            <option value="18:30">6:30 PM</option>
                            <option value="19:00">7:00 PM</option>
                            <option value="19:30">7:30 PM</option>
                            <option value="20:00">8:00 PM</option>
                            <option value="20:30">8:30 PM</option>
                            <option value="21:00">9:00 PM</option>
                            <option value="21:30">9:30 PM</option>
                            <option value="22:00">10:00 PM</option>
                            <option value="22:30">10:30 PM</option>
                        </select>
                        <div class="invalid-feedback">Please select an end time.</div>
                    </div>
                </div>

                <!-- Recurring Option -->
                <div class="mb-4">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="isRecurring" name="isRecurring">
                        <label class="form-check-label" for="isRecurring">
                            This is a recurring offer (available weekly at this time)
                        </label>
                    </div>
                    <div id="recurringOptions" style="display: none;" class="mt-3 ps-4">
                        <label for="recurringCount" class="form-label fw-bold">How many times? (2-20 weeks)</label>
                        <select class="form-control" id="recurringCount" name="recurringCount">
                            <option value="">Select number of weeks...</option>
                            <option value="2">2 weeks</option>
                            <option value="3">3 weeks</option>
                            <option value="4">4 weeks</option>
                            <option value="5">5 weeks</option>
                            <option value="6">6 weeks</option>
                            <option value="8">8 weeks</option>
                            <option value="10">10 weeks</option>
                            <option value="12">12 weeks</option>
                            <option value="16">16 weeks</option>
                            <option value="20">20 weeks</option>
                        </select>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <a href="/dashboard/{{ currentUser.id }}" class="btn btn-outline-secondary me-md-2">Cancel</a>
                    <button type="submit" class="btn btn-success" id="submitBtn">
                        <i class="fas fa-clock me-1"></i> Offer My Time
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-success" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2 mb-0">Creating your offering...</p>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('offerHourForm');
    const submitBtn = document.getElementById('submitBtn');
    const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
    
    // Set minimum date to today
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('date').setAttribute('min', today);
    
    // Handle recurring checkbox toggle
    const recurringCheckbox = document.getElementById('isRecurring');
    const recurringOptions = document.getElementById('recurringOptions');
    
    recurringCheckbox.addEventListener('change', function() {
        if (this.checked) {
            recurringOptions.style.display = 'block';
        } else {
            recurringOptions.style.display = 'none';
            document.getElementById('recurringCount').value = '';
        }
    });
    
    let isSubmitting = false;
    
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        if (isSubmitting) return;
        
        if (!form.checkValidity()) {
            e.stopPropagation();
            form.classList.add('was-validated');
            return;
        }
        
        // Validate end time is after start time
        const startTime = document.getElementById('startTime').value;
        const endTime = document.getElementById('endTime').value;
        
        if (endTime <= startTime) {
            LocalLendables.showToast('Invalid Time', 'End time must be after start time.', 'error');
            return;
        }
        
        isSubmitting = true;
        submitBtn.disabled = true;
        loadingModal.show();
        
        const formData = new FormData(form);
        const data = {
            title: formData.get('title'),
            description: formData.get('description'),
            date: formData.get('date'),
            startTime: formData.get('startTime'),
            endTime: formData.get('endTime'),
            isRecurring: formData.has('isRecurring'),
            recurringCount: formData.get('recurringCount') ? parseInt(formData.get('recurringCount')) : null
        };
        
        try {
            const response = await fetch('/api/hour-offerings', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });
            
            if (response.ok) {
                const result = await response.json();
                const message = result.isRecurring ? 
                    `Created ${result.count} recurring hour offerings!` : 
                    'Hour offering created successfully!';
                window.location.href = `/dashboard/{{ currentUser.id }}?success=${encodeURIComponent(message)}`;
            } else {
                const error = await response.text();
                throw new Error(error);
            }
        } catch (error) {
            console.error('Error creating hour offering:', error);
            LocalLendables.showToast('Error', 'Failed to create your hour offering. Please try again.', 'error');
        } finally {
            isSubmitting = false;
            submitBtn.disabled = false;
            loadingModal.hide();
        }
    });
});
</script>
{% endblock %}