{% extends "base.html" %}
{% from "components/cards.html" import info_card %}
{% from "components/ui.html" import page_header, breadcrumb_nav, button, filter_badge %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Reports'}
] %}

{{ page_header(
    icon_class='fas fa-chart-bar',
    title_text='Reports',
    subtitle_text='View comprehensive reports and analytics for your time tracking data',
    breadcrumbs=breadcrumbs,
    actions_html=None
) }}

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
    {{ info_card("Total Hours", "%.2f"|format(summary.total_hours), "All time") }}
    {{ info_card("Billable Hours", "%.2f"|format(summary.billable_hours), "All time") }}
    {{ info_card("Active Projects", summary.active_projects, "Currently active") }}
    {{ info_card("Active Users", summary.total_users, "Currently active") }}
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between mb-2">
            <i class="fas fa-money-bill-wave text-green-600 text-xl"></i>
        </div>
        <div class="text-2xl font-semibold text-green-600">{{ currency|currency_symbol }}{{ "%.2f"|format(summary.total_payments) }}</div>
        <div class="text-xs text-text-muted-light dark:text-text-muted-dark">Total Payments</div>
        <div class="text-[11px] text-text-muted-light dark:text-text-muted-dark">Last 30 days</div>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between mb-2">
            <i class="fas fa-receipt text-blue-600 text-xl"></i>
        </div>
        <div class="text-2xl font-semibold text-blue-600">{{ summary.payment_count }}</div>
        <div class="text-xs text-text-muted-light dark:text-text-muted-dark">Payments Received</div>
        <div class="text-[11px] text-text-muted-light dark:text-text-muted-dark">Last 30 days</div>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between mb-2">
            <i class="fas fa-credit-card text-amber-600 text-xl"></i>
        </div>
        <div class="text-2xl font-semibold text-amber-600">{{ currency|currency_symbol }}{{ "%.2f"|format(summary.payment_fees) }}</div>
        <div class="text-xs text-text-muted-light dark:text-text-muted-dark">Gateway Fees</div>
        <div class="text-[11px] text-text-muted-light dark:text-text-muted-dark">Last 30 days</div>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between mb-2">
            <i class="fas fa-chart-line text-emerald-600 text-xl"></i>
        </div>
        <div class="text-2xl font-semibold text-emerald-600">{{ currency|currency_symbol }}{{ "%.2f"|format(summary.total_payments - summary.payment_fees) }}</div>
        <div class="text-xs text-text-muted-light dark:text-text-muted-dark">Net Received</div>
        <div class="text-[11px] text-text-muted-light dark:text-text-muted-dark">After fees</div>
    </div>
</div>

<!-- Date Range Presets and Comparison View -->
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow mb-6">
    <h2 class="text-lg font-semibold mb-4">{{ _('Date Range & Comparison') }}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Date Range Presets -->
        <div>
            <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-3">{{ _('Quick Date Ranges') }}</h3>
            <div class="flex flex-wrap gap-2">
                <button type="button" onclick="setDateRange('today')" class="date-preset-btn px-4 py-2 rounded-lg text-sm bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                    <i class="fas fa-calendar-day mr-1"></i>Today
                </button>
                <button type="button" onclick="setDateRange('week')" class="date-preset-btn px-4 py-2 rounded-lg text-sm bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                    <i class="fas fa-calendar-week mr-1"></i>This Week
                </button>
                <button type="button" onclick="setDateRange('month')" class="date-preset-btn px-4 py-2 rounded-lg text-sm bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                    <i class="fas fa-calendar-alt mr-1"></i>This Month
                </button>
                <button type="button" onclick="setDateRange('year')" class="date-preset-btn px-4 py-2 rounded-lg text-sm bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                    <i class="fas fa-calendar mr-1"></i>This Year
                </button>
            </div>
            <div class="mt-3">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Custom Range</label>
                <div class="flex gap-2">
                    <input type="date" id="startDate" class="form-input flex-1">
                    <input type="date" id="endDate" class="form-input flex-1">
                    <button type="button" onclick="applyCustomDateRange()" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                        Apply
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Comparison View -->
        <div>
            <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-3">{{ _('Comparison View') }}</h3>
            <div class="space-y-3">
                <button type="button" onclick="showComparisonView('month')" class="w-full px-4 py-3 rounded-lg text-left bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium text-text-light dark:text-text-dark">This Month vs Last Month</div>
                            <div class="text-xs text-text-muted-light dark:text-text-muted-dark">Compare current month with previous month</div>
                        </div>
                        <i class="fas fa-chevron-right text-text-muted-light dark:text-text-muted-dark"></i>
                    </div>
                </button>
                <button type="button" onclick="showComparisonView('year')" class="w-full px-4 py-3 rounded-lg text-left bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium text-text-light dark:text-text-dark">This Year vs Last Year</div>
                            <div class="text-xs text-text-muted-light dark:text-text-muted-dark">Compare current year with previous year</div>
                        </div>
                        <i class="fas fa-chevron-right text-text-muted-light dark:text-text-muted-dark"></i>
                    </div>
                </button>
            </div>
        </div>
    </div>
    
    <!-- Comparison Results (hidden by default) -->
    <div id="comparisonResults" class="hidden mt-6 p-4 bg-background-light dark:bg-background-dark rounded-lg">
        <h3 class="text-md font-semibold mb-4">{{ _('Comparison Results') }}</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="comparisonStats">
            <!-- Comparison stats will be loaded here -->
        </div>
    </div>
