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

    <!-- Page Header -->
    <div class="page-header">
        <h1>📅 Daily Timecards</h1>
        <p>Daily employee attendance and hours tracking</p>
        <p class="subtitle">{{ $selectedDate->format('l, F 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/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>

    <!-- Daily 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">{{ $summaryStats['employees_working'] }}</div>
            <div class="stat-label">Currently Working</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ number_format($summaryStats['total_hours'], 1) }}h</div>
            <div class="stat-label">Total Hours Today</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">${{ number_format($summaryStats['total_payroll'], 2) }}</div>
            <div class="stat-label">Daily Payroll</div>
        </div>
    </div>

    <!-- Filters -->
    <form method="GET" action="/timecards/daily" class="filters">
        <div class="filter-group">
            <label for="date">Date</label>
            <input type="date" id="date" name="date" class="form-control" 
                   value="{{ request('date', $selectedDate->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>

    <!-- Real-time Status Overview -->
    <div class="mobile-card">
        <h3>🕐 Real-Time Status</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin: 20px 0;">
            <div style="text-align: center; padding: 15px; background: var(--leaf-green); color: white; border-radius: 8px;">
                <div style="font-size: 2em; font-weight: bold;">{{ $employees->where('is_working', true)->count() }}</div>
                <div style="font-size: 0.9em; margin-top: 5px;">🟢 Working Now</div>
            </div>
            <div style="text-align: center; padding: 15px; background: #6c757d; color: white; border-radius: 8px;">
                <div style="font-size: 2em; font-weight: bold;">{{ $employees->where('is_working', false)->where('daily_total_hours', '>', 0)->count() }}</div>
                <div style="font-size: 0.9em; margin-top: 5px;">⚪ Clocked Out</div>
            </div>
            <div style="text-align: center; padding: 15px; background: #FF8F00; color: white; border-radius: 8px;">
                <div style="font-size: 2em; font-weight: bold;">{{ $employees->where('daily_overtime_hours', '>', 0)->count() }}</div>
                <div style="font-size: 0.9em; margin-top: 5px;">⏰ Overtime</div>
            </div>
            <div style="text-align: center; padding: 15px; background: var(--berry-red); color: white; border-radius: 8px;">
                <div style="font-size: 2em; font-weight: bold;">{{ $employees->where('daily_total_hours', 0)->count() }}</div>
                <div style="font-size: 0.9em; margin-top: 5px;">🔴 Not Worked</div>
            </div>
        </div>
    </div>

    <!-- Daily Employee Status Table -->
    @if($employees->count() > 0)
    <div class="mobile-card">
        <h3>👥 Employee Status - {{ $selectedDate->format('M j, Y') }}</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;">Status</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;">Hours Worked</th>
                        <th style="padding: 12px; text-align: left;">Daily 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;">{{ ucwords(str_replace('_', ' ', $employee->department)) }}</div>
                                </div>
                            </div>
                        </td>
                        <td style="padding: 12px;">
                            @if($employee->is_working)
                                <span style="background: var(--leaf-green); color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold;">
                                    🟢 Working
                                </span>
                            @elseif($employee->daily_total_hours > 0)
                                <span style="background: #6c757d; color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold;">
                                    ⚪ Completed
                                </span>
                            @else
                                <span style="background: var(--berry-red); color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold;">
                                    🔴 Not Worked
                                </span>
                            @endif
                        </td>
                        <td style="padding: 12px;">
                            @if($employee->clock_in)
                                <div style="font-weight: 600; color: var(--leaf-green);">{{ $employee->clock_in->format('g:i A') }}</div>
                            @else
                                <div style="color: #6c757d;">-</div>
                            @endif
                        </td>
                        <td style="padding: 12px;">
                            @if($employee->clock_out)
                                <div style="font-weight: 600; color: var(--berry-red);">{{ $employee->clock_out->format('g:i A') }}</div>
                            @elseif($employee->is_working)
                                <div style="color: var(--leaf-green); font-weight: 600;">Still Working</div>
                            @else
                                <div style="color: #6c757d;">-</div>
                            @endif
                        </td>
                        <td style="padding: 12px;">
                            @if($employee->daily_total_hours > 0)
                                <div style="font-weight: 600; font-size: 1.1em;">{{ number_format($employee->daily_total_hours, 1) }}h</div>
                                @if($employee->daily_overtime_hours > 0)
                                    <div style="font-size: 0.8em; color: #FF8F00;">{{ number_format($employee->daily_overtime_hours, 1) }}h OT</div>
                                @endif
                            @else
                                <div style="color: #6c757d;">0.0h</div>
                            @endif
                        </td>
                        <td style="padding: 12px;">
                            @if($employee->daily_total_pay > 0)
                                <div style="font-weight: 600; color: var(--leaf-green); font-size: 1.1em;">${{ number_format($employee->daily_total_pay, 2) }}</div>
                            @else
                                <div style="color: #6c757d;">$0.00</div>
                            @endif
                        </td>
                        <td style="padding: 12px;">
                            @if($employee->is_working)
                                <a href="/employees/{{ $employee->id }}/timesheet/clock-out" class="touch-btn touch-btn-warning" style="padding: 4px 8px; font-size: 10px;">Clock Out</a>
                            @elseif(!$employee->clock_in)
                                <a href="/employees/{{ $employee->id }}/timesheet/clock-in" class="touch-btn touch-btn-success" style="padding: 4px 8px; font-size: 10px;">Clock In</a>
                            @endif
                            <a href="/employees/{{ $employee->id }}/timesheet" class="touch-btn touch-btn-primary" style="padding: 4px 8px; font-size: 10px; margin-left: 2px;">View</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @else
    <div style="text-align: center; color: #6c757d; padding: 40px;">
        <h4>No Employees Found</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

    <!-- Auto-refresh for real-time updates -->
    <div style="text-align: center; margin: 30px 0; padding: 20px; background: rgba(106, 27, 154, 0.05); border-radius: 8px;">
        <p style="margin: 0; color: #6c757d;">
            🔄 Page auto-refreshes every 2 minutes for real-time updates
            <br>
            <small>Last updated: {{ now()->format('g:i:s A') }}</small>
        </p>
    </div>

@endsection

@push('scripts')
<script>
// Auto-refresh every 2 minutes for real-time updates
setTimeout(function() {
    window.location.reload();
}, 120000); // 2 minutes

// Add visual indicator for auto-refresh countdown
let countdown = 120;
const updateCountdown = () => {
    countdown--;
    if (countdown <= 0) {
        window.location.reload();
    }
};
setInterval(updateCountdown, 1000);
</script>
@endpush