@extends('layouts.app')
@section('title', 'Payroll - {{ $employee->first_name }} {{ $employee->last_name }} - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>💰 Employee Payroll</h1>
        <p>{{ $employee->first_name }} {{ $employee->last_name }} - {{ $employee->position }}</p>
        <p class="subtitle">Payroll summary and earnings history</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-4" style="margin-bottom: 30px;">
        <a href="/employees/{{ $employee->id }}" class="touch-btn touch-btn-primary">← Back to Employee</a>
        <a href="/employees/{{ $employee->id }}/timesheet" class="touch-btn touch-btn-success">⏰ Timesheet</a>
        <a href="/employees/{{ $employee->id }}/edit" class="touch-btn touch-btn-warning">✏️ Edit Employee</a>
        <a href="/employees" class="touch-btn touch-btn-primary">👥 All Employees</a>
    </div>

    <!-- Current Month Summary -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">${{ number_format($monthlyStats['total_pay'], 2) }}</div>
            <div class="stat-label">{{ $currentMonth->format('F Y') }} Earnings</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ number_format($monthlyStats['total_hours'], 1) }}h</div>
            <div class="stat-label">Total Hours This Month</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ number_format($monthlyStats['overtime_hours'], 1) }}h</div>
            <div class="stat-label">Overtime Hours</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">{{ $monthlyStats['days_worked'] }}</div>
            <div class="stat-label">Days Worked</div>
        </div>
    </div>

    <!-- Employee Pay Information -->
    <div class="mobile-card">
        <h3>💼 Pay Information</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
            <div>
                <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Pay Type</div>
                <div style="font-size: 1.1em;">{{ ucwords(str_replace('_', ' ', $employee->pay_type)) }}</div>
            </div>
            <div>
                <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Base Rate</div>
                <div style="font-size: 1.1em; font-weight: bold; color: var(--leaf-green);">
                    ${{ number_format($employee->pay_type === 'salary' ? $employee->annual_salary : $employee->hourly_rate, 2) }}
                    {{ $employee->pay_type === 'salary' ? '/year' : '/hour' }}
                </div>
            </div>
            @if($employee->overtime_rate)
            <div>
                <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Overtime Rate</div>
                <div style="font-size: 1.1em; font-weight: bold; color: #FF8F00;">${{ number_format($employee->overtime_rate, 2) }}/hour</div>
            </div>
            @endif
            <div>
                <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Pay Frequency</div>
                <div style="font-size: 1.1em;">{{ ucwords(str_replace('_', ' ', $employee->pay_frequency)) }}</div>
            </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;">
            <!-- Monthly Breakdown Chart -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">💰 Monthly Pay Breakdown</h4>
                <canvas id="payBreakdownChart" style="max-height: 250px;"></canvas>
            </div>
            
            <!-- Pay History Trend -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">📈 Pay History (6 Months)</h4>
                <canvas id="payHistoryChart" style="max-height: 250px;"></canvas>
            </div>
        </div>
        
        <!-- Year-to-Date Summary -->
        <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
            <h4 style="margin-bottom: 15px; color: var(--soil-brown);">📅 Year-to-Date Summary</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($ytdStats['total_pay'], 2) }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Total Earnings YTD</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;">{{ number_format($ytdStats['total_hours'], 1) }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Total Hours YTD</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($ytdStats['total_hours'] > 0 ? $ytdStats['total_pay'] / $ytdStats['total_hours'] : 0, 2) }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Avg Hourly Rate</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;">{{ $ytdStats['months_worked'] }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Months Worked</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pay Period History -->
    <div class="mobile-card">
        <h3>📋 Pay Period History</h3>
        
        @if($payPeriods->count() > 0)
        <!-- Pay Periods 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;">Pay Period</th>
                        <th style="padding: 12px; text-align: left;">Days Worked</th>
                        <th style="padding: 12px; text-align: left;">Total Hours</th>
                        <th style="padding: 12px; text-align: left;">Gross Pay</th>
                        <th style="padding: 12px; text-align: left;">Avg Daily Hours</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($payPeriods as $period)
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 12px;">
                            <div style="font-weight: 600;">{{ $period['period'] }}</div>
                            <div style="font-size: 0.85em; color: #6c757d;">
                                {{ $period['start_date']->format('M j') }} - {{ $period['end_date']->format('M j, Y') }}
                            </div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; font-size: 1.1em;">{{ $period['days_worked'] }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; font-size: 1.1em;">{{ number_format($period['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($period['total_pay'], 2) }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600;">{{ $period['days_worked'] > 0 ? number_format($period['total_hours'] / $period['days_worked'], 1) : '0.0' }}h</div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div style="text-align: center; color: #6c757d; padding: 40px;">
            <h4>No Pay History Available</h4>
            <p>No timesheet entries found for this employee yet.</p>
            <a href="/employees/{{ $employee->id }}/timesheet" class="touch-btn touch-btn-success">Start Time Tracking</a>
        </div>
        @endif
    </div>

    <!-- Current Month Timesheet Details -->
    @if($monthlyTimesheets->count() > 0)
    <div class="mobile-card">
        <h3>📅 {{ $currentMonth->format('F Y') }} Timesheet Details</h3>
        
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden;">
                <thead style="background: var(--leaf-green); color: white;">
                    <tr>
                        <th style="padding: 12px; text-align: left;">Date</th>
                        <th style="padding: 12px; text-align: left;">Clock In</th>
                        <th style="padding: 12px; text-align: left;">Clock Out</th>
                        <th style="padding: 12px; text-align: left;">Regular Hours</th>
                        <th style="padding: 12px; text-align: left;">Overtime</th>
                        <th style="padding: 12px; text-align: left;">Total Pay</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($monthlyTimesheets as $timesheet)
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 12px;">
                            <div style="font-weight: 600;">{{ $timesheet->date->format('M j, Y') }}</div>
                            <div style="font-size: 0.85em; color: #6c757d;">{{ $timesheet->date->format('l') }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--leaf-green);">
                                {{ $timesheet->clock_in ? $timesheet->clock_in->format('g:i A') : '-' }}
                            </div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: {{ $timesheet->clock_out ? 'var(--berry-red)' : '#6c757d' }};">
                                {{ $timesheet->clock_out ? $timesheet->clock_out->format('g:i A') : 'Still working' }}
                            </div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600;">{{ number_format($timesheet->regular_hours ?? 0, 1) }}h</div>
                        </td>
                        <td style="padding: 12px;">
                            @if(($timesheet->overtime_hours ?? 0) > 0)
                                <div style="font-weight: 600; color: #FF8F00;">{{ number_format($timesheet->overtime_hours, 1) }}h</div>
                            @else
                                <div style="color: #6c757d;">-</div>
                            @endif
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--leaf-green); font-size: 1.1em;">${{ number_format($timesheet->total_pay ?? 0, 2) }}</div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Payroll Chart Colors
const payrollColors = {
    regular: '#388E3C',
    overtime: '#FF8F00',
    total: '#6A1B9A'
};

// Pay Breakdown Chart (Doughnut)
const breakdownCtx = document.getElementById('payBreakdownChart').getContext('2d');
new Chart(breakdownCtx, {
    type: 'doughnut',
    data: {
        labels: ['Regular Pay', 'Overtime Pay'],
        datasets: [{
            data: [
                {{ number_format($monthlyStats['regular_pay'], 2) }},
                {{ number_format($monthlyStats['overtime_pay'], 2) }}
            ],
            backgroundColor: [
                payrollColors.regular,
                payrollColors.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.toFixed(2)} (${percentage}%)`;
                    }
                }
            }
        }
    }
});

// Pay History Chart (Line)
const historyCtx = document.getElementById('payHistoryChart').getContext('2d');
new Chart(historyCtx, {
    type: 'line',
    data: {
        labels: [
            @foreach($payPeriods->reverse() as $period)
                '{{ $period["period"] }}',
            @endforeach
        ],
        datasets: [{
            label: 'Total Pay',
            data: [
                @foreach($payPeriods->reverse() as $period)
                    {{ number_format($period['total_pay'], 2) }},
                @endforeach
            ],
            borderColor: payrollColors.total,
            backgroundColor: payrollColors.total + '20',
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { 
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '$' + value.toFixed(0);
                    }
                }
            }
        },
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return `Total Pay: $${context.parsed.y.toFixed(2)}`;
                    }
                }
            }
        }
    }
});
</script>
@endpush