@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Products')

@push('styles')
    <!-- Load DataTables CSS -->
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="card">
        <div class="flex justify-between items-center gap-4 mb-4">
            <h1 class="text-2xl font-semibold">Notifications</h1>
            <div class="flex gap-2">
                <div>
                    <select class="form-select" id="status-filter">
                        <option value="">All Statuses</option>
                        <option value="read">Read</option>
                        <option value="unread">Unread</option>
                    </select>
                </div>
                <div>
                    <button class="btn btn-secondary" id="reset-filters">Reset Filters</button>
                </div>
            </div>
        </div>

        <div class="mt-4">
            <x-backend::table-wrapper>
                <table id="products-table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="select-all">
                            </th>
                            <th>Name</th>
                            <th>Content</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Read At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
            </x-backend::table-wrapper>
        </div>

        <div class="mt-3">
            <button id="bulk-action-btn" class="btn btn-secondary hidden">Bulk Actions</button>
        </div>

        <!-- Bulk Actions Modal -->
        <div class="fixed inset-0 z-50 hidden overflow-y-auto bg-black bg-opacity-50" id="bulkActionsModal">
            <div class="flex items-center justify-center min-h-screen px-4">
                <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-auto">
                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-6 pb-4">
                        <div></div>
                        <button type="button"
                            class="text-gray-400 hover:text-gray-600 w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100"
                            data-bs-dismiss="modal">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <!-- Modal Content -->
                    <div class="px-6 pb-6">

                        <!-- Title -->
                        <h2 class="text-2xl font-semibold text-gray-900 text-center mb-2">Bulk Actions</h2>

                        <!-- Description -->
                        <p class="text-gray-600 text-center mb-8">Select an action to apply to the selected items.</p>

                        <!-- Form -->
                        <form id="bulk-actions-form">
                            @csrf
                            <div class="mb-8">
                                <label class="block text-sm font-medium text-gray-700 mb-3">Select Action</label>
                                <div class="relative">
                                    <select
                                        class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent appearance-none bg-white"
                                        name="action" required>
                                        <option value="">Choose action...</option>
                                        <option value="read">Read</option>
                                        <option value="unread">Unread</option>
                                        <option value="delete">Delete</option>
                                    </select>
                                    <div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
                                        <svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24"
                                            stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="ids" id="selected-ids">
                        </form>

                        <!-- Action Buttons -->
                        <div class="flex gap-3 justify-end">
                            <button type="button"
                                class="btn btn-secondary"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="button"
                                class="btn btn-primary"
                                id="execute-bulk-action">Execute</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div class="fixed inset-0 z-50 hidden overflow-y-auto bg-black bg-opacity-50" id="deleteModal">
            <div class="flex items-center justify-center min-h-screen px-4">
                <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-auto">
                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-6 pb-4">
                        <div></div>
                        <button type="button"
                            class="text-gray-400 hover:text-gray-600 w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100"
                            data-bs-dismiss="modal">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <!-- Modal Content -->
                    <div class="px-6 pb-6">
                        <!-- Icon -->
                        <div class="flex justify-center mb-6">
                            <div class="w-20 h-20 bg-red-50 rounded-2xl flex items-center justify-center">
                                <svg class="w-10 h-10 text-red-500" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </div>
                        </div>

                        <!-- Title -->
                        <h2 class="text-2xl font-semibold text-gray-900 text-center mb-2">Confirm Deletion</h2>

                        <!-- Description -->
                        <p class="text-gray-600 text-center mb-8">Are you sure you want to delete this product? This action
                            cannot be undone.</p>

                        <form id="delete-form">
                            @csrf
                            @method('DELETE')
                        </form>

                        <!-- Action Buttons -->
                        <div class="flex gap-3">
                            <button type="button"
                                class="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-colors"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="button"
                                class="flex-1 px-6 py-3 bg-red-500 text-white rounded-xl font-medium hover:bg-red-600 transition-colors"
                                id="confirm-delete">Delete</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @push('scripts')
        <!-- Load jQuery -->
        <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>

        <!-- Load DataTables JS -->
        <script src="{{ asset('backend/assets/js/jquery.dataTables.min.js') }}"></script>

        <script>
            $(document).ready(function() {
                let selectedIds = [];

                // Initialize DataTable
                const table = $('#products-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '{{ route('admin.notifications.index') }}',
                        data: function(d) {
                            d.status = $('#status-filter').val();
                            d.language = $('#language-filter').val();
                        }
                    },
                    columns: [{
                            data: 'id',
                            name: 'id',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return '<input type="checkbox" class="product-checkbox" value="' +
                                    data + '">';
                            }
                        },
                        {
                            data: 'user_name',
                            name: 'user_name'
                        },
                        {
                            data: 'notification_content',
                            name: 'notification_content'
                        },
                        {
                            data: 'type',
                            name: 'type',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'status',
                            name: 'status',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'read_at',
                            name: 'read_at',
                            orderable: false
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    order: [
                        [5, 'desc']
                    ],
                    drawCallback: function() {
                        // Re-check any previously selected checkboxes
                        $('.product-checkbox').each(function() {
                            if (selectedIds.includes($(this).val())) {
                                $(this).prop('checked', true);
                            }
                        });

                        // Update the "Select All" checkbox
                        updateSelectAllCheckbox();
                    }
                });

                // Filter functionality
                $('#status-filter, #language-filter').change(function() {
                    table.draw();
                });

                $('#reset-filters').click(function() {
                    $('#status-filter, #language-filter').val('');
                    table.search('').columns().search('').draw();
                    table.draw();
                });

                // "Select All" checkbox functionality
                $('#select-all').change(function() {
                    const isChecked = $(this).prop('checked');
                    $('.product-checkbox').prop('checked', isChecked);

                    if (isChecked) {
                        $('.product-checkbox').each(function() {
                            const id = $(this).val();
                            if (!selectedIds.includes(id)) {
                                selectedIds.push(id);
                            }
                        });
                    } else {
                        $('.product-checkbox').each(function() {
                            const id = $(this).val();
                            selectedIds = selectedIds.filter(item => item !== id);
                        });
                    }

                    updateBulkActionButton();
                });

                // Individual checkboxes functionality
                $(document).on('change', '.product-checkbox', function() {
                    const id = $(this).val();

                    if ($(this).prop('checked')) {
                        if (!selectedIds.includes(id)) {
                            selectedIds.push(id);
                        }
                    } else {
                        selectedIds = selectedIds.filter(item => item !== id);
                    }

                    updateSelectAllCheckbox();
                    updateBulkActionButton();
                });

                // Update "Select All" checkbox state
                function updateSelectAllCheckbox() {
                    const checkboxes = $('.product-checkbox');
                    const checkedCheckboxes = $('.product-checkbox:checked');

                    $('#select-all').prop('checked',
                        checkboxes.length > 0 && checkboxes.length === checkedCheckboxes.length
                    );
                }

                // Update Bulk Action button state
                function updateBulkActionButton() {
                    if (selectedIds.length > 0) {
                        $('#bulk-action-btn').removeClass('hidden');
                    } else {
                        $('#bulk-action-btn').addClass('hidden');
                    }
                }

                // Bulk Actions button click
                $('#bulk-action-btn').click(function() {
                    $('#selected-ids').val(selectedIds.join(','));
                    $('#bulkActionsModal').removeClass('hidden');
                });

                // Execute bulk action
                $('#execute-bulk-action').click(function() {
                    if (!$('#bulk-actions-form select[name="action"]').val()) {
                        alert('Please select an action');
                        return;
                    }

                    $.ajax({
                        url: '{{ route('admin.notifications.bulk-action') }}',
                        type: 'POST',
                        data: $('#bulk-actions-form').serialize(),
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                $('#bulkActionsModal').addClass('hidden');
                                selectedIds = [];
                                updateBulkActionButton();
                                table.draw();
                            } else {
                                toastr.error(response.message);
                            }
                        }
                    });
                });

                // Close modal functionality
                $(document).on('click', '[data-bs-dismiss="modal"]', function() {
                    $('#bulkActionsModal').addClass('hidden');
                    $('#deleteModal').addClass('hidden');
                });

                // Close modal when clicking outside
                $(document).on('click', function(e) {
                    if ($(e.target).is('#bulkActionsModal')) {
                        $('#bulkActionsModal').addClass('hidden');
                    }
                    if ($(e.target).is('#deleteModal')) {
                        $('#deleteModal').addClass('hidden');
                    }
                });

                // Soft Delete functionality
                $(document).on('click', '.delete-btn', function() {
                    Swal.fire({
                        title: "Are you sure to delete?",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#3085d6",
                        cancelButtonColor: "#d33",
                        confirmButtonText: "Yes, delete it!"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            var id = $(this).data('id');
                            $.ajax({
                                url: `{{ route('admin.notifications.destroy', ':id') }}`
                                    .replace(':id', id),
                                type: 'DELETE',
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    if (response.success) {
                                        toastr.success(response.message);
                                    } else {
                                        toastr.error(response.message);
                                    }
                                    table.draw();
                                },
                                error: function() {
                                    toastr.error("Server error.");
                                }
                            });
                        }
                    });
                });
            });
        </script>
    @endpush