@extends('user::layouts.master')
@section('breadcrumb_title', 'Support Messages')

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

@section('content')

    <div class="card mt-4">
        <div class="flex justify-between items-center gap-3 mb-5">
            <h2 class="text-2xl font-semibold">Support Messages</h2>
            <div class="flex gap-3 flex-wrap">
                <div>
                    <button type="button" id="bulk-action-btn"
                        class="btn-primary px-6 py-2.5 bg-[#FFEBEB] border-[#FFEBEB] text-error hidden">Bulk
                        Actions</button>
                </div>
                <div>
                    <select class="form-select" id="status-filter">
                        <option value="">All Statuses</option>
                        <option value="open">Open</option>
                        <option value="closed">Closed</option>
                        <option value="resolved">Resolved</option>
                        <option value="pending">Pending</option>
                        <option value="in_progress">In progress</option>
                        <option value="archived">Archived</option>
                    </select>
                </div>
                <div>
                    <button class="btn btn-secondary" id="reset-filters">Reset Filters</button>
                </div>
                <div>
                    <a href="{{ route('user.conversations.create') }}" class="btn btn-primary">Add Ticket</a>
                </div>
            </div>
        </div>

        <x-backend::table-wrapper>
            <table class="table table-striped" id="item-table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="select-all">
                        </th>
                        <th class="w-52">User</th>
                        <th>Ticket ID</th>
                        <th>Subject</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </x-backend::table-wrapper>
    </div>

    <!-- delete modal  -->
    <div id="bulkActionsModal"
        class="modal-overlay !hidden opacity-0 transition-opacity duration-300 w-screen h-screen bg-black/30 flex justify-center items-center fixed top-0 left-0 z-50">
        <div
            class="modal-content w-full max-w-[390px] h-fit max-h-[90vh] bg-white rounded-2xl px-9 pt-16 pb-10 overflow-y-auto relative">
            <!-- Close Button -->
            <button
                class="modal-close size-10 rounded-lg bg-gray hover:bg-error text-headline hover:text-white flex justify-center items-center absolute top-4 right-4 transition-all duration-300">
                <!-- SVG icon -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M16.9531 7.05029L7.05363 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                    <path d="M7.05078 7.05029L16.9503 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                </svg>
            </button>

            <form id="bulk-actions-form">

                @csrf
                <div class="mb-3 input-with-label">
                    <label class="!text-lg !font-medium">Select Action</label>
                    <select class="form-select" name="action" required>
                        <option value="">Choose action...</option>
                        <option value="open">Open</option>
                        <option value="closed">Closed</option>
                        <option value="resolved">Resolved</option>
                        <option value="pending">Pending</option>
                        <option value="in_progress">In progress</option>
                        <option value="archived">Archived</option>
                    </select>
                </div>
                <input type="hidden" name="ids" id="selected-ids">
            </form>
            <div class="flex justify-between mt-8 gap-4">
                <button type="button" class="btn btn-secondary">Cancel</button>
                <button type="button" class="btn btn-primary" id="execute-bulk-action">Execute</button>
            </div>
        </div </div>
    @endsection

    @push('scripts')
        <!-- 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('user.conversations.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: 'user_info',
                                name: 'user_info',
                            },
                            {
                                data: 'ticket_id',
                                name: 'ticket_id',
                            },
                            {
                                data: 'subject',
                                name: 'subject',
                            },
                            {
                                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() {
                        initModal('bulkActionsModal').showModal();
                        $('#selected-ids').val(selectedIds.join(','));
                    });

                    // 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('user.conversations.bulk-action') }}',
                            type: 'POST',
                            data: $('#bulk-actions-form').serialize(),
                            success: function(response) {
                                if (response.success) {
                                    toastr.success(response.message);
                                    initModal('bulkActionsModal').hideModal();
                                    selectedIds = [];
                                    updateBulkActionButton();
                                    table.draw();
                                } else {
                                    toastr.error(response.message);
                                }
                            }
                        });
                    });

                    // 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!"
                        }).then((result) => {
                            if (result.isConfirmed) {
                                var id = $(this).data('id');
                                $.ajax({
                                    url: `{{ route('user.conversations.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