@extends('layouts.app')
@section('title', 'تعديل إعدادات الإشعار - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تعديل إعدادات الإشعار</h1>
        <p class="page-subtitle">{{ $setting->label }} ({{ $setting->key }})</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('notifications.settings') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

@if($errors->any())
<div style="background: var(--danger-light); border: 1px solid var(--danger); padding: 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; color: var(--danger)">
    <ul style="margin:0; padding-right: 1.2rem">
        @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach
    </ul>
</div>
@endif

<form method="POST" action="{{ route('notifications.update', $setting) }}">
    @csrf @method('PUT')

    <div class="card" style="max-width: 900px">
        <div class="card-header"><h3><i class="fas fa-cog"></i> الإعدادات الأساسية</h3></div>
        <div class="card-body">
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label required">قناة الإرسال</label>
                    <select name="channel" class="form-select" required>
                        <option value="email" {{ old('channel', $setting->channel) === 'email' ? 'selected' : '' }}>بريد إلكتروني</option>
                        <option value="database" {{ old('channel', $setting->channel) === 'database' ? 'selected' : '' }}>إشعار داخلي</option>
                        <option value="both" {{ old('channel', $setting->channel) === 'both' ? 'selected' : '' }}>بريد + إشعار داخلي</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">الحالة</label>
                    <div style="padding-top: 0.5rem">
                        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" value="1" {{ old('is_active', $setting->is_active) ? 'checked' : '' }} style="width: 18px; height: 18px; accent-color: var(--primary)">
                            <span>تفعيل هذا الإشعار</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card" style="max-width: 900px; margin-top: 1.5rem">
        <div class="card-header"><h3><i class="fas fa-envelope-open-text"></i> قالب الرسالة</h3></div>
        <div class="card-body">
            <div class="form-group">
                <label class="form-label">عنوان الرسالة (Subject)</label>
                <input type="text" name="subject_template" value="{{ old('subject_template', $setting->subject_template) }}" class="form-input" placeholder="مثال: طلب إجازة جديد من {employee_name}">
                <p class="form-hint">اتركه فارغاً لاستخدام العنوان الافتراضي</p>
            </div>
            <div class="form-group">
                <label class="form-label">نص الرسالة (Body)</label>
                <textarea name="body_template" class="form-textarea" rows="6" placeholder="اكتب نص الرسالة مع استخدام المتغيرات أدناه...">{{ old('body_template', $setting->body_template) }}</textarea>
                <p class="form-hint">اتركه فارغاً لاستخدام القالب الافتراضي</p>
            </div>
            @if(!empty($placeholders))
            <div style="background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-top: 0.5rem">
                <label style="font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; display: block">
                    <i class="fas fa-code"></i> المتغيرات المتاحة:
                </label>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem">
                    @foreach($placeholders as $placeholder)
                        <code style="background: var(--surface); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.85rem; border: 1px solid var(--border)">{{ $placeholder }}</code>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>

    <div class="card" style="max-width: 900px; margin-top: 1.5rem">
        <div class="card-header"><h3><i class="fas fa-users"></i> المستلمون</h3></div>
        <div class="card-body">
            <div class="form-group">
                <label class="form-label">الأدوار</label>
                <div style="display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.5rem 0">
                    @foreach(['admin' => 'مدير النظام', 'hr_manager' => 'مدير الموارد البشرية', 'manager' => 'مدير القسم', 'employee' => 'الموظف المعني'] as $role => $roleLabel)
                        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer">
                            <input type="checkbox" name="recipients[]" value="{{ $role }}" {{ in_array($role, $roles) ? 'checked' : '' }} style="width: 16px; height: 16px; accent-color: var(--primary)">
                            <span>{{ $roleLabel }}</span>
                        </label>
                    @endforeach
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">عناوين بريد إضافية</label>
                <input type="text" name="extra_emails" value="{{ implode(', ', $extraEmails) }}" class="form-input" dir="ltr" placeholder="email1@example.com, email2@example.com">
                <p class="form-hint">أدخل عناوين البريد مفصولة بفاصلة (,)</p>
            </div>
        </div>
    </div>

    <div class="form-actions" style="max-width: 900px; margin-top: 1rem">
        <button type="submit" class="btn btn-primary btn-lg"><i class="fas fa-save"></i> حفظ الإعدادات</button>
        <a href="{{ route('notifications.settings') }}" class="btn btn-ghost btn-lg">إلغاء</a>
    </div>
</form>
@endsection