@extends('Admin.layout')

<style>
    .dt-search {
        display: none !important;
    }
</style>

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="mb-3">
        <h4>Support</h4>
    </div>

    <div class="card p-5">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-4">
            <div class="d-flex align-items-center gap-3 mb-3 mb-lg-0">
                <select id="pageLength" class="form-select w-auto">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="all">All</option>
                </select>

                <!-- Type Filter Dropdown -->
                <select id="typeFilter" class="form-select w-auto">
                    <option value="">All Types</option>
                    <option value="user">User</option>
                    <option value="delivery_partner">Delivery Partner</option>
                    <option value="restaurant">Restaurant</option>
                </select>
            </div>

            <div class="col-lg-6 col-12 mb-3">
                <div class="d-flex flex-column flex-lg-row gap-3">
                    <div class="search-box flex-grow-1">
                        <input type="search" id="searchBox" class="form-control" placeholder="Search">
                    </div>
                    <button type="button" class="btn btn-primary border flex-shrink-0" id="exportBtn">
                        <i class="ti tabler-download me-2"></i>
                        Export
                    </button>
                </div>
            </div>
        </div>

        <div class="table-responsive p-2">
            <table id="table" class="table">
                <thead class="bg-primary-subtle">
                    <tr>
                        <th>SNO</th>
                        <th>DATE</th>
                        <th>TYPE</th>
                        <th>USER ID</th>
                        <th>NAME</th>
                        <th>EMAIL</th>
                        <th>MESSAGE</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="delete" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted">Are you confirm to delete?</p>

                <input type="hidden" id="delete_id">

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary px-5 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger px-5 ms-2 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <script>
        $(document).ready(function() {

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

            const table = $('#table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('support_data') }}",
                    data: function(d) {
                        d.type = $('#typeFilter').val();
                    }
                },
                pageLength: 10,
                searching: true,
                lengthChange: false,
                ordering: true,
                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Support',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    },
                    action: function(e, dt, node, config) {
                        const exportBtn = $('#exportBtn');
                        const originalHtml = exportBtn.html();

                        exportBtn.prop('disabled', true)
                            .html(
                                '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Processing...'
                            );

                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node,
                            config);

                        setTimeout(function() {
                            exportBtn.prop('disabled', false).html(originalHtml);
                        }, 1000);
                    }
                }],
                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap text-center'
                }],
                createdRow: function(row, data, dataIndex) {
                    if (dataIndex % 2 != 0) {
                        $(row).addClass('bg-primary-subtle');
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'user_id',
                        name: 'user_id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('#exportBtn').on('click', function() {
                table.button('.buttons-excel').trigger();
            });

            $('#searchBox').on('keyup', function() {
                table.search(this.value).draw();
            });

            $('#pageLength').on('change', function() {
                table.page.len($(this).val()).draw();
            });

            $('#typeFilter').on('change', function() {
                table.draw();
            });

            $(document).on('click', '.open-delete-modal', function() {
                const id = $(this).data('id');
                $('#delete_id').val(id);
                $('#delete').modal('show');
            });

            $('#confirmDeleteBtn').on('click', function() {
                const deleteId = $('#delete_id').val();
                const btn = $(this);
                const token = $('meta[name="csrf-token"]').attr('content');

                if (!deleteId) {
                    if (typeof showToast === 'function') {
                        showToast('Invalid ID selected.', 'error');
                    } else {
                        alert('Invalid ID selected.');
                    }
                    return;
                }

                btn.prop('disabled', true).text('Processing...');

                $.ajax({
                    url: "{{ route('support_delete') }}",
                    type: "POST",
                    data: {
                        _token: token,
                        id: deleteId
                    },
                    success: function(response) {
                        if (response.status) {
                            $('#delete').modal('hide');

                            if (typeof showToast === 'function') {
                                showToast(response.message || 'Deleted successfully!',
                                    'success');
                            } else {
                                alert(response.message || 'Deleted successfully!');
                            }

                            table.ajax.reload(null, false);
                        } else {
                            if (typeof showToast === 'function') {
                                showToast(response.message || 'Error occurred while deleting.',
                                    'error');
                            } else {
                                alert(response.message || 'Error occurred while deleting.');
                            }
                        }
                    },
                    error: function(xhr) {
                        const errorMsg = xhr.responseJSON?.message ||
                            'An error occurred while deleting.';
                        if (typeof showToast === 'function') {
                            showToast(errorMsg, 'error');
                        } else {
                            alert(errorMsg);
                        }
                    },
                    complete: function() {
                        btn.prop('disabled', false).text('Yes, Sure');
                    }
                });
            });

        });
    </script>
@endsection