@extends('layouts.app')
@section('content')
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- Flatpickr RTL (optional for Arabic) -->
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css">
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="text-primary font-weight-bold"><i class="fas fa-paper-plane mr-2"></i> الإشعارات الجماعية (Push Notifications)</h1>
            </div>
        </div>
    </div>
</section>
<div class="content px-3">
    @if (session('success'))
        <div class="alert alert-success shadow-sm rounded">
            <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger shadow-sm rounded">
            <i class="fas fa-exclamation-triangle mr-2"></i> {{ session('error') }}
        </div>
    @endif
    <div class="row">
        <!-- Form Section -->
        <div class="col-lg-7 mb-4">
            <div class="card shadow-sm border-0" style="border-top: 3px solid #007bff;">
                <div class="card-header bg-white">
                    <h5 class="card-title text-primary font-weight-bold mb-0">
                        <i class="fas fa-edit mr-1"></i> صياغة الإشعار
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('send.bulk.notifications') }}" method="POST" id="notification-form">
                        @csrf
                        <div class="form-group mb-4">
                            <label for="topics" class="font-weight-bold">اختر الفئة المستهدفة <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light"><i class="fas fa-users"></i></span>
                                </div>
                                <select name="topics" id="topics" class="form-control" required>
                                    <option value="">-- اختر الفئة --</option>
                                    <option value="general">جميع المستخدمين</option>
                                    <option value="customers">زبائن فقط</option>
                                    <option value="hosts">أصحاب العقارات فقط</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group mb-4">
                            <label for="title" class="font-weight-bold">عنوان الإشعار <span class="text-danger">*</span></label>
                            <input type="text" name="title" id="title" class="form-control form-control-lg" placeholder="مثال: خصم خاص لك!" required>
                        </div>
                        <div class="form-group mb-4 emoji-picker-container">
                            <label for="body" class="font-weight-bold">محتوى الإشعار <span class="text-danger">*</span></label>
                            <textarea name="body" id="body" class="form-control" rows="5" placeholder="اكتب رسالتك هنا..." required></textarea>
                            <button type="button" class="emoji-toggle" id="emoji-btn" title="إضافة إيموجي">😀</button>
                            <emoji-picker id="emoji-picker"></emoji-picker>
                        </div>
                        <div class="form-group mb-5">
                            <label for="scheduled_at" class="font-weight-bold">جدولة الإرسال (اختياري)</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light"><i class="fas fa-calendar-alt"></i></span>
                                </div>
                                <input type="text" name="scheduled_at" id="scheduled_at" class="form-control bg-white" placeholder="اترك الحقل فارغاً لإرسال الإشعار فوراً">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" id="clear-date" title="مسح التاريخ"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                            <small class="form-text text-muted"><i class="fas fa-info-circle"></i> يمكنك تحديد تاريخ ووقت لإرسال الإشعار لاحقاً بشكل آلي.</small>
                        </div>
                        <div class="d-flex justify-content-between align-items-center bg-light p-3 rounded">
                            <button type="button" name="action" value="send" class="btn btn-primary btn-lg px-4" id="send-btn">
                                <i class="fas fa-paper-plane mr-1"></i> إرسال الآن
                            </button>
                            <button type="button" name="action" value="schedule" class="btn btn-success btn-lg px-4" id="schedule-btn">
                                <i class="fas fa-clock mr-1"></i> جدولة الإشعار
                            </button>
                        </div>
                        <input type="hidden" name="action" id="form-action-input" value="send">
                    </form>
                </div>
            </div>
        </div>
        <!-- Preview Section -->
        <div class="col-lg-5 mb-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white text-center border-0 pt-4">
                    <h5 class="card-title w-100 text-muted font-weight-bold mb-0">
                        <i class="fas fa-mobile-alt mr-1"></i> المعاينة الحية (Live Preview)
                    </h5>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center bg-white pb-4">
                    <div class="mobile-mockup">
                        <div class="mobile-notch"></div>
                        <div class="mobile-header">
                            شاشة هاتف المستخدم
                        </div>
                        <div class="mobile-body">
                            <div class="notification-bubble" id="preview-bubble">
                                <div class="notification-header">
                                    <div class="notification-icon"></div>
                                    <span class="notification-app-name">توريستا</span>
                                    <span class="notification-time">الآن</span>
                                </div>
                                <div class="notification-title" id="preview-title">عنوان الإشعار</div>
                                <div class="notification-body" id="preview-body">محتوى الإشعار سيظهر هنا...</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Scheduled Notifications Table -->
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white d-flex align-items-center">
            <h3 class="card-title text-success font-weight-bold m-0">
                <i class="fas fa-list-alt mr-1"></i> الإشعارات المجدولة القادمة
            </h3>
        </div>
        <div class="card-body p-0 table-responsive">
            @php
                function topicName($topic) {
                    return match($topic) {
                        'general' => '<span class="badge badge-primary px-2 py-1">جميع المستخدمين</span>',
                        'customers' => '<span class="badge badge-info px-2 py-1">زبائن</span>',
                        'hosts' => '<span class="badge badge-warning px-2 py-1">أصحاب العقارات</span>',
                        default => '<span class="badge badge-secondary px-2 py-1">'.$topic.'</span>',
                    };
                }
            @endphp
            @if(isset($scheduledNotifications) && $scheduledNotifications->count() > 0)
                <table class="table table-hover table-striped mb-0 text-center">
                    <thead class="thead-light">
                        <tr>
                            <th width="20%">العنوان</th>
                            <th width="35%">المحتوى</th>
                            <th width="15%">الفئة</th>
                            <th width="15%">وقت الإرسال المجدول</th>
                            <th width="15%">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($scheduledNotifications as $notification)
                            <tr>
                                <td class="align-middle font-weight-bold">{{ $notification->title }}</td>
                                <td class="align-middle text-right text-muted small">{!! nl2br(e($notification->body)) !!}</td>
                                <td class="align-middle">{!! topicName($notification->topic) !!}</td>
                                <td class="align-middle" dir="ltr">
                                    <span class="badge badge-light border text-dark p-2">
                                        <i class="fas fa-clock text-success mr-1"></i>
                                        {{ \Carbon\Carbon::parse($notification->scheduled_at)->format('Y-m-d H:i') }}
                                    </span>
                                </td>
                                <td class="align-middle">
                                    <div class="btn-group btn-group-sm">
                                        <button
                                            type="button"
                                            class="btn btn-outline-warning edit-btn"
                                            data-id="{{ $notification->id }}"
                                            data-title="{{ $notification->title }}"
                                            data-body="{{ $notification->body }}"
                                            data-scheduled_at="{{ \Carbon\Carbon::parse($notification->scheduled_at)->format('Y-m-d H:i') }}"
                                            data-topic="{{ $notification->topic }}"
                                            title="تعديل"
                                        ><i class="fas fa-edit"></i></button>
                                        <form action="{{ route('notifications.destroy', $notification->id) }}" method="POST" class="d-inline" onsubmit="return confirm('هل أنت متأكد من حذف هذا الإشعار المجدول؟')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger" title="حذف"><i class="fas fa-trash"></i></button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="text-center py-5 text-muted">
                    <i class="fas fa-calendar-times fa-3x mb-3 text-light"></i>
                    <h5>لا توجد أي إشعارات مجدولة حالياً.</h5>
                </div>
            @endif
        </div>
    </div>
