@extends('doctorpanel.layout.app')
@section('title', 'Waiting Room | Notifications and Alerts Management')
@section('custom-style')
    <style>
        .nav-tabs .nav-item.show .nav-link,
        .nav-tabs .nav-link.active {
            background-color: #000000;
            color: white;
        }
    </style>
@endsection
@section('content')
    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">{{ __('translations.Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('translations.Notifications') }}</a></li>
        </ol>
    </div>

    <div class="page-content">
        <div class="container-fluid">
            <!-- Tabs for Notifications and Alerts -->
            <ul class="nav nav-tabs mb-3" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="notifications-tab" data-bs-toggle="tab" href="#notifications"
                        role="tab" aria-controls="notifications" aria-selected="true">{{ __('translations.Notifications') }}</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="alerts-tab" data-bs-toggle="tab" href="#alerts" role="tab"
                        aria-controls="alerts" aria-selected="false">{{ __('translations.Alerts') }}</a>
                </li>
            </ul>

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card p-3">
                <form id="filterForm">
                    <div class="row g-3">

                        <!--end col-->
                        <div class="col-xxl-5 col-sm-6">
                            <div>
                                <input type="time" id="filterTime" class="form-control" placeholder="{{ __('translations.Select time') }}">
                            </div>
                        </div>
                        <!--end col-->

                        <!--end col-->
                        <!--end col-->
                        <div class="col-xxl-3 col-sm-4">
                            <div>
                                <select id="filterStatus" name="status" class="form-select form-select-lg"
                                    aria-label=".form-select-lg example">
                                    <option value="" selected>{{ __('translations.Type') }}</option>
                                    <option value="Clinic">{{ __('translations.Clinic') }}</option>
                                    <option value="Admin">{{ __('translations.Admin') }}</option>
                                </select>
                            </div>
                        </div>
                        <!--end col-->
                        <!--end col-->
                        <div class="col-xxl-2 col-sm-4">
                            <div>
                                <button type="button" class="btn btn-primary w-100" onclick="SearchData();"><i
                                        class="ri-equalizer-fill me-1 align-bottom"></i>
                                    {{ __('translations.Filters') }}
                                </button>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-4">
                            <div>
                                <a href="{{ route('appointments') }}" class="btn btn-primary w-100"><i
                                        class="ri-equalizer-fill me-1 align-bottom"></i>
                                    {{ __('translations.Clear Filters') }}
                                </a>
                            </div>
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ __('translations.All Notifications') }}</h4>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="appointmentTable" class="display" style="min-width: 845px">
                            <thead>
                                <tr>
                                    <th>{{ __('translations.No.') }}</th>
                                    <th>{{ __('translations.Description') }}</th>
                                    <th>{{ __('translations.Type') }}</th>
                                    <th>{{ __('translations.Date') }}</th>
                                    <th>{{ __('translations.Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($notifications as $key => $notification)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $notification->message }}</td>
                                        <td><span
                                                class="badge bg-danger">{{ ucfirst(str_replace('-', ' ', $notification->recipient_type)) }}</span>
                                        </td>
                                        <td>{{ explode(' ', $notification->updated_at)[0] }}</td>
                                        <td>
                                            <a href="#" class="btn btn-danger shadow btn-xs sharp me-1"
                                                data-bs-toggle="modal" data-bs-target="#deleteModal"
                                                onclick="deleteRecord({{ $notification->id }})" title="Delete">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                            {{-- <a href="#" class="btn btn-danger shadow btn-xs sharp me-1"
                                                data-bs-toggle="modal" data-bs-target="#deleteModal"
                                                onclick="deleteRecord({{ $notification->id }})" title="Delete"><i
                                                    class="fa fa-trash"></i>
                                            </a> --}}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Send Alert Modal -->
    <!-- Modal -->
    <div class="modal fade" id="sendAlertModal" tabindex="-1" aria-labelledby="sendAlertModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">{{ __('translations.Delete Notification') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{ __('translations.Are you sure you want to delete this notification?') }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('translations.Cancel') }}</button>
                    <form id="deleteUser" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" id="submitDelForm" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- Send Alert Modal -->
    <div class="modal fade" id="sendNotificationModal" tabindex="-1" aria-labelledby="sendNotificationModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="sendNotificationModalLabel">{{ __('translations.Send Alert') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="sendNotifications">
                        @csrf
                        <input type="hidden" name="user_id" id="user_id" value="">
                        <div class="mb-3">
                            <label for="notifyMessage" class="form-label">{{ __('translations.Message') }}</label>
                            <textarea class="form-control" name="notification_message" id="notifyMessage" rows="3"></textarea>
                        </div>
                        <button type="submit" id="notyfBtn" class="btn btn-primary">{{ __('translations.Send Alert') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editCategoryModalLabel">{{ __('translations.Edit Notification Template') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="editTemplateName" class="form-label">{{ __('translations.Template Name') }}</label>
                            <input type="text" class="form-control" id="editTemplateName"
                                value="Booking Confirmation">
                        </div>
                        <div class="mb-3">
                            <label for="editTemplateType" class="form-label">{{ __('translations.Type') }}</label>
                            <select class="form-select" id="editTemplateType">
                                <option value="email" selected>{{ __('translations.Email') }}</option>
                                <option value="sms">{{ __('translations.SMS') }}</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editTemplateStatus" class="form-label">{{ __('translations.Status') }}</label>
                            <select class="form-select" id="editTemplateStatus">
                                <option value="active" selected>{{ __('translations.Active') }}</option>
                                <option value="inactive">{{ __('translations.Inactive') }}</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">{{ __('translations.Save Changes') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Modal -->
    <div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteCategoryModalLabel">{{ __('translations.Delete Notification Template') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('translations.Are you sure you want to delete this notification template?') }}</p>
                    <p><strong>{{ __('translations.Template Name') }}: </strong> {{ __('translations.Booking Confirmation') }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('translations.Cancel') }}</button>
                    <button type="button" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('custom-script')
    <script>
        // Delete
        function deleteRecord(id) {
            $('#deleteUserId').val(id);
        }

        $(document).ready(function() {
            let table = $('#clinicTable').DataTable({
                "processing": true,
                "serverSide": true,
                "paging": true,
                "bPaginate": true,
                "pageLength": 10,
                "bLengthChange": false,
                "ordering": false,
                "lengthMenu": [
                    [5, 10, 20, 50],
                    ['5', '10', '20', '50']
                ],
                "ajax": {
                    "url": "{{ route('doctorpanel.notifications') }}",
                    "type": "GET",
                    "data": function(d) {
                        // "_token": "{{ csrf_token() }}",
                        d.search = $('#userSearch').val();
                        d.date = $('#datepicker-range').val();
                    }
                },
                'columns': [{
                        data: null, // This column will not have any data, just an index
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return meta.row + 1 + (meta.settings
                                ._iDisplayStart); // Calculate serial number
                        },
                    },
                    {
                        data: 'username',
                        orderable: false
                    },

                    {
                        data: 'email',
                        orderable: false
                    },
                    {
                        data: 'created_at',
                        orderable: false
                    },
                    // {
                    //     data: 'status',
                    //     orderable: false
                    // },
                    {
                        data: 'action',
                        orderable: false
                    },
                ],
                "language": {
                    "emptyTable": "No records found"
                }
            });

            // Global search via DataTables' built-in method
            $('#globalSearch').on('keyup', function() {
                // table.search(this.value).reload();
                table.search(this.value).draw();
            });

            // Live Search for #userSearch input
            $('#userSearch').on('keyup', function() {
                table.ajax.reload(); // Reload the table with the updated search query
            });

            // Date filter
            $('#datepicker-range').on('change', function() {
                table.ajax.reload();
            });

            // Clear filters functionality
            $('#clearFiltersButton').on('click', function() {
                $('#userSearch').val(''); // Clear search input
                $('#datepicker-range').val('').trigger('change'); // Clear date filter
                table.ajax.reload(); // Reload the table without filters
            });
            // Handle status toggle
        });

        function notificationSend(userId) {
            // Set the values in the modal
            $('#user_id').val(userId);

            // Show the modal
            $('#notifyModal').modal('show');
        }


        $("#sendNotifications").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#notyfBtn");
            const modal = $('#sendNotificationModal');
            let formData = new FormData($("#sendNotifications")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('doctorpanel.sendNotificationToPatient') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    if (res.success === true) {
                        btn.prop('disabled', false);
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Yes, Cancel');
                        modal.modal('hide');
                        console.log(res);

                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    // Check if responseJSON exists and has a message
                    if (e.responseJSON && e.responseJSON.message) {
                        notyf.error({
                            message: e.responseJSON.message,
                            duration: 3000
                        });
                    } else {
                        notyf.error({
                            message: 'An unexpected error occurred.',
                            duration: 3000
                        });
                    }
                }
            });
        });

        $(document).ready(function() {
            $('#alertsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('doctorpanel.getAdminAlerts') }}',
                columns: [{
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'recipient_type',
                        name: 'recipient_type'
                    },
                    {
                        data: 'message',
                        name: 'message'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                ],
                "language": {
                    "emptyTable": "No records found"
                }
            });

            $('#alert-form').submit(function(e) {
                e.preventDefault();
                const btn = $("#send-alert-btn");
                $.ajax({
                    url: '{{ route('doctorpanel.alerts.send') }}',
                    method: 'POST',
                    data: $(this).serialize(),
                    beforeSend: function() {
                        btn.prop('disabled', true);
                        btn.html(
                            '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                        );
                        $('.error-message').html('');
                    },
                    success: function(response) {
                        if (response.success === true) {
                            $('#sendAlertModal').modal('hide');
                            $('#alerts-table').DataTable().ajax.reload();
                            btn.prop('disabled', false);
                            notyf.success({
                                message: response.message,
                                duration: 3000
                            });
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);
                        } else {
                            btn.prop('disabled', false);
                            btn.html('Send Alert');
                            $('#sendAlertModal').modal('hide');
                            notyf.error({
                                message: response.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function(xhr) {
                        notyf.error({
                            message: 'An unexpected error occurred.',
                            duration: 3000
                        });
                    }
                });
            });
        });
    </script>

    <script>
        setTimeout(() => {
            document.querySelector('#clinicTable_previous').innerHTML = '<<';
            document.querySelector('#clinicTable_next').innerHTML = '>>';
            document.querySelector('#alertsTable_previous').innerHTML = '<<';
            document.querySelector('#alertsTable_next').innerHTML = '>>';
        }, 1000);
        const notifyMessage = document.getElementById('notifyMessage');
        const charCount = document.getElementById('charCount');
        const maxChars = 256;

        // Function to update character count
        function updateCharCount() {
            const remainingChars = maxChars - notifyMessage.value.length;
            charCount.textContent = `${remainingChars} characters remaining`;

            // Change color if limit is reached
            if (remainingChars < 0) {
                charCount.style.color = 'red';
            } else {
                charCount.style.color = '';
            }
        }

        // Event listener for input
        notifyMessage.addEventListener('input', function() {
            if (notifyMessage.value.length > maxChars) {
                notifyMessage.value = notifyMessage.value.substring(0, maxChars);
            }
            updateCharCount();
        });

        // Event listener for paste
        notifyMessage.addEventListener('paste', function(e) {
            e.preventDefault(); // Prevent the default paste action
            const pastedData = e.clipboardData.getData('text/plain'); // Get pasted data as plain text
            const currentLength = notifyMessage.value.length;

            // Calculate the remaining characters
            const remainingChars = maxChars - currentLength;

            // If the pasted data is longer than the remaining characters, trim it
            if (pastedData.length > remainingChars) {
                notifyMessage.value += pastedData.substring(0, remainingChars);
            } else {
                notifyMessage.value += pastedData; // Otherwise, just append the pasted data
            }

            updateCharCount(); // Update character count after pasting
        });

        // Initial character count update
        updateCharCount();
    </script>

@endsection