@extends('layouts.app')

@section('title', $plan->position_title)

@push('styles')
<style>
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h1{font-size:1.5rem;font-weight:700;color:#1B2A4A;margin:0}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.stat-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff}
.stat-icon.navy{background:#1B2A4A}.stat-icon.green{background:#10b981}.stat-icon.yellow{background:#f59e0b}.stat-icon.blue{background:#3b82f6}.stat-icon.red{background:#ef4444}
.stat-info h3{margin:0;font-size:1.4rem;font-weight:700;color:#1B2A4A}.stat-info p{margin:2px 0 0;font-size:.85rem;color:#64748b}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:24px}
.table-wrapper{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:10px 12px;text-align:right;border-bottom:1px solid #f1f5f9;font-size:.9rem}
.data-table th{background:#f8fafc;font-weight:600;color:#64748b;font-size:.85rem}.data-table tr:hover{background:#f8fafc}
.badge{padding:4px 10px;border-radius:20px;font-size:.8rem;font-weight:600}
.badge-success{background:#d1fae5;color:#065f46}.badge-warning{background:#fef3c7;color:#92400e}.badge-danger{background:#fee2e2;color:#991b1b}.badge-info{background:#dbeafe;color:#1e40af}.badge-secondary{background:#f1f5f9;color:#475569}
.btn-primary{background:#E8502F;color:#fff;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600}.btn-primary:hover{background:#d4431f}
.btn-success{background:#10b981;color:#fff;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:.9rem}
.empty-state{text-align:center;padding:60px 20px;color:#94a3b8}.empty-state i{font-size:3rem;margin-bottom:12px;display:block}
.stat-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;pointer-events:none;transition:opacity .25s}
.stat-modal-overlay.active{opacity:1;pointer-events:auto}
.stat-modal{background:#fff;border-radius:12px;width:92%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(20px);transition:transform .25s}
.stat-modal-overlay.active .stat-modal{transform:translateY(0)}
.stat-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0}
.stat-modal-header h3{margin:0;font-size:1.05rem;color:#1B2A4A}
.stat-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#64748b;line-height:1;padding:0 4px}.stat-modal-close:hover{color:#ef4444}
.stat-modal-body{padding:20px;overflow-y:auto}
.stat-modal-body table{width:100%;border-collapse:collapse}
.stat-modal-body th,.stat-modal-body td{padding:8px 10px;text-align:right;border-bottom:1px solid #f1f5f9;font-size:.9rem}
.stat-modal-body th{background:#f8fafc;font-weight:600;font-size:.85rem;color:#64748b}
.stat-card[onclick]{cursor:pointer;transition:transform .15s,box-shadow .15s}.stat-card[onclick]:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:.9rem;color:#1B2A4A}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:.9rem;font-family:inherit;direction:rtl}
.form-group textarea{resize:vertical;min-height:80px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.form-actions{display:flex;gap:10px;justify-content:flex-start;margin-top:20px}
.btn-cancel{background:#f1f5f9;color:#475569;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:.9rem}
.btn-danger{background:#ef4444;color:#fff;border:none;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:.8rem}
.btn-danger:hover{background:#dc2626}
.btn-edit{background:#3b82f6;color:#fff;border:none;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:.8rem}
.btn-edit:hover{background:#2563eb}
.back-link{display:inline-flex;align-items:center;gap:6px;color:#64748b;text-decoration:none;font-size:.9rem;margin-bottom:16px}
.back-link:hover{color:#1B2A4A}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.info-item label{display:block;font-size:.8rem;color:#64748b;margin-bottom:4px;font-weight:600}
.info-item span{font-size:.95rem;color:#1B2A4A}
.candidate-card{background:#fff;border:1px solid #f1f5f9;border-radius:12px;padding:20px;margin-bottom:16px;transition:box-shadow .15s}
.candidate-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.candidate-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.candidate-header h4{margin:0;color:#1B2A4A;font-size:1rem}
.candidate-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.priority-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:8px;font-size:.8rem;font-weight:600;background:#fef3c7;color:#92400e}
.candidate-details{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:.9rem}
.candidate-details dt{font-weight:600;color:#64748b;font-size:.8rem;margin-bottom:4px}
.candidate-details dd{margin:0;color:#475569;line-height:1.5}
.candidate-actions{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid #f1f5f9}
</style>
@endpush

@section('content')
<a href="/succession" class="back-link">
    <i class="fas fa-arrow-right"></i> العودة للتعاقب الوظيفي
</a>

<div class="page-header">
    <h1><i class="fas fa-exchange-alt"></i> {{ $plan->position_title }}</h1>
    <button class="btn-primary" onclick="openStatModal('addCandidateModal')">
        <i class="fas fa-plus"></i> إضافة مرشح
    </button>
</div>

{{-- Plan Info Card --}}
<div class="card">
    <h3 style="margin:0 0 16px;color:#1B2A4A;font-size:1.1rem;"><i class="fas fa-info-circle"></i> معلومات الخطة</h3>
    <div class="info-grid">
        <div class="info-item">
            <label>المنصب</label>
            <span>{{ $plan->position_title }}</span>
        </div>
        <div class="info-item">
            <label>الشاغل الحالي</label>
            <span>{{ $plan->currentHolder->name ?? '—' }}</span>
        </div>
        <div class="info-item">
            <label>مستوى المخاطر</label>
            <span>
                @switch($plan->risk_level)
                    @case('high')
                        <span class="badge badge-danger">عالي</span>
                        @break
                    @case('medium')
                        <span class="badge badge-warning">متوسط</span>
                        @break
                    @case('low')
                        <span class="badge badge-success">منخفض</span>
                        @break
                    @default
                        <span class="badge badge-secondary">{{ $plan->risk_level }}</span>
                @endswitch
            </span>
        </div>
        <div class="info-item">
            <label>الإطار الزمني</label>
            <span>{{ $plan->timeline }}</span>
        </div>
        <div class="info-item">
            <label>الحالة</label>
            <span>
                @if($plan->is_active ?? true)
                    <span class="badge badge-success">نشطة</span>
                @else
                    <span class="badge badge-secondary">غير نشطة</span>
                @endif
            </span>
        </div>
        @if($plan->notes)
        <div class="info-item" style="grid-column:1/-1;">
            <label>ملاحظات</label>
            <span>{{ $plan->notes }}</span>
        </div>
        @endif
    </div>
</div>

{{-- Candidates --}}
<div class="card">
    <h3 style="margin:0 0 16px;color:#1B2A4A;font-size:1.1rem;"><i class="fas fa-users"></i> المرشحون ({{ $candidates->count() }})</h3>

    @if($candidates->count() > 0)
        @foreach($candidates as $candidate)
        <div class="candidate-card">
            <div class="candidate-header">
                <h4><i class="fas fa-user"></i> {{ $candidate->employee_name }}</h4>
                <div class="candidate-meta">
                    @switch($candidate->readiness)
                        @case('ready_now')
                            <span class="badge badge-success">جاهز الآن</span>
                            @break
                        @case('ready_1_year')
                            <span class="badge badge-info">جاهز خلال سنة</span>
                            @break
                        @case('ready_2_years')
                            <span class="badge badge-warning">جاهز خلال سنتين</span>
                            @break
                        @case('not_ready')
                            <span class="badge badge-danger">غير جاهز</span>
                            @break
                        @default
                            <span class="badge badge-secondary">{{ $candidate->readiness }}</span>
                    @endswitch
                    <span class="priority-badge">
                        <i class="fas fa-star"></i> الأولوية: {{ $candidate->priority }}
                    </span>
                </div>
            </div>
            <div class="candidate-details">
                <div>
                    <dt>نقاط القوة</dt>
                    <dd>{{ $candidate->strengths ?? '—' }}</dd>
                </div>
                <div>
                    <dt>احتياجات التطوير</dt>
                    <dd>{{ $candidate->development_needs ?? '—' }}</dd>
                </div>
            </div>
            <div class="candidate-actions">
                <button class="btn-edit" onclick="openStatModal('editCandidateModal{{ $candidate->id }}')">
                    <i class="fas fa-edit"></i> تعديل
                </button>
                <form action="/succession/{{ $plan->id }}/candidates/{{ $candidate->id }}" method="POST" style="display:inline;" onsubmit="return confirm('هل أنت متأكد من إزالة هذا المرشح؟')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn-danger"><i class="fas fa-trash"></i> إزالة</button>
                </form>
            </div>
        </div>

        {{-- Edit Candidate Modal --}}
        <div class="stat-modal-overlay" id="editCandidateModal{{ $candidate->id }}">
            <div class="stat-modal">
                <div class="stat-modal-header">
                    <h3><i class="fas fa-edit"></i> تعديل المرشح: {{ $candidate->employee_name }}</h3>
                    <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
                </div>
                <div class="stat-modal-body">
                    <form action="/succession/{{ $plan->id }}/candidates/{{ $candidate->id }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label>الموظف</label>
                            <select name="employee_id" required>
                                @isset($employees)
                                @foreach($employees as $employee)
                                    <option value="{{ $employee->id }}" {{ ($candidate->employee_id ?? '') == $employee->id ? 'selected' : '' }}>{{ $employee->name }}</option>
                                @endforeach
                                @endisset
                            </select>
                        </div>
                        <div class="form-group">
                            <label>الجاهزية</label>
                            <select name="readiness" required>
                                <option value="ready_now" {{ $candidate->readiness == 'ready_now' ? 'selected' : '' }}>جاهز الآن</option>
                                <option value="ready_1_year" {{ $candidate->readiness == 'ready_1_year' ? 'selected' : '' }}>جاهز خلال سنة</option>
                                <option value="ready_2_years" {{ $candidate->readiness == 'ready_2_years' ? 'selected' : '' }}>جاهز خلال سنتين</option>
                                <option value="not_ready" {{ $candidate->readiness == 'not_ready' ? 'selected' : '' }}>غير جاهز</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>الأولوية (١-٥)</label>
                            <input type="number" name="priority" value="{{ $candidate->priority }}" required min="1" max="5">
                        </div>
                        <div class="form-group">
                            <label>نقاط القوة</label>
                            <textarea name="strengths">{{ $candidate->strengths }}</textarea>
                        </div>
                        <div class="form-group">
                            <label>احتياجات التطوير</label>
                            <textarea name="development_needs">{{ $candidate->development_needs }}</textarea>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn-primary"><i class="fas fa-save"></i> تحديث</button>
                            <button type="button" class="btn-cancel" onclick="closeStatModal(this)">إلغاء</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    @else
    <div class="empty-state">
        <i class="fas fa-users"></i>
        <p>لا يوجد مرشحون بعد لهذه الخطة</p>
    </div>
    @endif
</div>

{{-- Add Candidate Modal --}}
<div class="stat-modal-overlay" id="addCandidateModal">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-plus"></i> إضافة مرشح جديد</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <form action="/succession/{{ $plan->id }}/candidates" method="POST">
                @csrf
                <div class="form-group">
                    <label for="employee_id">الموظف</label>
                    <select name="employee_id" id="employee_id" required>
                        <option value="">اختر الموظف</option>
                        @isset($employees)
                        @foreach($employees as $employee)
                            <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                        @endforeach
                        @endisset
                    </select>
                </div>
                <div class="form-group">
                    <label for="readiness">الجاهزية</label>
                    <select name="readiness" id="readiness" required>
                        <option value="">اختر مستوى الجاهزية</option>
                        <option value="ready_now">جاهز الآن</option>
                        <option value="ready_1_year">جاهز خلال سنة</option>
                        <option value="ready_2_years">جاهز خلال سنتين</option>
                        <option value="not_ready">غير جاهز</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="priority">الأولوية (١-٥)</label>
                    <input type="number" name="priority" id="priority" required min="1" max="5" value="1" placeholder="١">
                </div>
                <div class="form-group">
                    <label for="strengths">نقاط القوة</label>
                    <textarea name="strengths" id="strengths" placeholder="أدخل نقاط القوة للمرشح"></textarea>
                </div>
                <div class="form-group">
                    <label for="development_needs">احتياجات التطوير</label>
                    <textarea name="development_needs" id="development_needs" placeholder="أدخل احتياجات التطوير للمرشح"></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary"><i class="fas fa-save"></i> حفظ</button>
                    <button type="button" class="btn-cancel" onclick="closeStatModal(this)">إلغاء</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function openStatModal(id){document.getElementById(id).classList.add('active')}
function closeStatModal(el){el.closest('.stat-modal-overlay').classList.remove('active')}
document.addEventListener('keydown',function(e){if(e.key==='Escape'){document.querySelectorAll('.stat-modal-overlay.active').forEach(function(m){m.classList.remove('active')})}});
</script>
@endpush