@extends('layouts.app')
@section('title', 'Employee Management - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>👥 Employee Management</h1>
        <p>Manage farm employees, wages, hours, and payroll</p>
        <p class="subtitle">Comprehensive workforce management and payroll processing</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-3" style="margin-bottom: 30px;">
        <a href="/employees/create" class="touch-btn touch-btn-success">+ Add New Employee</a>
        <a href="/timecards" class="touch-btn touch-btn-primary">⏰ Timesheets</a>
        <a href="/timecards/payroll-summary" class="touch-btn touch-btn-warning">💰 Payroll</a>
    </div>

    <!-- Statistics -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ $employees->total() ?? 0 }}</div>
            <div class="stat-label">Total Employees</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ $employees->where('status', 'active')->count() ?? 0 }}</div>
            <div class="stat-label">Active Employees</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">${{ number_format($totalPayroll ?? 0, 2) }}</div>
            <div class="stat-label">Monthly Payroll</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">{{ number_format($totalHours ?? 0, 1) }}</div>
            <div class="stat-label">Hours This Week</div>
        </div>
    </div>

    <!-- Employee Management Overview -->
    <div class="mobile-card">
        <h3>📊 Workforce Analytics</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
            <!-- Employee Status Distribution -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">👥 Employee Status</h4>
                <canvas id="employeeStatusChart" style="max-height: 250px;"></canvas>
            </div>
            
            <!-- Department Distribution -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🏢 Department Breakdown</h4>
                <canvas id="departmentChart" style="max-height: 250px;"></canvas>
            </div>
        </div>
        
        <!-- Weekly Hours Overview -->
        <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
            <h4 style="margin-bottom: 15px; color: var(--soil-brown);">⏰ Weekly Hours Overview</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($regularHours ?? 0, 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($overtimeHours ?? 0, 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;">${{ number_format($avgWage ?? 0, 2) }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Average 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;">{{ $employeesWorkedToday ?? 0 }}</div>
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Worked Today</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <form method="GET" action="/employees" class="filters">
        <div class="filter-group">
            <label for="search">Search</label>
            <input type="text" id="search" name="search" class="form-control" 
                   value="{{ request('search') }}" 
                   placeholder="Name, email, department...">
        </div>
        <div class="filter-group">
            <label for="department">Department</label>
            <select id="department" name="department" class="form-control">
                <option value="">All Departments</option>
                <option value="field_operations" {{ request('department') == 'field_operations' ? 'selected' : '' }}>Field Operations</option>
                <option value="maintenance" {{ request('department') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                <option value="harvest" {{ request('department') == 'harvest' ? 'selected' : '' }}>Harvest</option>
                <option value="administration" {{ request('department') == 'administration' ? 'selected' : '' }}>Administration</option>
                <option value="quality_control" {{ request('department') == 'quality_control' ? 'selected' : '' }}>Quality Control</option>
            </select>
        </div>
        <div class="filter-group">
            <label for="status">Status</label>
            <select id="status" name="status" class="form-control">
                <option value="">All Statuses</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="part_time" {{ request('status') == 'part_time' ? 'selected' : '' }}>Part Time</option>
                <option value="seasonal" {{ request('status') == 'seasonal' ? 'selected' : '' }}>Seasonal</option>
                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                <option value="terminated" {{ request('status') == 'terminated' ? 'selected' : '' }}>Terminated</option>
            </select>
        </div>
        <div class="filter-group" style="align-self: end;">
            <button type="submit" class="touch-btn touch-btn-primary">🔍 Search</button>
        </div>
    </form>

    @if($employees && $employees->count() > 0)
    <!-- Employee Table -->
    <div class="mobile-table">
        <table style="width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(106, 27, 154, 0.08);">
            <thead style="background: linear-gradient(135deg, var(--blackberry-purple), var(--blackberry-purple-light)); color: white;">
                <tr>
                    <th style="padding: 15px; text-align: left;">Employee</th>
                    <th style="padding: 15px; text-align: left;">Department</th>
                    <th style="padding: 15px; text-align: left;">Position</th>
                    <th style="padding: 15px; text-align: left;">Hourly Rate</th>
                    <th style="padding: 15px; text-align: left;">Status</th>
                    <th style="padding: 15px; text-align: left;">Hours This Week</th>
                    <th style="padding: 15px; text-align: left;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($employees as $employee)
                <tr class="employee-row" style="border-bottom: 1px solid #E0E0E0; cursor: pointer; transition: background-color var(--transition-speed);" 
                    onmouseover="this.style.backgroundColor='#f8f9fa'" 
                    onmouseout="this.style.backgroundColor=''"
                    onclick="window.location='/employees/{{ $employee->id }}'">
                    <td style="padding: 15px;">
                        <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->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td style="padding: 15px;">
                        {{ ucwords(str_replace('_', ' ', $employee->department)) }}
                    </td>
                    <td style="padding: 15px;">
                        {{ $employee->position }}
                    </td>
                    <td style="padding: 15px;">
                        <strong style="color: var(--leaf-green);">${{ number_format($employee->hourly_rate, 2) }}</strong>
                    </td>
                    <td style="padding: 15px;">
                        @php
                            $statusClass = match($employee->status) {
                                'active' => 'badge-success',
                                'part_time' => 'badge-info',
                                'seasonal' => 'badge-warning',
                                'inactive' => 'badge-secondary',
                                'terminated' => 'badge-danger',
                                default => 'badge-secondary'
                            };
                        @endphp
                        <span class="badge {{ $statusClass }}">
                            {{ ucfirst(str_replace('_', ' ', $employee->status)) }}
                        </span>
                    </td>
                    <td style="padding: 15px;">
                        <div style="font-weight: 600;">{{ number_format($employee->weekly_hours ?? 0, 1) }}h</div>
                        @if(($employee->weekly_hours ?? 0) > 40)
                            <div style="font-size: 0.8em; color: #FF8F00;">{{ number_format(($employee->weekly_hours ?? 0) - 40, 1) }}h OT</div>
                        @endif
                    </td>
                    <td onclick="event.stopPropagation();" style="padding: 15px;">
                        <a href="/employees/{{ $employee->id }}" class="touch-btn touch-btn-primary" style="padding: 6px 10px; font-size: 11px; margin: 1px;">View</a>
                        <a href="/employees/{{ $employee->id }}/edit" class="touch-btn touch-btn-warning" style="padding: 6px 10px; font-size: 11px; margin: 1px;">Edit</a>
                        <a href="/employees/{{ $employee->id }}/timesheet" class="touch-btn touch-btn-success" style="padding: 6px 10px; font-size: 11px; margin: 1px;">Hours</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="pagination">
        {{ $employees->links() }}
    </div>
    @else
    <!-- Empty State -->
    <div style="text-align: center; padding: 60px 20px; color: #6c757d;">
        <h3>👥 No Employees Added Yet</h3>
        <p>Start building your farm workforce by adding your first employee.</p>
        <p>Track bio data, wages, hours, and manage payroll efficiently.</p>
        <a href="/employees/create" class="touch-btn touch-btn-success">👥 Add Your First Employee</a>
    </div>
    @endif

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Employee Management Chart Colors
const employeeColors = {
    active: '#388E3C',
    partTime: '#1976D2', 
    seasonal: '#FF8F00',
    inactive: '#9E9E9E',
    terminated: '#C62828'
};

// Employee Status Chart
const statusCtx = document.getElementById('employeeStatusChart').getContext('2d');
new Chart(statusCtx, {
    type: 'doughnut',
    data: {
        labels: ['Active', 'Part Time', 'Seasonal', 'Inactive', 'Terminated'],
        datasets: [{
            data: [
                {{ $employees->where('status', 'active')->count() ?? 0 }},
                {{ $employees->where('status', 'part_time')->count() ?? 0 }},
                {{ $employees->where('status', 'seasonal')->count() ?? 0 }},
                {{ $employees->where('status', 'inactive')->count() ?? 0 }},
                {{ $employees->where('status', 'terminated')->count() ?? 0 }}
            ],
            backgroundColor: [
                employeeColors.active,
                employeeColors.partTime,
                employeeColors.seasonal,
                employeeColors.inactive,
                employeeColors.terminated
            ],
            borderColor: '#fff',
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: { size: 11, weight: '600' }
                }
            }
        }
    }
});

// Department Distribution Chart
const deptCtx = document.getElementById('departmentChart').getContext('2d');
new Chart(deptCtx, {
    type: 'bar',
    data: {
        labels: ['Field Ops', 'Maintenance', 'Harvest', 'Admin', 'QC'],
        datasets: [{
            label: 'Employees',
            data: [
                {{ $employees->where('department', 'field_operations')->count() ?? 0 }},
                {{ $employees->where('department', 'maintenance')->count() ?? 0 }},
                {{ $employees->where('department', 'harvest')->count() ?? 0 }},
                {{ $employees->where('department', 'administration')->count() ?? 0 }},
                {{ $employees->where('department', 'quality_control')->count() ?? 0 }}
            ],
            backgroundColor: ['#6A1B9A', '#388E3C', '#FF8F00', '#1976D2', '#C62828'],
            borderColor: '#fff',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { beginAtZero: true }
        },
        plugins: {
            legend: { display: false }
        }
    }
});
</script>
@endpush