</div>

<!-- Export Format Selection -->
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow mb-6">
    <h2 class="text-lg font-semibold mb-4">{{ _('Export Reports') }}</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="p-4 border border-border-light dark:border-border-dark rounded-lg">
            <h3 class="font-medium mb-2">{{ _('Export Format') }}</h3>
            <select id="exportFormat" class="form-input w-full mb-3">
                <option value="csv">CSV</option>
                <option value="excel">Excel</option>
            </select>
            <button type="button" onclick="exportReport()" class="w-full bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                <i class="fas fa-download mr-2"></i>Export Report
            </button>
        </div>
        <div class="p-4 border border-border-light dark:border-border-dark rounded-lg">
            <h3 class="font-medium mb-2">{{ _('Scheduled Reports') }}</h3>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-3">Set up automatic report generation</p>
            <button type="button" onclick="showScheduledReportsModal()" class="w-full bg-secondary text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
                <i class="fas fa-clock mr-2"></i>Manage Scheduled Reports
            </button>
        </div>
        <div class="p-4 border border-border-light dark:border-border-dark rounded-lg">
            <h3 class="font-medium mb-2">{{ _('Quick Actions') }}</h3>
            <div class="space-y-2">
                <a href="{{ url_for('reports.export_form') }}" class="block w-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-center">
                    <i class="fas fa-file-csv mr-2"></i>CSV Export
                </a>
                <a href="{{ url_for('reports.export_excel') }}" class="block w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors text-center">
                    <i class="fas fa-file-excel mr-2"></i>Excel Export
                </a>
            </div>
        </div>
    </div>
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow mb-6">
    <h2 class="text-lg font-semibold mb-4">{{ _('Report Types') }}</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <a href="{{ url_for('reports.project_report') }}" class="bg-primary text-white p-4 rounded-lg text-center hover:bg-primary/90 transition-colors">
            <i class="fas fa-project-diagram mr-2"></i>{{ _('Project Report') }}
        </a>
        <a href="{{ url_for('reports.user_report') }}" class="bg-primary text-white p-4 rounded-lg text-center hover:bg-primary/90 transition-colors">
            <i class="fas fa-users mr-2"></i>{{ _('User Report') }}
        </a>
        <a href="{{ url_for('reports.summary_report') }}" class="bg-primary text-white p-4 rounded-lg text-center hover:bg-primary/90 transition-colors">
            <i class="fas fa-chart-bar mr-2"></i>{{ _('Summary Report') }}
        </a>
        <a href="{{ url_for('reports.task_report') }}" class="bg-primary text-white p-4 rounded-lg text-center hover:bg-primary/90 transition-colors">
            <i class="fas fa-tasks mr-2"></i>{{ _('Task Report') }}
        </a>
        <a href="{{ url_for('reports.unpaid_hours_report') }}" class="bg-primary text-white p-4 rounded-lg text-center hover:bg-primary/90 transition-colors">
            <i class="fas fa-money-bill-wave mr-2"></i>{{ _('Unpaid Hours Report') }}
        </a>
        <a href="{{ url_for('custom_reports.report_builder') }}" class="bg-secondary text-white p-4 rounded-lg text-center hover:bg-secondary/90 transition-colors">
            <i class="fas fa-magic mr-2"></i>{{ _('Report Builder') }}
        </a>
    </div>
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow mb-6">
    <h2 class="text-lg font-semibold mb-4">{{ _('Report Management') }}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <a href="{{ url_for('custom_reports.list_saved_views') }}" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-4 rounded-lg text-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
            <i class="fas fa-save mr-2"></i>{{ _('Saved Report Views') }}
            <p class="text-sm mt-2 text-gray-600 dark:text-gray-400">{{ _('View and manage your saved report configurations') }}</p>
        </a>
        <a href="{{ url_for('scheduled_reports.list_scheduled') }}" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-4 rounded-lg text-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
            <i class="fas fa-clock mr-2"></i>{{ _('Scheduled Reports') }}
            <p class="text-sm mt-2 text-gray-600 dark:text-gray-400">{{ _('Manage automated report delivery via email') }}</p>
        </a>
    </div>
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <h2 class="text-lg font-semibold mb-4">{{ _('Recent Entries') }}</h2>
    <table class="w-full text-left">
        <thead>
            <tr>
                <th class="p-2">Project</th>
                <th class="p-2">Duration</th>
                <th class="p-2">Date</th>
            </tr>
        </thead>
        <tbody>
            {% for entry in recent_entries %}
            <tr class="border-b border-border-light dark:border-border-dark">
                <td class="p-2">{{ entry.project.name }}</td>
                <td class="p-2">{{ entry.duration }}</td>
                <td class="p-2">{{ entry.start_time|user_date('%Y-%m-%d') }}</td>
            </tr>
            {% else %}
            <tr>
                <td colspan="3" class="p-4 text-center">No recent entries.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Scheduled Reports Modal -->
