@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage-notification';
    @endphp
    <style>
    .action-buttons {
    display: flex;
    gap: 10px; /* Adjust the value to control the space between buttons */
}

    </style>
    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="card-title">Manage Notification</h6>
                        </div>
                        <div class="col-md-8"></div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"
                                    role="tab" aria-controls="pills-home" aria-selected="true">Sent</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
                                    role="tab" aria-controls="pills-profile" aria-selected="false">Scheduled</a>
                            </li>
                        </ul>

                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                aria-labelledby="pills-home-tab">

                                <table id="zero-config" class="table dt-table-hover" style="width:100%">
                                    <thead class="text-center">
                                        <tr>
                                            <th class="text-start">Sr No.</th>
                                            <th class="text-start">Notification Content</th>
                                            <th class="text-start">Email</th>
                                            <th class="text-start">Created Date</th>
                                            <th class="text-start">Recipients</th>
                                            <th class="text-start">Date Sent</th>
                                            <th class="no-content">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                        @foreach ($notifications as $notification)
                                            <tr>
                                                <td class="text-start">{{ $loop->iteration }}</td>
                                                <td class="text-start">{{ $notification->type }}</td>
                                                <td class="text-start">{{ $notification->Notification->email_address }}</td>
                                                <td class="text-start">
                                                    {{ \Carbon\Carbon::parse($notification->created_at)->format('m/d/Y') }}
                                                </td>
                                                <td class="text-start">
                                                    @if ($notification->Notification->principal_type_xid == '3')
                                                        Customer
                                                    @else
                                                        Restaurant
                                                    @endif
                                                </td>
                                                <td class="text-start">
                                                    {{ \Carbon\Carbon::parse($notification->date_added)->format('m/d/Y') }}
                                                </td>
                                                <td>
                                                    <div class="dropout">
                                                        <button class="more">
                                                            <span></span>
                                                            <span></span>
                                                            <span></span>
                                                        </button>
                                                        <ul>
                                                            <li>
                                                                <a
                                                                    href="{{ url('/manage_view_notifications/' . $notification->id) }}">
                                                                    <img src="{{ asset('public/assets/img/view.svg') }}" />
                                                                    <span>View</span>
                                                                </a>
                                                            </li>
                                                        </ul>

                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- Scheduled Notifications Tab -->
                            <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                aria-labelledby="pills-profile-tab">

                                <table id="zero-config-scheduled" class="table dt-table-hover" style="width:100%">
                                    <thead class="text-center">
                                        <tr>
                                            <th class="text-start">Sr No.</th>
                                            <th class="text-start">Notification Content</th>
                                            <th class="text-start">Created Date</th>
                                            <th class="text-start">Scheduled Date</th>
                                            <th class="text-start">View</th>
                                            <th class="no-content">Status</th>
                                            <th class="no-content">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                        @foreach ($scheduledNotifications as $notification)
                                            <tr>
                                                <td class="text-start">{{ $loop->iteration }}</td>
                                                <td class="text-start">{{ $notification->type }}</td>
                                                <td class="text-start">
                                                    {{ \Carbon\Carbon::parse($notification->created_at)->format('m/d/Y') }}
                                                </td>
                                                <td class="text-start">
                                                    {{ \Carbon\Carbon::parse($notification->delivery_schedule)->format('m/d/Y') }}
                                                </td>
                                                <td>
                                                    <a class="view-btn m-0"
                                                        href="{{ url('/manage_view_notifications/' . $notification->id) }}">
                                                        <span>View</span>
                                                    </a>
                                                </td>
                                                <td class="text-start">Scheduled</td>

                                                <td>
                                                    <div class="dropout">
                                                        <div class="action-buttons">
                                                            <a class="action-btn reply-button"
                                                                href="{{ url('/manage_edit_notifications/' . $notification->id) }}">
                                                                <img src="{{ asset('public/assets/img/edit.svg') }}" />
                                                                <span>Edit</span>
                                                            </a>
                                                            <a href="" data-toggle="modal"
                                                                data-target="#delete-modal" class="admin_delete_btn"
                                                                data-id="{{ $notification->id }}">
                                                                <img
                                                                    src="{{ asset('public/assets/img/delete-recycle.svg') }}" />
                                                                <span>Delete</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>

                                            </tr>
                                            <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog"
                                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="btn-close" data-dismiss="modal"
                                                                aria-label="Close">
                                                                x
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <p class="modal-text">Are you sure you want to<br>Delete </p>
                                                            <input type="hidden" id="sub_admin_delete">
                                                            <div class="modal-btn d-flex ">
                                                                <a class="extra-btn" href="#"
                                                                    data-dismiss="modal">No</a>
                                                                <a class="download-btn-custom admin_delete"
                                                                    data-dismiss="modal">Yes</a>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                        x
                    </button>
                </div>
                <div class="modal-body">
                    <p class="modal-text">Are you sure you want to<br>Delete </p>
                    <input type="hidden" id="sub_admin_delete">
                    <div class="modal-btn d-flex ">
                        <a class="extra-btn" href="#" data-dismiss="modal">No</a>
                        <a class="download-btn-custom admin_delete" data-dismiss="modal">Yes</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection


