@extends('layouts.app')

@section('title', 'Notification Master')

@section('content')
    <div class="container mt-3">
        <!-- Button Container -->
        <div class="row mb-3">
            <div class="col-md-12 d-flex justify-content-end">
                <button type="button" id="create_notification" class="btn btn-primary" data-bs-toggle="modal"
                    data-bs-target="#addNotificationModal" data-mode="add">
                    Add New Notification
                </button>
            </div>
        </div>

        <!-- Add Notification Modal -->
        <div class="modal fade" id="addNotificationModal" tabindex="-1" aria-labelledby="addNotificationModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header text-white">
                        <h5 class="modal-title" id="addNotificationModalLabel">Add Notification</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addNotificationForm" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="notificationId" name="id">
                            <div class="text-center mb-4 position-relative">
                                <label for="notificationLogoFile" class="form-label" style=" cursor: pointer; transition: all 0.3s;">
                                    <img src="{{ asset('assets/images/profiles.png') }}" alt="Notification Logo" class="img-fluid rounded-circle" id="logoPreview" style="width: 120px; height: 120px; object-fit: cover; transition: all 0.3s;">
                                    <span id="removeLogo" class="position-absolute translate-middle" style="cursor: pointer; display: none; z-index: 10; font-size: 1.5rem; color: white; background-color: red; padding: 5px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);">×</span>
                                </label>
                            
                                <input type="file" class="form-control mt-2" id="notificationLogoFile" name="notification_logo" accept="image/*" style="display: none;">
                                <p class="form-label text-center mt-2">Supported formats: JPEG, PNG, GIF. Max size: 2MB.</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Notification Type</label>
                                <div class="row">
                                    <div class="col">
                                        <input type="radio" id="notificationTypeApp" name="notification_type" value="1" class="btn-check " required>
                                        <label class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center p-1" for="notificationTypeApp">
                                            <i class="mdi mdi-desktop-mac" style="margin-right: 8px; font-size: 18px; transition: color 0.3s;"></i>
                                            Application
                                        </label>
                                    </div>
                                    <div class="col">
                                        <input type="radio" id="notificationTypeEmail" name="notification_type" value="2" class="btn-check" required>
                                        <label class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center p-1" for="notificationTypeEmail">
                                            <i class="mdi mdi-email" style="margin-right: 8px; font-size: 18px; transition: color 0.3s;"></i>
                                            Email
                                        </label>
                                    </div>
                                    {{-- <div class="col">
                                        <input type="radio" id="notificationTypeWhatsApp" name="notification_type" value="3" class="btn-check" required>
                                        <label class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center p-1" for="notificationTypeWhatsApp">
                                            <i class="mdi mdi-whatsapp" style="margin-right: 8px; font-size: 18px; transition: color 0.3s;"></i>
                                            WhatsApp
                                        </label>
                                    </div> --}}
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">User Type</label>
                                <select class="form-select" id="notificationUserType" name="user_type" required>
                                    <option value="">Select User Type</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">User</label>
                                <select class="form-select" id="notificationUser" name="user" required>
                                    <option value="">Select User</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Title</label>
                                <input type="text" id="notificationTitle" class="form-control" name="title" placeholder="Enter Title" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Message</label>
                                <textarea class="form-control" id="notificationMessage" name="message" rows="4" placeholder="Enter Your Text Here" required></textarea>
                            </div>

                            <div class="d-flex justify-content-end mt-4">
                                <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal" id="cancelBtn">Cancel</button>
                                <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <!-- Existing DataTable code -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <table id="datatable" class="table table-striped dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>User Type</th>
                                    <th>User</th>
                                    <th>Notification Type</th>
                                    <th>Title</th>
                                    <th>Message</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- DataTables will populate this -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CSRF Token Meta Tag -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            // Constants
            var notificationListAjax = '{{ route("notification.list.ajax") }}';
            var searchUserType = '{{ route("search.userType") }}';
            var searchUser = '{{ route("search.user") }}';
            var addNotificationAjax = '{{ route("add.notification.ajax") }}';
            var notificationGet = '{{ route("notification.get") }}';
            var notificationDelete = '{{ route("notification.delete") }}';

            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            var logoUploaded = false; // Flag to track logo upload status
             let viewAllClicked = false;
            // DataTable Initialization
            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: notificationListAjax,
                    type: "POST",
                    data: function(d) {
                        d._token = csrfToken;
                    }
                },
                columns: [{
                        data: "id"
                    },
                    {
                        data: "user_type"
                    },
                    {
                        data: "user"
                    },
                    {
                        data: "notification_type"
                    },
                    {
                        data: "title"
                    },
                    {
                        data: "message","orderable": false, "searchable": false
                    },
                    {
                        data: "action","orderable": false, "searchable": false
                    }
                ],
                "initComplete": function() {
                const $label = $('#datatable_filter label');
                const $searchInput = $('#datatable_filter input');

                // Remove the text node "Search:"
                $label.contents().filter(function() {
                    return this.nodeType === 3;
                }).remove();

                $searchInput
                    .addClass('form-control search-input')
                    .attr('placeholder', 'Search menu...');

                $searchInput.wrap('<div class="position-relative"></div>');
                $searchInput.after('<i class="bx bx-search-alt search-icon"></i>');
            },
            "drawCallback": function() {
                const $info = $('#datatable_info');
                 $('#viewAllLink').remove();

                 const linkHtml = ` &nbsp;|&nbsp; <a href="javascript:void(0);" id="viewAllLink">
                        ${viewAllClicked ? 'Show Less <i class="fas fa-chevron-up"></i>' : 'View All <i class="fas fa-chevron-right"></i>'}
                    </a>`;

                    $info.append(linkHtml);

                $('#viewAllLink').off('click').on('click', function () {
                    const table = $('#datatable').DataTable();

                    viewAllClicked = !viewAllClicked;

                    usersPageLength = viewAllClicked ? -1 : 10;

                    table.page.len(usersPageLength).draw(false);  // false = stay on current page
                });
            }
            });

            // Reset form for new notifications
            $('#create_notification').on('click', function() {
                $('#addNotificationModalLabel').text('Add New Notification');
                $('#addNotificationForm')[0].reset();
                $('#notificationId').val('');
                $('#logoPreview').attr('src', '{{ asset('assets/images/profiles.png') }}'); // Reset preview
                $('#removeLogo').hide(); // Hide remove icon
                logoUploaded = false; // Reset upload flag
            });

            // User Type Select2 Initialization
            $("#notificationUserType").select2({
                ajax: {
                    url: searchUserType,
                    dataType: 'json',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: function(params) {
                        return {
                            q: params.term || '',
                            page: params.page || 1
                        };
                    },
                    processResults: function(data) {
                        if (!Array.isArray(data)) {
                            console.error("Expected an array, but got:", data);
                            return {
                                results: []
                            };
                        }
                        return {
                            results: data,
                            pagination: {
                                more: false // Adjust based on your pagination logic
                            }
                        };
                    },
                    cache: true
                },
                placeholder: 'Search for User Types',
                dropdownParent: $("#addNotificationModal"),
            }).on('select2:select', function(e) {
                var selectedUserTypeId = e.params.data.id;
                $("#notificationUser").val(null).trigger('change');
            });

            $("#notificationUser").select2({
                ajax: {
                    url: searchUser,
                    dataType: 'json',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: function(params) {
                        return {
                            q: params.term || '',
                            page: params.page || 1,
                            user_type: $('#notificationUserType').val()
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;

                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count // Adjust based on your pagination logic
                            }
                        };
                    },
                },
                placeholder: 'Search for User',
                dropdownParent: $("#addNotificationModal .modal-body")
            });

            // Notification Logo File Input Change Event
            $('#notificationLogoFile').on('change', function(event) {
    const file = event.target.files[0];
    const validImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
    const maxSize = 2 * 1024 * 1024; // 2 MB

    if (file) {
        // Validate file type and size
        if (!validImageTypes.includes(file.type) || file.size > maxSize) {
            Swal.fire({
                icon: 'error',
                title: 'Invalid Image',
                text: 'Please upload a valid image file (JPEG, PNG, GIF) with size less than 2MB.',
            });
            $('#notificationLogoFile').val(''); // Reset file input
            $('#logoPreview').attr('src', '{{ asset('assets/images/profiles.png') }}'); // Reset preview
            $('#removeLogo').hide(); // Hide remove icon
            $('#imageInstruction').text('Click to upload logo'); // Reset instruction text
            logoUploaded = false; // Reset upload flag
            return;
        }

        const reader = new FileReader();
        reader.onload = function(e) {
            $('#logoPreview').attr('src', e.target.result);
            $('#removeLogo').show(); // Show the remove icon
            $('#imageInstruction').text('change logo'); // Update instruction text
            logoUploaded = true; // Set the flag to true
        };
        reader.readAsDataURL(file);
    }
});