<div id="scheduledReportsModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">Scheduled Reports</h3>
                <button type="button" onclick="hideScheduledReportsModal()" class="text-text-muted-light dark:text-text-muted-dark hover:text-text-light dark:hover:text-text-dark">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="scheduledReportsList" class="space-y-3">
                <!-- Scheduled reports will be loaded here -->
                <p class="text-text-muted-light dark:text-text-muted-dark text-center py-4">No scheduled reports yet.</p>
            </div>
            <div class="mt-6 pt-4 border-t border-border-light dark:border-border-dark">
                <button type="button" onclick="showAddScheduledReportForm()" class="w-full bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                    <i class="fas fa-plus mr-2"></i>Add Scheduled Report
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts_extra %}
<script>
// Date range presets
function setDateRange(preset) {
    const today = new Date();
    let startDate, endDate;
    
    switch(preset) {
        case 'today':
            startDate = endDate = today;
            break;
        case 'week':
            const dayOfWeek = today.getDay();
            const diff = today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
            startDate = new Date(today.setDate(diff));
            endDate = new Date();
            break;
        case 'month':
            startDate = new Date(today.getFullYear(), today.getMonth(), 1);
            endDate = new Date();
            break;
        case 'year':
            startDate = new Date(today.getFullYear(), 0, 1);
            endDate = new Date();
            break;
    }
    
    document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
    document.getElementById('endDate').value = endDate.toISOString().split('T')[0];
    
    // Apply to current report
    applyCustomDateRange();
}

function applyCustomDateRange() {
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    
    if (startDate && endDate) {
        // Redirect to project report with date range
        window.location.href = `{{ url_for('reports.project_report') }}?start_date=${startDate}&end_date=${endDate}`;
    }
}

