@extends('layouts.app')

@section('title', 'Transit Tracking Report')
@section('no-page-header')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Transit Tracking Report</h5>
                </div>
                <div class="card-body">
                    <!-- Filters -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">Start Date</label>
                            <input type="date" class="form-control" name="start_date" value="{{ $startDate }}" onchange="applyFilters()">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">End Date</label>
                            <input type="date" class="form-control" name="end_date" value="{{ $endDate }}" onchange="applyFilters()">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Employee</label>
                            <select class="form-select" name="employee_id" onchange="applyFilters()">
                                <option value="">All Employees</option>
                                @foreach($employees as $employee)
                                    <option value="{{ $employee->id }}" {{ $filters['employee_id'] == $employee->id ? 'selected' : '' }}>
                                        {{ $employee->full_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Client</label>
                            <select class="form-select" name="client_id" onchange="applyFilters()">
                                <option value="">All Clients</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}" {{ $filters['client_id'] == $client->id ? 'selected' : '' }}>
                                        {{ $client->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Status</label>
                            <select class="form-select" name="status" onchange="applyFilters()">
                                <option value="">All Status</option>
                                <option value="in_transit" {{ $filters['status'] == 'in_transit' ? 'selected' : '' }}>In Transit</option>
                                <option value="arrived" {{ $filters['status'] == 'arrived' ? 'selected' : '' }}>Arrived</option>
                                <option value="delayed" {{ $filters['status'] == 'delayed' ? 'selected' : '' }}>Delayed</option>
                                <option value="cancelled" {{ $filters['status'] == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                            </select>
                        </div>
                    </div>

                    <!-- Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-md-2">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['total_transits'] }}</h5>
                                    <p class="card-text">Total Transits</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['completed_transits'] }}</h5>
                                    <p class="card-text">Completed</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['in_progress_transits'] }}</h5>
                                    <p class="card-text">In Progress</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['delayed_transits'] }}</h5>
                                    <p class="card-text">Delayed</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['completion_rate'] }}%</h5>
                                    <p class="card-text">Completion Rate</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['average_distance'] }} km</h5>
                                    <p class="card-text">Avg Distance</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Efficiency Metrics -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Efficiency Metrics</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row text-center">
                                        <div class="col-6">
                                            <h4 class="text-success">{{ $report['efficiency']['on_time_rate'] }}%</h4>
                                            <small class="text-muted">On-Time Rate</small>
                                        </div>
                                        <div class="col-6">
                                            <h4 class="text-warning">{{ $report['efficiency']['average_delay'] }} min</h4>
                                            <small class="text-muted">Avg Delay</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Transit Status Distribution</h6>
                                </div>
                                <div class="card-body">
                                    <canvas id="transitStatusChart" width="400" height="150"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Export Button -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <button class="btn btn-success" onclick="exportReport()">
                                <i class="fas fa-file-export me-2"></i>
                                Export to CSV
                            </button>
                        </div>
                    </div>

                    <!-- Detailed Table -->
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Client</th>
                                    <th>From Location</th>
                                    <th>To Location</th>
                                    <th>Start Time</th>
                                    <th>Est. Arrival</th>
                                    <th>Actual Arrival</th>
                                    <th>Distance</th>
                                    <th>Status</th>
                                    <th>Efficiency</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($report['details'] as $transit)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ $transit->employee->avatar }}" class="rounded-circle me-2" width="32" height="32">
                                                <div>
                                                    <div class="fw-semibold">{{ $transit->employee->full_name }}</div>
                                                    <small class="text-muted">{{ $transit->employee->profile->employee_id ?? '' }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $transit->client?->name ?? 'N/A' }}</td>
                                        <td>{{ $transit->from_location }}</td>
                                        <td>{{ $transit->to_location }}</td>
                                        <td>{{ $transit->start_time->format('M d, h:i A') }}</td>
                                        <td>{{ $transit->estimated_arrival?->format('M d, h:i A') ?? 'N/A' }}</td>
                                        <td>{{ $transit->actual_arrival?->format('M d, h:i A') ?? 'N/A' }}</td>
                                        <td>{{ $transit->distance ?? 'N/A' }} km</td>
                                        <td>
                                            <span class="badge bg-{{ $transit->status === 'arrived' ? 'success' : ($transit->status === 'delayed' ? 'warning' : ($transit->status === 'cancelled' ? 'danger' : 'info')) }}">
                                                {{ ucfirst(str_replace('_', ' ', $transit->status)) }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($transit->estimated_arrival && $transit->actual_arrival)
                                                @php
                                                    $efficiency = \Carbon\Carbon::parse($transit->estimated_arrival)->diffInMinutes(\Carbon\Carbon::parse($transit->actual_arrival));
                                                @endphp
                                                <span class="badge bg-{{ $efficiency <= 0 ? 'success' : 'warning' }}">
                                                    {{ $efficiency <= 0 ? 'On Time' : $efficiency . ' min late' }}
                                                </span>
                                            @else
                                                <span class="badge bg-secondary">N/A</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="text-center text-muted">No transit records found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Analytics Section -->
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Top Performers</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Employee</th>
                                                    <th>Transits</th>
                                                    <th>Completion Rate</th>
                                                    <th>Total Distance</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($report['analytics']['top_performers'] ?? [] as $performer)
                                                    <tr>
                                                        <td>{{ $performer['employee']['full_name'] }}</td>
                                                        <td>{{ $performer['total_transits'] }}</td>
                                                        <td>
                                                            <div class="progress" style="height: 20px;">
                                                                <div class="progress-bar bg-success" style="width: {{ $performer['completion_rate'] }}%"></div>
                                                            </div>
                                                            <small>{{ $performer['completion_rate'] }}%</small>
                                                        </td>
                                                        <td>{{ $performer['total_distance'] }} km</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No data available</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Client-wise Analysis</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Client</th>
                                                    <th>Transits</th>
                                                    <th>Completed</th>
                                                    <th>Total Distance</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($report['analytics']['client_wise'] ?? [] as $clientData)
                                                    <tr>
                                                        <td>{{ $clientData['client']['name'] }}</td>
                                                        <td>{{ $clientData['total_transits'] }}</td>
                                                        <td>{{ $clientData['completed_transits'] }}</td>
                                                        <td>{{ $clientData['total_distance'] }} km</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No data available</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let transitStatusChart;

document.addEventListener('DOMContentLoaded', function() {
    createTransitStatusChart();
});

function createTransitStatusChart() {
    const ctx = document.getElementById('transitStatusChart').getContext('2d');
    
    transitStatusChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Completed', 'In Progress', 'Delayed', 'Cancelled'],
            datasets: [{
                data: [
                    {{ $report['summary']['completed_transits'] }},
                    {{ $report['summary']['in_progress_transits'] }},
                    {{ $report['summary']['delayed_transits'] }},
                    {{ $report['summary']['cancelled_transits'] }}
                ],
                backgroundColor: [
                    'rgba(75, 192, 192, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(255, 99, 132, 0.8)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function applyFilters() {
    const form = document.createElement('form');
    form.method = 'GET';
    form.action = window.location.pathname;
    
    const inputs = document.querySelectorAll('input[name], select[name]');
    inputs.forEach(input => {
        const inputClone = input.cloneNode(true);
        form.appendChild(inputClone);
    });
    
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

function exportReport() {
    const params = new URLSearchParams(window.location.search);
    window.location.href = `{{ route('reports.transit.export') }}?${params.toString()}`;
}
</script>
@endsection
                    <h5 class="mb-0">Transit Reports</h5>
                    <div class="d-flex gap-2">
                        <button class="btn btn-outline-success" onclick="generateReport()">
                            <i class="fas fa-file-alt me-2"></i>Generate Report
                        </button>
                        <button class="btn btn-outline-primary" onclick="exportReport()">
                            <i class="fas fa-download me-2"></i>Export
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Report Filters -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">Report Type</label>
                            <select class="form-select" id="report_type">
                                <option value="summary">Summary Report</option>
                                <option value="efficiency">Efficiency Report</option>
                                <option value="distance">Distance Report</option>
                                <option value="timeline">Timeline Report</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Period</label>
                            <select class="form-select" id="period">
                                <option value="today">Today</option>
                                <option value="week">This Week</option>
                                <option value="month">This Month</option>
                                <option value="quarter">This Quarter</option>
                                <option value="year">This Year</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Vehicle</label>
                            <select class="form-select" id="vehicle_filter">
                                <option value="">All Vehicles</option>
                                <option value="car">Car</option>
                                <option value="van">Van</option>
                                <option value="motorcycle">Motorcycle</option>
                                <option value="bicycle">Bicycle</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <button class="btn btn-primary w-100" onclick="loadReport()">Load Report</button>
                        </div>
                    </div>

                    <!-- Report Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <h5 class="card-title" id="totalTransits">-</h5>
                                    <p class="card-text">Total Transits</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <h5 class="card-title" id="completedTransits">-</h5>
                                    <p class="card-text">Completed</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <h5 class="card-title" id="totalDistance">-</h5>
                                    <p class="card-text">Total Distance</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <h5 class="card-title" id="avgDuration">-</h5>
                                    <p class="card-text">Avg Duration</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Report Content -->
                    <div id="reportContent">
                        <!-- Charts and Tables will be loaded here -->
                        <div class="text-center py-5">
                            <i class="fas fa-route fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Select report parameters and click "Load Report"</h5>
                            <p class="text-muted">Choose report type, period, and filters to generate transit reports</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Report Options Modal -->
<div class="modal fade" id="reportOptionsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="reportOptionsForm">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Report Configuration</h6>
                            <div class="mb-3">
                                <label class="form-label">Include Charts</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="include_charts" checked>
                                    <label class="form-check-label">Include Charts</label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Include Details Table</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="include_table" checked>
                                    <label class="form-check-label">Include Details Table</label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Include Statistics</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="include_stats" checked>
                                    <label class="form-check-label">Include Statistics</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6>Export Options</h6>
                            <div class="mb-3">
                                <label class="form-label">Export Format</label>
                                <select class="form-select" id="export_format">
                                    <option value="pdf">PDF</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Email Report</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="email_report">
                                    <label class="form-check-label">Send via Email</label>
                                </div>
                            </div>
                            <div class="mb-3" id="emailOptions" style="display: none;">
                                <label class="form-label">Recipients</label>
                                <textarea class="form-control" id="email_recipients" rows="2" placeholder="Enter email addresses, separated by commas"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="generateReportWithOptions()">Generate Report</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function loadReport() {
    const reportType = document.getElementById('report_type').value;
    const period = document.getElementById('period').value;
    const vehicle = document.getElementById('vehicle_filter').value;
    
    // Show loading state
    document.getElementById('reportContent').innerHTML = `
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3">Generating report...</p>
        </div>
    `;
    
    // Simulate API call to load report data
    setTimeout(() => {
        generateReportContent(reportType, period, vehicle);
    }, 1500);
}

function generateReportContent(type, period, vehicle) {
    // Update summary cards with sample data
    document.getElementById('totalTransits').textContent = '234';
    document.getElementById('completedTransits').textContent = '218';
    document.getElementById('totalDistance').textContent = '1,847 km';
    document.getElementById('avgDuration').textContent = '45 min';
    
    // Generate report content based on type
    let content = '';
    
    if (type === 'summary') {
        content = `
            <div class="row mb-4">
                <div class="col-md-6">
                    <h6>Transit Volume</h6>
                    <canvas id="volumeChart" height="200"></canvas>
                </div>
                <div class="col-md-6">
                    <h6>Vehicle Utilization</h6>
                    <canvas id="utilizationChart" height="200"></canvas>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <h6>Key Metrics</h6>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Metric</th>
                                    <th>Value</th>
                                    <th>Target</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Completion Rate</td>
                                    <td>93.2%</td>
                                    <td>95%</td>
                                    <td><span class="badge bg-warning">Below Target</span></td>
                                </tr>
                                <tr>
                                    <td>Average Speed</td>
                                    <td>45.2 km/h</td>
                                    <td>50 km/h</td>
                                    <td><span class="badge bg-warning">Below Target</span></td>
                                </tr>
                                <tr>
                                    <td>Vehicle Efficiency</td>
                                    <td>87.5%</td>
                                    <td>85%</td>
                                    <td><span class="badge bg-success">Above Target</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    } else if (type === 'efficiency') {
        content = `
            <div class="row">
                <div class="col-12">
                    <h6>Transit Efficiency Report</h6>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Total Transits</th>
                                    <th>Completed</th>
                                    <th>Avg Duration</th>
                                    <th>Avg Distance</th>
                                    <th>Efficiency Score</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>John Doe</td>
                                    <td>56</td>
                                    <td>54</td>
                                    <td>42 min</td>
                                    <td>8.2 km</td>
                                    <td><span class="badge bg-success">96.4%</span></td>
                                </tr>
                                <tr>
                                    <td>Jane Smith</td>
                                    <td>48</td>
                                    <td>47</td>
                                    <td>38 min</td>
                                    <td>7.5 km</td>
                                    <td><span class="badge bg-success">97.9%</span></td>
                                </tr>
                                <tr>
                                    <td>Mike Johnson</td>
                                    <td>42</td>
                                    <td>38</td>
                                    <td>51 min</td>
                                    <td>9.1 km</td>
                                    <td><span class="badge bg-warning">90.5%</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    } else if (type === 'distance') {
        content = `
            <div class="row">
                <div class="col-12">
                    <h6>Distance Analysis Report</h6>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Route</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Distance</th>
                                    <th>Transits</th>
                                    <th>Total Distance</th>
                                    <th>Avg Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Route A</td>
                                    <td>Main Office</td>
                                    <td>Client A</td>
                                    <td>8.5 km</td>
                                    <td>45</td>
                                    <td>382.5 km</td>
                                    <td>35 min</td>
                                </tr>
                                <tr>
                                    <td>Route B</td>
                                    <td>Main Office</td>
                                    <td>Client B</td>
                                    <td>12.3 km</td>
                                    <td>32</td>
                                    <td>393.6 km</td>
                                    <td>42 min</td>
                                </tr>
                                <tr>
                                    <td>Route C</td>
                                    <td>Client A</td>
                                    <td>Client B</td>
                                    <td>15.7 km</td>
                                    <td>28</td>
                                    <td>439.6 km</td>
                                    <td>48 min</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    }
    
    document.getElementById('reportContent').innerHTML = content;
    
    // Initialize charts (placeholder for actual chart implementation)
    if (type === 'summary') {
        // Chart initialization would go here
        console.log('Charts would be initialized here');
    }
}

function generateReport() {
    new bootstrap.Modal(document.getElementById('reportOptionsModal')).show();
}

function generateReportWithOptions() {
    const includeCharts = document.getElementById('include_charts').checked;
    const includeTable = document.getElementById('include_table').checked;
    const includeStats = document.getElementById('include_stats').checked;
    const exportFormat = document.getElementById('export_format').value;
    const emailReport = document.getElementById('email_report').checked;
    
    bootstrap.Modal.getInstance(document.getElementById('reportOptionsModal')).hide();
    
    // Generate report with selected options
    alert(`Report will be generated with:\n- Charts: ${includeCharts ? 'Yes' : 'No'}\n- Table: ${includeTable ? 'Yes' : 'No'}\n- Stats: ${includeStats ? 'Yes' : 'No'}\n- Format: ${exportFormat}\n- Email: ${emailReport ? 'Yes' : 'No'}`);
}

function exportReport() {
    const reportType = document.getElementById('report_type').value;
    const period = document.getElementById('period').value;
    const vehicle = document.getElementById('vehicle_filter').value;
    
    const params = new URLSearchParams({
        type: reportType,
        period: period,
        vehicle: vehicle
    });
    
    window.location.href = `/reports/transit/export?${params.toString()}`;
}

// Show/hide email options
document.getElementById('email_report').addEventListener('change', function() {
    const emailOptions = document.getElementById('emailOptions');
    if (this.checked) {
        emailOptions.style.display = 'block';
    } else {
        emailOptions.style.display = 'none';
    }
});
</script>
@endsection