@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.formscss')
    <style>
        .section-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .section-header h5 {
            margin: 0;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .form-section {
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            border: 1px solid #e9ecef;
        }

        .form-section-title {
            font-weight: 600;
            color: #495057;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #667eea;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .required-badge {
            background: #dc3545;
            color: white;
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-weight: 600;
        }

        .optional-badge {
            background: #6c757d;
            color: white;
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-weight: 600;
        }

        .info-box {
            background: #e7f3ff;
            border-left: 4px solid #2196F3;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
        }

        .info-box strong {
            color: #1976D2;
        }

        .form-label {
            font-weight: 500;
            color: #495057;
            margin-bottom: 0.5rem;
        }

        .form-control,
        .form-select {
            border-radius: 6px;
            border: 1px solid #ced4da;
            transition: all 0.3s;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            padding: 0.6rem 2rem;
            border-radius: 6px;
            font-weight: 600;
            transition: transform 0.2s;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            border-radius: 6px;
            padding: 0.6rem 2rem;
        }

        .target-type-card {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .target-type-card:hover {
            border-color: #667eea;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
        }

        .target-type-card.active {
            border-color: #667eea;
            background: #f0f4ff;
        }

        .target-type-card svg {
            width: 2rem;
            height: 2rem;
            color: #667eea;
            margin-bottom: 0.5rem;
        }
    </style>
@endsection

@include('admin.helper.tittle', ['title' => 'إنشاء إشعار جديد'])

@section('content')
    <div class="row">
        <div class="col-12">
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    <strong>⚠️ يوجد أخطاء:</strong>
                    <ul class="mb-0 mt-2">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    {{ session('error') }}
                </div>
            @endif

            <div class="section-header">
                <h5>
                    <x-lucide-bell width="20" height="20" />
                    إنشاء إشعار جديد
                </h5>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-body p-4">
                    <form id="notification-form" method="POST" action="{{ route('admin.notifications.store') }}">
                        @csrf

                        <!-- Basic Information -->
                        <div class="form-section">
                            <div class="form-section-title">
                                📝 معلومات الإشعار الأساسية
                                <span class="required-badge">مطلوب</span>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">
                                        عنوان الإشعار <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="title" class="form-control" value="{{ old('title') }}"
                                        placeholder="مثال: تحديث مهم في النظام" required>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">نوع الإشعار</label>
                                    <select name="type" class="form-select" required>
                                        <option value="info" @selected(old('type') === 'info')>ℹ️ معلومة</option>
                                        <option value="warning" @selected(old('type') === 'warning')>⚠️ تحذير</option>
                                        <option value="error" @selected(old('type') === 'error')>❌ خطأ</option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">الأهمية</label>
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" value="1" name="is_required"
                                            id="is_required" @checked(old('is_required'))>
                                        <label class="form-check-label" for="is_required">
                                            🔴 إشعار إلزامي
                                        </label>
                                    </div>
                                    <small class="text-muted">يجب قراءته قبل المتابعة</small>
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label">
                                        محتوى الإشعار <span class="text-danger">*</span>
                                    </label>
                                    <textarea name="content" id="elm1" class="form-control" rows="8"
                                        placeholder="اكتب محتوى الإشعار بالتفصيل...">{{ old('content') }}</textarea>
                                    <small class="text-muted">
                                        💡 يمكنك استخدام التنسيق النصي (غامق، مائل، قوائم، إلخ)
                                    </small>
                                    <div id="content_error" class="text-danger mt-1 small" style="display:none;">
                                        ⚠️ محتوى الإشعار مطلوب
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Target Selection -->
                        <div class="form-section">
                            <div class="form-section-title">
                                🎯 الجهة المستهدفة
                                <span class="required-badge">مطلوب</span>
                            </div>

                            <div class="info-box">
                                <strong>💡 اختر من سيستلم هذا الإشعار:</strong>
                                <ul class="mb-0 mt-2">
                                    <li><strong>مستخدم محدد:</strong> سيصل الإشعار لمستخدم واحد فقط (سواء كان مستخدم عادي أو
                                        تاجر)</li>
                                    <li><strong>تاجر محدد:</strong> سيصل لحساب تاجر معين</li>
                                    <li><strong>كل المستخدمين:</strong> إرسال جماعي لجميع المستخدمين</li>
                                    <li><strong>كل التجار:</strong> إرسال جماعي لجميع التجار</li>
                                </ul>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label class="form-label">نوع الجهة <span class="text-danger">*</span></label>
                                    <select name="target_type" id="target_type" class="form-select" required>
                                        <option value="user" @selected(old('target_type') === 'user')>
                                            👤 مستخدم محدد (عادي أو تاجر)
                                        </option>
                                        <option value="vendor" @selected(old('target_type') === 'vendor')>
                                            🏪 تاجر محدد
                                        </option>
                                        <option value="broadcast_users" @selected(old('target_type') === 'broadcast_users')>
                                            📢 كل المستخدمين
                                        </option>
                                        <option value="broadcast_vendors" @selected(old('target_type') === 'broadcast_vendors')>
                                            📢 كل التجار
                                        </option>
                                        <option value="broadcast_users_without_vendor_and_vendors"
                                            @selected(old('target_type') === 'broadcast_users_without_vendor_and_vendors')>
                                            📢 مستخدمون بلا تاجر + كل التجار
                                        </option>
                                    </select>
                                </div>

                                <div class="col-md-6" id="target_user_wrapper" style="display:none;">
                                    <label class="form-label">اختر المستخدم</label>
                                    <select name="target_id" id="target_user_select" class="form-select select2"
                                        data-placeholder="ابحث عن مستخدم...">
                                        <option value="">-- اختر مستخدم --</option>
                                        @foreach ($users as $u)
                                            <option value="{{ $u['id'] }}" @selected(old('target_type') === 'user' && (int) old('target_id') === $u['id'])>
                                                {{ $u['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">
                                        💡 القائمة تشمل جميع المستخدمين (العاديين والتجار)
                                    </small>
                                </div>

                                <div class="col-md-6" id="target_vendor_wrapper" style="display:none;">
                                    <label class="form-label">اختر التاجر</label>
                                    <select name="target_id" id="target_vendor_select" class="form-select select2"
                                        data-placeholder="ابحث عن تاجر...">
                                        <option value="">-- اختر تاجر --</option>
                                        @foreach ($vendors as $v)
                                            <option value="{{ $v['id'] }}" @selected(old('target_type') === 'vendor' && (int) old('target_id') === $v['id'])>
                                                {{ $v['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex gap-2 justify-content-end mt-4">
                            <a href="{{ route('admin.notifications.index') }}" class="btn btn-secondary">
                            <x-lucide-arrow-left width="20" height="20" /> رجوع
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <x-lucide-check-circle width="20" height="20" /> حفظ الإشعار
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.formscripts')
    <script>
        function toggleTargetSelects() {
            const type = document.getElementById('target_type').value;
            const userWrap = document.getElementById('target_user_wrapper');
            const vendorWrap = document.getElementById('target_vendor_wrapper');
            const userSelect = document.getElementById('target_user_select');
            const vendorSelect = document.getElementById('target_vendor_select');
            // Reset disabled state
            userSelect.disabled = true;
            vendorSelect.disabled = true;
            if (type === 'user') {
                userWrap.style.display = 'block';
                vendorWrap.style.display = 'none';
                userSelect.disabled = false;
            } else if (type === 'vendor') {
                userWrap.style.display = 'none';
                vendorWrap.style.display = 'block';
                vendorSelect.disabled = false;
            } else {
                userWrap.style.display = 'none';
                vendorWrap.style.display = 'none';
                userSelect.value = '';
                vendorSelect.value = '';
            }
        }
        document.getElementById('target_type').addEventListener('change', toggleTargetSelects);
        toggleTargetSelects();

        // تفعيل select2 إن وجد (ممكن يكون محمل في layout)
        document.addEventListener('DOMContentLoaded', function() {
            if (window.jQuery && $.fn.select2) {
                $('.select2').select2({
                    width: '100%'
                });
            }
        });

        // ضبط اتجاه المحرر بعد تحميله (استخدام نفس الـ TinyMCE المحلي)
        document.addEventListener('DOMContentLoaded', function() {
            let attempts = 0;
            const intv = setInterval(function() {
                if (window.tinymce) {
                    const ed = tinymce.get('elm1');
                    if (ed) {
                        try {
                            ed.getBody().setAttribute('dir', 'rtl');
                            ed.getBody().style.textAlign = 'right';
                        } catch (e) {}
                        clearInterval(intv);
                    }
                }
                if (++attempts > 20) {
                    clearInterval(intv);
                }
            }, 250);
        });

        // تحقق مخصص لأن الـ textarea مخفية بواسطة المحرر فلا يعمل required الأصلي
        (function() {
            const form = document.getElementById('notification-form');
            form.addEventListener('submit', function(e) {
                if (!window.tinymce) {
                    return;
                }
                const editor = tinymce.get('elm1');
                if (!editor) {
                    return;
                }
                const rawHtml = editor.getContent();
                const plain = editor.getContent({
                        format: 'text'
                    })
                    .replace(/\u00a0/g, '')
                    .replace(/&nbsp;/g, '')
                    .replace(/\s+/g, '')
                    .trim();
                if (plain.length === 0) {
                    e.preventDefault();
                    document.getElementById('content_error').style.display = 'block';
                    editor.focus();
                    return false;
                } else {
                    document.getElementById('content_error').style.display = 'none';
                }
                // تأكد من دفع المحتوى للـ textarea قبل الإرسال
                tinymce.triggerSave();
            });
        })();
    </script>
@endsection