// Comparison view
function showComparisonView(period) {
    fetch(`/reports/comparison?period=${period}`)
        .then(response => response.json())
        .then(data => {
            const resultsDiv = document.getElementById('comparisonResults');
            const statsDiv = document.getElementById('comparisonStats');
            
            statsDiv.innerHTML = `
                <div class="text-center">
                    <div class="text-2xl font-bold text-primary">${data.current.hours.toFixed(1)}</div>
                    <div class="text-sm text-text-muted-light dark:text-text-muted-dark">Current Period Hours</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold ${data.change >= 0 ? 'text-green-600' : 'text-red-600'}">
                        ${data.change >= 0 ? '+' : ''}${data.change.toFixed(1)}%
                    </div>
                    <div class="text-sm text-text-muted-light dark:text-text-muted-dark">Change</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-text-light dark:text-text-dark">${data.previous.hours.toFixed(1)}</div>
                    <div class="text-sm text-text-muted-light dark:text-text-muted-dark">Previous Period Hours</div>
                </div>
            `;
            
            resultsDiv.classList.remove('hidden');
        })
        .catch(error => {
            console.error('Error loading comparison:', error);
            alert('Failed to load comparison data');
        });
}

// Export report
function exportReport() {
    const format = document.getElementById('exportFormat').value;
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    
    let url = '';
    if (format === 'csv') {
        url = `{{ url_for('reports.export_csv') }}`;
    } else if (format === 'excel') {
        url = `{{ url_for('reports.export_excel') }}`;
    }
    
    if (startDate && endDate) {
        url += `?start_date=${startDate}&end_date=${endDate}`;
    }
    
    window.location.href = url;
}

// Scheduled reports
function showScheduledReportsModal() {
    document.getElementById('scheduledReportsModal').classList.remove('hidden');
    loadScheduledReports();
}

function hideScheduledReportsModal() {
    document.getElementById('scheduledReportsModal').classList.add('hidden');
}

function loadScheduledReports() {
    const listContainer = document.getElementById('scheduledReportsList');
    listContainer.innerHTML = '<p class="text-text-muted-light dark:text-text-muted-dark text-center py-4">Loading...</p>';
    
    fetch('/api/reports/scheduled')
        .then(response => response.json())
        .then(data => {
            if (data.schedules && data.schedules.length > 0) {
                listContainer.innerHTML = data.schedules.map(schedule => {
                    const nextRun = schedule.next_run_at ? new Date(schedule.next_run_at).toLocaleString() : 'Not scheduled';
                    const lastRun = schedule.last_run_at ? new Date(schedule.last_run_at).toLocaleString() : 'Never';
                    const statusBadge = schedule.active 
                        ? '<span class="px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded text-xs">Active</span>'
                        : '<span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded text-xs">Inactive</span>';
                    
                    return `
                        <div class="p-4 border border-border-light dark:border-border-dark rounded-lg">
                            <div class="flex justify-between items-start mb-2">
                                <div class="flex-1">
                                    <h4 class="font-semibold">${escapeHtml(schedule.saved_view_name || 'Unknown Report')}</h4>
                                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark">
                                        <i class="fas fa-clock mr-1"></i>${schedule.cadence}
                                        <span class="mx-2">•</span>
                                        <i class="fas fa-envelope mr-1"></i>${schedule.recipients.split(',').length} recipient(s)
                                    </p>
                                </div>
                                ${statusBadge}
                            </div>
                            <div class="text-xs text-text-muted-light dark:text-text-muted-dark mt-2">
                                <div><strong>Next run:</strong> ${nextRun}</div>
                                <div><strong>Last run:</strong> ${lastRun}</div>
                            </div>
                            <div class="flex gap-2 mt-3">
                                <button onclick="toggleSchedule(${schedule.id}, ${!schedule.active})" class="text-sm px-3 py-1 rounded bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
                                    ${schedule.active ? 'Deactivate' : 'Activate'}
                                </button>
                                <button onclick="deleteSchedule(${schedule.id})" class="text-sm px-3 py-1 rounded bg-red-600 text-white hover:bg-red-700">
                                    Delete
                                </button>
                            </div>
                        </div>
                    `;
                }).join('');
            } else {
                listContainer.innerHTML = '<p class="text-text-muted-light dark:text-text-muted-dark text-center py-4">No scheduled reports yet.</p>';
            }
        })
        .catch(error => {
            console.error('Error loading scheduled reports:', error);
            listContainer.innerHTML = '<p class="text-red-600 dark:text-red-400 text-center py-4">Failed to load scheduled reports.</p>';
        });
}

