@extends('layouts.adminmaster')

@section('styles')
    <!-- INTERNAL Data table css -->
    <link href="{{ asset('build/assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}?v=1750838589"
        rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.css') }}?v=1750838589"
        rel="stylesheet" />

    <!-- INTERNAL Sweet-Alert css -->
    <link href="{{ asset('build/assets/plugins/sweet-alert/sweetalert.css') }}?v=1750838589" rel="stylesheet" />
@endsection

@section('content')
    <!--Page header-->
    <div class="page-header d-lg-flex d-block">
        <div class="page-leftheader">
            <h4 class="page-title">
                <span class="font-weight-normal text-muted ms-2">{{ lang('Custom Notifications', 'menu') }}</span>
            </h4>
        </div>
        <div class="page-rightheader ms-md-auto">
            <div class="d-flex align-items-end flex-wrap my-auto end-content breadcrumb-end">
                <div class="d-flex">
                    <div class="btn-list">
                        @can('Custom Notifications Employee')
                            <a href="{{ route('mail.employee') }}"
                                class="btn btn-success">{{ lang('Compose for Employees') }}</a>
                        @endcan
                        @can('Custom Notifications Customer')
                            <a href="{{ route('mail.customer') }}" class="btn btn-info ">{{ lang('Compose for Customers') }}</a>
                        @endcan

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Page header-->

    <!-- Custom Notification List -->
    <div class="row">
        <div class="col-md-12 col-lg-12 col-xl-12">
            <div class="card">
                <div class="card-header border-0">
                    <h4 class="card-title">{{ lang('Custom Notifications List') }}</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive spruko-delete" style="min-height: 280px;">
                        @can('Custom Notifications Delete')
                            <button id="massdeletenotify" class="btn btn-outline-light btn-sm mb-4 data-table-btn"
                                style="display: none;"><i class="fe fe-trash"></i> {{ lang('Delete') }}</button>
                        @endcan

                        <table class="table table-bordered border-bottom text-nowrap w-100 ticketdeleterow"
                            id="customnotifications">
                            <thead>
                                <tr>
                                    <th>{{ lang('Sl.No') }}</th>
                                    @cannot('Custom Notifications Delete')
                                        <th>
                                            <input type="checkbox" id="customCheckAll" disabled>
                                            <label for="customCheckAll"></label>
                                        </th>
                                    @endcannot
                                    @can('Custom Notifications Delete')
                                        <th>
                                            <input type="checkbox" id="customCheckAll">
                                            <label for="customCheckAll"></label>
                                        </th>
                                    @endcan

                                    <th>{{ lang('Name') }}</th>
                                    <th>{{ lang('User Type') }}</th>
                                    <th>{{ lang('Subject') }}</th>
                                    <th>{{ lang('Actions') }}</th>
                                </tr>
                            </thead>

                            <div id="hideAfterloading"><img src="{{ asset('build/assets/images/loader.svg') }}" alt="">
                                <p>loading.. Please Wait</p>
                            </div>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- End Custom Notification List -->
@endsection

