@extends('Admin.layout')

@section('content')

<div class="container-xxl flex-grow-1 container-p-y">

    <div class="d-flex justify-content-between
                align-items-center flex-wrap gap-3 mb-4">

        <div>
            <h4 class="mb-1">
                Staff Review & Communication Summary
            </h4>

            <p class="text-muted mb-0">
                View positive feedback, negative feedback and email activity.
            </p>
        </div>

        <a href="{{ url()->previous() }}"
           class="btn btn-label-secondary">

            <i class="ti tabler-arrow-left me-1"></i>
            Back
        </a>
    </div>

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

            <div class="d-flex justify-content-between
                        align-items-center flex-wrap gap-3">

                <div>
                    <span class="text-muted d-block mb-1">
                        Selected Staff
                    </span>

                    <strong>
                        {{ $selectedStaff?->name ?? 'All Staff' }}
                    </strong>

                    @if (!empty($selectedStaffId))
                        <!-- <span class="text-muted">
                            — ID: {{ $selectedStaffId }}
                        </span> -->
                    @endif
                </div>

                <div>
                    <span class="text-muted d-block mb-1">
                        Selected Month
                    </span>

                    <strong>
                        @php
                            try {
                                $displayMonth =
                                    \Carbon\Carbon::createFromFormat(
                                        'Y-m',
                                        $selectedMonth
                                    )->format('F Y');
                            } catch (\Throwable $exception) {
                                $displayMonth = $selectedMonth;
                            }
                        @endphp

                        {{ $displayMonth }}
                    </strong>
                </div>

            </div>

        </div>
    </div>

    <div class="card">

        <div class="card-header border-bottom p-0">

            <ul class="nav nav-tabs review-summary-tabs"
                role="tablist">

                <li class="nav-item">

                    <button
                        type="button"
                        class="nav-link
                            {{ ($activeTab ?? 'positive') === 'positive'
                                ? 'active'
                                : '' }}"
                        data-bs-toggle="tab"
                        data-bs-target="#positive-pane">

                        <i class="ti tabler-thumb-up me-1"></i>
                        Positive Feedback
                    </button>

                </li>

                <li class="nav-item">

                    <button
                        type="button"
                        class="nav-link
                            {{ ($activeTab ?? '') === 'negative'
                                ? 'active'
                                : '' }}"
                        data-bs-toggle="tab"
                        data-bs-target="#negative-pane">

                        <i class="ti tabler-thumb-down me-1"></i>
                        Negative Feedback
                    </button>

                </li>

                <li class="nav-item">

                    <button
                        type="button"
                        class="nav-link
                            {{ ($activeTab ?? '') === 'email'
                                ? 'active'
                                : '' }}"
                        data-bs-toggle="tab"
                        data-bs-target="#email-pane">

                        <i class="ti tabler-mail me-1"></i>
                        Email Communication
                    </button>

                </li>

            </ul>

        </div>

        <div class="card-body pt-4">

            <div class="tab-content p-0">

                {{-- Positive Feedback --}}
                <div
                    class="tab-pane fade
                        {{ ($activeTab ?? 'positive') === 'positive'
                            ? 'show active'
                            : '' }}"
                    id="positive-pane">

                    <div class="table-responsive">

                        <table
                            id="positiveFeedbackTable"
                            class="table table-hover align-middle w-100">

                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Date</th>
                                    <th>Staff Name</th>
                                    <th>Type</th>
                                    <th>Feedback</th>
                                </tr>
                            </thead>

                            <tbody></tbody>

                        </table>

                    </div>
                </div>

                {{-- Negative Feedback --}}
                <div
                    class="tab-pane fade
                        {{ ($activeTab ?? '') === 'negative'
                            ? 'show active'
                            : '' }}"
                    id="negative-pane">

                    <div class="table-responsive">

                        <table
                            id="negativeFeedbackTable"
                            class="table table-hover align-middle w-100">

                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Date</th>
                                    <th>Staff Name</th>
                                    <th>Type</th>
                                    <th>Feedback</th>
                                </tr>
                            </thead>

                            <tbody></tbody>

                        </table>

                    </div>
                </div>

                {{-- Email --}}
                <div
                    class="tab-pane fade
                        {{ ($activeTab ?? '') === 'email'
                            ? 'show active'
                            : '' }}"
                    id="email-pane">

                    <div class="table-responsive">

                        <table
                            id="emailCommunicationTable"
                            class="table table-hover align-middle w-100">

                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Date</th>
                                    <th>Staff Name</th>
                                    <!-- <th>Email</th> -->
                                    <th>Subject</th>
                                    <th>Message</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                            <tbody></tbody>

                        </table>

                    </div>
                </div>

            </div>

        </div>

    </div>

</div>

