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

    <!-- Page Header -->
    <div class="page-header">
        <h1>⏰ Timesheet Management</h1>
        <p>{{ $employee->first_name }} {{ $employee->last_name }} - {{ $employee->position }}</p>
        <p class="subtitle">Hours tracking and time management</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-4" style="margin-bottom: 30px;">
        <a href="/employees/{{ $employee->id }}/timesheet/clock-in" class="touch-btn touch-btn-success">⏰ Clock In</a>
        <a href="/employees/{{ $employee->id }}/timesheet/clock-out" class="touch-btn touch-btn-warning">⏰ Clock Out</a>
        <a href="/employees/{{ $employee->id }}" class="touch-btn touch-btn-primary">← Back to Employee</a>
        <a href="/employees" class="touch-btn touch-btn-primary">👥 All Employees</a>
    </div>

    <!-- Current Status -->
    @if($currentShift)
    <div class="mobile-card" style="background: rgba(56, 142, 60, 0.1); border-left: 4px solid var(--leaf-green);">
        <h3 style="color: var(--leaf-green);">🟢 Currently Working</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
            <div>
                <div style="font-weight: 600; color: var(--soil-brown);">Clock In Time</div>
                <div style="font-size: 1.2em; font-weight: bold;">{{ date('g:i A', strtotime($currentShift->clock_in)) }}</div>
            </div>
            <div>
                <div style="font-weight: 600; color: var(--soil-brown);">Hours Worked Today</div>
                <div style="font-size: 1.2em; font-weight: bold;" id="hoursWorked">
                    {{ number_format($currentShift->hours_worked ?? 0, 1) }}h
                </div>
            </div>
            <div>
                <div style="font-weight: 600; color: var(--soil-brown);">Estimated Pay Today</div>
                <div style="font-size: 1.2em; font-weight: bold; color: var(--leaf-green);" id="estimatedPay">
                    ${{ number_format(($currentShift->hours_worked ?? 0) * $employee->hourly_rate, 2) }}
                </div>
            </div>
        </div>
    </div>
    @else
    <div class="mobile-card" style="background: rgba(158, 158, 158, 0.1); border-left: 4px solid #9E9E9E;">
        <h3 style="color: #6c757d;">⚪ Not Currently Working</h3>
        <p>Employee is not currently clocked in. Use the Clock In button to start tracking time.</p>
    </div>
    @endif

    <!-- Weekly Summary -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ number_format($weeklyStats['totalHours'] ?? 0, 1) }}h</div>
            <div class="stat-label">Total Hours This Week</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ number_format($weeklyStats['regularHours'] ?? 0, 1) }}h</div>
            <div class="stat-label">Regular Hours</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ number_format($weeklyStats['overtimeHours'] ?? 0, 1) }}h</div>
            <div class="stat-label">Overtime Hours</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">${{ number_format($weeklyStats['totalPay'] ?? 0, 2) }}</div>
            <div class="stat-label">Estimated Weekly Pay</div>
        </div>
    </div>

    <!-- Time Tracking Analytics -->
    <div class="mobile-card">
        <h3>📊 Time Tracking Analytics</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
            <!-- Weekly Hours Chart -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">📈 Weekly Hours Trend</h4>
                <canvas id="weeklyHoursChart" style="max-height: 250px;"></canvas>
            </div>
            
            <!-- Daily Hours Breakdown -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">📅 Daily Hours This Week</h4>
                <canvas id="dailyHoursChart" 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;">{{ $overtimeStats['days_with_overtime'] ?? 0 }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Days with OT</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($overtimeStats['avg_overtime_per_day'] ?? 0, 1) }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Avg OT Hours/Day</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($overtimeStats['overtime_pay'] ?? 0, 2) }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">OT Pay This Week</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;">{{ number_format($attendanceStats['attendance_rate'] ?? 0, 1) }}%</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Attendance Rate</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Time Entry Form -->
    <div class="mobile-card">
        <h3>✏️ Manual Time Entry</h3>
        <form method="POST" action="/employees/{{ $employee->id }}/timesheet/manual-entry">
            @csrf
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div class="form-group">
                    <label for="date" class="form-label">Date *</label>
                    <input type="date" id="date" name="date" class="form-control" 
                           value="{{ old('date', date('Y-m-d')) }}" required>
                </div>
                
                <div class="form-group">
                    <label for="clock_in" class="form-label">Clock In Time *</label>
                    <input type="time" id="clock_in" name="clock_in" class="form-control" 
                           value="{{ old('clock_in') }}" required>
                </div>
                
                <div class="form-group">
                    <label for="clock_out" class="form-label">Clock Out Time *</label>
                    <input type="time" id="clock_out" name="clock_out" class="form-control" 
                           value="{{ old('clock_out') }}" required>
                </div>
                
                <div class="form-group">
                    <label for="break_duration" class="form-label">Break Duration (minutes)</label>
                    <input type="number" id="break_duration" name="break_duration" class="form-control" 
                           value="{{ old('break_duration', 30) }}" min="0" max="480">
                </div>
            </div>
            
            <div class="form-group">
                <label for="notes" class="form-label">Notes</label>
                <textarea id="notes" name="notes" class="form-control" rows="3" 
                          placeholder="Optional notes about the work day...">{{ old('notes') }}</textarea>
            </div>
            
            <button type="submit" class="touch-btn touch-btn-success">✏️ Add Manual Entry</button>
        </form>
    </div>

    <!-- Timesheet History -->
    <div class="mobile-card">
        <h3>📋 Timesheet History</h3>
        
        <!-- Filter Controls -->
        <form method="GET" class="filters" style="margin-bottom: 20px;">
            <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', $currentWeekStart) }}">
            </div>
            <div class="filter-group">
                <label for="month">Month</label>
                <select id="month" name="month" class="form-control">
                    <option value="">All Months</option>
                    @for($i = 1; $i <= 12; $i++)
                        <option value="{{ $i }}" {{ request('month') == $i ? 'selected' : '' }}>
                            {{ date('F', mktime(0, 0, 0, $i, 1)) }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="filter-group" style="align-self: end;">
                <button type="submit" class="touch-btn touch-btn-primary">🔍 Filter</button>
            </div>
        </form>

        @if($timesheets && $timesheets->count() > 0)
        <!-- Timesheet 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;">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;">Break</th>
                        <th style="padding: 12px; text-align: left;">Total Hours</th>
                        <th style="padding: 12px; text-align: left;">Overtime</th>
                        <th style="padding: 12px; text-align: left;">Pay</th>
                        <th style="padding: 12px; text-align: left;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($timesheets as $timesheet)
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 12px;">
                            <div style="font-weight: 600;">{{ date('M j, Y', strtotime($timesheet->date)) }}</div>
                            <div style="font-size: 0.85em; color: #6c757d;">{{ date('l', strtotime($timesheet->date)) }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--leaf-green);">
                                {{ $timesheet->clock_in ? date('g:i A', strtotime($timesheet->clock_in)) : '-' }}
                            </div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: {{ $timesheet->clock_out ? 'var(--berry-red)' : '#6c757d' }};">
                                {{ $timesheet->clock_out ? date('g:i A', strtotime($timesheet->clock_out)) : 'Still working' }}
                            </div>
                        </td>
                        <td style="padding: 12px;">
                            {{ $timesheet->break_duration ? $timesheet->break_duration . ' min' : '-' }}
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; font-size: 1.1em;">{{ number_format($timesheet->total_hours ?? 0, 1) }}h</div>
                        </td>
                        <td style="padding: 12px;">
                            @if(($timesheet->total_hours ?? 0) > 8)
                                <div style="font-weight: 600; color: #FF8F00;">{{ number_format(($timesheet->total_hours ?? 0) - 8, 1) }}h</div>
                            @else
                                <div style="color: #6c757d;">-</div>
                            @endif
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--leaf-green);">${{ number_format($timesheet->total_pay ?? 0, 2) }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <a href="/employees/{{ $employee->id }}/timesheet/{{ $timesheet->id }}/edit" 
                               class="touch-btn touch-btn-warning" style="padding: 4px 8px; font-size: 10px;">Edit</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div style="margin-top: 20px;">
            {{ $timesheets->links() }}
        </div>
        @else
        <div style="text-align: center; color: #6c757d; padding: 40px;">
            <h4>No timesheet entries found</h4>
            <p>No time entries for the selected period. Use the Clock In/Out buttons or manual entry form above.</p>
        </div>
        @endif
    </div>

