@extends('backend.layouts.app')

@section('title', @$data['title'])

@section('style')
    <style>
        .unseen {
            background-color:#e0f7fa;
        }
    </style>
@endsection

@section('content')
    {!! breadcrumb([
        'title' => @$data['title'],
        route('admin.dashboard') => _trans('common.Dashboard'),
        '#' => @$data['title'],
    ]) !!}

    <div class="table-content table-basic">
        <div class="card">
            <div class="card-body">
                <!-- toolbar table start -->
                <div
                    class="table-toolbar d-flex flex-wrap gap-2 flex-xl-row justify-content-center justify-content-xxl-between align-content-center pb-3">
                    <div class="align-self-center">
                        <form action="{{ route('notification.index') }}">
                            <div class="d-flex flex-wrap gap-2  flex-lg-row justify-content-center align-content-center">
                                <!-- search -->
                                <div class="align-self-center">
                                    <div class="search-box d-flex">
                                        <input class="form-control" placeholder="{{ _trans('common.Search') }}" name="search" autocomplete="off" value="{{ request()->search }}">
                                        <span class="icon"><i class="fa-solid fa-magnifying-glass"></i></span>
                                    </div>
                                </div>
    
                                <!-- add btn -->
                                <div class="align-self-center">
                                    <button role="button" class="btn-add" data-bs-toggle="tooltip"
                                        data-bs-placement="right" data-bs-title="{{ _trans('common.Search') }}">
                                        <span class="d-none d-xl-inline">{{ _trans('common.Search') }}</span>
                                    </button>
                                </div>

                                <div class="align-self-center">
                                    <a href="{{ route('notification.index') }}" role="button" class="btn btn-danger py-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Clear">
                                        <span class="d-none d-xl-inline">{{ _trans('common.Clear') }}</span>
                                    </a>
                                </div>

                                <!-- dropdown action -->
                                <div class="align-self-center">
                                    <div class="dropdown dropdown-action" data-bs-toggle="tooltip" data-bs-placement="right"
                                        data-bs-title="{{ _trans('common.Action') }}">
                                        <button type="button" class="btn-dropdown" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            <i class="fa-solid fa-ellipsis"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <a class="dropdown-item" href="#"
                                                    onclick="bulkSeen()"><span
                                                        class="icon mr-10"><i class="fa-solid fa-eye"></i></span>
                                                    {{ _trans('common.Seen') }} <span class="count">(0)</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="#"
                                                    onclick="bulkDelete()">
                                                    <span class="icon mr-16"><i class="fa-solid fa-trash-can"></i></span>
                                                    {{ _trans('common.Delete') }} <span class="count">(0)</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- toolbar table end -->

                <!--  table start -->
                <div class="table-responsive  min-height-500">
                    <table class="table table-bordered {{ @$data['class'] }}" id="table">
                        <thead class="thead bg-gray">
                            <tr>
                                <th class="sorting_asc">
                                    <div class="check-box">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="all_check" />
                                        </div>
                                    </div>
                                </th>
                                <th class="sorting_desc">{{ _trans('common.Message') }}</th>
                                <th class="sorting_desc">{{ _trans('common.Created At') }}</th>
                                <th class="sorting_desc">{{ _trans('common.Seen At') }}</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse ($data['notifications'] as $notification)
                                @php
                                    $sender = App\Models\User::find($notification->sender_id);
                                    $unseenClass = $notification->seen ? "" : "unseen";
                                @endphp
                                <tr class="border border-primary {{ $unseenClass }}" data-notification_row_id="{{ $notification->id }}">
                                    <td>
                                        <div class="check-box">
                                            <div class="form-check">
                                                <input class="form-check-input column_id" id="column_{{ $notification->id }}" onclick="columnID({{ $notification->id }})" type="checkbox" name="column_id[]" value="{{ $notification->id }}"/>
                                            </div>
                                        </div>
                                    </td>

                                    <td width="50%">
                                        <a href="{{ @$notification->web_redirect_url ?? '#' }}" data-notification_id="{{ $notification->id }}"
                                            class="d-flex  align-items-center text-decoration-none text-secondary unread_notification">
                                            <div class="notification-content">
                                                <p class="notification-title font-weight-bold"> <i class="las la-bell text-warning"></i> {!! @$notification->message !!} </p>
                                            </div>
                                        </a>

                                    </td>
                                    <td width="25%">
                                        <div class="notification-time text-left">
                                            {{ @$notification->created_at->diffForHumans() }}</div>
                                    </td>
                                    <td width="25%">
                                        <div class="notification-time text-left">
                                            {{ $notification->seen_at ? \Carbon\Carbon::parse($notification->seen_at)->diffForHumans() : '' }}
                                        </div>
                                    </td>
                                </tr>
                            @empty
                        <tbody>
                            <tr class="odd">
                                <td valign="top" colspan="4" class="dataTables_empty">
                                    <div class="no-data-found-wrapper text-center ">
                                        <img src="{{ global_asset('assets/images/empty.png') }}" alt=""
                                            class="mb-primary empty_table" width="200">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                        @endforelse
                        </tbody>

                    </table>

                    {{-- Show pagination --}}
                    <div class="mt-3">
                        {{ $data['notifications']->links() }}
                    </div>
                </div>
                <!--  table end -->
            </div>
        </div>
    </div>
@endsection

@section('script')
    @include('backend.partials.table_js')

    <script>
        $(".unread_notification").on("click", function () {
            let id = $(this).data("notification_id");

            $.ajax({
                url: "/hrm/notification/seen/" + id,
                type: "GET",
                data: {
                    id: id,
                    _token: $("meta[name='csrf-token']").attr("content"),
                },
                success: function (data) {
                },
            });
        });

        function bulkSeen() {
            let ids = getSelectedNotificationIds();

            if (ids.length === 0) {
                Swal.fire({
                    icon: "warning",
                    title: "No Notifications Selected",
                    text: "Please select at least one notification.",
                });
                return;
            }

            Swal.fire({
                title: "Mark as Seen?",
                text: "Are you sure you want to mark these notifications as seen?",
                icon: "question",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes",
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('notification.bulk-seen') }}",
                        type: "POST",
                        data: {
                            ids: ids,
                            _token: $("meta[name='csrf-token']").attr("content"),
                        },
                        success: function (response) {
                            Swal.fire("Success!", "Notifications have been marked as seen.", "success");
                            location.reload();
                        },
                        error: function () {
                            Swal.fire("Error!", "Something went wrong. Try again later.", "error");
                        },
                    });
                }
            });
        }

        function bulkDelete() {
            let ids = getSelectedNotificationIds();

            if (ids.length === 0) {
                Swal.fire({
                    icon: "warning",
                    title: "No Notifications Selected",
                    text: "Please select at least one notification.",
                });
                return;
            }

            Swal.fire({
                title: "Delete Notifications?",
                text: "This action cannot be undone!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete them",
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('notification.delete') }}",
                        type: "POST",
                        data: {
                            ids: ids,
                            _token: $("meta[name='csrf-token']").attr("content"),
                        },
                        success: function (response) {
                            Swal.fire("Deleted!", "Notifications have been deleted.", "success");
                            location.reload();
                        },
                        error: function () {
                            Swal.fire("Error!", "Something went wrong. Try again later.", "error");
                        },
                    });
                }
            });
        }

        function getSelectedNotificationIds() {
            let ids = [];
            $(".column_id:checked").each(function () {
                ids.push($(this).val());
            });
            return ids;
        }

    </script>
@endsection