@extends('Admin.layout')

@section('content')

{{-- DataTables CSS --}}
<link
    rel="stylesheet"
    href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css"
>

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

    .feedback-reason {
        white-space: normal;
        word-break: break-word;
        min-width: 250px;
        max-width: 500px;
        line-height: 1.5;
    }

    .toast-container-custom {
        z-index: 99999;
        max-width: 100%;
    }

    #staffFeedbackTable td {
        vertical-align: middle;
    }
</style>

{{-- Toast --}}
@if (
    session('success') ||
    session('error') ||
    $errors->any()
)
    <div
        class="position-fixed top-0 end-0 p-3 toast-container-custom"
    >
        <div
            id="pageToast"
            class="toast align-items-center text-white border-0
                {{ session('success')
                    ? 'bg-success'
                    : 'bg-danger' }}"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-bs-delay="3000"
            data-bs-autohide="true"
            style="min-width: 280px; max-width: 90vw;"
        >
            <div class="d-flex">

                <div class="toast-body">
                    @if (session('success'))
                        {{ session('success') }}

                    @elseif (session('error'))
                        {{ session('error') }}

                    @elseif ($errors->any())
                        {{ $errors->first() }}
                    @endif
                </div>

                <button
                    type="button"
                    class="btn-close btn-close-white me-2 m-auto"
                    data-bs-dismiss="toast"
                    aria-label="Close"
                ></button>

            </div>
        </div>
    </div>
@endif

{{-- Page Header --}}
  <div class="row mb-4">
    <div class="col-12">
        <div
            class="d-flex flex-column flex-md-row
                   justify-content-between
                   align-items-md-center gap-3"
        >
            <div>
                <h4 class="mb-1">
                    Seen Staff Feedback List
                </h4>
            </div>

            <div>
                <a href="{{ route('staff_feedback_list') }}" class="btn btn-secondary">
                    <i class="ti tabler-arrow-left me-1"></i>
                    Back
                </a>
            </div>
        </div>
    </div>
</div>

{{-- DataTable Card --}}
<div class="card">

    {{-- Search Header --}}
    <div class="card-body border-bottom">

        <div class="row g-3 align-items-center">

            <div class="col-md-2">

                <label
                    for="pageLength"
                    class="form-label d-none"
                >
                    Show Records
                </label>

                <select
                    id="pageLength"
                    class="form-select"
                >
                    <option value="10">
                        10
                    </option>

                    <option value="25">
                        25
                    </option>

                    <option value="50">
                        50
                    </option>

                    <option value="100">
                        100
                    </option>
                </select>

            </div>

            <div class="col-md-10">

                <label
                    for="searchBox"
                    class="form-label d-none"
                >
                    Search
                </label>

                <div
                    class="d-flex flex-column flex-sm-row
                           justify-content-md-end gap-2"
                >
                    <input
                        type="text"
                        id="searchBox"
                        class="form-control"
                        style="max-width: 350px;"
                        placeholder="Search staff, type, reason or status..."
                        autocomplete="off"
                    >

                    <button
                        type="button"
                        class="btn btn-label-secondary"
                        id="resetSearch"
                    >
                        <i class="ti tabler-refresh me-1"></i>
                        Reset
                    </button>
                </div>

            </div>

        </div>

    </div>

    {{-- Table --}}
    <div class="card-datatable table-responsive">

        <table
            id="staffFeedbackTable"
            class="table table-hover align-middle"
            style="width: 100%;"
        >
            <thead>
                <tr>
                    <th>
                        S.No
                    </th>

                    <th>
                        Staff
                    </th>

                    <th>
                        Type
                    </th>

                    <th>
                        Reason
                    </th>

                    <th>
                        Status
                    </th>
                </tr>
            </thead>

            <tbody></tbody>
        </table>

    </div>

</div>

