@extends('layouts.app')

@section('title', 'Patrol Reports')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Patrol 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="performance">Performance Report</option>
                                <option value="violations">Violations Report</option>
                                <option value="coverage">Coverage 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">Client</label>
                            <select class="form-select" id="client_filter">
                                <option value="">All Clients</option>
                                @foreach($clients ?? [] as $client)
                                    <option value="{{ $client->id }}">{{ $client->name }}</option>
                                @endforeach
                            </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="totalPatrols">-</h5>
                                    <p class="card-text">Total Patrols</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="completedPatrols">-</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="violations">-</h5>
                                    <p class="card-text">Violations</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="coverageRate">-</h5>
                                    <p class="card-text">Coverage Rate</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-shield-alt 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 patrol 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 clientId = document.getElementById('client_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, clientId);
    }, 1500);
}

function generateReportContent(type, period, clientId) {
    // 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="row mb-4">
                <div class="col-md-6">
                    <h6>Patrol Performance</h6>
                    <canvas id="performanceChart" height="200"></canvas>
                </div>
                <div class="col-md-6">
                    <h6>Client Coverage</h6>
                    <canvas id="coverageChart" 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>91.0%</td>
                                    <td>95%</td>
                                    <td><span class="badge bg-warning">Below Target</span></td>
                                </tr>
                                <tr>
                                    <td>Violation Rate</td>
                                    <td>8.9%</td>
                                    <td>5%</td>
                                    <td><span class="badge bg-danger">Above Target</span></td>
                                </tr>
                                <tr>
                                    <td>Average Duration</td>
                                    <td>7.2 hrs</td>
                                    <td>8.0 hrs</td>
                                    <td><span class="badge bg-success">Within Target</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    } else if (type === 'performance') {
        content = `
            <div class="row">
                <div class="col-12">
                    <h6>Guard Performance Report</h6>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Guard</th>
                                    <th>Total Patrols</th>
                                    <th>Completed</th>
                                    <th>Violations</th>
                                    <th>Avg Duration</th>
                                    <th>Performance Score</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>John Doe</td>
                                    <td>45</td>
                                    <td>42</td>
                                    <td>3</td>
                                    <td>7.1 hrs</td>
                                    <td><span class="badge bg-success">93.3%</span></td>
                                </tr>
                                <tr>
                                    <td>Jane Smith</td>
                                    <td>48</td>
                                    <td>47</td>
                                    <td>1</td>
                                    <td>7.3 hrs</td>
                                    <td><span class="badge bg-success">97.9%</span></td>
                                </tr>
                                <tr>
                                    <td>Mike Johnson</td>
                                    <td>42</td>
                                    <td>38</td>
                                    <td>4</td>
                                    <td>6.9 hrs</td>
                                    <td><span class="badge bg-warning">90.5%</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    } else if (type === 'violations') {
        content = `
            <div class="row">
                <div class="col-12">
                    <h6>Patrol Violations Report</h6>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Guard</th>
                                    <th>Client</th>
                                    <th>Violation Type</th>
                                    <th>Location</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Dec 28, 2024</td>
                                    <td>John Doe</td>
                                    <td>ABC Company</td>
                                    <td>Missed Checkpoint</td>
                                    <td>Main Entrance</td>
                                    <td><span class="badge bg-success">Resolved</span></td>
                                </tr>
                                <tr>
                                    <td>Dec 27, 2024</td>
                                    <td>Jane Smith</td>
                                    <td>XYZ Corp</td>
                                    <td>Late Checkpoint</td>
                                    <td>North Gate</td>
                                    <td><span class="badge bg-success">Resolved</span></td>
                                </tr>
                                <tr>
                                    <td>Dec 26, 2024</td>
                                    <td>Mike Johnson</td>
                                    <td>ABC Company</td>
                                    <td>Wrong Location</td>
                                    <td>Parking Lot</td>
                                    <td><span class="badge bg-danger">Unresolved</span></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 clientId = document.getElementById('client_filter').value;
    
    const params = new URLSearchParams({
        type: reportType,
        period: period,
        client_id: clientId
    });
    
    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.style.display = 'block';
    } else {
        emailOptions.style.display = 'none';
    }
});
</script>
@endsection