@extends('admin.layout.index')
@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="page-content">
        <div class="container-fluid">
            <!-- Start Page Title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">{{ __('translations.Notifications & Alerts Management') }}</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('translations.Admin') }}</a></li>
                                <li class="breadcrumb-item active">{{ __('translations.Notifications & Alerts') }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Page Title -->

            <!-- 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="tab-content">
                <!-- Notifications Tab -->
                <div class="tab-pane fade show active" id="notifications" role="tabpanel"
                    aria-labelledby="notifications-tab">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header border-bottom-dashed">
                                    <div class="row g-4 align-items-center">
                                        <div class="col-sm">
                                            <h5 class="card-title mb-0">{{ __('translations.Automatic Notifications') }}</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <table id="clinicTable" class="table nowrap align-middle" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>{{ __('translations.No.') }}</th>
                                                <th>{{ __('translations.User Name') }}</th>
                                                <th>{{ __('translations.Email') }}</th>
                                                <th>{{ __('translations.Registration Date') }}</th>
                                                <th style="width: 150px;">{{ __('translations.Action') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Add more rows as needed -->
                                        </tbody>
                                    </table>

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

                <!-- Alerts Tab -->
                <div class="tab-pane fade" id="alerts" role="tabpanel" aria-labelledby="alerts-tab">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header border-bottom-dashed">
                                    <div class="row g-4 align-items-center">
                                        <div class="col-sm">
                                            <h5 class="card-title mb-0">{{ __('translations.Manual Alerts') }}</h5>
                                        </div>
                                        <div class="col-sm-auto">
                                            <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal"
                                                data-bs-target="#sendAlertModal">
                                                <i class="ri-send-plane-2-line me-2"></i>{{ __('translations.Send Alert') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <table id="alertsTable" class="table nowrap align-middle" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>{{ __('translations.Date') }}</th>
                                                <th>{{ __('translations.Recipient') }}</th>
                                                <th>{{ __('translations.Message') }}</th>
                                                <th>{{ __('translations.Status') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- <tr>
                                                <td>05-Oct-2024</td>
                                                <td>All Patients</td>
                                                <td>System Maintenance Update</td>
                                                <td><span class="badge bg-success">Sent</span></td>
                                            </tr>
                                            <tr>
                                                <td>04-Oct-2024</td>
                                                <td>All Clinics</td>
                                                <td>Policy Change Notification</td>
                                                <td><span class="badge bg-success">Sent</span></td>
                                            </tr> --}}
                                            <!-- Add more rows as needed -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </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="sendAlertModalLabel">{{ __('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="alert-form">
                        @csrf
                        <div class="mb-3">
                            <label for="recipient-type" class="form-label">{{ __('translations.Recipient') }}</label>
                            <select class="form-select" id="recipient-type" name="recipient_type">
                                <option value="all-patients">{{ __('translations.All Patients') }}</option>
                                <option value="all-clinics">{{ __('translations.All Clinics') }}</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="alert-message" class="form-label">{{ __('translations.Message') }}</label>
                            <textarea class="form-control" id="alert-message" name="message" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">{{ __('translations.Send Alert') }}</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.Delete') }}</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('admin-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
                    },
                ]
            });

            // 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('admin.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('getAdminAlerts') }}',
                columns: [{
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'recipient_type',
                        name: 'recipient_type'
                    },
                    {
                        data: 'message',
                        name: 'message'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                ]
            });

            $('#alert-form').submit(function(e) {
                e.preventDefault();

                $.ajax({
                    url: '{{ route('alerts.send') }}',
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#sendAlertModal').modal('hide');
                        $('#alerts-table').DataTable().ajax.reload();
                        alert(response.success);
                    },
                    error: function(xhr) {
                        // console.error(xhr.responseJSON);
                        alert('Error sending alert!');
                    }
                });
            });
        });
    </script>

    <script>
        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