@extends('layouts.app')
@section('title', 'Payroll Summary - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>💰 Payroll Summary</h1>
        <p>Comprehensive payroll reporting by department and pay period</p>
        <p class="subtitle">{{ $startDate->format('M j, Y') }} - {{ $endDate->format('M j, Y') }}</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-4" style="margin-bottom: 30px;">
        <a href="/timecards" class="touch-btn touch-btn-primary">📊 Weekly View</a>
        <a href="/timecards/daily" class="touch-btn touch-btn-primary">📅 Daily View</a>
        <a href="/timecards/quick-clock" class="touch-btn touch-btn-success">⏰ Quick Clock</a>
        <a href="/employees" class="touch-btn touch-btn-primary">👥 Manage Employees</a>
    </div>

    <!-- Filters -->
    <form method="GET" action="/timecards/payroll-summary" class="filters">
        <div class="filter-group">
            <label for="start_date">Pay Period Start</label>
            <input type="date" id="start_date" name="start_date" class="form-control" 
                   value="{{ request('start_date', $startDate->format('Y-m-d')) }}">
        </div>
        <div class="filter-group">
            <label for="end_date">Pay Period End</label>
            <input type="date" id="end_date" name="end_date" class="form-control" 
                   value="{{ request('end_date', $endDate->format('Y-m-d')) }}">
        </div>
        <div class="filter-group">
            <label for="department">Department</label>
            <select id="department" name="department" class="form-control">
                <option value="">All Departments</option>
                @foreach($departments as $dept)
                    <option value="{{ $dept }}" {{ request('department') == $dept ? 'selected' : '' }}>
                        {{ ucwords(str_replace('_', ' ', $dept)) }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="filter-group" style="align-self: end;">
            <button type="submit" class="touch-btn touch-btn-primary">🔍 Generate Report</button>
        </div>
    </form>

    <!-- Overall Summary Stats -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ $overallSummary['total_employees'] }}</div>
            <div class="stat-label">Total Employees</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ number_format($overallSummary['total_hours'], 1) }}h</div>
            <div class="stat-label">Total Hours</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ number_format($overallSummary['total_overtime_hours'], 1) }}h</div>
            <div class="stat-label">Total Overtime</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">${{ number_format($overallSummary['total_payroll'], 2) }}</div>
            <div class="stat-label">Total Payroll</div>
        </div>
    </div>

    <!-- Payroll Analytics -->
    <div class="mobile-card">
        <h3>📊 Payroll Analytics</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
            <!-- Hours vs Payroll Chart -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">💼 Department Payroll Distribution</h4>
                <canvas id="payrollDistributionChart" style="max-height: 250px;"></canvas>
            </div>
            
            <!-- Cost Analysis -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">📈 Cost Analysis</h4>
                <div style="display: grid; gap: 15px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background: white; border-radius: 6px;">
                        <span style="color: var(--soil-brown);">Average Cost per Hour:</span>
                        <span style="font-weight: bold; color: var(--blackberry-purple);">
                            ${{ $overallSummary['total_hours'] > 0 ? number_format($overallSummary['total_payroll'] / $overallSummary['total_hours'], 2) : '0.00' }}
                        </span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background: white; border-radius: 6px;">
                        <span style="color: var(--soil-brown);">Average Pay per Employee:</span>
                        <span style="font-weight: bold; color: var(--leaf-green);">
                            ${{ $overallSummary['total_employees'] > 0 ? number_format($overallSummary['total_payroll'] / $overallSummary['total_employees'], 2) : '0.00' }}
                        </span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background: white; border-radius: 6px;">
                        <span style="color: var(--soil-brown);">Overtime Premium:</span>
                        <span style="font-weight: bold; color: #FF8F00;">
                            {{ $overallSummary['total_hours'] > 0 ? number_format(($overallSummary['total_overtime_hours'] / $overallSummary['total_hours']) * 100, 1) : '0.0' }}%
                        </span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background: white; border-radius: 6px;">
                        <span style="color: var(--soil-brown);">Total Days Worked:</span>
                        <span style="font-weight: bold; color: var(--blackberry-purple);">
                            {{ number_format($overallSummary['total_days_worked']) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Breakdown -->
    @if($departmentGroups->count() > 0)
    @foreach($departmentGroups as $department => $employees)
    <div class="mobile-card">
        <h3>🏢 {{ ucwords(str_replace('_', ' ', $department)) }} Department</h3>
        
        <!-- Department Summary -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin: 20px 0; padding: 20px; background: rgba(106, 27, 154, 0.05); border-radius: 8px;">
            <div style="text-align: center;">
                <div style="font-size: 1.8em; font-weight: bold; color: var(--blackberry-purple);">{{ $employees->count() }}</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">Employees</div>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 1.8em; font-weight: bold; color: var(--leaf-green);">{{ number_format($employees->sum('period_total_hours'), 1) }}h</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">Total Hours</div>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 1.8em; font-weight: bold; color: #FF8F00;">{{ number_format($employees->sum('period_overtime_hours'), 1) }}h</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">Overtime</div>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 1.8em; font-weight: bold; color: var(--berry-red);">${{ number_format($employees->sum('period_total_pay'), 2) }}</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">Total Pay</div>
            </div>
        </div>
        
        <!-- Employee Details Table -->
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden;">
                <thead style="background: var(--blackberry-purple); color: white;">
                    <tr>
                        <th style="padding: 12px; text-align: left;">Employee</th>
                        <th style="padding: 12px; text-align: left;">Days Worked</th>
                        <th style="padding: 12px; text-align: left;">Regular Hours</th>
                        <th style="padding: 12px; text-align: left;">Overtime Hours</th>
                        <th style="padding: 12px; text-align: left;">Total Hours</th>
                        <th style="padding: 12px; text-align: left;">Total Pay</th>
                        <th style="padding: 12px; text-align: left;">Avg Daily Hours</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($employees as $employee)
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 12px;">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 35px; height: 35px; border-radius: 50%; background: var(--blackberry-purple); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9em;">
                                    {{ substr($employee->first_name, 0, 1) }}{{ substr($employee->last_name, 0, 1) }}
                                </div>
                                <div>
                                    <div style="font-weight: 600; color: var(--blackberry-purple);">{{ $employee->first_name }} {{ $employee->last_name }}</div>
                                    <div style="font-size: 0.85em; color: #6c757d;">{{ $employee->position }}</div>
                                </div>
                            </div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600;">{{ $employee->period_days_worked }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--leaf-green);">{{ number_format($employee->period_regular_hours, 1) }}h</div>
                        </td>
                        <td style="padding: 12px;">
                            @if($employee->period_overtime_hours > 0)
                                <div style="font-weight: 600; color: #FF8F00;">{{ number_format($employee->period_overtime_hours, 1) }}h</div>
                            @else
                                <div style="color: #6c757d;">-</div>
                            @endif
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; font-size: 1.1em;">{{ number_format($employee->period_total_hours, 1) }}h</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--blackberry-purple); font-size: 1.1em;">${{ number_format($employee->period_total_pay, 2) }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--soil-brown);">
                                {{ $employee->period_days_worked > 0 ? number_format($employee->period_total_hours / $employee->period_days_worked, 1) : '0.0' }}h
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    
                    <!-- Department Totals Row -->
                    <tr style="background: rgba(106, 27, 154, 0.05); font-weight: bold;">
                        <td style="padding: 12px; color: var(--blackberry-purple);">
                            Department Total ({{ $employees->count() }} employees)
                        </td>
                        <td style="padding: 12px; color: var(--blackberry-purple);">
                            {{ $employees->sum('period_days_worked') }}
                        </td>
                        <td style="padding: 12px; color: var(--leaf-green);">
                            {{ number_format($employees->sum('period_regular_hours'), 1) }}h
                        </td>
                        <td style="padding: 12px; color: #FF8F00;">
                            {{ number_format($employees->sum('period_overtime_hours'), 1) }}h
                        </td>
                        <td style="padding: 12px; color: var(--blackberry-purple); font-size: 1.1em;">
                            {{ number_format($employees->sum('period_total_hours'), 1) }}h
                        </td>
                        <td style="padding: 12px; color: var(--blackberry-purple); font-size: 1.1em;">
                            ${{ number_format($employees->sum('period_total_pay'), 2) }}
                        </td>
                        <td style="padding: 12px; color: var(--soil-brown);">
                            {{ $employees->sum('period_days_worked') > 0 ? number_format($employees->sum('period_total_hours') / $employees->sum('period_days_worked'), 1) : '0.0' }}h
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    @endforeach
    @else
    <div style="text-align: center; color: #6c757d; padding: 40px;">
        <h4>No Payroll Data</h4>
        <p>No payroll data found for the selected criteria.</p>
        <a href="/employees/create" class="touch-btn touch-btn-success">Add First Employee</a>
    </div>
    @endif

    <!-- Export Actions -->
    <div class="mobile-card" style="text-align: center; margin-top: 30px;">
        <h3>📤 Export Options</h3>
        <div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin: 20px 0;">
            <button onclick="window.print()" class="touch-btn touch-btn-primary">
                🖨️ Print Report
            </button>
            <button onclick="exportToCSV()" class="touch-btn touch-btn-success">
                📊 Export CSV
            </button>
            <a href="/timecards/payroll-summary?{{ http_build_query(request()->all()) }}&format=pdf" class="touch-btn touch-btn-warning">
                📄 Download PDF
            </a>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Payroll Chart Colors
const payrollColors = [
    '#6A1B9A', '#1976D2', '#388E3C', '#FF8F00', '#C62828', 
    '#7B1FA2', '#303F9F', '#689F38', '#F57C00', '#D32F2F'
];

// Payroll Distribution Chart
const payrollData = {};
@foreach($departmentGroups as $department => $employees)
    payrollData['{{ ucwords(str_replace('_', ' ', $department)) }}'] = {{ $employees->sum('period_total_pay') }};
@endforeach

const payrollCtx = document.getElementById('payrollDistributionChart').getContext('2d');
new Chart(payrollCtx, {
    type: 'doughnut',
    data: {
        labels: Object.keys(payrollData),
        datasets: [{
            data: Object.values(payrollData),
            backgroundColor: payrollColors,
            borderColor: '#fff',
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: { size: 12, weight: '600' }
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const value = context.parsed;
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                        return `${context.label}: $${value.toLocaleString()} (${percentage}%)`;
                    }
                }
            }
        }
    }
});

