@extends('layouts.app')
@section('title', 'Weekly Timecards - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>⏰ Weekly Timecards</h1>
        <p>Employee timecard management and payroll tracking</p>
        <p class="subtitle">Week of {{ $weekStartDate->format('M j') }} - {{ $weekEndDate->format('M j, Y') }}</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-4" style="margin-bottom: 30px;">
        <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="/timecards/payroll-summary" class="touch-btn touch-btn-warning">💰 Payroll Summary</a>
        <a href="/employees" class="touch-btn touch-btn-primary">👥 Manage Employees</a>
    </div>

    <!-- Weekly Summary Stats -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ $summaryStats['total_employees'] }}</div>
            <div class="stat-label">Total Employees</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ number_format($summaryStats['total_hours'], 1) }}h</div>
            <div class="stat-label">Total Hours This Week</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ number_format($summaryStats['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($summaryStats['total_payroll'], 2) }}</div>
            <div class="stat-label">Weekly Payroll</div>
        </div>
    </div>

    <!-- Filters -->
    <form method="GET" action="/timecards" class="filters">
        <div class="filter-group">
            <label for="week_start">Week Starting</label>
            <input type="date" id="week_start" name="week_start" class="form-control" 
                   value="{{ request('week_start', $weekStartDate->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">🔍 Filter</button>
        </div>
    </form>

    <!-- Weekly Timecard Analytics -->
    <div class="mobile-card">
        <h3>📊 Weekly Timecard Analytics</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
            <!-- Hours Distribution -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">⏱️ Hours Distribution</h4>
                <canvas id="hoursDistributionChart" style="max-height: 250px;"></canvas>
            </div>
            
            <!-- Department Breakdown -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🏢 Department Hours</h4>
                <canvas id="departmentHoursChart" style="max-height: 250px;"></canvas>
            </div>
        </div>
        
        <!-- Overtime Analysis -->
        <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
            <h4 style="margin-bottom: 15px; color: var(--soil-brown);">📈 Overtime Analysis</h4>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px;">
                <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid var(--leaf-green);">
                    <div style="font-size: 2em; color: var(--leaf-green); font-weight: bold;">{{ number_format($summaryStats['total_regular_hours'], 1) }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Regular Hours</div>
                </div>
                <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid #FF8F00;">
                    <div style="font-size: 2em; color: #FF8F00; font-weight: bold;">{{ number_format($summaryStats['total_overtime_hours'], 1) }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Overtime Hours</div>
                </div>
                <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid var(--blackberry-purple);">
                    <div style="font-size: 2em; color: var(--blackberry-purple); font-weight: bold;">{{ $summaryStats['total_employees'] > 0 ? number_format($summaryStats['avg_hours_per_employee'], 1) : '0.0' }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Avg Hours/Employee</div>
                </div>
                <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid var(--berry-red);">
                    <div style="font-size: 2em; color: var(--berry-red); font-weight: bold;">{{ $employees->where('weekly_overtime_hours', '>', 0)->count() }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Employees w/ OT</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Employee Timecard Table -->
    @if($employees->count() > 0)
    <div class="mobile-card">
        <h3>📋 Employee Timecards</h3>
        
        <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;">Department</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;">Actions</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: 40px; height: 40px; border-radius: 50%; background: var(--blackberry-purple); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold;">
                                    {{ 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;">
                            {{ ucwords(str_replace('_', ' ', $employee->department)) }}
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--leaf-green);">{{ number_format($employee->weekly_regular_hours, 1) }}h</div>
                        </td>
                        <td style="padding: 12px;">
                            @if($employee->weekly_overtime_hours > 0)
                                <div style="font-weight: 600; color: #FF8F00;">{{ number_format($employee->weekly_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->weekly_total_hours, 1) }}h</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--leaf-green); font-size: 1.1em;">${{ number_format($employee->weekly_total_pay, 2) }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <a href="/employees/{{ $employee->id }}/timesheet" class="touch-btn touch-btn-primary" style="padding: 4px 8px; font-size: 10px; margin: 1px;">Timesheet</a>
                            <a href="/employees/{{ $employee->id }}/payroll" class="touch-btn touch-btn-success" style="padding: 4px 8px; font-size: 10px; margin: 1px;">Payroll</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @else
    <div style="text-align: center; color: #6c757d; padding: 40px;">
        <h4>No Employee Timecards</h4>
        <p>No employees found for the selected criteria.</p>
        <a href="/employees/create" class="touch-btn touch-btn-success">Add First Employee</a>
    </div>
    @endif

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Timecard Chart Colors
const timecardColors = {
    regular: '#388E3C',
    overtime: '#FF8F00',
    department1: '#6A1B9A',
    department2: '#1976D2',
    department3: '#388E3C',
    department4: '#FF8F00',
    department5: '#C62828'
};

// Hours Distribution Chart (Regular vs Overtime)
const distributionCtx = document.getElementById('hoursDistributionChart').getContext('2d');
new Chart(distributionCtx, {
    type: 'doughnut',
    data: {
        labels: ['Regular Hours', 'Overtime Hours'],
        datasets: [{
            data: [
                {{ number_format($summaryStats['total_regular_hours'], 1) }},
                {{ number_format($summaryStats['total_overtime_hours'], 1) }}
            ],
            backgroundColor: [
                timecardColors.regular,
                timecardColors.overtime
            ],
            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}h (${percentage}%)`;
                    }
                }
            }
        }
    }
});

// Department Hours Chart
const deptData = {};
@foreach($employees as $employee)
    const dept{{ $loop->index }} = '{{ ucwords(str_replace('_', ' ', $employee->department)) }}';
    if (!deptData[dept{{ $loop->index }}]) {
        deptData[dept{{ $loop->index }}] = 0;
    }
    deptData[dept{{ $loop->index }}] += {{ $employee->weekly_total_hours }};
@endforeach

const departmentCtx = document.getElementById('departmentHoursChart').getContext('2d');
new Chart(departmentCtx, {
    type: 'bar',
    data: {
        labels: Object.keys(deptData),
        datasets: [{
            label: 'Total Hours',
            data: Object.values(deptData),
            backgroundColor: [
                timecardColors.department1,
                timecardColors.department2,
                timecardColors.department3,
                timecardColors.department4,
                timecardColors.department5
            ],
            borderColor: '#fff',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { 
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Hours'
                }
            }
        },
        plugins: {
            legend: { display: false }
        }
    }
});
</script>
@endpush