@extends('layouts.app')

@section('title', 'إرسال تقدير - DOTS HR Pro')

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 24px;
    }
    .page-header h1 {
        font-size: 24px;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
    }
    .btn-primary {
        background: #E8502F;
        color: #fff;
        border: 1px solid #E8502F;
        border-radius: 8px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        cursor: pointer;
        transition: all .2s;
    }
    .btn-primary:hover { background: #d1441f; border-color: #d1441f; color: #fff; }
    .btn-back {
        background: #fff;
        color: #1B2A4A;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        transition: all .2s;
    }
    .btn-back:hover { background: #f8fafc; color: #1B2A4A; border-color: #cbd5e1; }
    .card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 24px;
    }
    .form-group {
        margin-bottom: 18px;
    }
    .form-group label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #1B2A4A;
        margin-bottom: 6px;
    }
    .form-control, .form-select {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 14px;
        color: #1B2A4A;
        background: #fff;
        box-sizing: border-box;
    }
    .form-control:focus, .form-select:focus {
        outline: none;
        border-color: #E8502F;
        box-shadow: 0 0 0 3px rgba(232, 80, 47, .1);
    }
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    @media(max-width:700px) {
        .form-row { grid-template-columns: 1fr; }
    }
    .form-actions {
        display: flex;
        gap: 12px;
        margin-top: 24px;
    }
    .alert-success {
        background: rgba(16, 185, 129, .08);
        border: 1px solid rgba(16, 185, 129, .3);
        color: #065f46;
        padding: 14px 18px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    .alert-error {
        background: rgba(239, 68, 68, .08);
        border: 1px solid rgba(239, 68, 68, .3);
        color: #991b1b;
        padding: 14px 18px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
    }
</style>
@endpush

@section('content')
@php $employees = $employees ?? collect(); @endphp

<div class="page-header">
    <h1><i class="fa-solid fa-heart" style="color:#E8502F;margin-left:8px;"></i> أرسل تقدير لزميلك</h1>
    <a href="{{ route('recognitions.index') }}" class="btn-back"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
</div>

@if(session('success'))
    <div class="alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert-error">{{ session('error') }}</div>
@endif

<div class="card">
    <form method="POST" action="{{ route('recognitions.store') }}">
        @csrf
        <div class="form-row">
            <div class="form-group">
                <label>الموظف</label>
                <select name="to_employee_id" class="form-select" required>
                    <option value="">اختر الموظف...</option>
                    @foreach($employees as $e)
                        <option value="{{ $e->id }}">{{ $e->display_name ?? $e->name ?? (($e->first_name ?? '') . ' ' . ($e->last_name ?? '')) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>الفئة</label>
                <select name="category" class="form-select">
                    <option value="kudos">شكر وتقدير</option>
                    <option value="teamwork">عمل جماعي</option>
                    <option value="innovation">ابتكار</option>
                    <option value="leadership">قيادة</option>
                    <option value="customer_focus">خدمة العملاء</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label>رسالة التقدير</label>
            <textarea name="message" class="form-control" rows="4" required maxlength="500" placeholder="اكتب رسالة شكر لزميلك..."></textarea>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label>النقاط</label>
                <input type="number" name="points" class="form-control" value="10" min="1" max="100">
            </div>
            <div class="form-group" style="display:flex;align-items:flex-end;">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                    <input type="checkbox" name="is_public" value="1" checked style="width:18px;height:18px;accent-color:#E8502F;">
                    <span>نشر التقدير للجميع</span>
                </label>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn-primary"><i class="fa-solid fa-paper-plane"></i> إرسال التقدير</button>
            <a href="{{ route('recognitions.index') }}" class="btn-back">إلغاء</a>
        </div>
    </form>
</div>
@endsection