// Export to CSV function
function exportToCSV() {
    const data = [];
    
    // Headers
    data.push(['Department', 'Employee', 'Position', 'Days Worked', 'Regular Hours', 'Overtime Hours', 'Total Hours', 'Total Pay']);
    
    // Data rows
    @foreach($departmentGroups as $department => $employees)
        @foreach($employees as $employee)
            data.push([
                '{{ ucwords(str_replace('_', ' ', $department)) }}',
                '{{ $employee->first_name }} {{ $employee->last_name }}',
                '{{ $employee->position }}',
                '{{ $employee->period_days_worked }}',
                '{{ number_format($employee->period_regular_hours, 1) }}',
                '{{ number_format($employee->period_overtime_hours, 1) }}',
                '{{ number_format($employee->period_total_hours, 1) }}',
                '{{ number_format($employee->period_total_pay, 2) }}'
            ]);
        @endforeach
    @endforeach
    
    // Convert to CSV
    const csvContent = data.map(row => row.map(field => `"${field}"`).join(',')).join('\n');
    
    // Download
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `payroll-summary-{{ $startDate->format('Y-m-d') }}-to-{{ $endDate->format('Y-m-d') }}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
}

// Print styles
const printStyles = `
    @media print {
        .touch-btn, .nav-item, .mobile-header, .mobile-sidebar, .fab, .filters {
            display: none !important;
        }
        .mobile-card {
            box-shadow: none !important;
            border: 1px solid #ddd !important;
            margin-bottom: 20px !important;
        }
        .page-header h1 {
            color: #333 !important;
        }
        table {
            font-size: 12px !important;
        }
    }
`;

// Add print styles to head
const style = document.createElement('style');
style.textContent = printStyles;
document.head.appendChild(style);
</script>
@endpush