@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: 20px;
        margin-bottom: 24px;
    }
    .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;
    }
    .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;
    }
    .text-danger { color: #dc2626; font-size: 13px; margin-top: 4px; }
    .conditional-field {
        display: none;
    }
    .conditional-field.active {
        display: block;
    }
</style>
@endpush

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

<div class="page-header">
    <h1><i class="fa-solid fa-paper-plane" style="color:#E8502F;margin-left:8px;"></i> إرسال إشعار</h1>
    <a href="{{ route('internal-notifications.index') }}" class="btn-back"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
</div>

@if($errors->any())
    <div class="alert-error">
        <ul style="margin:0;padding-right:18px;">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="card">
    <form action="{{ route('internal-notifications.store') }}" method="POST">
        @csrf

        <div class="form-group">
            <label for="title">عنوان الإشعار <span style="color:#dc2626;">*</span></label>
            <input type="text" name="title" id="title" class="form-control" value="{{ old('title') }}" required>
            @error('title') <div class="text-danger">{{ $message }}</div> @enderror
        </div>

        <div class="form-group">
            <label for="message">نص الإشعار <span style="color:#dc2626;">*</span></label>
            <textarea name="message" id="message" class="form-control" rows="4" required>{{ old('message') }}</textarea>
            @error('message') <div class="text-danger">{{ $message }}</div> @enderror
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="type">النوع <span style="color:#dc2626;">*</span></label>
                <select name="type" id="type" class="form-control" required>
                    <option value="info" {{ old('type') === 'info' ? 'selected' : '' }}>معلومات</option>
                    <option value="warning" {{ old('type') === 'warning' ? 'selected' : '' }}>تحذير</option>
                    <option value="success" {{ old('type') === 'success' ? 'selected' : '' }}>نجاح</option>
                    <option value="danger" {{ old('type') === 'danger' ? 'selected' : '' }}>تنبيه</option>
                </select>
            </div>
            <div class="form-group">
                <label for="priority">الأولوية <span style="color:#dc2626;">*</span></label>
                <select name="priority" id="priority" class="form-control" required>
                    <option value="low" {{ old('priority') === 'low' ? 'selected' : '' }}>منخفضة</option>
                    <option value="normal" {{ old('priority', 'normal') === 'normal' ? 'selected' : '' }}>عادية</option>
                    <option value="high" {{ old('priority') === 'high' ? 'selected' : '' }}>عالية</option>
                    <option value="urgent" {{ old('priority') === 'urgent' ? 'selected' : '' }}>عاجلة</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="target">الجهة المستهدفة <span style="color:#dc2626;">*</span></label>
            <select name="target" id="target" class="form-control" required onchange="toggleTargetFields()">
                <option value="all" {{ old('target') === 'all' ? 'selected' : '' }}>الجميع</option>
                <option value="department" {{ old('target') === 'department' ? 'selected' : '' }}>قسم محدد</option>
                <option value="specific" {{ old('target') === 'specific' ? 'selected' : '' }}>موظفين محددين</option>
            </select>
        </div>

        <div id="department-field" class="form-group conditional-field">
            <label for="department_id">القسم</label>
            <select name="department_id" id="department_id" class="form-control">
                <option value="">اختر القسم...</option>
                @foreach($departments as $dept)
                    <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                @endforeach
            </select>
        </div>

        <div id="employees-field" class="form-group conditional-field">
            <label for="employee_ids">الموظفين</label>
            <select name="employee_ids[]" id="employee_ids" class="form-control" multiple style="min-height:120px;">
                @foreach($employees as $emp)
                    <option value="{{ $emp->id }}">{{ $emp->name ?? $emp->id }}</option>
                @endforeach
            </select>
            <span style="font-size:12px;color:#94a3b8;margin-top:4px;display:block;">اضغط Ctrl للاختيار المتعدد</span>
        </div>

        <div style="display:flex;gap:10px;margin-top:24px;">
            <button type="submit" class="btn-primary"><i class="fa-solid fa-paper-plane"></i> إرسال الإشعار</button>
            <a href="{{ route('internal-notifications.index') }}" class="btn-back">إلغاء</a>
        </div>
    </form>
</div>

<script>
function toggleTargetFields() {
    var target = document.getElementById('target').value;
    document.getElementById('department-field').className = 'form-group conditional-field' + (target === 'department' ? ' active' : '');
    document.getElementById('employees-field').className = 'form-group conditional-field' + (target === 'specific' ? ' active' : '');
}
document.addEventListener('DOMContentLoaded', toggleTargetFields);
</script>
@endsection