</div>
<!-- Edit Scheduled Notification Modal -->
<div class="modal fade" id="editNotificationModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <form method="POST" id="edit-notification-form">
        @csrf
        @method('PUT')
        <div class="modal-content border-0 shadow">
          <div class="modal-header bg-warning">
            <h5 class="modal-title text-dark font-weight-bold"><i class="fas fa-edit mr-2"></i> تعديل الإشعار المجدول</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="إغلاق">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body bg-light">
                <div class="form-group mb-3">
                    <label class="font-weight-bold">الفئة المستهدفة</label>
                    <select name="topic" id="edit-topic" class="form-control" required>
                        <option value="general">جميع المستخدمين</option>
                        <option value="customers">زبائن</option>
                        <option value="hosts">أصحاب العقارات</option>
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label class="font-weight-bold">عنوان الإشعار</label>
                    <input type="text" name="title" id="edit-title" class="form-control" required>
                </div>
                <div class="form-group mb-3">
                    <label class="font-weight-bold">محتوى الإشعار</label>
                    <textarea name="body" id="edit-body" class="form-control" rows="4" required></textarea>
                </div>
                <div class="form-group mb-3">
                    <label class="font-weight-bold">تاريخ ووقت الجدولة الجديد</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-white"><i class="fas fa-calendar-alt"></i></span>
                        </div>
                        <input type="text" name="scheduled_at" id="edit-scheduled_at" class="form-control bg-white" required>
                    </div>
                </div>
          </div>
          <div class="modal-footer bg-white">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
            <button type="submit" class="btn btn-warning font-weight-bold"><i class="fas fa-save mr-1"></i> حفظ التعديلات</button>
          </div>
        </div>
    </form>
  </div>