// Remove Logo Icon Click Event
$('#removeLogo').on('click', function(event) {
    event.preventDefault();
    $('#logoPreview').attr('src', '{{ asset('assets/images/profiles.png') }}'); // Reset to default image
    $('#notificationLogoFile').val(''); // Clear the file input
    $(this).hide(); // Hide remove icon
    $('#imageInstruction').text('Upload Logo'); // Reset instruction text
    logoUploaded = false; // Reset upload flag
});

// Image Instruction Button Click to Trigger File Input
$('#imageInstruction').on('click', function(event) {
    event.preventDefault();
    $('#notificationLogoFile').click(); // Trigger the file input click
});


            $('#addNotificationForm').on('submit', function(event) {
                event.preventDefault();
                $('#addNotificationForm button[type="submit"]').prop('disabled', true);

                // Check if a logo has been uploaded
                if (!logoUploaded) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No Logo Uploaded',
                        text: 'Please upload a notification logo before submitting the form.',
                    });
                    $('#addNotificationForm button[type="submit"]').prop('disabled', false);
                    return;
                }

                // Validate form fields
                if (!this.checkValidity()) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Form Invalid',
                        text: 'Please fill in all required fields.',
                    });
                    $('#addNotificationForm button[type="submit"]').prop('disabled', false);
                    return;
                }

                $.ajax({
                    url: addNotificationAjax,
                    type: 'POST',
                    data: new FormData(this),
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        // $('#preloader').show();
                    },

                    success: function(response) {
                        toastr.success(response.message);
                        $('#addNotificationModal').modal('hide');
                        $('#datatable').DataTable().ajax.reload();
                        $('#addNotificationForm button[type="submit"]').prop('disabled',
                        false);

                        //  setTimeout(function() {
                        //      $('#preloader').fadeOut(700);
                        //      location.reload();
                        //  }, 2000);
                    },
                    error: function(xhr) {
                        let errorMessage = 'An unexpected error occurred.';

                        if (xhr.responseJSON) {
                            if (xhr.responseJSON.errors) {
                                errorMessage = '';
                                for (const [key, value] of Object.entries(xhr.responseJSON
                                        .errors)) {
                                    errorMessage += value.join(', ') +
                                    '<br>';
                                }
                            } else if (xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON
                                .message;
                            }
                        }

                        toastr.error(errorMessage);
                        $('#addNotificationForm button[type="submit"]').prop('disabled',
                        false);
                    }
                });
            });
            $(document).on('click', '.view-btn', function() {
                // $('#preloader').show();
                $('#cancelBtn').hide();
                $('#submitBtn').hide(); 
                var id = $(this).data('id');
                var url = '{{ url('notification') }}/' + id;

                console.log('Fetching notification with ID:', id);
                $.ajax({
                    url: notificationGet+'?id='+id,
                    method: 'GET',
                    success: function(response) {
                        console.log('Response received:', response);
                        let data = response.data;
                        if (response.data) {
                            $('#addNotificationModalLabel').text('Edit Notification #'+data.id);
                            $('#notificationId').val(data.id);
                            $('#notificationTitle').val(data.title);
                            $('#notificationMessage').val(data.message);
                            $('input[name="notification_type"][value="' + data.notification_type + '"]').prop('checked', true);
                            setSelectValue('#notificationUserType', data.user_type, data.type_name);
                            setSelectValue('#notificationUser', data.user_id, data.user_name);

                            if(data.notification_logo != ''){
                                $('#logoPreview').attr('src',data.notification_logo);
                                $('#removeLogo').attr('style','cursor: pointer;  z-index: 10; font-size: 1.5rem; color: black;');
                                logoUploaded = true;
                            }
                            $('#notificationId').prop('disabled', true);
                            $('#notificationTitle').prop('disabled', true);
                            $('#notificationMessage').prop('disabled', true);
                            $('input[name="notification_type"]').prop('disabled', true);
                            $('#notificationUserType').prop('disabled', true);
                            $('#notificationUser').prop('disabled', true);
                            $('#removeLogo').prop('disabled', true);

                             $('#addNotificationModal').modal('show');
                            //  setTimeout(function() {
                            //   $('#preloader').fadeOut(700);
                            //  }, 500);
                        } else {
                          toastr.error('No data found for this notification.');
                     }
                  },
                 error: function(jqXHR, textStatus, errorThrown) {
                   console.error('AJAX error:', textStatus, errorThrown); // Log error details
                   toastr.error('Failed to load notification data: ' + errorThrown);
        }
    });
});
            function setSelectValue(selectSelector, id, name) {
                var optionExists = $(selectSelector + ' option[value="' + id + '"]').length > 0;

                if (!optionExists) {
                    var newOption = new Option(name, id, true, true);
                    $(selectSelector).append(newOption);
                }

                $(selectSelector).val(id).trigger('change');
            }
            // $(document).on('click', '.delete-btn', function(e) {
            //     e.preventDefault();

            //     var id = $(this).data('id');

            //     Swal.fire({
            //         title: 'Are you sure?',
            //         text: "You won't be able to revert this!",
            //         icon: 'warning',
            //         showCancelButton: true,
            //         confirmButtonColor: '#3085d6',
            //         cancelButtonColor: '#d33',
            //         confirmButtonText: 'Yes, delete it!'
            //     }).then((result) => {
            //         if (result.isConfirmed) {
            //             $.ajax({
            //                 url: notificationDelete+'?id='+id, // Adjust URL for notifications
            //                 type: 'delete',
            //                 headers: {
            //                     'X-CSRF-TOKEN': csrfToken // Make sure csrfToken is defined
            //                 },
            //                 success: function(data) {
            //                     if (data.message) {
            //                         Swal.fire('Deleted!', data.message, 'success');
            //                         $('#datatable').DataTable().ajax.reload(); // Reload the DataTable
            //                     } else {
            //                         Swal.fire('Error!', 'An unexpected error occurred while deleting the notification.', 'error');
            //                     }
            //                 },
            //                 error: function(xhr, status, error) {
            //                     Swal.fire('Error!', xhr.responseJSON?.message || 'An unexpected error occurred.', 'error');
            //                 }
            //             });
            //         }
            //     });
            // });

    //         $(document).on('click', '.view-btn', function() {
    //     var id = $(this).data('id');

            function resetNotificationForm() {
                $('#addNotificationModalLabel').text('Add New Notification');
                $('#notificationId').val('');
                $('#notificationTitle').val('');
                $('#notificationMessage').val('');
                $('#notificationType').val('');
                $('#notificationUserType').val('').trigger('change');
                $('#notificationUser').val('').trigger('change');

                $('#logoPreview').attr('src', '{{ url('assets/images/profiles.png') }}');
                $('#logoPreview').attr('style', 'width: 100px; height: 100px; object-fit: cover; cursor: pointer;');
                $('#removeLogo').attr('style', 'cursor: pointer; z-index: 10; font-size: 1.5rem; color: black; display: none;');

                $('#notificationId').prop('disabled', false);
                $('#notificationTitle').prop('disabled', false);
                $('#notificationMessage').prop('disabled', false);
                $('input[name="notification_type"]').prop('disabled', false);
                $('#notificationUserType').prop('disabled', false);
                $('#notificationUser').prop('disabled', false);
                $('#removeLogo').prop('disabled', false);
            }

            // Reset the form when the create button is clicked
            $('#create_notification').on('click', function() {
                $('#cancelBtn').show();
                $('#submitBtn').show();
                resetNotificationForm();
            });

        });
    </script>

@endsection