@extends('admin.layouts.layout')
@section('title', 'Notification Management')
@section('content')
    <style>
        .select2-container {
            z-index: 9999 !important;
        }

        .select2-container--default .select2-selection--multiple,
        .select2-container--default .select2-selection--single {
            border: 2px solid #D5D7DA !important;
            border-radius: 8px !important;
            padding: 10px 14px !important;
            font-size: 16px !important;
            color: #717680 !important;
            min-height: 52px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            padding: 0 !important;
        }

        .select2-container--default .select2-selection__choice {
            background: #133754;
            border: none;
            color: #fff;
            padding: 3px 8px;
            border-radius: 4px;
        }

        .select2-container--default .select2-selection__choice__remove {
            color: #fff;
        }

        .select2-dropdown {
            border: 2px solid #D5D7DA;
            border-radius: 8px;
        }

        .select2-search__field {
            outline: none;
        }

        /* ------------------------- */
        /* Select2 Recipients Styling */
        /* ------------------------- */

        /* Container */
        #recipents+.select2-container {
            width: 100% !important;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            z-index: 9999 !important;
            /* ensure it stays on top */
        }

        /* ------------------------- */
        /* MULTIPLE SELECT STYLING */
        /* ------------------------- */
        #recipents[multiple]+.select2-container .select2-selection--multiple {
            border: 2px solid #D5D7DA !important;
            border-radius: 8px !important;
            padding: 6px 10px !important;
            min-height: 40px !important;
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center;
            gap: 5px;
        }

        /* Selected items (chips) */
        #recipents[multiple]+.select2-container .select2-selection__choice {
            background: #133754 !important;
            border: none !important;
            color: #fff !important;
            border-radius: 4px !important;
            padding: 4px 8px !important;
            font-size: 12px !important;
            cursor: default;
        }

        /* Hide the default remove "x" */
        #recipents[multiple]+.select2-container .select2-selection__choice__remove {
            display: none !important;
        }

        /* Selected items container */
        #recipents[multiple]+.select2-container .select2-selection__rendered {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 5px;
            padding: 2px 0;
        }

        /* ------------------------- */
        /* SINGLE SELECT STYLING */
        /* ------------------------- */
        #recipents:not([multiple])+.select2-container .select2-selection--single {
            border: 2px solid #D5D7DA !important;
            border-radius: 8px !important;
            min-height: 40px !important;
            padding: 6px 10px !important;
            display: flex !important;
            align-items: center !important;
            font-size: 14px !important;
            color: #4C4C4C !important;
        }

        /* Rendered text for single select */
        #recipents:not([multiple])+.select2-container .select2-selection__rendered {
            line-height: normal !important;
            padding-left: 0 !important;
        }

        /* Remove arrow from multiple and fix arrow for single select */
        #recipents[multiple]+.select2-container .select2-selection__arrow,
        #recipents[multiple]+.select2-container .select2-selection__placeholder {
            display: none !important;
        }

        /* For single select, position arrow correctly */
        #recipents:not([multiple])+.select2-container .select2-selection__arrow {
            right: 10px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
        }

        /* ------------------------- */
        /* DROPDOWN STYLING */
        /* ------------------------- */
        .select2-dropdown {
            border: 2px solid #D5D7DA !important;
            border-radius: 8px !important;
            font-size: 14px !important;
        }

        /* Search input inside dropdown */
        .select2-search__field {
            outline: none !important;
            font-size: 14px !important;
        }

        /* Placeholder styling */
        .select2-selection__placeholder {
            color: #9CA3AF !important;
        }

        /* Scrollbar for dropdown */
        .select2-results__options {
            max-height: 200px;
            overflow-y: auto;
        }

        .select2-results__option[aria-selected] {
            padding: 8px 10px;
        }

        /* Hover / selected dropdown option */
        .select2-results__option--highlighted {
            background-color: #E5F0FF !important;
            color: #133754 !important;
        }

        /* select2 scroll */



        /* Select2 multiple container */
        .select2-container--default .select2-selection--multiple {
            display: flex !important;
            flex-wrap: nowrap !important;
            padding: 0
                /* ❌ wrap band */
                overflow-x: auto !important;
            /* ✅ horizontal scroll */
            overflow-y: hidden !important;
            white-space: nowrap;
        }

        /* Selected items (chips) */
        .select2-container--default .select2-selection__rendered {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 5px;
        }

        /* Each selected item */
        .select2-container--default .select2-selection__choice {
            flex: 0 0 auto;
            /* important for scroll */
        }
    </style>
    <div class="py-3 px-1">
        <form action="{{ route('admin.notification-management') }}" method="get">

            <div class="flex flex-col 2xl:flex-row 2xl:flex-wrap items-start 2xl:items-center justify-between gap-4 mb-6">

                <div class="flex gap-2 flex-wrap">
                    <h1 class="text-[#34495E] Bai font-semibold text-[24px]">
                        Notification List
                    </h1>
                </div>

                <div class="flex flex-col sm:flex-row flex-wrap gap-3 w-full 2xl:w-auto">

                    <div class="relative w-full sm:w-46 2xl:ml-8">
                        <select name="status"
                            class="appearance-none w-full border border-[#EEEEEE] outline-0 rounded-md Poppins text-[14px] px-4 py-2 pr-10 text-[#4C4C4C] bg-white">
                            <option value="">Status</option>
                            <option value="send" {{ request('status') == 'send' ? 'selected' : '' }}>Send</option>
                            <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>

                        </select>

                        <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <img src="{{ asset('newsites/admin/images/select-arrow.png') }}">
                        </div>
                    </div>

                    <div class="relative w-full sm:w-60 ">
                        <select id="recipents" name="recipent"
                            class="appearance-none recipents w-full border border-[#EEEEEE] outline-0 rounded-md Poppins text-[14px] px-4 py-2 pr-10 text-[#4C4C4C] bg-white">


                        </select>

                        <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <img src="{{ asset('newsites/admin/images/select-arrow.png') }}">
                        </div>
                    </div>

                    <div class="relative w-full lg:w-[260px] 2xl:w-[310px]">
                        <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-magnifying-glass text-[#9CA3AF]"></i>
                        </div>

                        <input type="text" placeholder="Search by notification title" name="notification_title"
                            value="{{ request('notification_title') }}"
                            class="border border-[#EEEEEE] placeholder:text-[#4C4C4C] rounded-md pl-10 pr-4 py-2.5 text-[#4C4C4C] Poppins text-[14px] w-full focus:outline-none" />
                    </div>

                    <div class="w-full sm:w-auto">
                        <button type="submit"
                            class="cursor-pointer bg-[#133754] text-[#FFFFFF] Poppins-medium text-[16px]  px-3 py-2 rounded-[5px]">
                            <i class="fa-solid fa-magnifying-glass text-[#fff]"></i>

                        </button>
                    </div>

                    <div class="w-full sm:w-auto">
                        <button command="show-modal" commandfor="addnotification" type="button"
                            class="cursor-pointer bg-[#133754] text-[#FFFFFF] Poppins-medium text-[16px] w-full sm:w-50.25 py-2 rounded-[5px]">
                            Create Notification
                        </button>
                    </div>

                </div>

            </div>

            <div class="w-full overflow-x-auto">
                <table class="min-w-225 w-full text-left text-[#1F1F1F] text-sm bg-white border-separate border-spacing-0">
                    <thead class="bg-[#F9F9FB] border ">
                        <tr>

                            <th
                                class="sm:py-3.25 py-2 px-4 Poppins-medium text-[#44444A] text-[15px] rounded-bl-[6.79px] rounded-tl-[6.79px] overflow-hidden">
                                Notification Title</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px]">Recipents</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px]">Status</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px]">Sent Date</th>
                            <th
                                class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] rounded-tr-[6.79px] rounded-br-[6.79px] overflow-hidden">
                                Actions</th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach ($notifications as $noti)
                            <tr>

                                <td class="py-4 px-3 border-b border-[#E6E6E6]">


                                    <div class="flex items-center gap-2 text-[#636363] text-[17px] Poppins-medium ">
                                        {{ ucFirst($noti->notification_title) }}
                                    </div>
                                </td>

                                <td
                                    class="py-4 px-3 text-[#636363] Poppins SemiBold text-[15px] text-[14.65px] font-medium Inter-m border-b border-[#E6E6E6]">
                                    {{ ucFirst($noti->role) }}s</td>
                                @if ($noti->is_draft == 1)
                                    <td
                                        class="py-4 px-3 text-[#07BDA9] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                        Draft</td>
                                @else
                                    <td
                                        class="py-4 px-3 text-[#009D2C] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                        Sent</td>
                                @endif
                                <td class="py-4 px-3 text-[#121212] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    {{ dateFormate($noti->date, 'd-m-Y') }}</td>
                                <td class="py-4 px-3 border-b border-[#E6E6E6]">
                                    <div class="flex gap-2">
                                        @if ($noti->is_draft == 0)
                                            <button type="button" data-notificationid="{{ $noti->id }}"
                                                class="border-[#F1F1F5] border h-11.25 w-11.25 rounded-[3px] cursor-pointer notificationDetals"><i
                                                    class="fa-regular fa-eye text-lg "></i></button>
                                            <button type="button" data-notificationid="{{ $noti->id }}"
                                                class="border h-11.25 w-11.25   rounded-[5px] bg-[#133754] cursor-pointer addUserNotificationBtn"><i
                                                    class="fa-solid fa-user-plus text-white"></i></button>
                                        @else
                                            <button type="button" data-notificationid="{{ $noti->id }}"
                                                class="border-[#F1F1F5] bg-[#F4C701] border h-11.25 w-11.25 rounded-[3px] cursor-pointer editNotificationBtn"><i
                                                    class="fa-solid fa-pencil text-lg "></i></button>
                                            <button type="button" data-notificationid="{{ $noti->id }}"
                                                class="sendDraftNotificationBtn h-11.25 w-11.25   rounded-[5px] bg-[#1CD8C4] cursor-pointer"
                                                id="sendDraftNotificationBtn"><i
                                                    class="fa-solid fa-location-arrow text-lg text-white"
                                                    style="transform: rotate(45deg);"></i></button>
                                        @endif

                                    </div>
                                </td>
                            </tr>
                        @endforeach



                    </tbody>
                </table>
            </div>



            <div class="flex flex-wrap items-center justify-between mt-6 gap-4 text-sm text-gray-600">

                <div class="flex items-center gap-3">
                    <span class="text-[#4E4F54] text-sm Poppins">Items per page:</span>
                    <select name="per_page" onchange="this.form.submit()"
                        class="border border-[#E1E2E3] text-[#171717] Poppins rounded-md bg-[#F8F8F8] px-2 py-2">
                        <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                        <option value="20" {{ request('per_page') == 20 || !request('per_page') ? 'selected' : '' }}>
                            20</option>

                    </select>
                    <span class="text-[#4E4F54] text-sm Poppins">
                        {{ $notifications->firstItem() }}–{{ $notifications->lastItem() }} of
                        {{ $notifications->total() }} Notifications
                    </span>
                </div>

                <div class="flex items-center gap-3">
                    <select name="page" onchange="this.form.submit()"
                        class="border border-[#E1E2E3] text-[#171717] Poppins rounded-md bg-[#F8F8F8] px-4 py-2">
                        @for ($i = 1; $i <= $notifications->lastPage(); $i++)
                            <option value="{{ $i }}"
                                {{ $notifications->currentPage() == $i ? 'selected' : '' }}>
                                {{ $i }}
                            </option>
                        @endfor
                    </select>
                    <span class="text-[#4E4F54] text-sm Poppins">
                        of {{ $notifications->lastPage() }} pages
                    </span>

                    <button type="submit" name="page" value="{{ $notifications->currentPage() - 1 }}"
                        {{ $notifications->onFirstPage() ? 'disabled' : '' }}
                        class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer">
                        <i class="fa-solid fa-angle-left"></i>
                    </button>

                    <button type="submit" name="page" value="{{ $notifications->currentPage() + 1 }}"
                        {{ $notifications->hasMorePages() ? '' : 'disabled' }}
                        class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer">
                        <i class="fa-solid fa-angle-right"></i>
                    </button>
                </div>

            </div>
        </form>

        {{-- create notification --}}
        <el-dialog>
            <dialog id="addnotification" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[922px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                            <form action="{{ route('admin.notification.add') }}" method="post" id="addNotification">
                                @csrf
                                <div class="flex justify-between sm:items-start">
                                    <div>

                                        <h1
                                            class="text-[#181D27] fo-m sm:text-[24.93px] text-[20px] Poppins font-semibold">
                                            Create Notification</h1>
                                    </div>
                                    <button command="close" commandfor="addnotification" class="cursor-pointer">

                                        <img src="{{ asset('newsites/admin/images/cros-icon.png') }}" />
                                    </button>
                                </div>
                                <p class="text-[#535862] sm:text-[19.39px] text-[16px] Bai">Please fill out all information
                                    in
                                    order to create a new notification</p>
                                <div class="mt-3">
                                    <p class="Poppins-medium sm:text-lg text-sm text-[#414651] font-medium">Title</p>
                                    <div class="relative flex gap-5 w-full mt-2">
                                        <div class="field w-full">
                                            <input name="notification_title" value="{{ old('notification_title') }}"
                                                class="w-full text-[#717680] placeholder:text-[#717680] shadow-[0px_1.38px_2.77px_0px_#0A0D120D]  Poppins text-[16px] border-[#D5D7DA] border-[1.29px] sm:p-3 p-3 rounded-[10px] bg-white"
                                                placeholder="Write Notification Title">
                                            @error('notification_title')
                                                <span class="text-red-600">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="relative mb-3 mt-4">
                                    <label class="block mb-2 px-1 sm:text-[17px] text-sm Poppins-medium text-[#414651]">
                                        Notification Body
                                    </label>

                                    <div class="editor mt-2 border rounded max-h-[211px]">
                                        <div class="ql-toolbar ql-snow"></div>
                                        <div class="ql-container h-full">
                                            <div class="ql-editor h-full overflow-y-auto leading-relaxed">

                                            </div>
                                        </div>
                                    </div>
                                    @error('notification_body')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror

                                    <input type="hidden" name="notification_body" id="notification_body">
                                </div>






                                <div class=" mx-auto">


                                    <div class="grid md:grid-cols-2 grid-cols-1 gap-6 mb-6">


                                        <div>
                                            <label
                                                class="block  Poppins-medium text-[#414651] sm:text-[17px] text-sm mb-2">
                                                Select Role
                                            </label>
                                            <div class="relative">
                                                <select name="role" id="addNotificationRole"
                                                    class="w-full appearance-none border-2 border-[#D5D7DA] Bai italic text-[16px] rounded-lg px-4 py-3.25 text-[#717680] focus:outline-none ">
                                                    <option value="">Select Role</option>
                                                    <option value="tutor">Tutor</option>
                                                    <option value="student">Student</option>

                                                </select>
                                                <img src="{{ asset('newsites/admin/images/arrow-down.png') }}"
                                                    class=" absolute right-3 top-5" />
                                            </div>
                                            @error('role')
                                                <span class="text-red-600">{{ $message }}</span>
                                            @enderror

                                        </div>

                                        <div>
                                            <label
                                                class="block   Poppins-medium text-[#414651] sm:text-[17px] text-sm mb-2">
                                                Select Users(s)
                                                <span class=" Poppins font-normal">(Leave Empty To Select All)</span>
                                            </label>

                                            <div class="relative">
                                                <select name="users[]" id="users" multiple
                                                    class="w-full appearance-none border-2 border-[#D5D7DA] Bai italic text-[16px] rounded-lg px-4 py-3.25 text-[#717680] focus:outline-none ">
                                                    <option value="">Select Users</option>

                                                </select>
                                                @error('users')
                                                    <span class="text-red-600">{{ $message }}</span>
                                                @enderror


                                            </div>
                                        </div>

                                    </div>


                                    <div class="grid grid-cols-2 gap-6">
                                        <button value="draft" name="status" type="submit"
                                            class=" cursor-pointer px-3  border border-[#133754] rounded-sm w-full sm:py-4 py-3 text-[#133754] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                            Save As Draft
                                        </button>

                                        <button type="submit" name="status" value="send"
                                            class="bg-[#133754] cursor-pointer px-3  border rounded-sm w-full sm:py-4 py-3 text-[#FFFFFF] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                            Send Notification
                                        </button>

                                    </div>

                                </div>

                            </form>

                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>

        {{--  notification detail --}}

        <el-dialog>
            <dialog id="showNotification" aria-labelledby="dialog-title"
                class="fixed modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">

                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in">
                </el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[922px] w-full data-closed:sm:translate-y-0 data-closed:sm:scale-95">

                        <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">

                            <!-- Header -->
                            <div class="flex justify-between sm:items-start">
                                <h1 class="text-[#181D27] fo-m sm:text-[24.93px] text-[20px] Poppins font-semibold">
                                    Notification Details
                                </h1>
                                <button type="button" command="close" id="closeModalBtn" commandfor="showNotification"
                                    class="cursor-pointer ">
                                    <img src="{{ asset('newsites/admin/images/cros-icon.png') }}" />
                                </button>
                            </div>

                            <!-- Notification Title -->
                            <div class="mt-5">
                                <p class="Poppins-medium sm:text-lg text-sm text-[#414651] font-medium">Title</p>
                                <div class="relative flex gap-5 w-full mt-2">
                                    <div class="field w-full">
                                        <h2 class="text-[#121212] text-[16px] Poppins-medium" id="notificationTitle">

                                        </h2>
                                    </div>
                                </div>
                            </div>

                            <!-- Notification Description -->
                            <div class="mt-4">
                                <p class="Poppins-medium sm:text-lg text-sm text-[#414651] font-medium">Description</p>
                                <div class="relative flex gap-5 w-full mt-2">
                                    <div class="field w-full">
                                        <p class="text-[#121212] text-[15px] Poppins" id="notificationBody">

                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Participants -->
                            <div class="mt-4">
                                <p class="Poppins-medium sm:text-lg text-sm text-[#414651] font-medium">Participants</p>
                                <div class="flex flex-wrap gap-2 mt-2" id="notificationUsers">


                                </div>
                            </div>

                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>

        {{-- add user to notification --}}
        <el-dialog>
            <dialog id="addUsersModal" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[922px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                            <form action="#" method="post" id="addUserToNotification">
                                @csrf
                                <div class="flex justify-between sm:items-start">
                                    <div>

                                        <h1
                                            class="text-[#181D27] fo-m sm:text-[24.93px] text-[20px] Poppins font-semibold">
                                            Add User</h1>
                                    </div>
                                    <button command="close" commandfor="addUsersModal" class="cursor-pointer">

                                        <img src="{{ asset('newsites/admin/images/cros-icon.png') }}" />
                                    </button>
                                </div>
                                <p class="text-[#535862] sm:text-[19.39px] text-[16px] Bai">Please select the users you
                                    want to add.</p>
                                <div class="mt-5">
                                    <p class="Poppins-medium sm:text-lg text-sm text-[#414651] font-medium">Title</p>
                                    <div class="relative flex gap-5 w-full mt-2">
                                        <div class="field w-full">
                                            <h2 class="text-[#121212] text-[16px] Poppins-medium"
                                                id="addUserNotificationTitle">

                                            </h2>
                                        </div>
                                    </div>
                                </div>

                                <!-- Notification Description -->
                                <div class="mt-4 mb-5">
                                    <p class="Poppins-medium sm:text-lg text-sm text-[#414651] font-medium">Description</p>
                                    <div class="relative flex gap-5 w-full mt-2">
                                        <div class="field w-full">
                                            <p class="text-[#121212] text-[15px] Poppins"
                                                id="addUserNotificationDescription">

                                            </p>
                                        </div>
                                    </div>
                                </div>





                                <hr>
                                <div class=" mx-auto mt-3">

                                    <div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-lg mb-4">
                                        <p class="font-semibold">Note:</p>
                                        <p class="Poppins-medium">
                                            Newly selected users will be added to this notification. Existing participants
                                            will not receive duplicate notifications.
                                        </p>
                                    </div>
                                    <div class="grid md:grid-cols-1 grid-cols-1 gap-6 mb-6">



                                        <div>
                                            <label
                                                class="block   Poppins-medium text-[#414651] sm:text-[17px] text-sm mb-2">
                                                Select Users(s)
                                                <span class=" Poppins font-normal">(Leave Empty To Select All)</span>
                                            </label>

                                            <div class="relative">
                                                <select name="users[]" multiple id="addUserModalSelectBox" required
                                                    class="w-full users appearance-none border-2 border-[#D5D7DA] Bai italic text-[16px] rounded-lg px-4 py-3.25 text-[#717680] focus:outline-none ">
                                                    <option value="">Select Users</option>

                                                </select>
                                                @error('users')
                                                    <span class="text-red-600">{{ $message }}</span>
                                                @enderror


                                            </div>
                                        </div>

                                    </div>


                                    <div class="grid grid-cols-2 gap-6">
                                        <button command="close" commandfor="addUsersModal" type="button"
                                            class=" cursor-pointer px-3  border border-[#133754] rounded-sm w-full sm:py-4 py-3 text-[#133754] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                            Close
                                        </button>

                                        <button type="button" id="addUserNotificationSubmitBtn"
                                            class="bg-[#133754] cursor-pointer px-3  border rounded-sm w-full sm:py-4 py-3 text-[#FFFFFF] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                            Send Notification
                                        </button>

                                    </div>

                                </div>

                            </form>

                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>


        {{-- edit notification --}}
        <el-dialog>
            <dialog id="editnotification" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[922px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                            <form action="#" method="post" id="editNotificationForm">
                                @csrf
                                <div class="flex justify-between sm:items-start">
                                    <div>

                                        <h1
                                            class="text-[#181D27] fo-m sm:text-[24.93px] text-[20px] Poppins font-semibold">
                                            Update Notification</h1>
                                    </div>
                                    <button type="button" commandfor="editnotification" class="cursor-pointer closeBtn">

                                        <img src="{{ asset('newsites/admin/images/cros-icon.png') }}" />
                                    </button>
                                </div>
                                <p class="text-[#535862] sm:text-[19.39px] text-[16px] Bai">Please fill out all information
                                    in
                                    order to update a notification</p>
                                <div class="mt-3">
                                    <p class="Poppins-medium sm:text-lg text-sm text-[#414651] font-medium">Title</p>
                                    <div class="relative flex gap-5 w-full mt-2">
                                        <div class="field w-full">
                                            <input name="notification_title" value="{{ old('notification_title') }}"
                                                id="edit_notification_title"
                                                class="w-full text-[#717680] placeholder:text-[#717680] shadow-[0px_1.38px_2.77px_0px_#0A0D120D]  Poppins text-[16px] border-[#D5D7DA] border-[1.29px] sm:p-3 p-3 rounded-[10px] bg-white"
                                                placeholder="Write Notification Title">
                                            @error('notification_title')
                                                <span class="text-red-600">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="relative mb-3 mt-4">
                                    <label class="block mb-2 px-1 sm:text-[17px] text-sm Poppins-medium text-[#414651]">
                                        Notification Body
                                    </label>

                                    <div class="editNotificationEditor mt-2 border rounded max-h-[211px]">
                                        <div class="ql-toolbar ql-snow"></div>
                                        <div class="ql-container h-full">
                                            <div class=" h-full overflow-y-auto leading-relaxed edit_notification_editor"
                                                id="edit_notification_editor">

                                            </div>
                                        </div>
                                    </div>
                                    @error('notification_body')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror

                                    <input type="hidden" name="notification_body" id="edit_notification_body">
                                </div>






                                <div class=" mx-auto">


                                    <div class="grid md:grid-cols-2 grid-cols-1 gap-6 mb-6">


                                        <div>
                                            <label
                                                class="block  Poppins-medium text-[#414651] sm:text-[17px] text-sm mb-2">
                                                Select Role
                                            </label>
                                            <div class="relative">
                                                <select name="role" id="editNotificationRole"
                                                    class="w-full appearance-none border-2 border-[#D5D7DA] Bai italic text-[16px] rounded-lg px-4 py-3.25 text-[#717680] focus:outline-none ">
                                                    <option value="">Select Role</option>
                                                    <option value="tutor">Tutor</option>
                                                    <option value="student">Student</option>

                                                </select>
                                                <img src="{{ asset('newsites/admin/images/arrow-down.png') }}"
                                                    class=" absolute right-3 top-5" />
                                            </div>
                                            @error('role')
                                                <span class="text-red-600">{{ $message }}</span>
                                            @enderror

                                        </div>

                                        <div>
                                            <label
                                                class="block   Poppins-medium text-[#414651] sm:text-[17px] text-sm mb-2">
                                                Select Users(s)
                                                <span class=" Poppins font-normal">(Leave Empty To Select All)</span>
                                            </label>

                                            <div class="relative">
                                                <select name="users[]" id="editusers" multiple
                                                    class="w-full appearance-none border-2 border-[#D5D7DA] Bai italic text-[16px] rounded-lg px-4 py-3.25 text-[#717680] focus:outline-none ">
                                                    <option value="">Select Users</option>

                                                </select>
                                                @error('users')
                                                    <span class="text-red-600">{{ $message }}</span>
                                                @enderror


                                            </div>
                                        </div>

                                    </div>


                                    <div class="grid grid-cols-2 gap-6">
                                        <button value="draft" name="status" type="submit"
                                            class="cursor-pointer  px-3  border border-[#133754] rounded-sm w-full sm:py-4 py-3 text-[#133754] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                            Save As Draft
                                        </button>

                                        <button type="submit" name="status" value="send"
                                            class="bg-[#133754] cursor-pointer  px-3  border rounded-sm w-full sm:py-4 py-3 text-[#FFFFFF] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                            Send Notification
                                        </button>

                                    </div>

                                </div>

                            </form>

                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>


        {{-- confirm modal --}}
        <el-dialog>
            <dialog id="sendDraftNotificationModal" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <div class="form bg-[#FFFFFF] px-4 pt-2 pb-4 sm:p-7 sm:pb-4">
                            <div class="flex justify-between sm:items-center">

                                <h1
                                    class="text-[#181D27] flex-1 text-center fo-m sm:text-[26px] text-[24px] Poppins font-semibold">
                                    Confirm Modal</h1>

                                <button command="close" commandfor="sendDraftNotificationModal" class="cursor-pointer ">

                                    <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                                </button>
                            </div>

                            <p class="text-[#414651] Poppins-medium text-[17px] text-center mt-4">Do you want to send this
                                notification?</p>









                            <form action="#" method="post">
                                <div class="mt-3 flex w-full gap-3">
                                    <button command="close" commandfor="sendDraftNotificationModal"
                                        class=" cursor-pointer px-3 Poppins-medium text-[16px] border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        No
                                    </button>
                                    @csrf
                                    <button type="submit"
                                        class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        Yes, Confirm
                                    </button>
                                </div>
                            </form>


                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>
    </div>
    @push('script')
        <script>
            $(document).ready(function() {

                const editNotificationEditor = new Quill('.editNotificationEditor', {
                    theme: 'snow'
                });

                $('#users').select2({
                    placeholder: "Select Users",
                    allowClear: true,
                    width: '100%',
                    dropdownParent: $('#addnotification')
                });

                function loadUser(role, loadUserSelectBox, selectedUsers = []) {
                    $.ajax({
                        url: '{{ route('admin.get_users') }}',
                        data: {
                            role: role
                        },
                        success: function(response) {

                            if (response.status == false) {

                                response.message.forEach(function(msg) {
                                    toastr.error(msg);
                                });

                            } else {

                                $(loadUserSelectBox).empty();

                                $.each(response.data, function(key, user) {

                                    let selected = selectedUsers.includes(user.id) ? 'selected' :
                                        '';

                                    $(loadUserSelectBox).append(
                                        `<option ${selected} value="${user.id}">
                            ${user.first_name} ${user.last_name}
                        </option>`
                                    );

                                });

                                // $(loadUserSelectBox).trigger('change');
                            }
                        }
                    });
                }
                // load add notification users
                $('#addNotificationRole').change(function() {

                    let role = $(this).val();

                    if (role) {
                        loadUser(role, '#users')
                    } else {
                        $('#users').empty();
                    }

                });
                // Initialize Quill
                $('#addNotification').on('submit', function() {

                    let content = $('.ql-editor').html();

                    if (content === '<p><br></p>') {
                        alert('Notification body is required');
                        return false;
                    }

                    $('#notification_body').val(content);
                });


                $('#recipents').select2({
                    placeholder: "Search Recipient",
                    minimumInputLength: 1, // start searching after 1 char
                    allowClear: true,
                    width: '100%',

                    ajax: {
                        url: '{{ route('admin.search_user') }}',
                        dataType: 'json',
                        delay: 300,

                        data: function(params) {
                            return {
                                search: params.term, // user typing
                                page: params.page || 1

                            };
                        },

                        processResults: function(data, params) {
                            params.page = params.page || 1;

                            return {
                                results: data.data.map(user => ({
                                    id: user.id,
                                    text: user.first_name + ' ' + user.last_name
                                })),
                                pagination: {
                                    more: data.pagination_more // optional (for infinite scroll)
                                }
                            };
                        },

                        cache: true
                    }
                });


                @if (request()->has('recipent') && request('recipent') != '')
                    var recipientId = '{{ request('recipent') }}';

                    $.ajax({
                        url: '{{ route('admin.search_user') }}',
                        dataType: 'json',
                        data: {
                            search: '',
                            user_id: recipientId, // pass the user id to fetch only this user
                            page: 1
                        }
                    }).then(function(data) {
                        if (data.data.length > 0) {
                            var user = data.data[0]; // should be the user with recipientId
                            var option = new Option(user.first_name + ' ' + user.last_name, user.id, true,
                                true);
                            $('#recipents').append(option).trigger('change');
                        }
                    });
                @endif



                // notification details
                $('.notificationDetals').click(function() {
                    let notificationId = $(this).data('notificationid'); // get ID


                    const dialog = document.getElementById('showNotification');

                    if (!dialog.open) {
                        dialog.showModal();
                    }
                    // 2️⃣ Clear previous details
                    $('#showNotification h2').text('');
                    $('#notificationUsers').empty();

                    var notificationData = {};
                    $.ajax({
                        url: '{{ route('admin.get_notification_detail') }}',
                        data: {
                            notification_id: notificationId
                        },
                        success: function(response) {
                            if (response.status == true) {
                                notificationData = response.data;
                                $('#notificationTitle').text(notificationData.notification_title);
                                $('#notificationBody').html(notificationData.notification_body);
                                notificationData.notification_users.forEach(user => {
                                    let span = `
                                <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
                                    ${user.first_name} ${user.last_name}
                                </span>`;

                                    $('#notificationUsers').append(span);
                                });
                            } else {
                                $('#notificationBody').text('');
                                $('#notificationUsers').empty();
                            }


                        }
                    });




                });

                $('.addUserNotificationBtn').click(function() {
                    let notificationId = $(this).data('notificationid'); // get ID

                    let modal = $(this);

                    const dialog = document.getElementById('addUsersModal');

                    if (!dialog.open) {
                        dialog.showModal();
                    }


                    var notificationData = {};
                    $.ajax({
                        url: '{{ route('admin.add_user_notification') }}',
                        data: {
                            notification_id: notificationId
                        },
                        success: function(response) {
                            console.log(response)
                            if (response.status == true) {
                                $('#addUserModalSelectBox').empty()
                                notificationData = response.data;
                                $('#addUserNotificationTitle').text(notificationData
                                    .notification_title);
                                $('#addUserNotificationDescription').html(notificationData
                                    .notification_body);
                                notificationData.notificationUsers.forEach(user => {
                                    let span = `
                                <option class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full" value="${user.id}">
                                    ${user.first_name} ${user.last_name}
                                </option>`;

                                    $('#addUserModalSelectBox').append(span);
                                });
                                let routeTemplate =
                                    "{{ route('admin.notification.add.users', ':id') }}";
                                let route = routeTemplate.replace(':id', notificationId);
                                $('#addUserToNotification').attr('action', route)
                            } else {
                                $(dialog).closest('modal h2').text('');
                                $(dialog).closest('modal p').empty();
                            }


                        }
                    });




                });


                $(document).on('click', '.closeBtn', function() {
                    let modalId = $(this).attr('commandfor');
                    closeModal(modalId);
                });

                function closeModal(id) {
                    const dialog = document.getElementById(id);

                    if (dialog && dialog.open) {
                        dialog.close();
                    }

                }


                $('#closeModalBtn').click(function() {
                    const dialog = document.getElementById('showNotification');
                    if (dialog.open) {
                        dialog.close();
                    }
                });


                // add users 
                $('.users').select2({
                    placeholder: "Select Users",
                    allowClear: true,
                    width: '100%',
                    dropdownParent: $('#addUsersModal')
                });

                $('#addUserRole').change(function() {

                    let role = $(this).val();

                    if (role) {
                        loadUser(role, '#addUserModalSelectBox')
                    } else {
                        $('#addUserModalSelectBox').empty();
                    }

                });



                $('#addUserNotificationSubmitBtn').click(function() {
                    let form = $('#addUserToNotification').submit();


                })



                // edit notification


                $('#editusers').select2({
                    placeholder: "Select Users",
                    allowClear: true,
                    width: '100%',
                    dropdownParent: $('#editNotificationForm')
                });


                $('.editNotificationBtn').click(function() {
                    const notificationId = $(this).data('notificationid');
                    const dialog = document.getElementById('editnotification');



                    if (notificationId) {
                        let routeTemplate =
                            "{{ route('admin.notification.edit', ':id') }}";
                        let route = routeTemplate.replace(':id', notificationId);

                        $.ajax({
                            url: route,
                            success: async function(response) {
                                if (response.status == true) {
                                    console.log('test')
                                    let notification = response.data;
                                    let selectedUsers = notification.user_ids;
                                    await loadUser(notification.role, '#editusers', selectedUsers)
                                    $('#edit_notification_title').val(notification
                                        .notification_title)



                                    $('select[name="role"]').val(notification.role);

                                    editNotificationEditor.root.innerHTML = notification
                                        .notification_body;


                                    $('#edit_notification_body').val(notification.notification_body)

                                    let updateRouteTemplate =
                                        "{{ route('admin.notification.update', ':id') }}";
                                    let updateRoute = updateRouteTemplate.replace(':id',
                                        notificationId);

                                    $('#editNotificationForm').attr('action', updateRoute);
                                    $('#editNotificationForm').submit(function() {
                                        $('#edit_notification_body').val(
                                            editNotificationEditor.root.innerHTML);
                                    });


                                    if (!dialog.open) {
                                        dialog.showModal();
                                    }
                                }

                            }
                        });
                    }
                });


                $('#editNotificationRole').change(async function() {
                    let role = $(this).val();

                    if (role) {
                        await loadUser(role, '#editusers', [])
                    }
                });

                $('.sendDraftNotificationBtn').click(function() {
                    let notificationId = $(this).data('notificationid');
                    let sendDraftNotificationForm  = $('#sendDraftNotificationModal form');
                        let routeTemplate =
                            "{{ route('admin.notification.send', ':id') }}";
                        let route = routeTemplate.replace(':id', notificationId);
                    sendDraftNotificationForm.attr('action',route)

                    let modal = document.getElementById('sendDraftNotificationModal');
                    if (!modal.open) {
                        modal.showModal();
                    }
                });

            });
        </script>
    @endpush

@endsection
