@extends('layouts.app')
@section('page-title', 'Performance Scores')

@section('content')
<div class="page-header">
    <h1><i class="fas fa-chart-line" style="color:#0097c4"></i> Performance Scores</h1>
    <a href="{{ route('performance.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add Score
    </a>
</div>

<form method="GET">
    <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:16px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
        <div style="flex:2;min-width:180px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Employee</label>
            <select name="employee_id" class="form-control">
                <option value="">All Employees</option>
                @foreach($employees as $emp)
                    <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected':'' }}>{{ $emp->name }}</option>
                @endforeach
            </select>
        </div>
        <div style="flex:1;min-width:100px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Year</label>
            <select name="year" class="form-control">
                <option value="">All</option>
                @foreach($years as $y)
                    <option value="{{ $y }}" {{ request('year') == $y ? 'selected':'' }}>{{ $y }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex gap-2" style="flex-shrink:0;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
            <a href="{{ route('performance.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
        </div>
    </div>
</form>

<div class="card">
    <div class="card-header"><i class="fas fa-star"></i> Performance Records ({{ $scores->total() }})</div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr><th>#</th><th>Employee</th><th>Year</th><th>Score (Point)</th><th>Grade</th><th>Actions</th></tr>
            </thead>
            <tbody>
                @forelse($scores as $score)
                <tr>
                    <td>{{ $score->id }}</td>
                    <td>
                        <div style="font-weight:600;">{{ $score->employee->name }}</div>
                        <div style="font-size:0.75rem;color:#64748b;">{{ $score->employee->rg_id }}</div>
                    </td>
                    <td>{{ $score->year }}</td>
                    <td>
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div style="flex:1;max-width:120px;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;">
                                <div style="height:100%;width:{{ $score->point }}%;background:{{ $score->point >= 80 ? '#22c55e' : ($score->point >= 60 ? '#f59e0b' : '#ef4444') }};border-radius:4px;"></div>
                            </div>
                            <strong>{{ number_format($score->point, 2) }}</strong>
                        </div>
                    </td>
                    <td>
                        @php
                            $grade = $score->point >= 90 ? 'A+' : ($score->point >= 80 ? 'A' : ($score->point >= 70 ? 'B' : ($score->point >= 60 ? 'C' : 'D')));
                            $color = $score->point >= 80 ? 'badge-success' : ($score->point >= 60 ? 'badge-warning' : 'badge-danger');
                        @endphp
                        <span class="badge {{ $color }}">{{ $grade }}</span>
                    </td>
                    <td>
                        <div class="flex gap-2">
                            <a href="{{ route('performance.edit', $score) }}" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                            <form method="POST" action="{{ route('performance.destroy', $score) }}" onsubmit="return confirm('Delete score?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" class="text-center" style="padding:30px;color:#94a3b8;">No records found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($scores->hasPages())
        <div style="padding:16px;">{{ $scores->links() }}</div>
    @endif
</div>
@endsection