<style>
    .review-summary-tabs {
        gap: 8px;
        padding: 0 14px;
    }

    .review-summary-tabs .nav-link {
        margin: 8px 0;
        padding: 10px 18px;
        color: #5d596c;
        background: transparent;
        border: 0;
        border-radius: 6px;
        font-weight: 600;
    }

    .review-summary-tabs .nav-link:hover {
        color: #00bad1;
        background: #e8fbfd;
    }

    .review-summary-tabs .nav-link.active {
        color: #fff;
        background: #00bad1;
        box-shadow: 0 4px 12px
            rgba(0, 186, 209, .25);
    }

    .table thead th {
        white-space: nowrap;
        font-size: 13px;
    }

    .table tbody td {
        vertical-align: middle;
        font-size: 14px;
    }

    @media (max-width: 767.98px) {
        .review-summary-tabs {
            flex-wrap: nowrap;
            overflow-x: auto;
        }

        .review-summary-tabs .nav-link {
            white-space: nowrap;
        }
    }
</style>

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

<script>
var jq = jQuery.noConflict();

jq(document).ready(function () {

    const staffId = @json($selectedStaffId ?? '');
    const month = @json($selectedMonth ?? '');
    const activeTab = @json($activeTab ?? 'positive');

    let positiveTable = null;
    let negativeTable = null;
    let emailTable = null;

    function getAjax(type) {
        return {
            url: "{{ route('staff_review_summary_data') }}",
            type: "GET",

            data: function (data) {
                data.type = type;
                data.staff_id = staffId;
                data.month = month;
            },

            error: function (xhr) {
                console.error(
                    type + ' summary AJAX error:',
                    xhr.responseText
                );
            }
        };
    }

    function feedbackColumns() {
        return [
            {
                data: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'created_at',
                name: 'created_at'
            },
            {
                data: 'staff_name',
                orderable: false
            },
            {
                data: 'feedback_type',
                name: 'type'
            },
            {
                data: 'reason',
                name: 'reason'
            },
        ];
    }

    function loadPositiveTable() {

        if (
            jq.fn.DataTable.isDataTable(
                '#positiveFeedbackTable'
            )
        ) {
            positiveTable.columns.adjust();
            return;
        }

        positiveTable = jq(
            '#positiveFeedbackTable'
        ).DataTable({

            processing: true,
            serverSide: true,
            searching: true,
            ordering: true,
            pageLength: 10,

            ajax: getAjax('positive'),

            columns: feedbackColumns(),

            order: [[1, 'desc']],

            language: {
                search: '',
                searchPlaceholder: 'Search Positive Feedback',
                emptyTable: 'No positive feedback available'
            }
        });
    }

    function loadNegativeTable() {

        if (
            jq.fn.DataTable.isDataTable(
                '#negativeFeedbackTable'
            )
        ) {
            negativeTable.columns.adjust();
            return;
        }

        negativeTable = jq(
            '#negativeFeedbackTable'
        ).DataTable({

            processing: true,
            serverSide: true,
            searching: true,
            ordering: true,
            pageLength: 10,

            ajax: getAjax('negative'),

            columns: feedbackColumns(),

            order: [[1, 'desc']],

            language: {
                search: '',
                searchPlaceholder: 'Search Negative Feedback',
                emptyTable: 'No negative feedback available'
            }
        });
    }

    function loadEmailTable() {

        if (
            jq.fn.DataTable.isDataTable(
                '#emailCommunicationTable'
            )
        ) {
            emailTable.columns.adjust();
            return;
        }

        emailTable = jq(
            '#emailCommunicationTable'
        ).DataTable({

            processing: true,
            serverSide: true,
            searching: true,
            ordering: true,
            pageLength: 10,

            ajax: getAjax('email'),

            columns: [
                {
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'staff_name',
                    orderable: false
                },
               // {
                //    data: 'email_address',
               //     orderable: false
              //  },
                {
                    data: 'subject_display',
                    orderable: false
                },
                {
                    data: 'message_display',
                    orderable: false
                },
                {
                    data: 'email_status',
                    orderable: false
                }
            ],

            order: [[1, 'desc']],

            language: {
                search: '',
                searchPlaceholder: 'Search Email',
                emptyTable: 'No email records available'
            }
        });
    }

    if (activeTab === 'negative') {
        loadNegativeTable();
    } else if (activeTab === 'email') {
        loadEmailTable();
    } else {
        loadPositiveTable();
    }

    jq(
        'button[data-bs-target="#positive-pane"]'
    ).on('shown.bs.tab', function () {
        loadPositiveTable();
    });

    jq(
        'button[data-bs-target="#negative-pane"]'
    ).on('shown.bs.tab', function () {
        loadNegativeTable();
    });

    jq(
        'button[data-bs-target="#email-pane"]'
    ).on('shown.bs.tab', function () {
        loadEmailTable();
    });

});
</script>

@endsection