@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; }
    .btn-success {
        background: #10b981;
        color: #fff;
        border: 1px solid #10b981;
        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-success:hover { background: #059669; border-color: #059669; color: #fff; }
    .btn-sm { padding: 6px 12px; font-size: 13px; }
    .card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 20px;
        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 {
        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 {
        outline: none;
        border-color: #E8502F;
        box-shadow: 0 0 0 3px rgba(232, 80, 47, .1);
    }
    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
    }
    .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;
    }
    .alert-error ul { margin: 6px 0 0; padding-right: 20px; }
    .section-title {
        font-size: 17px;
        font-weight: 700;
        color: #1B2A4A;
        margin-bottom: 16px;
    }
    .successor-item {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        position: relative;
    }
    .successor-item .remove-btn {
        position: absolute;
        top: 10px;
        left: 10px;
        background: none;
        border: none;
        color: #ef4444;
        cursor: pointer;
        font-size: 16px;
    }
    .successor-item .remove-btn:hover { color: #dc2626; }
    .readiness-label {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
    }
</style>
@endpush

@section('content')
@php
    $employees = $employees ?? collect();
    $positions = $positions ?? collect();
@endphp
<div class="page-header">
    <h1><i class="fa-solid fa-people-arrows" style="color:#E8502F;margin-left:8px;"></i> إنشاء خطة تعاقب</h1>
    <a href="{{ route('succession.index') }}" class="btn-back"><i class="fa-solid fa-arrow-right"></i> العودة</a>
</div>

@if($errors->any())
    <div class="alert-error">
        <strong>يرجى تصحيح الأخطاء التالية:</strong>
        <ul>
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('succession.store') }}" method="POST">
    @csrf

    <div class="card">
        <h3 class="section-title">معلومات المنصب</h3>
        <div class="form-row">
            <div class="form-group">
                <label for="position">المنصب <span style="color:#E8502F;">*</span></label>
                @if($positions->count() > 0)
                <select id="position" name="position" class="form-control" required>
                    <option value="">-- اختر المنصب --</option>
                    @foreach($positions as $pos)
                        <option value="{{ $pos->id ?? $pos->title }}" {{ old('position') == ($pos->id ?? $pos->title) ? 'selected' : '' }}>{{ $pos->title ?? $pos->name }}</option>
                    @endforeach
                </select>
                @else
                <input type="text" id="position" name="position" class="form-control" value="{{ old('position') }}" placeholder="أدخل اسم المنصب" required>
                @endif
            </div>
            <div class="form-group">
                <label for="current_holder">شاغل المنصب الحالي <span style="color:#E8502F;">*</span></label>
                <select id="current_holder" name="current_holder" class="form-control" required>
                    <option value="">-- اختر الموظف --</option>
                    @foreach($employees as $emp)
                        <option value="{{ $emp->id }}" {{ old('current_holder') == $emp->id ? 'selected' : '' }}>{{ $emp->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <div class="card">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
            <h3 class="section-title" style="margin-bottom:0;">المرشحون للخلافة</h3>
            <button type="button" class="btn-success btn-sm" onclick="addSuccessor()"><i class="fa-solid fa-plus"></i> إضافة مرشح</button>
        </div>

        <div id="successors-container">
            <div class="successor-item">
                <button type="button" class="remove-btn" onclick="removeSuccessor(this)" title="حذف"><i class="fa-solid fa-times"></i></button>
                <div class="form-row">
                    <div class="form-group">
                        <label>الموظف المرشح <span style="color:#E8502F;">*</span></label>
                        <select name="successors[0][employee_id]" class="form-control" required>
                            <option value="">-- اختر الموظف --</option>
                            @foreach($employees as $emp)
                                <option value="{{ $emp->id }}">{{ $emp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>مستوى الجاهزية <span style="color:#E8502F;">*</span></label>
                        <select name="successors[0][readiness]" class="form-control" required>
                            <option value="">-- اختر المستوى --</option>
                            <option value="ready_now">جاهز الآن</option>
                            <option value="ready_1_2">جاهز خلال 1-2 سنة</option>
                            <option value="ready_3_5">جاهز خلال 3-5 سنوات</option>
                            <option value="development">يحتاج تطوير</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>الترتيب</label>
                        <input type="number" name="successors[0][priority]" class="form-control" value="1" min="1">
                    </div>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label>ملاحظات</label>
                    <input type="text" name="successors[0][notes]" class="form-control" placeholder="نقاط القوة والمجالات التي تحتاج تطوير">
                </div>
            </div>
        </div>
    </div>

    <div style="display:flex;gap:10px;">
        <button type="submit" class="btn-primary"><i class="fa-solid fa-save"></i> حفظ خطة التعاقب</button>
        <a href="{{ route('succession.index') }}" class="btn-back">إلغاء</a>
    </div>
</form>

<script>
let successorIndex = 1;
function addSuccessor() {
    const container = document.getElementById('successors-container');
    const employeeOptions = document.querySelector('[name="successors[0][employee_id]"]').innerHTML;
    const item = document.createElement('div');
    item.className = 'successor-item';
    item.innerHTML = `
        <button type="button" class="remove-btn" onclick="removeSuccessor(this)" title="حذف"><i class="fa-solid fa-times"></i></button>
        <div class="form-row">
            <div class="form-group">
                <label>الموظف المرشح <span style="color:#E8502F;">*</span></label>
                <select name="successors[${successorIndex}][employee_id]" class="form-control" required>
                    ${employeeOptions}
                </select>
            </div>
            <div class="form-group">
                <label>مستوى الجاهزية <span style="color:#E8502F;">*</span></label>
                <select name="successors[${successorIndex}][readiness]" class="form-control" required>
                    <option value="">-- اختر المستوى --</option>
                    <option value="ready_now">جاهز الآن</option>
                    <option value="ready_1_2">جاهز خلال 1-2 سنة</option>
                    <option value="ready_3_5">جاهز خلال 3-5 سنوات</option>
                    <option value="development">يحتاج تطوير</option>
                </select>
            </div>
            <div class="form-group">
                <label>الترتيب</label>
                <input type="number" name="successors[${successorIndex}][priority]" class="form-control" value="${successorIndex + 1}" min="1">
            </div>
        </div>
        <div class="form-group" style="margin-bottom:0;">
            <label>ملاحظات</label>
            <input type="text" name="successors[${successorIndex}][notes]" class="form-control" placeholder="نقاط القوة والمجالات التي تحتاج تطوير">
        </div>
    `;
    container.appendChild(item);
    successorIndex++;
}
function removeSuccessor(btn) {
    const container = document.getElementById('successors-container');
    if (container.children.length > 1) {
        btn.closest('.successor-item').remove();
    }
}
</script>
@endsection