@extends('layouts.app')

@section('title', 'درجة ' . $grade->name)

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><span class="code-badge" style="margin-left:8px;">{{ $grade->code }}</span> {{ $grade->name }}</h1>
        <p class="page-subtitle">{{ $grade->description ?: 'تفاصيل الدرجة الوظيفية والدرجات الفرعية' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('pay-scale.edit', $grade) }}" class="btn btn-secondary"><i class="fas fa-edit"></i> تعديل</a>
        <a href="{{ route('pay-scale.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

@if(session('success'))
<div style="background: var(--success-light); color: var(--success); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px;">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif
@if(session('error'))
<div style="background: var(--danger-light); color: var(--danger); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px;">
    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
</div>
@endif

<!-- Salary Range Card -->
<div class="card">
    <div class="card-header"><h3><i class="fas fa-sliders-h"></i> مدى الراتب</h3></div>
    <div class="card-body">
        <div class="stats-grid cols-3" style="margin-bottom:16px;">
            <div class="stat-card">
                <div class="stat-value" style="color:var(--danger);">{{ number_format($grade->min_salary, 2) }}</div>
                <div class="stat-label">الحد الأدنى</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" style="color:var(--warning);">{{ number_format($grade->mid_salary, 2) }}</div>
                <div class="stat-label">المتوسط</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" style="color:var(--success);">{{ number_format($grade->max_salary, 2) }}</div>
                <div class="stat-label">الحد الأقصى</div>
            </div>
        </div>
        <div class="detail-grid">
            <div class="detail-item">
                <span class="detail-label">نسبة بدل السكن</span>
                <span class="detail-value">{{ $grade->housing_percent }}%</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">بدل النقل</span>
                <span class="detail-value">{{ number_format($grade->transport_allowance, 2) }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Steps Table -->
<div class="card">
    <div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
        <h3><i class="fas fa-stairs"></i> الدرجات الفرعية (Steps)</h3>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الدرجة</th>
                        <th>الراتب الأساسي</th>
                        <th>بدل السكن</th>
                        <th>بدل النقل</th>
                        <th>الإجمالي</th>
                        <th>العلاوة السنوية</th>
                        <th>الموظفون</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($grade->steps as $step)
                    @php
                        $housing = round($step->basic_salary * ($grade->housing_percent / 100), 2);
                        $total = $step->basic_salary + $housing + $grade->transport_allowance;
                        $empCount = \App\Models\Employee::where('pay_step_id', $step->id)->count();
                    @endphp
                    <tr>
                        <td><strong>S{{ $step->step_number }}</strong></td>
                        <td>{{ number_format($step->basic_salary, 2) }}</td>
                        <td>{{ number_format($housing, 2) }}</td>
                        <td>{{ number_format($grade->transport_allowance, 2) }}</td>
                        <td><strong style="color:var(--primary);">{{ number_format($total, 2) }}</strong></td>
                        <td>{{ number_format($step->annual_increment, 2) }}</td>
                        <td>{{ $empCount }}</td>
                        <td>
                            @if($empCount === 0)
                            <form method="POST" action="{{ route('pay-scale.delete-step', $step) }}" style="display:inline;">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn" title="حذف" onclick="return confirm('حذف الدرجة الفرعية S{{ $step->step_number }}؟')" style="color:var(--danger);">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Add Step -->
        <div style="margin-top:16px; padding-top:16px; border-top:1px solid var(--border-light);">
            <form method="POST" action="{{ route('pay-scale.add-step', $grade) }}" class="form-grid cols-4" style="align-items:flex-end;">
                @csrf
                <div class="form-group">
                    <label class="form-label">الراتب الأساسي</label>
                    <input type="number" name="basic_salary" class="form-input" step="0.01" required>
                </div>
                <div class="form-group">
                    <label class="form-label">العلاوة السنوية</label>
                    <input type="number" name="annual_increment" class="form-input" step="0.01" value="0" required>
                </div>
                <div class="form-group">
                    <label class="form-label">ملاحظات</label>
                    <input type="text" name="notes" class="form-input">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-success"><i class="fas fa-plus"></i> إضافة درجة فرعية</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Assign Employee -->
<div class="card">
    <div class="card-header"><h3><i class="fas fa-user-plus"></i> تعيين موظف على هذه الدرجة</h3></div>
    <div class="card-body">
        <form method="POST" action="{{ route('pay-scale.assign', $grade) }}" class="form-grid cols-4" style="align-items:flex-end;">
            @csrf
            <div class="form-group">
                <label class="form-label required">الموظف</label>
                <select name="employee_id" class="form-select" required>
                    <option value="">-- اختر --</option>
                    @foreach($availableEmployees as $emp)
                        <option value="{{ $emp->id }}">
                            {{ $emp->employee_code ? '['.$emp->employee_code.'] ' : '' }}{{ $emp->full_name_en ?: $emp->first_name . ' ' . $emp->last_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label class="form-label required">الدرجة الفرعية</label>
                <select name="pay_step_id" class="form-select" required>
                    @foreach($grade->steps as $step)
                        <option value="{{ $step->id }}">S{{ $step->step_number }} — {{ number_format($step->basic_salary, 2) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" style="display:flex; align-items:center; gap:6px;">
                    <input type="checkbox" name="update_salary" value="1" checked> تحديث الراتب تلقائياً
                </label>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary"><i class="fas fa-user-check"></i> تعيين</button>
            </div>
        </form>
    </div>
</div>

<!-- Employees on this grade -->
@if($grade->employees->count() > 0)
<div class="card">
    <div class="card-header"><h3><i class="fas fa-users"></i> الموظفون على هذه الدرجة ({{ $grade->employees->count() }})</h3></div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الرمز</th>
                        <th>الموظف</th>
                        <th>الدرجة الفرعية</th>
                        <th>الراتب الأساسي</th>
                        <th>الإجمالي</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($grade->employees as $emp)
                    <tr>
                        <td><span class="code-badge">{{ $emp->employee_code ?? '-' }}</span></td>
                        <td>{{ $emp->full_name_en ?: $emp->first_name . ' ' . $emp->last_name }}</td>
                        <td>{{ $emp->payStep ? 'S' . $emp->payStep->step_number : '-' }}</td>
                        <td>{{ number_format($emp->basic_salary, 2) }}</td>
                        <td><strong>{{ number_format($emp->total_salary, 2) }}</strong></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif
@endsection