function showAddScheduledReportForm() {
    // Load saved views first
    fetch('/api/reports/saved-views')
        .then(response => response.json())
        .then(data => {
            const savedViews = data.saved_views || [];
            if (savedViews.length === 0) {
                alert('{{ _("You need to create a saved report view first. Please create one from the reports page.") }}');
                return;
            }
            
            // Create form modal
            const formModal = document.createElement('div');
            formModal.id = 'addScheduledReportForm';
            formModal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/50';
            formModal.innerHTML = `
                <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-xl max-w-md w-full mx-4">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold">{{ _('Schedule Report') }}</h3>
                            <button type="button" onclick="closeAddScheduledReportForm()" class="text-text-muted-light dark:text-text-muted-dark hover:text-text-light dark:hover:text-text-dark">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <form id="newScheduledReportForm" onsubmit="createScheduledReport(event)">
                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">{{ _('Report View') }}</label>
                                <select id="savedViewId" name="saved_view_id" class="form-input w-full" required>
                                    <option value="">{{ _('Select a report view...') }}</option>
                                    ${savedViews.map(sv => `<option value="${sv.id}">${escapeHtml(sv.name)}</option>`).join('')}
                                </select>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">{{ _('Recipients') }}</label>
                                <input type="email" id="recipients" name="recipients" class="form-input w-full" 
                                       placeholder="email1@example.com, email2@example.com" required>
                                <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Comma-separated email addresses') }}</p>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">{{ _('Frequency') }}</label>
                                <select id="cadence" name="cadence" class="form-input w-full" required>
                                    <option value="daily">{{ _('Daily') }}</option>
                                    <option value="weekly">{{ _('Weekly') }}</option>
                                    <option value="monthly">{{ _('Monthly') }}</option>
                                </select>
                            </div>
                            <div class="flex gap-2">
                                <button type="button" onclick="closeAddScheduledReportForm()" class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                                    {{ _('Cancel') }}
                                </button>
                                <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    {{ _('Create Schedule') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            `;
            document.body.appendChild(formModal);
        })
        .catch(error => {
            console.error('Error loading saved views:', error);
            alert('{{ _("Failed to load report views") }}');
        });
}

function closeAddScheduledReportForm() {
    const formModal = document.getElementById('addScheduledReportForm');
    if (formModal) formModal.remove();
}

function createScheduledReport(event) {
    event.preventDefault();
    const form = event.target;
    const formData = {
        saved_view_id: parseInt(document.getElementById('savedViewId').value),
        recipients: document.getElementById('recipients').value.trim(),
        cadence: document.getElementById('cadence').value,
    };
    
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>{{ _("Creating...") }}';
    
    fetch('/api/reports/scheduled', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': '{{ csrf_token() }}'
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeAddScheduledReportForm();
            loadScheduledReports();
            if (window.showToast) {
                window.showToast('{{ _("Scheduled report created successfully") }}', 'success');
            }
        } else {
            alert(data.error || '{{ _("Failed to create scheduled report") }}');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('{{ _("Failed to create scheduled report") }}');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    });
}

function toggleSchedule(scheduleId, newActive) {
    fetch(`/api/reports/scheduled/${scheduleId}/toggle`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            loadScheduledReports();
        } else {
            alert(data.error || '{{ _("Failed to update schedule") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('{{ _("Failed to update schedule") }}');
    });
}

function deleteSchedule(scheduleId) {
    if (!confirm('{{ _("Are you sure you want to delete this scheduled report?") }}')) {
        return;
    }
    
    fetch(`/api/reports/scheduled/${scheduleId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRFToken': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            loadScheduledReports();
            if (window.showToast) {
                window.showToast('{{ _("Scheduled report deleted successfully") }}', 'success');
            }
        } else {
            alert(data.error || '{{ _("Failed to delete scheduled report") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('{{ _("Failed to delete scheduled report") }}');
    });
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Initialize date inputs
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date();
    const weekStart = new Date(today);
    weekStart.setDate(today.getDate() - today.getDay());
    
    document.getElementById('startDate').value = weekStart.toISOString().split('T')[0];
    document.getElementById('endDate').value = today.toISOString().split('T')[0];
});
</script>
{% endblock %}