@extends('Staff.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;
    }
    table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left !important;
}
</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">
    <b> {{ Auth::guard('staff')->user()?->name }} </b>
    Feedback List
</h4>

                <p class="text-muted mb-0">
                    View positive and negative feedback.
                </p>
            </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 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>
                        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('feedback_staff_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: 'feedback_type',
    name: 'staff_feedback.type',
    searchable: true,
    orderable: false,
    render: function(data, type, row) {
        if (type === 'display') {
            const isPositive = data && data.toLowerCase() === 'positive';
            const isNegative = data && data.toLowerCase() === 'negative';

            if (isPositive) {
                return `<span class="feedback-badge feedback-positive" 
                              data-type="positive">${data}</span>`;
            } else if (isNegative) {
                return `<span class="feedback-badge feedback-negative" 
                              data-type="negative">${data}</span>`;
            }
        }
        return data;
    }
},
    {
        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],
            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>
<script>
    // ── Glitter engine ──
const GOLD_COLORS = ['#FFD700', '#FFC200', '#FFE066', '#FFFACD', '#F5C518'];
const RED_COLORS  = ['#dc3545', '#ff4d5e', '#ff1a2e'];
let glitterActive = false;

function spawnGlitters(anchorEl, colors, count = 18) {
    const rect = anchorEl.getBoundingClientRect();
    const cx   = rect.left + rect.width  / 2;
    const cy   = rect.top  + rect.height / 2;

    for (let i = 0; i < count; i++) {
        const dot = document.createElement('div');
        dot.className = 'glitter-particle';
        const color = colors[Math.floor(Math.random() * colors.length)];
        const size  = Math.random() * 5 + 4;
        dot.style.cssText = `
            left: ${cx + (Math.random() - 0.5) * 80}px;
            top:  ${cy + (Math.random() - 0.5) * 30}px;
            width: ${size}px; height: ${size}px;
            background: ${color};
            box-shadow: 0 0 ${size}px ${color};
            --dur:   ${(Math.random() * 1.5 + 1.5).toFixed(2)}s;
            --delay: ${(Math.random() * 1.2).toFixed(2)}s;
        `;
        document.body.appendChild(dot);
    }
}

function clearGlitters() {
    document.querySelectorAll('.glitter-particle').forEach(el => el.remove());
}

// ── Attach effects after each DataTable draw ──
$('#your-table-id').on('draw.dt', function () {  // ← change selector
    clearGlitters();

    document.querySelectorAll('.feedback-positive').forEach(el => {
        spawnGlitters(el, GOLD_COLORS, 20);
    });

    // Negative rows: red global blink overlay already handled by body class if needed.
    // Optional: extra red particles on negative badges too:
    // document.querySelectorAll('.feedback-negative').forEach(el => {
    //     spawnGlitters(el, RED_COLORS, 10);
    // });
});
</script>
@endsection