@extends('layouts.app')

@section('title', 'Attendance 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">Attendance 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">Department</label>
                            <select class="form-select" name="department_id" onchange="applyFilters()">
                                <option value="">All Departments</option>
                                @foreach($departments as $department)
                                    <option value="{{ $department->id }}" {{ $filters['department_id'] == $department->id ? 'selected' : '' }}>
                                        {{ $department->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="present" {{ $filters['status'] == 'present' ? 'selected' : '' }}>Present</option>
                                <option value="absent" {{ $filters['status'] == 'absent' ? 'selected' : '' }}>Absent</option>
                                <option value="late" {{ $filters['status'] == 'late' ? 'selected' : '' }}>Late</option>
                                <option value="half_day" {{ $filters['status'] == 'half_day' ? 'selected' : '' }}>Half Day</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_days'] }}</h5>
                                    <p class="card-text">Total Days</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']['present_days'] }}</h5>
                                    <p class="card-text">Present</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['absent_days'] }}</h5>
                                    <p class="card-text">Absent</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']['late_days'] }}</h5>
                                    <p class="card-text">Late</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']['attendance_rate'] }}%</h5>
                                    <p class="card-text">Attendance Rate</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-secondary text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['punctuality_rate'] }}%</h5>
                                    <p class="card-text">Punctuality Rate</p>
                                </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>Department</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Check In</th>
                                    <th>Check Out</th>
                                    <th>Working Hours</th>
                                    <th>Overtime</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($report['details'] as $attendance)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ $attendance->employee->avatar }}" class="rounded-circle me-2" width="32" height="32">
                                                <div>
                                                    <div class="fw-semibold">{{ $attendance->employee->full_name }}</div>
                                                    <small class="text-muted">{{ $attendance->employee->profile->employee_id ?? '' }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $attendance->employee->departments->pluck('name')->join(', ') ?: 'N/A' }}</td>
                                        <td>{{ $attendance->date }}</td>
                                        <td>
                                            <span class="badge bg-{{ $attendance->status === 'present' ? 'success' : ($attendance->status === 'absent' ? 'danger' : 'warning') }}">
                                                {{ ucfirst($attendance->status) }}
                                            </span>
                                        </td>
                                        <td>{{ $attendance->check_in?->format('h:i A') ?? 'N/A' }}</td>
                                        <td>{{ $attendance->check_out?->format('h:i A') ?? 'N/A' }}</td>
                                        <td>{{ $attendance->working_hours ?? 'N/A' }}</td>
                                        <td>{{ $attendance->overtime_hours ?? 'N/A' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-muted">No attendance 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>Department</th>
                                                    <th>Attendance Rate</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($report['analytics']['top_performers'] ?? [] as $performer)
                                                    <tr>
                                                        <td>{{ $performer['employee']['full_name'] }}</td>
                                                        <td>{{ $performer['employee']['departments']->pluck('name')->join(', ') ?: 'N/A' }}</td>
                                                        <td>
                                                            <div class="progress" style="height: 20px;">
                                                                <div class="progress-bar bg-success" style="width: {{ $performer['attendance_rate'] }}%"></div>
                                                            </div>
                                                            <small>{{ $performer['attendance_rate'] }}%</small>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3" 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">Department-wise Attendance</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Department</th>
                                                    <th>Total Days</th>
                                                    <th>Present</th>
                                                    <th>Attendance Rate</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($report['analytics']['department_wise'] ?? [] as $department => $stats)
                                                    <tr>
                                                        <td>{{ $department }}</td>
                                                        <td>{{ $stats['total'] }}</td>
                                                        <td>{{ $stats['present'] }}</td>
                                                        <td>
                                                            <div class="progress" style="height: 20px;">
                                                                <div class="progress-bar bg-info" style="width: {{ $stats['attendance_rate'] }}%"></div>
                                                            </div>
                                                            <small>{{ $stats['attendance_rate'] }}%</small>
                                                        </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>
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.attendance.export') }}?${params.toString()}`;
}
</script>
@endsection
                    <h5 class="mb-0">Attendance 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="detailed">Detailed Report</option>
                                <option value="monthly">Monthly Report</option>
                                <option value="custom">Custom 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>
                                <option value="custom">Custom Range</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Department</label>
                            <select class="form-select" id="department_filter">
                                <option value="">All Departments</option>
                                @foreach($departments ?? [] as $department)
                                    <option value="{{ $department->id }}">{{ $department->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>

                    <!-- Custom Date Range (shown when custom is selected) -->
                    <div class="row mb-3" id="customDateRange" style="display: none;">
                        <div class="col-md-6">
                            <label class="form-label">Start Date</label>
                            <input type="date" class="form-control" id="start_date" value="{{ now()->subDays(30)->format('Y-m-d') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">End Date</label>
                            <input type="date" class="form-control" id="end_date" value="{{ now()->format('Y-m-d') }}">
                        </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="totalEmployees">-</h5>
                                    <p class="card-text">Total Employees</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="presentDays">-</h5>
                                    <p class="card-text">Present Days</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="lateDays">-</h5>
                                    <p class="card-text">Late Days</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="avgHours">-</h5>
                                    <p class="card-text">Avg Hours/Day</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-chart-bar 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 attendance 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 departmentId = document.getElementById('department_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, departmentId);
    }, 1500);
}

function generateReportContent(type, period, departmentId) {
    // Update summary cards with sample data
    document.getElementById('totalEmployees').textContent = '45';
    document.getElementById('presentDays').textContent = '1,234';
    document.getElementById('lateDays').textContent = '89';
    document.getElementById('avgHours').textContent = '8.5';
    
    // Generate report content based on type
    let content = '';
    
    if (type === 'summary') {
        content = `
            <div class="row mb-4">
                <div class="col-md-6">
                    <h6>Attendance Summary</h6>
                    <canvas id="attendanceChart" height="200"></canvas>
                </div>
                <div class="col-md-6">
                    <h6>Department Breakdown</h6>
                    <canvas id="departmentChart" 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>Attendance Rate</td>
                                    <td>92.5%</td>
                                    <td>95%</td>
                                    <td><span class="badge bg-warning">Below Target</span></td>
                                </tr>
                                <tr>
                                    <td>Punctuality Rate</td>
                                    <td>87.3%</td>
                                    <td>90%</td>
                                    <td><span class="badge bg-warning">Below Target</span></td>
                                </tr>
                                <tr>
                                    <td>Average Hours</td>
                                    <td>8.5</td>
                                    <td>8.0</td>
                                    <td><span class="badge bg-success">Above Target</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    } else if (type === 'detailed') {
        content = `
            <div class="row">
                <div class="col-12">
                    <h6>Detailed Attendance Records</h6>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Department</th>
                                    <th>Present Days</th>
                                    <th>Absent Days</th>
                                    <td>Late Days</th>
                                    <th>Avg Hours</th>
                                    <th>Attendance Rate</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>John Doe</td>
                                    <td>Security</td>
                                    <td>22</td>
                                    <td>2</td>
                                    <td>3</td>
                                    <td>8.2</td>
                                    <td>91.7%</td>
                                </tr>
                                <tr>
                                    <td>Jane Smith</td>
                                    <td>Patrol</td>
                                    <td>24</td>
                                    <td>0</td>
                                    <td>1</td>
                                    <td>8.5</td>
                                    <td>100%</td>
                                </tr>
                                <tr>
                                    <td>Mike Johnson</td>
                                    <td>Security</td>
                                    <td>20</td>
                                    <td>4</td>
                                    <td>5</td>
                                    <td>7.8</td>
                                    <td>83.3%</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 departmentId = document.getElementById('department_filter').value;
    
    const params = new URLSearchParams({
        type: reportType,
        period: period,
        department_id: departmentId
    });
    
    window.location.href = `/reports/attendance/export?${params.toString()}`;
}

// Show/hide custom date range
document.getElementById('period').addEventListener('change', function() {
    const customDateRange = document.getElementById('customDateRange');
    if (this.value === 'custom') {
        customDateRange.style.display = 'block';
    } else {
        customDateRange.style.display = 'none';
    }
});

// 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