@section('section_script')
    <script src="../src/plugins/src/table/datatable/datatables.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#zero-config').DataTable({
                "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                    "<'table-responsive'tr>" +
                    "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
                "oLanguage": {
                    "oPaginate": {
                        "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                        "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                    },
                    "sInfo": "Showing page _PAGE_ of _PAGES_",
                    "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                    "sSearchPlaceholder": "Search...",
                    "sLengthMenu": "Results :  _MENU_",
                },
                "stripeClasses": [],
                "lengthMenu": [7, 10, 20, 50],
                "pageLength": 10
            });

            $('#zero-config-scheduled').DataTable({
                "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                    "<'table-responsive'tr>" +
                    "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
                "oLanguage": {
                    "oPaginate": {
                        "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                        "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                    },
                    "sInfo": "Showing page _PAGE_ of _PAGES_",
                    "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                    "sSearchPlaceholder": "Search...",
                    "sLengthMenu": "Results :  _MENU_",
                },
                "stripeClasses": [],
                "lengthMenu": [7, 10, 20, 50],
                "pageLength": 10
            });
        });
    </script>
    <script>
        function toggleDropdown(event) {
            event.stopPropagation();
            const dropdownMenu = event.currentTarget.nextElementSibling;
            const isVisible = dropdownMenu.style.display === 'block';
            document.querySelectorAll('.dropdown-menu').forEach(menu => menu.style.display = 'none');
            dropdownMenu.style.display = isVisible ? 'none' : 'block';
        }

        document.addEventListener('click', () => {
            document.querySelectorAll('.dropdown-menu').forEach(menu => menu.style.display = 'none');
        });

        document.querySelectorAll('.dropdown-menu').forEach(menu => {
            menu.addEventListener('click', (event) => {
                event.stopPropagation();
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('<button><a class="extra-btn width-max-content" href="{{ route('manage_add_notifications') }}">Send Notification</a></button><button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Filter</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="{{ route('manage.notification') }}" id="allFilter"><span>All</span></a></div><div class="dropdown-item"><a href="{{ route('manage.notification', ['active' => 4]) }}" id="activeFilter"><span>Customer</span></a></div><div class="dropdown-item"><a href="{{ route('manage.notification', ['active' => 3]) }}" id="expiredFilter"> <span>Restaurant</span></a></div></div></li></ul></button>')
                .insertBefore("#zero-config_filter label");
            // Retrieve the selected filter from local storage
            var selectedFilter = localStorage.getItem('selectedFilter');

            // If a selected filter exists, set its color
            if (selectedFilter) {
                handleChange(selectedFilter);
            } else {
                // If no selected filter is found, simulate a click event on the default filter button
                $('#allFilter').trigger('click');
            }

            // Add event listeners to filter links
            $('#activeFilter').on('click', function() {
                // Prevent the default anchor behavior
                handleChange('active');
                // Store selected filter in local storage
                localStorage.setItem('selectedFilter', 'active');
            });

            $('#expiredFilter').on('click', function() {
                // Prevent the default anchor behavior
                handleChange('expired');
                // Store selected filter in local storage
                localStorage.setItem('selectedFilter', 'expired');
            });

            $('#allFilter').on('click', function() {
                // Prevent the default anchor behavior
                handleChange('all');
                // Store selected filter in local storage
                localStorage.setItem('selectedFilter', 'all');
            });
        });

        // Define handleChange function
        function handleChange(filterType) {
            // Reset background color of all filters
            $('#activeFilter, #expiredFilter, #allFilter').css('background-color', '');

            // Set background color based on filter type
            if (filterType === 'active') {
                $('#activeFilter').css({
                    'padding': '4px 8px',
                    'background-color': 'rgb(233, 233, 234)',
                    'color': 'rgb(191, 191, 196)'
                }); // Set color for active filter
            } else if (filterType === 'expired') {
                $('#expiredFilter').css({
                    'padding': '4px 8px',
                    'background-color': 'rgb(233, 233, 234)',
                    'color': 'rgb(191, 191, 196)'
                }); // Set color for expired filter
            } else if (filterType === 'all') {
                $('#allFilter').css({
                    'padding': '4px 8px',
                    'background-color': 'rgb(233, 233, 234)',
                    'color': 'rgb(191, 191, 196)'
                });
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            $('.admin_delete_btn').on('click', function() {
                var id = $(this).data('id');
                $('#sub_admin_delete').val(id);
            });


            let base_url = url_path;


            $('.admin_delete').on('click', function() {
                var id = $('#sub_admin_delete').val();
                $.ajax({
                    url: base_url + '/manage_delete_notifications/' + id,

                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(result) {
                        location.reload();
                    },
                    error: function(xhr) {
                        alert('An error occurred: ' + xhr.responseText);
                    }
                });
            });
        });
    </script>
@endsection