{{-- jQuery --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

{{-- DataTables JS --}}
<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 () {

    /*
    |--------------------------------------------------------------------------
    | DataTable
    |--------------------------------------------------------------------------
    */

    const table = $('#staffFeedbackTable').DataTable({
    processing: true,
    serverSide: true,

    ajax: {
        url: "{{ route('seen_staff_feedback_data') }}",
        type: "GET",

        data: function (data) {
            console.log(
                'Staff feedback request parameters:',
                data
            );
        },

        beforeSend: function (xhr, settings) {
            console.log(
                'Staff feedback request URL:',
                settings.url
            );
        },

        error: function (xhr, status, error) {

            console.group('Staff Feedback Error');

            console.error(
                'HTTP status:',
                xhr.status
            );

            console.error(
                'AJAX status:',
                status
            );

            console.error(
                'Error:',
                error
            );

            console.error(
                'Response JSON:',
                xhr.responseJSON
            );

            console.error(
                'Response text:',
                xhr.responseText
            );

            if (xhr.responseJSON) {
                console.error(
                    'Backend message:',
                    xhr.responseJSON.message
                );

                console.error(
                    'Backend file:',
                    xhr.responseJSON.error_file
                );

                console.error(
                    'Backend line:',
                    xhr.responseJSON.error_line
                );
            }

            console.groupEnd();
        }
    },

    pageLength: 10,
    lengthChange: false,
    searching: true,
    ordering: false,
    info: true,
    autoWidth: false,

   columns: [
    {
        data: 'DT_RowIndex',
        name: '',
        searchable: false,
        orderable: false
    },
    {
        data: 'staff_details',
        name: '',
        searchable: false,
        orderable: false
    },
    {
        data: 'feedback_type',
        name: 'staff_feedback.type',
        searchable: true,
        orderable: false
    },
    {
        data: 'reason_text',
        name: 'staff_feedback.reason',
        searchable: true,
        orderable: false
    },
    {
        data: 'feedback_status',
        name: 'staff_feedback.status',
        searchable: true,
        orderable: false
    }
],

    columnDefs: [
        {
            targets: '_all',
            className: 'align-middle'
        },
        {
            targets: [0, 2, 4],
            className: 'text-nowrap align-middle'
        }
    ],

    language: {
        processing: 'Loading staff feedback...',
        emptyTable: 'No staff feedback found.',
        zeroRecords: 'No matching feedback found.',
        info: 'Showing _START_ to _END_ of _TOTAL_ records',
        infoEmpty: 'No records available',
        paginate: {
            previous: 'Previous',
            next: 'Next'
        }
    }
});


    /*
    |--------------------------------------------------------------------------
    | Custom Search
    |--------------------------------------------------------------------------
    */

    let searchTimer;

    $('#searchBox').on('input', function () {
        clearTimeout(searchTimer);

        const searchValue =
            $(this).val();

        searchTimer = setTimeout(function () {
            table
                .search(searchValue)
                .draw();
        }, 400);
    });


    /*
    |--------------------------------------------------------------------------
    | Page Length
    |--------------------------------------------------------------------------
    */

    $('#pageLength').on('change', function () {
        const length =
            parseInt($(this).val(), 10);

        table
            .page
            .len(length)
            .draw();
    });


    /*
    |--------------------------------------------------------------------------
    | Reset Search
    |--------------------------------------------------------------------------
    */

    $('#resetSearch').on('click', function () {

        $('#searchBox').val('');

        $('#pageLength').val('10');

        table
            .search('')
            .page
            .len(10)
            .draw();
    });


    /*
    |--------------------------------------------------------------------------
    | Session Toast
    |--------------------------------------------------------------------------
    */

    const pageToastElement =
        document.getElementById('pageToast');

    if (pageToastElement) {
        bootstrap.Toast
            .getOrCreateInstance(
                pageToastElement,
                {
                    delay: 3000,
                    autohide: true
                }
            )
            .show();
    }

});
</script>

@endsection