@extends('layouts.app')

@section('title', 'Patrol Reports')
@section('no-page-header')

<style>
.p-6 {
    padding: 1.5rem;
    margin-right: 12px;
}
.gap-6 {
    gap: 2.5rem;
    margin-left: 12px;
}
</style>

@section('content')
<div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-7xl mx-auto">
        <div class="bg-white rounded-lg shadow-lg">
            <div class="border-b border-gray-200 px-6 py-4">
                <h5 class="text-xl font-semibold text-gray-900">Patrol Reports</h5>
            </div>
            
            <div class="p-6">
                <!-- Report Filters -->
                <div class="bg-white rounded-lg shadow-md border border-gray-200 mb-6">
                    <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
                        <h6 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-filter mr-2 text-blue-600"></i>
                            Report Filters
                        </h6>
                    </div>
                    <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                        <div class="flex flex-col">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Report Type</label>
                            <select class="w-full px-3 py-2.5 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" id="report_type">
                                <option value="summary">Summary Report</option>
                                <option value="performance">Performance Report</option>
                                <option value="violations">Violations Report</option>
                                <option value="coverage">Coverage Report</option>
                            </select>
                        </div>
                        <div class="flex flex-col">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Period</label>
                            <select class="w-full px-3 py-2.5 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" 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="flex flex-col">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Client</label>
                            <select class="w-full px-3 py-2.5 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" id="client_filter">
                                <option value="">All Clients</option>
                                @foreach($clients ?? [] as $client)
                                    <option value="{{ $client->id }}">{{ $client->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="flex flex-col">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Service</label>
                            <select class="w-full px-3 py-2.5 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" id="service_filter">
                                <option value="">All Services</option>
                                @foreach($services ?? [] as $service)
                                    <option value="{{ $service->id }}">{{ $service->service_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="flex flex-col">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Employee</label>
                            <select class="w-full px-3 py-2.5 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" id="employee_filter">
                                <option value="">All Employees</option>
                                @foreach($employees ?? [] as $employeeId => $employeeName)
                                    <option value="{{ $employeeId }}">{{ $employeeName }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center justify-end gap-3 mt-6">
                        <button class="bg-gray-600 hover:bg-gray-700 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 flex items-center shadow-sm hover:shadow-md" onclick="generateReport()">
                            <i class="fas fa-cog mr-2"></i>Configure
                        </button>
                        <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 flex items-center shadow-sm hover:shadow-md" onclick="exportReport()">
                            <i class="fas fa-download mr-2"></i>Export
                        </button>
                        <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 flex items-center shadow-sm hover:shadow-md" onclick="loadReport()">
                            <i class="fas fa-search mr-2"></i>Load Report
                        </button>
                    </div>
                </div>

                <!-- Report Summary Cards -->
                <div class="mb-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div class="bg-blue-600 text-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow duration-200">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-shield-alt text-2xl opacity-80 mr-3"></i>
                                        <h5 class="text-xl font-bold" id="totalPatrols">-</h5>
                                    </div>
                                    <p class="text-blue-100 text-sm font-medium">Total Patrols</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-green-600 text-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow duration-200">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-check-circle text-2xl opacity-80 mr-3"></i>
                                        <h5 class="text-xl font-bold" id="completedPatrols">-</h5>
                                    </div>
                                    <p class="text-green-100 text-sm font-medium">Completed</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-amber-600 text-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow duration-200">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-exclamation-triangle text-2xl opacity-80 mr-3"></i>
                                        <h5 class="text-xl font-bold" id="violations">-</h5>
                                    </div>
                                    <p class="text-amber-100 text-sm font-medium">Violations</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-cyan-600 text-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow duration-200">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-chart-pie text-2xl opacity-80 mr-3"></i>
                                        <h5 class="text-xl font-bold" id="coverageRate">-</h5>
                                    </div>
                                    <p class="text-cyan-100 text-sm font-medium">Coverage Rate</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Report Content -->
                <div class="bg-white rounded-lg shadow-md border border-gray-200">
                    <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
                        <div class="flex items-center justify-between">
                            <h6 class="text-lg font-semibold text-gray-900">
                                <i class="fas fa-chart-bar mr-2 text-blue-600"></i>
                                Report Results
                            </h6>
                            <div class="flex items-center text-sm text-gray-500">
                                <i class="fas fa-clock mr-1"></i>
                                <span id="lastUpdated">Last updated: Never</span>
                                <button class="ml-3 text-blue-600 hover:text-blue-800 transition-colors" onclick="refreshReport()" title="Refresh Report">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div id="reportContent" class="min-h-96">
                            <!-- Charts and Tables will be loaded here -->
                            <div class="text-center py-12">
                                <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
                                    <i class="fas fa-shield-alt text-2xl text-blue-600"></i>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-700 mb-2">Ready to Generate Reports</h3>
                                <p class="text-gray-500 max-w-lg mx-auto">
                                    Select your desired report parameters from the filters above and click "Load Report" to generate comprehensive patrol analytics and insights.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Report Options Modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full hidden z-50" id="reportOptionsModal">
    <div class="relative top-20 mx-auto p-6 border-0 shadow-lg rounded-lg bg-white max-w-4xl w-11/12 md:w-3/4">
        <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200">
            <h5 class="text-lg font-semibold text-gray-900">Report Configuration Options</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeModal()">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <div class="px-6 py-4">
            <form id="reportOptionsForm">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h6 class="text-base font-semibold text-gray-900 mb-4">Report Configuration</h6>
                        <div class="space-y-3">
                            <div class="flex items-center">
                                <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="include_charts" checked>
                                <label class="ml-2 text-sm text-gray-700">Include Charts</label>
                            </div>
                            <div class="flex items-center">
                                <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="include_table" checked>
                                <label class="ml-2 text-sm text-gray-700">Include Details Table</label>
                            </div>
                            <div class="flex items-center">
                                <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="include_stats" checked>
                                <label class="ml-2 text-sm text-gray-700">Include Statistics</label>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h6 class="text-base font-semibold text-gray-900 mb-4">Export Options</h6>
                        <div class="space-y-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Export Format</label>
                                <select class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="export_format">
                                    <option value="pdf">PDF Document</option>
                                    <option value="excel">Excel Spreadsheet</option>
                                    <option value="csv">CSV File</option>
                                </select>
                            </div>
                            <div class="flex items-center">
                                <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="email_report">
                                <label class="ml-2 text-sm text-gray-700">Send via Email</label>
                            </div>
                            <div class="hidden" id="emailOptions">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Recipients</label>
                                <textarea class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="email_recipients" rows="3" placeholder="Enter email addresses, separated by commas"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
            <button type="button" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300" onclick="closeModal()">Cancel</button>
            <button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" onclick="generateReportWithOptions()">Generate Report</button>
        </div>
    </div>
</div>
@endsection


<script>
function loadReport() {
    const reportType = document.getElementById('report_type').value;
    const period = document.getElementById('period').value;
    const clientId = document.getElementById('client_filter').value;
    const serviceId = document.getElementById('service_filter').value;
    const employeeId = document.getElementById('employee_filter').value;
    
    // Show loading state
    document.getElementById('reportContent').innerHTML = `
        <div class="text-center py-12">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <p class="mt-3 text-gray-600">Generating report...</p>
        </div>
    `;
    
    // Simulate API call to load report data
    setTimeout(() => {
        generateReportContent(reportType, period, clientId, serviceId, employeeId);
        updateLastUpdated();
    }, 1500);
}

function refreshReport() {
    const refreshButton = document.querySelector('[onclick="refreshReport()"]');
    refreshButton.classList.add('animate-spin');
    
    loadReport();
    
    setTimeout(() => {
        refreshButton.classList.remove('animate-spin');
    }, 1500);
}

function updateLastUpdated() {
    const now = new Date();
    const formattedTime = now.toLocaleString('en-US', { 
        month: 'short', 
        day: 'numeric', 
        year: 'numeric', 
        hour: '2-digit', 
        minute: '2-digit' 
    });
    document.getElementById('lastUpdated').textContent = `Last updated: ${formattedTime}`;
}

function generateReportContent(type, period, clientId, serviceId, employeeId) {
    // Update summary cards with sample data
    document.getElementById('totalPatrols').textContent = '156';
    document.getElementById('completedPatrols').textContent = '142';
    document.getElementById('violations').textContent = '14';
    document.getElementById('coverageRate').textContent = '91.0%';
    
    // Generate report content based on type
    let content = '';
    
    if (type === 'summary') {
        content = `
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                        <h6 class="text-base font-semibold text-gray-900">Patrol Performance</h6>
                    </div>
                    <div class="p-6">
                        <div class="h-64">
                            <canvas id="performanceChart" height="200"></canvas>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                        <h6 class="text-base font-semibold text-gray-900">Client Coverage</h6>
                    </div>
                    <div class="p-6">
                        <div class="h-64">
                            <canvas id="coverageChart" height="200"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                    <h6 class="text-base font-semibold text-gray-900">Key Metrics</h6>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Metric</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Target</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Completion Rate</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">91.0%</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">95%</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Below Target</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Violation Rate</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">8.9%</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">5%</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Above Target</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Average Duration</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">7.2 hrs</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">8.0 hrs</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Within Target</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    } else if (type === 'performance') {
        content = `
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                    <h6 class="text-base font-semibold text-gray-900">Guard Performance Report</h6>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guard</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Patrols</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completed</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Violations</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Duration</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Performance Score</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">John Doe</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">42</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">7.1 hrs</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">93.3%</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Jane Smith</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">48</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">47</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">7.3 hrs</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">97.9%</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Mike Johnson</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">42</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">38</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">4</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">6.9 hrs</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">90.5%</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    } else if (type === 'violations') {
        content = `
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                    <h6 class="text-base font-semibold text-gray-900">Patrol Violations Report</h6>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guard</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Violation Type</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Dec 28, 2024</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">John Doe</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">ABC Company</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Missed Checkpoint</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Main Entrance</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Resolved</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Dec 27, 2024</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Jane Smith</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">XYZ Corp</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Late Checkpoint</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">North Gate</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Resolved</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Dec 26, 2024</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Mike Johnson</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">ABC Company</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Wrong Location</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Parking Lot</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Unresolved</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </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() {
    alert('Generate Report button clicked!');
    document.getElementById('reportOptionsModal').classList.remove('hidden');
}

function closeModal() {
    document.getElementById('reportOptionsModal').classList.add('hidden');
}

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;
    
    closeModal();
    
    // 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 clientId = document.getElementById('client_filter').value;
    const serviceId = document.getElementById('service_filter').value;
    const employeeId = document.getElementById('employee_filter').value;
    
    const params = new URLSearchParams({
        type: reportType,
        period: period,
        client_id: clientId,
        service_id: serviceId,
        employee_id: employeeId
    });
    
    window.location.href = `/reports/patrol/export?${params.toString()}`;
}

// Show/hide email options
document.getElementById('email_report').addEventListener('change', function() {
    const emailOptions = document.getElementById('emailOptions');
    if (this.checked) {
        emailOptions.classList.remove('hidden');
    } else {
        emailOptions.classList.add('hidden');
    }
});
</script>