@extends('admin::layouts.master')

@php
    $pageTitle = 'نوتیفیکیشن‌ها';
@endphp

@section('title', 'لیست نوتیفیکیشن‌ها')

@push('css')
    <style>
        .custom-multiselect {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            max-height: 200px;
            overflow-y: auto;
            background: white;
        }

        .custom-multiselect .user-option {
            padding: 0.5rem 1rem;
            border-bottom: 1px solid #f8f9fa;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .custom-multiselect .user-option:hover {
            background-color: #f8f9fa;
        }

        .custom-multiselect .user-option.selected {
            background-color: #007bff;
            color: white;
        }

        .custom-multiselect .user-option input[type="checkbox"] {
            margin-left: 0.5rem;
        }

        .selected-users-badge {
            display: inline-block;
            background: #007bff;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            margin: 0.25rem;
            font-size: 0.875rem;
        }

        .selected-users-container {
            min-height: 40px;
            border: 1px dashed #dee2e6;
            border-radius: 0.375rem;
            padding: 0.5rem;
            margin-bottom: 1rem;
            background: #f8f9fa;
        }

        .search-users {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            width: 100%;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">پنل</a></li>
                        <li class="breadcrumb-item active">نوتیفیکیشن‌ها</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- محتوای اصلی (همان کد قبلی) -->
    <div id="notificationList">
        <div class="row g-3 mb-3">
            <div class="col-xxl-3">
                <div class="search-box">
                    <form action="{{ route('admin.notifications.index') }}" method="GET" id="searchForm">
                        <input type="text" class="form-control search" name="q" value="{{ request('q') }}"
                               placeholder="جستجو عنوان یا پیام...">
                        <i class="ri-search-line search-icon"></i>
                    </form>
                </div>
            </div>

            <div class="col-xxl-3">
                <input type="text" class="form-control" name="user" value="{{ request('user') }}"
                       placeholder="جستجو ایمیل یا شماره موبایل کاربر">
            </div>

            <div class="col-xxl-2">
                <select class="form-select" name="status" form="searchForm">
                    <option value="">همه وضعیت‌ها</option>
                    <option value="unread" {{ request('status') == 'unread' ? 'selected' : '' }}>خوانده نشده</option>
                    <option value="read" {{ request('status') == 'read' ? 'selected' : '' }}>خوانده شده</option>
                </select>
            </div>

            <div class="col-xxl-auto col-sm-6 ms-auto">
                <div class="hstack gap-2">
                    <button type="submit" class="btn btn-primary" form="searchForm">
                        <i class="bi bi-funnel align-baseline me-1"></i> اعمال فیلتر
                    </button>

                    <button type="button" class="btn btn-success" data-bs-toggle="modal"
                            data-bs-target="#createNotificationModal">
                        <i class="bi bi-plus-circle align-baseline me-1"></i> نوتیف جدید
                    </button>

                    @if (request()->hasAny(['q','status','user']))
                        <a href="{{ route('admin.notifications.index') }}" class="btn btn-outline-danger"
                           title="حذف فیلترها">
                            <i class="bi bi-arrow-clockwise align-baseline me-1"></i> حذف فیلترها
                        </a>
                    @endif
                </div>
            </div>
            <!-- نمایش errors -->
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        <!-- نمایش وضعیت فیلترهای فعال برای نوتیفیکیشن‌ها -->
        @if (request()->hasAny(['q', 'status', 'user']))
            <div class="row mb-3">
                <div class="col-12">
                    <div class="alert alert-info alert-dismissible fade show py-2" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-funnel me-2"></i>
                            <div class="flex-grow-1">
                                <strong>فیلترهای فعال:</strong>
                                @if (request('q'))
                                    <span class="badge bg-primary me-1">جستجو: "{{ request('q') }}"</span>
                                @endif
                                @if (request('status'))
                                    @php
                                        $statusLabels = [
                                            'read' => 'خوانده شده',
                                            'unread' => 'خوانده نشده',
                                        ];
                                    @endphp
                                    <span class="badge bg-success me-1">وضعیت:
                                {{ $statusLabels[request('status')] ?? request('status') }}</span>
                                @endif
                                @if (request('user'))
                                    <span class="badge bg-warning me-1">کاربر: "{{ request('user') }}"</span>
                                @endif
                            </div>
                            <a href="{{ route('admin.notifications.index') }}" class="btn-close" aria-label="بستن"></a>
                        </div>
                    </div>
                </div>
            </div>
        @endif


        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-custom align-middle table-borderless table-nowrap">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>عنوان</th>
                                    <th>عمومی</th>
                                    <th>کانالها</th>
                                    <th>مختص به مدیر</th>
                                    <th>پیام</th>
                                    <th>وضعیت</th>
                                    <th>تاریخ ایجاد</th>
                                    <th>عملیات</th>
                                </tr>
                                </thead>
                                <tbody class="list form-check-all">
                                @forelse($notifications as $notification)
                                    <tr class="{{ $notification->is_read ? '' : 'table-danger' }}">
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $notification->title }}</td>
                                        <td>
                                            @if($notification->send_email)
                                                <span class="badge bg-danger">ایمیل</span>
                                            @endif

                                            @if($notification->send_sms)
                                                <span class="badge bg-warning">پیامک</span>
                                            @endif

                                            <span class="badge bg-primary">درون‌سایتی</span>
                                        </td>

                                        <td>
                                            @if($notification->for_admin && !$notification->is_public)
                                                <span class="badge bg-danger">فقط مدیران</span>
                                            @elseif(!$notification->for_admin && $notification->is_public)
                                                <span class="badge bg-info">همه کاربران</span>
                                            @else
                                                <span class="badge bg-info">کاربران خاص</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($notification->for_admin)
                                                <span class="badge bg-info">بله</span>
                                            @else
                                                <span class="badge bg-secondary">خیر</span>
                                            @endif
                                        </td>
                                        <td>{{ Str::limit($notification->message, 80) }}</td>
                                        <td>
                                            @if ($notification->is_read)
                                                <span class="badge bg-success-subtle text-success">خوانده شده</span>
                                            @else
                                                <span class="badge  text-white" style="background-color: red">خوانده نشده</span>
                                            @endif
                                        </td>
                                        <td>{{ $notification->created_at->diffForHumans() }}</td>
                                        <td>
                                            <div class="dropdown position-static">
                                                <button class="btn btn-subtle-secondary btn-sm btn-icon" role="button"
                                                        data-bs-toggle="dropdown">
                                                    <i class="bi bi-three-dots-vertical"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end">
                                                    @if(!$notification->is_read && $notification->for_admin)
                                                        <li>
                                                            <a class="dropdown-item mark-read-btn"
                                                               href="javascript:void(0);"
                                                               data-id="{{ $notification->id }}">
                                                                <i class="bi bi-check2-circle text-primary align-middle me-1"></i>
                                                                علامت‌گذاری به عنوان خوانده شده
                                                            </a>
                                                        </li>
                                                    @endif
                                                    <li>
                                                        <form
                                                            action="{{ route('admin.notifications.destroy', $notification->id) }}"
                                                            method="POST"
                                                            class="d-inline"
                                                            onsubmit="return confirm('آیا از حذف این نوتیفیکیشن مطمئن هستید؟');">
                                                            @csrf
                                                            @method('DELETE')

                                                            <button type="submit"
                                                                    class="btn btn-link text-danger p-0 d-flex align-items-center">
                                                                <i class="bi bi-trash-fill me-1"></i>
                                                                <span>حذف</span>
                                                            </button>
                                                        </form>
                                                    </li>

                                                    @if(!empty($notification->data['link']))
                                                        <li>
                                                            <a class="dropdown-item"
                                                               href="{{ $notification->data['link'] }}">
                                                                <i class="bi bi-eye align-middle me-1"></i> مشاهده
                                                                جزئیات
                                                            </a>
                                                        </li>
                                                    @endif
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted py-4">هیچ نوتیفیکیشنی وجود
                                            ندارد.
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>

                        @include('components.pagination', ['paginator' => $notifications])
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Notification Modal -->
    <div class="modal fade" id="createNotificationModal" tabindex="-1" aria-labelledby="createNotificationModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header px-4 pt-4">
                    <h5 class="modal-title" id="createNotificationModalLabel">ارسال نوتیفیکیشن جدید</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
                </div>
                <form action="{{ route('admin.notifications.store') }}" method="POST" id="notificationForm"
                      onsubmit="console.log('Form submitted!')">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label class="form-label">عنوان <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control" required
                                   placeholder="عنوان نوتیفیکیشن را وارد کنید">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">پیام <span class="text-danger">*</span></label>
                            <textarea name="message" class="form-control" rows="4" required
                                      placeholder="متن پیام نوتیفیکیشن را وارد کنید"></textarea>
                        </div>

                        <!-- چک‌باکس‌های جدید برای ایمیل و اس‌ام‌اس -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input type="hidden" name="send_email" value="0">
                                    <input type="checkbox" class="form-check-input" id="send_email" name="send_email"
                                           value="1"
                                        {{ old('send_email', 0) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="send_email">ارسال ایمیل</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input type="hidden" name="send_sms" value="0">
                                    <input type="checkbox" class="form-check-input" id="send_sms" name="send_sms"
                                           value="1"
                                        {{ old('send_sms', 0) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="send_sms">ارسال اس‌ام‌اس</label>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3 form-check form-switch">
                            <input type="hidden" name="is_public" value="0">
                            <input type="checkbox" class="form-check-input" id="is_public" name="is_public" value="1"
                                {{ old('is_public', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_public">ارسال به همه کاربران</label>
                        </div>

                        <div class="mb-3" id="userSelectContainer">
                            <label class="form-label">انتخاب کاربران</label>

                            <!-- نمایش کاربران انتخاب شده -->
                            <div class="selected-users-container" id="selectedUsersContainer">
                                <small class="text-muted">هیچ کاربری انتخاب نشده است</small>
                            </div>

                            <!-- جستجو در کاربران -->
                            <input type="text" class="search-users" id="userSearch"
                                   placeholder="جستجو در کاربران...">

                            <!-- لیست کاربران -->
                            <div class="custom-multiselect" id="usersList">
                                @foreach($users as $user)
                                    <div class="user-option" data-user-id="{{ $user->id }}">
                                        <input type="checkbox" name="user_ids[]" value="{{ $user->id }}"
                                               style="display: none;">
                                        {{ $user->name }} - {{ $user->email }} - {{ $user->mobile }}
                                    </div>
                                @endforeach
                            </div>

                            <div class="form-text">برای انتخاب کاربران روی آنها کلیک کنید</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-ghost-danger" data-bs-dismiss="modal">بستن</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-send align-baseline me-1"></i> ارسال نوتیفیکیشن
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const isPublicCheckbox = document.getElementById('is_public');
            const userSelectContainer = document.getElementById('userSelectContainer');
            const usersList = document.getElementById('usersList');
            const userSearch = document.getElementById('userSearch');
            const selectedUsersContainer = document.getElementById('selectedUsersContainer');
            const userOptions = usersList.querySelectorAll('.user-option');

            let selectedUsers = new Set();

            // مدیریت نمایش/پنهان کردن انتخاب کاربران
            function toggleUserSelect() {
                userSelectContainer.style.display = isPublicCheckbox.checked ? 'none' : 'block';
            }

            isPublicCheckbox.addEventListener('change', toggleUserSelect);
            toggleUserSelect();

            function selectUser(userOption) {
                const userId = userOption.dataset.userId;
                const checkbox = userOption.querySelector('input[type="checkbox"]');

                if (selectedUsers.has(userId)) {
                    selectedUsers.delete(userId);
                    userOption.classList.remove('selected');
                    checkbox.checked = false;
                } else {
                    selectedUsers.add(userId);
                    userOption.classList.add('selected');
                    checkbox.checked = true;
                }

                updateSelectedUsersDisplay();
            }

            function updateSelectedUsersDisplay() {
                selectedUsersContainer.innerHTML = '';

                if (selectedUsers.size === 0) {
                    selectedUsersContainer.innerHTML = '<small class="text-muted">هیچ کاربری انتخاب نشده است</small>';
                    return;
                }

                userOptions.forEach(option => {
                    const userId = option.dataset.userId;
                    if (selectedUsers.has(userId)) {
                        const userName = option.textContent.trim();
                        const badge = document.createElement('span');
                        badge.className = 'selected-users-badge';
                        badge.textContent = userName;
                        badge.innerHTML = userName + ' <i class="bi bi-x" style="cursor:pointer; margin-right:5px;" onclick="removeUser(\'' + userId + '\')"></i>';
                        selectedUsersContainer.appendChild(badge);
                    }
                });
            }

            window.removeUser = function (userId) {
                selectedUsers.delete(userId);
                userOptions.forEach(option => {
                    if (option.dataset.userId === userId) {
                        option.classList.remove('selected');
                        option.querySelector('input[type="checkbox"]').checked = false;
                    }
                });
                updateSelectedUsersDisplay();
            }

            userSearch.addEventListener('input', function () {
                const searchTerm = this.value.toLowerCase();

                userOptions.forEach(option => {
                    const userText = option.textContent.toLowerCase();
                    if (userText.includes(searchTerm)) {
                        option.style.display = 'block';
                    } else {
                        option.style.display = 'none';
                    }
                });
            });

            userOptions.forEach(option => {
                option.addEventListener('click', function () {
                    selectUser(this);
                });
            });

            document.getElementById('notificationForm').addEventListener('submit', function (e) {
                const isPublic = document.getElementById('is_public').checked;

                if (!isPublic && selectedUsers.size === 0) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'خطا',
                        text: 'لطفا حداقل یک کاربر انتخاب کنید یا گزینه "ارسال به همه کاربران" را فعال کنید',
                        confirmButtonText: 'متوجه شدم'
                    });
                }
            });

            document.getElementById('createNotificationModal').addEventListener('hidden.bs.modal', function () {
                selectedUsers.clear();
                userOptions.forEach(option => {
                    option.classList.remove('selected');
                    option.querySelector('input[type="checkbox"]').checked = false;
                });
                updateSelectedUsersDisplay();
                userSearch.value = '';

                userOptions.forEach(option => {
                    option.style.display = 'block';
                });

                document.getElementById('notificationForm').reset();
                toggleUserSelect();
            });

            function showToast(message, type = 'success') {
                const Toast = Swal.mixin({
                    toast: true,
                    position: "top-end",
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.onmouseenter = Swal.stopTimer;
                        toast.onmouseleave = Swal.resumeTimer;
                    }
                });
                Toast.fire({icon: type, title: message});
            }

            document.querySelectorAll('.mark-read-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    const id = this.dataset.id;
                    const button = this;

                    button.innerHTML = '<i class="bi bi-hourglass-split align-middle me-1"></i> در حال پردازش...';
                    button.disabled = true;

                    fetch(`/admin/notifications/${id}/mark-read`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        }
                    })
                        .then(res => res.json())
                        .then(data => {
                            if (data.success) {
                                showToast(data.message);
                                setTimeout(() => location.reload(), 1000);
                            } else {
                                showToast(data.message, 'error');
                                button.innerHTML = '<i class="bi bi-check2-circle align-middle me-1"></i> علامت‌گذاری به عنوان خوانده شده';
                                button.disabled = false;
                            }
                        })
                        .catch(() => {
                            showToast('خطا در ارتباط با سرور', 'error');
                            button.innerHTML = '<i class="bi bi-check2-circle align-middle me-1"></i> علامت‌گذاری به عنوان خوانده شده';
                            button.disabled = false;
                        });
                });
            });

            const searchInput = document.querySelector('input[name="q"]');
            const userInput = document.querySelector('input[name="user"]');
            let searchTimer;

            function debounceSearch() {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => {
                    document.getElementById('searchForm').submit();
                }, 800);
            }

            if (searchInput) searchInput.addEventListener('input', debounceSearch);
            if (userInput) userInput.addEventListener('input', debounceSearch);
        });
    </script>
@endpush