</div>
<!-- JS Libraries -->
<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- Flatpickr Arabic Locale -->
<script src="https://npmcdn.com/flatpickr/dist/l10n/ar.js"></script>
<!-- Emoji Picker Element -->
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.21.3/index.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // --- 1. Live Preview Logic ---
        const titleInput = document.getElementById('title');
        const bodyInput = document.getElementById('body');
        const previewTitle = document.getElementById('preview-title');
        const previewBody = document.getElementById('preview-body');
        const previewBubble = document.getElementById('preview-bubble');
        function updatePreview() {
            const t = titleInput.value.trim();
            const b = bodyInput.value.trim();
            previewTitle.textContent = t || 'عنوان الإشعار';
            previewBody.textContent = b || 'محتوى الإشعار سيظهر هنا...';
            if (t || b) {
                previewBubble.classList.add('show');
            } else {
                previewBubble.classList.remove('show');
            }
        }
        titleInput.addEventListener('input', updatePreview);
        bodyInput.addEventListener('input', updatePreview);
        // --- 2. Flatpickr Setup ---
        const fpConfig = {
            enableTime: true,
            dateFormat: "Y-m-d H:i",
            minDate: "today",
            locale: "ar",
            time_24hr: false
        };
        const fpMain = flatpickr("#scheduled_at", fpConfig);
        const fpEdit = flatpickr("#edit-scheduled_at", fpConfig);
        document.getElementById('clear-date').addEventListener('click', function() {
            fpMain.clear();
            checkButtonsState();
        });
        // --- 3. Emoji Picker Logic ---
        const emojiBtn = document.getElementById('emoji-btn');
        const emojiPicker = document.getElementById('emoji-picker');
        emojiBtn.addEventListener('click', () => {
            emojiPicker.classList.toggle('visible');
        });
        emojiPicker.addEventListener('emoji-click', event => {
            const emoji = event.detail.unicode;
            const start = bodyInput.selectionStart;
            const end = bodyInput.selectionEnd;
            const text = bodyInput.value;
            bodyInput.value = text.substring(0, start) + emoji + text.substring(end);
            // تحديث المعاينة بعد إضافة الإيموجي
            updatePreview();
            // إخفاء الـ Picker بعد الاختيار
            emojiPicker.classList.remove('visible');
            bodyInput.focus();
        });
        // إخفاء الإيموجي عند النقر خارجه
        document.addEventListener('click', (event) => {
            if (!emojiPicker.contains(event.target) && event.target !== emojiBtn) {
                emojiPicker.classList.remove('visible');
            }
        });
        // --- 4. Button States & Validation ---
        const sendBtn = document.getElementById('send-btn');
        const scheduleBtn = document.getElementById('schedule-btn');
        const formActionInput = document.getElementById('form-action-input');
        const form = document.getElementById('notification-form');
        const dateInput = document.getElementById('scheduled_at');
        function checkButtonsState() {
            if (dateInput.value !== "") {
                sendBtn.style.opacity = '0.5';
                sendBtn.style.pointerEvents = 'none';
                scheduleBtn.classList.remove('btn-outline-success');
                scheduleBtn.classList.add('btn-success');
                scheduleBtn.style.transform = 'scale(1.05)';
            } else {
                sendBtn.style.opacity = '1';
                sendBtn.style.pointerEvents = 'auto';
                scheduleBtn.classList.remove('btn-success');
                scheduleBtn.classList.add('btn-outline-success');
                scheduleBtn.style.transform = 'scale(1)';
            }
        }
        dateInput.addEventListener('change', checkButtonsState);
        checkButtonsState(); // Initial check
        // --- 5. Submit Handling with SweetAlert2 ---
        sendBtn.addEventListener('click', function(e) {
            e.preventDefault();
            if(!form.checkValidity()) { form.reportValidity(); return; }
            const topicText = document.getElementById('topics').options[document.getElementById('topics').selectedIndex].text;
            Swal.fire({
                title: 'تأكيد الإرسال الفوري',
                html: `سيتم إرسال الإشعار <strong>الآن</strong> للفئة: <br><span class="badge badge-primary mt-2 p-2">${topicText}</span>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#007bff',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'نعم، أرسل الآن',
                cancelButtonText: 'تراجع'
            }).then((result) => {
                if (result.isConfirmed) {
                    formActionInput.value = 'send';
                    form.submit();
                }
            });
        });
        scheduleBtn.addEventListener('click', function(e) {
            e.preventDefault();
            if(!form.checkValidity()) { form.reportValidity(); return; }
            if (dateInput.value === "") {
                Swal.fire('تنبيه', 'يرجى تحديد تاريخ ووقت الجدولة أولاً.', 'warning');
                return;
            }
            const topicText = document.getElementById('topics').options[document.getElementById('topics').selectedIndex].text;
            Swal.fire({
                title: 'تأكيد الجدولة',
                html: `سيتم جدولة الإشعار ليتم إرساله بتاريخ: <strong>${dateInput.value}</strong><br>للفئة: <span class="badge badge-success mt-2 p-2">${topicText}</span>`,
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'نعم، تأكيد الجدولة',
                cancelButtonText: 'تراجع'
            }).then((result) => {
                if (result.isConfirmed) {
                    formActionInput.value = 'schedule';
                    form.submit();
                }
            });
        });
        // --- 6. Edit Modal Setup ---
        const editButtons = document.querySelectorAll('.edit-btn');
        editButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                document.getElementById('edit-title').value = this.getAttribute('data-title');
                document.getElementById('edit-body').value = this.getAttribute('data-body');
                document.getElementById('edit-topic').value = this.getAttribute('data-topic');
                fpEdit.setDate(this.getAttribute('data-scheduled_at'));
                document.getElementById('edit-notification-form').action = '/notifications/' + id;
                $('#editNotificationModal').modal('show'); // Bootstrap 4 syntax
            });
        });
    });
</script>
@endsection