@extends('layouts.adminmaster')

@section('styles')
    <!-- INTERNAl Summernote css -->
    <link rel="stylesheet" href="{{ asset('build/assets/plugins/summernote/summernote.css') }}?v=1746420268">

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

    <!-- INTERNAL Datepicker css-->
    <link href="{{ asset('build/assets/plugins/modal-datepicker/datepicker.css') }}?v=1746420268" rel="stylesheet" />

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

@section('content')
    <!--Page header-->
    <div class="page-header d-xl-flex d-block">
        <div class="page-leftheader">
            <h4 class="page-title"><span
                    class="font-weight-normal text-muted ms-2">{{ lang('Announcements', 'menu') }}</span></h4>
        </div>
    </div>
    <!--End Page header-->

    <!--Announcement Settings -->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card">
            <div class="card-header border-0">
                <h4 class="card-title">{{ lang('Announcement Settings') }}</h4>
            </div>
            <form method="POST" action="{{ route('settings.announcement') }}" enctype="multipart/form-data">
                <div class="card-body py-0">
                    @csrf

                     
                    <div class="row">
                        <div class="switch_section mt-3 mb-1">
                            <div class="switch-toggle d-flex ">
                                <a class="onoffswitch2">
                                    <input type="radio" name="ANNOUNCEMENT_USER" id="allusers"
                                        class=" toggle-class onoffswitch2-checkbox" value="all_users"
                                        @if (setting('ANNOUNCEMENT_USER') == 'all_users') checked="" @endif>
                                    <label for="allusers" class="toggle-class onoffswitch2-label"></label>
                                </a>
                                <div class="ps-3">
                                    <label class="form-label">{{ lang('All Users', 'setting') }}</label>
                                    <small
                                        class="text-muted"><i>({{ lang('If you enable this "All Users" setting feature, the "Announcement" will appear to both the users, i.e., for login users as well as non login users on the "Application.', 'setting') }})</i></small>
                                </div>
                            </div>
                        </div>
                        <div class="switch_section mt-2 mb-1">
                            <div class="switch-toggle d-flex ">
                                <a class="onoffswitch2">
                                    <input type="radio" name="ANNOUNCEMENT_USER" id="onlyloginuser"
                                        class=" toggle-class onoffswitch2-checkbox" value="only_login_user"
                                        @if (setting('ANNOUNCEMENT_USER') == 'only_login_user') checked="" @endif>
                                    <label for="onlyloginuser" class="toggle-class onoffswitch2-label"></label>
                                </a>
                                <div class="ps-3">
                                    <label class="form-label">{{ lang('Only Login Users', 'setting') }}</label>
                                    <small
                                        class="text-muted"><i>({{ lang('If you enable this "Only Login Users" setting feature, the "Announcement" will appear only for the Login users on the "Application."', 'setting') }})</i></small>
                                </div>
                            </div>
                        </div>
                        <div class="switch_section mt-2 mb-2">
                            <div class="switch-toggle d-flex ">
                                <a class="onoffswitch2">
                                    <input type="radio" name="ANNOUNCEMENT_USER" id="nonloginusers"
                                        class=" toggle-class onoffswitch2-checkbox" value="non_login_users"
                                        @if (setting('ANNOUNCEMENT_USER') == 'non_login_users') checked="" @endif>
                                    <label for="nonloginusers" class="toggle-class onoffswitch2-label"></label>
                                </a>
                                <div class="ps-3">
                                    <label class="form-label">{{ lang('Non Login Users', 'setting') }}</label>
                                    <small
                                        class="text-muted"><i>({{ lang('If you enable this "Non Login Users" setting feature, the "Announcement" will appear for the non login users on the "Application."', 'setting') }})</i></small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="form-group float-end">
                        <button type="submit" class="btn btn-secondary"
                            onclick="this.disabled=true;this.innerHTML=`Saving <i class='fa fa-spinner fa-spin'></i>`;this.form.submit();">{{ lang('Save Changes') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- End Announcement Settings -->

    <!--Announcement List -->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header border-0">

                <h4 class="card-title mb-md-max-2">{{ lang('Announcements', 'menu') }}</h4>
                <div class="card-options">
                    @can('Announcements Create')
                        {{-- <a href="javascript:void(0)" class="btn btn-secondary me-3" id="create-new-testimonial">{{lang('Add New Announcement')}}</a> --}}
                        <a href="{{ route('announcement.create') }}"
                            class="btn btn-secondary me-3">{{ lang('Add New Announcement') }}</a>
                    @endcan

                </div>
            </div>
            <div class="card-body" style="min-height: 230px;" >
                <div class="table-responsive">
                    @can('Announcements 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 ticketdeleterow w-100 "
                        id="support-articlelists">
                        <thead>
                            <tr>
                                <th width="10">{{ lang('Sl.No') }}</th>
                                @can('Announcements Delete')
                                    <th width="10">
                                        <input type="checkbox" id="customCheckAll">
                                        <label for="customCheckAll"></label>
                                    </th>
                                @endcan
                                @cannot('Announcements Delete')
                                    <th width="10">
                                        <input type="checkbox" id="customCheckAll" disabled>
                                        <label for="customCheckAll"></label>
                                    </th>
                                @endcannot

                                <th>{{ lang('Title') }}</th>
                                <th>{{ lang('Start Date') }}</th>
                                <th>{{ lang('End Date') }}</th>
                                <th>{{ lang('Selected Day') }}</th>
                                <th>{{ lang('Status') }}</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>
    <!-- End Announcement List -->
@endsection

@section('modal')
    @include('admin.announcement.model')
@endsection

@section('scripts')
    <!-- INTERNAL Summernote js  -->
    <script src="{{ asset('build/assets/plugins/summernote/summernote.js') }}?v=1746420268"></script>

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

    <!-- INTERNAL Index js-->
    @vite(['resources/assets/js/support/support-sidemenu.js'])
    @vite(['resources/assets/js/support/support-articles.js'])

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

    <script src="{{ asset('build/assets/plugins/jquery/jquery-ui.js') }}?v=1746420268"></script>
    @include('includes.admin.datatable')
    <!-- INTERNALdatepicker js-->

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", (event) => {
            let tableData = @json($announcements);
            let delPerm = @json(Auth::user()->can('Announcements Delete'));
            let editPerm = @json(Auth::user()->can('Announcements Edit'));
            let dateFormat = @json(setting('date_format'));
            var SITEURL = '{{ url('') }}';
            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 ($.fn.DataTable.isDataTable('#support-articlelists')) {
                    $('#support-articlelists').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) => {

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

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

                            ${data.announcementday ? `<td> ~ </td> <td> ~ </td> <td> ${data.announcementday} </td>` 
                            : `<td> ${dateTime(data.startdate)} </td>  <td> ${dateTime(data.enddate)} </td>   <td> ~ </td>` }

                            <td>
                                ${ editPerm ? ( data.status == '1' ? `<label class="custom-switch form-switch mb-0">
    												<input type="checkbox" name="status" data-id="${data.id}" id="myonoffswitch${data.id}" value="1" class="custom-switch-input tswitch" checked>
    												<span class="custom-switch-indicator"></span>
    											</label>` : `<label class="custom-switch form-switch mb-0">
    												<input type="checkbox" name="status" data-id="${data.id}" id="myonoffswitch${data.id}" value="1" class="custom-switch-input tswitch" >
    												<span class="custom-switch-indicator"></span>
    											</label>` ) : '~' }    
                            </td>

                            <td>
                                <div class="btn-list">
                                    ${editPerm ? `<a href="${SITEURL}/admin/announcement/edit/${data.id}" data-id="${data.id}" class="action-btns1">
    											<i class="feather feather-edit text-primary" data-id="${data.id}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ lang('Edit') }}"></i>
    										</a> ` : '~' 
                                    }


                                    ${delPerm  ? `  <a href="javascript:void(0)" data-id="${data.id}" class="action-btns1" id="delete-testimonial" >
    											<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('support-articlelists').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 = $('#support-articlelists').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() {
                (function($) {
                    "use strict";

                    // Variables
                    var SITEURL = '{{ url('') }}';
                    var now = Date.now();

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

                    /*  When user click add announcement button */
                    $('#create-new-testimonial').on('click', function() {
                        // Datepicker
                        $('#startdate').datepicker({
                            dateFormat: 'yy-mm-dd',
                            prevText: '<i class="fa fa-angle-left"></i>',
                            nextText: '<i class="fa fa-angle-right"></i>',
                            minDate: 0,
                            firstDay: {{ setting('start_week') }},

                            onSelect: function(selectedDate) {

                                var diff = ($("#enddate").datepicker("getDate") -
                                        $("#startdate").datepicker("getDate")) /
                                    1000 / 60 / 60 / 24 + 1; // days
                                if ($("#enddate").datepicker("getDate") != null) {
                                    $('#count').html(diff);
                                    $('#days').val(diff);
                                }
                                $('#enddate').datepicker('option', 'minDate',
                                    selectedDate);
                            }
                        });
                        $('#enddate').datepicker({
                            dateFormat: 'yy-mm-dd',
                            prevText: '<i class="fa fa-angle-left"></i>',
                            nextText: '<i class="fa fa-angle-right"></i>',
                            firstDay: {{ setting('start_week') }},
                            onSelect: function(selectedDate) {

                                $('#startdate').datepicker('option', 'maxDate',
                                    selectedDate);

                                var diff = ($("#enddate").datepicker("getDate") -
                                        $("#startdate").datepicker("getDate")) /
                                    1000 / 60 / 60 / 24 + 1; // days
                                if ($("#startdate").datepicker("getDate") != null) {
                                    $('#count').html(diff);
                                    $('#days').val(diff);
                                }
                            }
                        });

                        $('#btnsave').val("create-product");
                        $('#testimonial_id').val('');
                        $('#description').summernote({
                            height: 100,
                        });
                        $('#description').summernote('code', '');
                        // Select2
                        $('.form-select').select2({
                            multiple: true,
                            minimumResultsForSearch: Infinity,
                            width: '100%',
                            closeOnSelect: false
                        });
                        $('#testimonial_form').trigger("reset");
                        $('.modal-title').html("{{ lang('Add Announcement') }}");
                        $('#addtestimonial').modal('show');

                    });

                    /* When click delete announcement */
                    $('body').on('click', '#delete-testimonial', function() {
                        var _id = $(this).data("id");
                        let parent = $(this).closest('tr');
                        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({
                                        type: "get",
                                        url: SITEURL +
                                            "/admin/announcement/delete/" + _id,
                                        success: function(data) {
                                            toastr.success(data.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);
                                        },
                                        error: function(data) {
                                            console.log('Error:', data);
                                        }
                                    });
                                }
                            });

                    });

                    //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('announcementall.delete') }}",
                                            method: "post",
                                            data: {
                                                id: id
                                            },
                                            success: function(data) {
                                                toastr.success(data.success);
                                                parent.forEach(element => {
                                                    element.addClass(
                                                        'fade-out');
                                                });

                                                let newData = tableData.filter(
                                                    item => !id.includes(
                                                        String(item.id)));
                                                tableData = newData;
                                                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);
                                                // location.reload();

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

                    // Announcement submit form
                    $('body').on('submit', '#testimonial_form', function(e) {
                        e.preventDefault();
                        var actionType = $('#btnsave').val();

                        var fewSeconds = 2;
                        $('#btnsave').html('Sending..');
                        $('#btnsave').prop('disabled', true);
                        setTimeout(function() {
                            $('#btnsave').prop('disabled', false);
                        }, fewSeconds * 1000);

                        var formData = new FormData(this);
                        $.ajax({
                            type: 'POST',
                            url: SITEURL + "/admin/announcement/create",
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: (data) => {
                                $('#testimonial_form').trigger("reset");
                                $('#addtestimonial').modal('hide');
                                $('#btnsave').html('{{ lang('Save Changes') }}');
                                toastr.success(data.success);
                                location.reload();
                                $('#nameError').html('');
                                $('#descriptionError').html('');
                                $('#startdateError').html('');
                                $('#enddateError').html('');
                            },
                            error: function(data) {
                                $('#nameError').html('');
                                $('#descriptionError').html('');
                                $('#startdateError').html('');
                                $('#enddateError').html('');
                                $('#nameError').html(data.responseJSON.errors
                                    .title);
                                $('#descriptionError').html(data.responseJSON.errors
                                    .notice);
                                $('#startdateError').html(data.responseJSON.errors
                                    .startdate);
                                $('#enddateError').html(data.responseJSON.errors
                                    .enddate);
                                $('#btnsave').html('{{ lang('Save Changes') }}');
                            }
                        });
                    });

                    // Announcement  status
                    $('body').on('click', '.tswitch', function() {
                        var _id = $(this).data("id");
                        var status = $(this).prop('checked') == true ? '1' : '0';
                        $.ajax({
                            type: "post",
                            url: SITEURL + "/admin/announcement/status" + _id,
                            data: {
                                'status': status
                            },
                            success: function(data) {
                                toastr.success(data.success);
                                // location.reload();
                            },
                            error: function(data) {
                                console.log('Error:', data);
                            }
                        });
                    });

                    $('.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);
            })
        });
    </script>
@endsection