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

@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="filter-area flex gap-3 flex-wrap mb-3 justify-between">
            <h2 class="text-nowrap">All Contact Messages</h2>
            <div class="flex gap-3 flex-wrap mb-3">
                <div>
                    <select class="form-select" id="status-filter">
                        <option value="">All Statuses</option>
                        <option value="unread">Unread</option>
                        <option value="read">Read</option>
                        <option value="replied">Replied</option>
                        <option value="archived">Archived</option>
                    </select>
                </div>
                <div>
                    <button class="btn btn-secondary" id="reset-filters">Reset Filters</button>
                </div>
            </div>
        </div>

        <div class="overflow-x-auto">
            <div class="inline-block min-w-full align-middle">
                <div class="overflow-hidden">
                    <table class="min-w-full" id="item-table">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="select-all">
                                </th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Message</th>
                                <th>Status</th>
                                <th>Send Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

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

    <!-- Bulk Actions Modal -->
    <!-- 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">
                    <!-- Icon -->
                    <div class="flex justify-center mb-6">
                        <div class="w-20 h-20 bg-blue-50 rounded-2xl flex items-center justify-center">
                            <svg class="w-10 h-10 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </div>

                    <!-- 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="unread">Mark as Unread</option>
                                    <option value="read">Mark as Read</option>
                                    <option value="replied">Mark as Replied</option>
                                    <option value="archived">Archive</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">
                        <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="execute-bulk-action">Execute</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>
        (function($) {
            "use strict"

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

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

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

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

                $('#reset-filters').click(function() {
                    $('#status-filter').val('');
                    selectedIds = [];
                    updateBulkActionButton();
                    table.search('').columns().search('').draw();
                    table.draw();
                });

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

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

                    updateBulkActionButton();
                });

                // Individual checkboxes functionality
                $(document).on('change', '.item-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 = $('.item-checkbox');
                    const checkedCheckboxes = $('.item-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.contact-message.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');
                });

                // Close modal when clicking outside
                $(document).on('click', function(e) {
                    if ($(e.target).is('#bulkActionsModal')) {
                        $('#bulkActionsModal').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.contact-message.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.");
                                }
                            });
                        }
                    });
                });
            });
        })(jQuery);
    </script>
@endpush