@section('scripts')
    <!-- INTERNAL Vertical-scroll js-->
    <script src="{{ asset('build/assets/plugins/vertical-scroll/jquery.bootstrap.newsbox.js') }}?v=1750838589">
    </script>

    <!-- INTERNAL Data tables -->
    <script src="{{ asset('build/assets/plugins/datatable/js/jquery.dataTables.min.js') }}?v=1750838589"></script>
    <script src="{{ asset('build/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}?v=1750838589"></script>
    <script src="{{ asset('build/assets/plugins/datatable/dataTables.responsive.min.js') }}?v=1750838589">
    </script>
    <script src="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.min.js') }}?v=1750838589">
    </script>

    <!-- INTERNAL Sweet-Alert js-->
    <script src="{{ asset('build/assets/plugins/sweet-alert/sweetalert.min.js') }}?v=1750838589"></script>

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", (event) => {
            let tableData = @json($customnotify);
            // let tableData = Object.values(tableDataObject);
            let delPerm = @json(Auth::user()->can('Custom Notifications Delete'));
            let viewPerm = @json(Auth::user()->can('Custom Notifications View'));
            let dateFormat = @json(setting('date_format'));
            var dataTable;
            var tableDropDown;

            function truncateTitle(title) {
                const maxLength = 40;
                return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
            }

            loadTable(tableData);

            function loadTable(tableData) {
                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                document.getElementById('theadShow')?.classList.add('d-none');
                if (tableDropDown)
                    tableDropDown.destroy();

                // if (dataTable)
                //     dataTable.destroy();
                if ($.fn.DataTable.isDataTable('#customnotifications')) {
                    $('#customnotifications').DataTable().clear().destroy(); 
                }

                if (document.getElementById('tableBody'))
                    document.getElementById('tableBody').remove();

                let createTbody = document.createElement('tbody');
                createTbody.setAttribute('id', "tableBody");
                let rows = tableData.map((data, index) => {

                    let displayText = '';
                    let submails = data.touser; // Assuming data.touser is an array

                    if (submails.length > 0) {
                        submails.forEach(submail => {
                            // Handle employee display
                            if (submail.touser != null) {
                                if (submails.length > 1) {
                                    displayText = `{{ lang('Multiple Employees') }} `;
                                } else {
                                    displayText +=
                                        `${submail.touser.name} ${submail.touser.roles[0].name}`;
                                }
                            }

                            // Handle customer display
                            if (submail.tocust_id != null) {
                                if (submails.length > 1) {
                                    displayText = `{{ lang('Multiple Customers') }} `;
                                } else {
                                    displayText += `${submail.tocust.username}`;
                                }
                            }
                        });
                    }

                    let dispText = '';
                    if (submails.length > 0) {
                        submails.forEach((submail, index) => {
                            // Handle employee display
                            if (submail.touser != null) {
                                if (index === 0) {
                                    dispText += `{{ lang('Employees') }} `;
                                }
                            }

                            // Handle customer display
                            if (submail.tocust_id != null && submail.tocust.userType ===
                                'Customer') {
                                if (index === 0) {
                                    dispText += `{{ lang('Customer') }} `;
                                }
                            }
                        });
                    }


                    return `
                        <tr>
                            <td>${index + 1}</td>
                            <td>
                                ${delPerm
                                    ? ` <input type="checkbox" name="custom_checkbox[]" class="checkall" value="${data.id}" />` : '~'
                                }
                            </td>

                            <td>${truncateTitle(displayText)}</td>

                            <td> ${truncateTitle(dispText)} </td>

                            <td> ${truncateTitle(data.mailsubject)} </td>

                            <td>
                                <div class="btn-list">
                                    ${viewPerm ? `  <a href="javascript:void(0)" data-id="${data.id}"  class="action-btns1 edit-testimonial">
                                                        <i class="feather feather-eye text-primary" data-id="${data.id}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ lang('View') }}"></i>
                                                    </a> ` : '~' 
                                    }


                                    ${delPerm  ? `  <a href="javascript:void(0)" data-id="${data.id}" class="action-btns1 delete-category"  >
                                                                <i class="feather feather-trash-2 text-danger" data-id="${data.id}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ lang('Delete') }}"></i>
                                                            </a> ` : '~' 
                                    }

                                </div>
                            </td>

                        </tr>
                    `;
                });

                createTbody.innerHTML = rows.length ? rows.join('') : '';
                document.getElementById('customnotifications').appendChild(createTbody);
                let prev = {!! json_encode(lang('Previous')) !!};
                let next = {!! json_encode(lang('Next')) !!};
                let nodata = {!! json_encode(lang('No data available in table')) !!};
                let noentries = {!! json_encode(lang('No entries to show')) !!};
                let showing = {!! json_encode(lang('showing page')) !!};
                let ofval = {!! json_encode(lang('of')) !!};
                let maxRecordfilter = {!! json_encode(lang('- filtered from ')) !!};
                let maxRecords = {!! json_encode(lang('records')) !!};
                let entries = {!! json_encode(lang('entries')) !!};
                let show = {!! json_encode(lang('Show')) !!};
                let search = {!! json_encode(lang('Search...')) !!};
                // Reinitialize DataTable
                dataTable = $('#customnotifications').DataTable({
                    language: {
                        searchPlaceholder: search,
                        scrollX: "100%",
                        sSearch: '',
                        paginate: {
                            previous: prev,
                            next: next
                        },
                        emptyTable: nodata,
                        infoFiltered: `${maxRecordfilter} _MAX_ ${maxRecords}`,
                        info: `${showing} _PAGE_ ${ofval} _PAGES_`,
                        infoEmpty: noentries,
                        lengthMenu: `${show} _MENU_ ${entries}`,
                    },
                    order: [],
                    columnDefs: [{
                        "orderable": false,
                        "targets": [0, 1, 3]
                    }],
                });

                document.querySelector('.card-body').style.setProperty('filter','')

                $('.form-select').select2({
                    minimumResultsForSearch: Infinity,
                    width: '100%'
                });
                $('.form-select').on('focus', function() {
                    $(this).attr('aria-hidden', 'false');
                });
                document.getElementById('hideAfterloading')?.classList.add('d-none');
                document.getElementById('theadShow')?.classList.remove('d-none');

                initializeTooltips();
                // checkboxNoLabel()
                // buttonAlertFunctions();
                // Pagenate();

                function initializeTooltips() {
                    var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                    tooltipElements.forEach(function(element) {
                        new bootstrap.Tooltip(element);
                    });
                }


            }

            $(function() {
                "use strict";

                (function($) {

                    // Csrf field
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });



                    // Mass Delete
                    $('body').on('click', '#massdeletenotify', function() {
                        var id = [];
                        var parent = [];
                        $('.checkall:checked').each(function() {
                            id.push($(this).val());
                            parent.push($(this).closest('tr'));
                        });
                        if (id.length > 0) {
                            swal({
                                    title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                                    text: "{{ lang('This might erase your records permanently', 'alerts') }}",
                                    icon: "warning",
                                    buttons: true,
                                    dangerMode: true,
                                })
                                .then((willDelete) => {
                                    if (willDelete) {
                                        $.ajax({
                                            url: "{{ route('notifyall.delete') }}",
                                            method: "post",
                                            data: {
                                                id: id
                                            },
                                            success: function(data) {
                                                toastr.success(data.success);
                                                parent.forEach(element => {
                                                    element.addClass(
                                                        'fade-out');
                                                });

                                                tableData = tableData.filter(item => !id.includes(String(item.id)));
                                                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                                document.querySelector('.card-body').style.setProperty('filter','blur(1px)');

                                                setTimeout(() => {loadTable(tableData); }, 1500);
                                                $('.checkall:checked').prop('checked', false);
                                                $('#customCheckAll').prop('checked', false);
                                                $('#massdelete').hide();
                                                // location.reload();

                                            },
                                            error: function(data) {
                                                console.log(data);
                                            }
                                        });
                                    }
                                });
                        } else {
                            toastr.error(
                                '{{ lang('Please select at least one check box.', 'alerts') }}'
                            );
                        }
                    });

                    $('.form-select').select2({
                        minimumResultsForSearch: Infinity,
                        width: '100%'
                    });


                    //checkbox script
                    $(document).ready(function() {

                        $(document).on('click', '#customCheckAll', function() {
                            $('.checkall').prop('checked', this.checked);
                            updateMassDeleteVisibility();
                        });

                        $(document).on('click', '.checkall', function() {
                            updateCustomCheckAll();
                            updateMassDeleteVisibility();
                        });


                        $(document).on('click', '.pagination a', function() {

                            setTimeout(function() {
                                updateMassDeleteVisibility();
                            }, 100);
                        });


                        $('#customCheckAll').prop('checked', false);


                        function updateMassDeleteVisibility() {
                            if ($('.checkall:checked').length === 0) {
                                $('#massdeletenotify').hide();
                            } else {
                                $('#massdeletenotify').show();
                            }
                        }


                        function updateCustomCheckAll() {
                            var totalCheckboxes = $('.checkall').length;
                            var checkedCheckboxes = $('.checkall:checked').length;

                            if (checkedCheckboxes === totalCheckboxes) {
                                $('#customCheckAll').prop('checked', true);
                            } else {
                                $('#customCheckAll').prop('checked', false);
                            }
                        }
                    });

                })(jQuery);

            })

            // View the custom notification
            $('body').on('click', '.edit-testimonial', function() {
                var id = $(this).data("id");
                let _url = `{{ url('/admin/customnotification/${id}') }}`;
                $('#questionError').text('');
                $('#answerError').text('');
                $.ajax({
                    url: _url,
                    type: "GET",
                    success: function(response) {
                        if (response) {
                            $(".modal-title").text('View Custom Notification');
                            $("#mailsubject").html(response.mailsubject);
                            $("#mailtest").html(response.mailtext);
                            // $('#addfaq').modal('show');
                            $('#addfaq').modal({
                                backdrop:'static',
                                keyboard:false
                            }).modal('show');
                    

                        }
                    }
                });
            });

            $('body').on('click', '.delete-category', function() {
                var id = $(this).data("id");
                let parent = $(this).closest('tr');
                let _url = `{{ url('/admin/customnotification/delete/${id}') }}`;
                let _token = $('meta[name="csrf-token"]').attr('content');
                swal({
                        title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                        text: "{{ lang('This might erase your records permanently', 'alerts') }}",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            $.ajax({
                                url: _url,
                                type: 'DELETE',
                                data: {
                                    _token: _token
                                },
                                success: function(response) {

                                    toastr.success(response.success);
                                    $(parent[0]).addClass('fade-out');
                                    let newData = tableData.filter(
                                        item => item
                                        .id != parseInt(id));
                                    tableData = newData;
                                    document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                    document.querySelector('.card-body').style.setProperty('filter','blur(1px)');

                                    setTimeout(() => {
                                        parent.remove();
                                        loadTable(tableData);
                                    }, 1500);

                                    // location.reload();
                                },
                                error: function(data) {
                                    console.log('Error:', data);
                                }
                            });
                        }
                    });
            });
        });

        // Delete the custom notification
    </script>
@endsection
@section('modal')
    @include('admin.custom-notification.model')
@endsection