@extends('User.layout')
<style>
    .dt-search {
        display: none !important;
    }

    .dt-length {
        display: none !important;
    }
</style>
@section('navlink')
    <a href="{{ route('user.dashboard') }}" class="link-secondary text-decoration-none">
        Home
    </a>
    / <span>Complaints</span>
@endsection

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css">

    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">Complaints</h1>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#supportQueryModal">
                <i class="ti ti-message-plus me-1"></i>
                Raise Support Query
            </button>
        </div>

    </div>


    <div class="card card-animated-border mb-4">
        <div class="card-body">

            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
                <div>
                    <select id="pageLength" class="form-select" style="width: 100px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>

                <div class="d-flex gap-2">
                    <input type="search" id="customSearch" class="form-control" placeholder="Search"
                        style="max-width: 250px;">


                </div>
            </div>

            <div class="table-responsive">

                <table id="support-query-table" class="table table-bordered table-hover align-middle w-100">

                    <thead>
                        <tr>
                            <th>S.No.</th>
                            <th>Date</th>
                            <th>Enquiry ID</th>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Status</th>
                        </tr>
                    </thead>

                    <tbody>
                    </tbody>

                </table>


            </div>

        </div>
    </div>

    <!-- Support Query Description Modal -->
    <div class="modal fade" id="queryDescriptionModal" tabindex="-1" aria-labelledby="queryDescriptionModalLabel"
        aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-lg">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="queryDescriptionModalLabel">
                        Query Description
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>

                </div>

                <div class="modal-body">

                    <div id="fullQueryDescription"
                        style="
                        white-space: pre-wrap;
                        word-break: break-word;
                        overflow-wrap: anywhere;
                     ">
                    </div>

                </div>

            </div>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>

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

            // Show toast
            function showToast(message, type = 'success') {

                $('.toast-container-custom').remove();

                let icon = type === 'success' ? '✓' : '⚠';
                let title = type === 'success' ? 'Success' : 'Error';
                let toastClass = type === 'success' ? 'toast-success' : 'toast-error';

                let toastHtml = `
                <div class="toast-container-custom">
                    <div id="liveToast" class="custom-toast ${toastClass}">

                        <div class="toast-icon">
                            ${icon}
                        </div>

                        <div class="toast-content">
                            <div class="toast-title">
                                ${title}
                            </div>

                            <div class="toast-message">
                                ${message}
                            </div>
                        </div>

                        <button type="button" class="toast-close" onclick="closeToast()">
                            ×
                        </button>

                        <div class="toast-progress"></div>

                    </div>
                </div>
            `;

                $('body').append(toastHtml);

                setTimeout(function() {
                    closeToast();
                }, 3000);
            }

            // Close toast
            window.closeToast = function() {

                let toast = document.getElementById('liveToast');

                if (toast) {

                    toast.style.animation = 'fadeOut 0.4s forwards';

                    toast.addEventListener('animationend', function() {
                        toast.remove();
                        $('.toast-container-custom').remove();
                    }, {
                        once: true
                    });
                }
            };

            // Character counter
            $('#queryDescription').on('input', function() {

                let length = $(this).val().length;

                $('.description-count').text(length + ' / 2000');

            });

            // Submit support query
            $('#submitQuery').on('click', function() {

                let button = $(this);
                let form = $('#supportQueryForm');

                $('.error-title').text('');
                $('.error-description').text('');

                let title = $('#queryTitle').val().trim();
                let description = $('#queryDescription').val().trim();

                // Validate title
                if (!title) {

                    $('.error-title').text('Please enter the query title.');
                    $('#queryTitle').focus();

                    return;
                }

                // Validate description
                if (!description) {

                    $('.error-description').text('Please enter the description.');
                    $('#queryDescription').focus();

                    return;
                }

                // Send AJAX request
                $.ajax({

                    url: form.attr('action'),
                    type: 'POST',
                    data: form.serialize(),
                    dataType: 'json',

                    beforeSend: function() {

                        button.prop('disabled', true);
                        button.find('span').text('Submitting...');

                    },

                    success: function(response) {

                        console.log(response);

                        if (response.status === true) {

                            $('#supportQueryModal').modal('hide');

                            form[0].reset();

                            $('.description-count').text('0 / 2000');

                            showToast(response.message, 'success');

                        } else {

                            showToast(
                                response.message || 'Something went wrong.',
                                'error'
                            );
                        }
                    },

                    error: function(xhr) {

                        console.log(xhr.responseText);

                        // Handle validation error
                        if (xhr.status === 422) {

                            let errors = xhr.responseJSON.errors;

                            if (errors.title) {
                                $('.error-title').text(errors.title[0]);
                            }

                            if (errors.description) {
                                $('.error-description').text(errors.description[0]);
                            }

                            // Handle unauthorized error
                        } else if (xhr.status === 401) {

                            showToast(
                                'Your session has expired. Please login again.',
                                'error'
                            );

                            // Handle other errors
                        } else {

                            let message =
                                'Something went wrong. Please try again later.';

                            if (
                                xhr.responseJSON &&
                                xhr.responseJSON.message
                            ) {
                                message = xhr.responseJSON.message;
                            }

                            showToast(message, 'error');
                        }
                    },

                    complete: function() {

                        button.prop('disabled', false);
                        button.find('span').text('Submit Query');

                    }

                });

            });

        });

        $(document).ready(function() {

            // Initialize DataTable
            $('#support-query-table').DataTable({

                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('user.query_data') }}",
                    type: "GET"
                },

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'enquiry_id',
                        name: 'enquiry_id'
                    },

                    {
                        data: 'title',
                        name: 'title'
                    },

                    {
                        data: 'description',
                        name: 'description',
                        orderable: false,

                        render: function(data, type, row) {

                            if (!data) {
                                return '-';
                            }

                            let shortText = data.length > 100 ?
                                data.substring(0, 100) + '...' :
                                data;

                            let viewButton = data.length > 100 ?
                                `
                <button type="button"
                        class="btn btn-sm btn-outline-primary view-query"
                        title="View Description">
                    <i class="ti ti-eye"></i>
                </button>
              ` :
                                '';

                            return `
            <div class="d-flex align-items-center gap-2">
                <span class="text-truncate" style="max-width: 250px;">
                    ${shortText}
                </span>
                ${viewButton}
            </div>
        `;
                        }
                    },

                    {
                        data: 'status',
                        name: 'status',
                        orderable: false
                    }

                ],

                order: [
                    [4, 'desc']
                ],

                language: {
                    search: "",
                    searchPlaceholder: "Search..."
                }

            });

        });

        // View full description
        $('#support-query-table').on('click', '.view-query', function() {

            let table = $('#support-query-table').DataTable();

            let rowData = table.row($(this).closest('tr')).data();

            $('#fullQueryDescription').text(rowData.description);

            $('#queryDescriptionModal').modal('show');

        });
    </script>
@endsection