@endsection

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

// Weekly Hours Trend Chart
const weeklyCtx = document.getElementById('weeklyHoursChart').getContext('2d');
new Chart(weeklyCtx, {
    type: 'line',
    data: {
        labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
        datasets: [{
            label: 'Total Hours',
            data: [40, 42, 38, 45],
            borderColor: timesheetColors.total,
            backgroundColor: timesheetColors.total + '20',
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }, {
            label: 'Overtime Hours',
            data: [0, 2, 0, 5],
            borderColor: timesheetColors.overtime,
            backgroundColor: timesheetColors.overtime + '20',
            borderWidth: 3,
            fill: false
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { beginAtZero: true }
        },
        plugins: {
            legend: {
                position: 'top',
                labels: { font: { size: 11, weight: '600' } }
            }
        }
    }
});

// Daily Hours Chart
const dailyCtx = document.getElementById('dailyHoursChart').getContext('2d');
new Chart(dailyCtx, {
    type: 'bar',
    data: {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [{
            label: 'Regular Hours',
            data: [8, 8, 8, 8, 8, 4, 0],
            backgroundColor: timesheetColors.regular,
            borderColor: '#fff',
            borderWidth: 2
        }, {
            label: 'Overtime Hours',
            data: [0, 0, 2, 1, 2, 0, 0],
            backgroundColor: timesheetColors.overtime,
            borderColor: '#fff',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            x: { stacked: true },
            y: { stacked: true, beginAtZero: true }
        },
        plugins: {
            legend: {
                position: 'top',
                labels: { font: { size: 11, weight: '600' } }
            }
        }
    }
});

@if($currentShift)
// Real-time clock update for current shift
setInterval(function() {
    const clockInTime = new Date('{{ $currentShift->clock_in }}');
    const now = new Date();
    const hoursWorked = (now - clockInTime) / (1000 * 60 * 60);
    const estimatedPay = hoursWorked * {{ $employee->hourly_rate }};
    
    document.getElementById('hoursWorked').textContent = hoursWorked.toFixed(1) + 'h';
    document.getElementById('estimatedPay').textContent = '$' + estimatedPay.toFixed(2);
}, 60000); // Update every minute
@endif
</script>
@endpush