@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 Task Summary
            </h4>

            <p class="text-muted mb-0">
                View completed, incomplete and reopened task details.
            </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 task-summary-tabs"
                role="tablist">

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

                        <i class="ti tabler-circle-check me-1"></i>
                        Completed Tasks
                    </button>
                </li>

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

                        <i class="ti tabler-clock-hour-4 me-1"></i>
                        Incomplete Tasks
                    </button>
                </li>

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

                        <i class="ti tabler-refresh me-1"></i>
                        Reopened Tasks
                    </button>
                </li>

            </ul>

        </div>

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

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

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

                    <div class="table-responsive">

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

                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Task ID</th>
                                    <th>Task Name</th>
                                    <th>Staff Name</th>
                                    <th>Priority</th>
                                    <th>Due Date</th>
                                    <th>Status</th>
                                    <th>Created Date</th>
                                </tr>
                            </thead>

                            <tbody></tbody>
                        </table>

                    </div>
                </div>

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

                    <div class="table-responsive">

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

                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Task ID</th>
                                    <th>Task Name</th>
                                    <th>Staff Name</th>
                                    <th>Priority</th>
                                    <th>Due Date</th>
                                    <th>Status</th>
                                    <th>Created Date</th>
                                </tr>
                            </thead>

                            <tbody></tbody>
                        </table>

                    </div>
                </div>

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

                    <div class="table-responsive">

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

                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Task ID</th>
                                    <th>Task Name</th>
                                    <th>Staff Name</th>
                                    <th>Status</th>
                                    <th>Remarks</th>
                                    <th>Reopened Date</th>
                                </tr>
                            </thead>

                            <tbody></tbody>
                        </table>

                    </div>
                </div>

            </div>

        </div>
    </div>

</div>

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

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

    .task-summary-tabs .nav-link.active {
        color: #fff;
        background: #7367f0;
        box-shadow: 0 4px 12px
            rgba(115, 103, 240, .25);
    }

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

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

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

        .task-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 ?? 'completed');

    let completedTable = null;
    let incompleteTable = null;
    let reopenedTable = null;

    function commonAjax(type) {
        return {
            url: "{{ route('staff_task_summary_data') }}",
            type: "GET",

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

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

    function loadCompletedTable() {

        if (
            jq.fn.DataTable.isDataTable(
                '#completedTaskTable'
            )
        ) {
            completedTable
                .columns
                .adjust();

            return;
        }

        completedTable = jq(
            '#completedTaskTable'
        ).DataTable({

            processing: true,
            serverSide: true,
            pageLength: 10,

            ajax: commonAjax('completed'),

            columns: [
                {
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'task_id_display',
                    name: 'id'
                },
                {
                    data: 'task_name',
                    orderable: false
                },
                {
                    data: 'staff_name',
                    orderable: false
                },
                {
                    data: 'priority_display',
                    orderable: false
                },
                {
                    data: 'due_date_display',
                    orderable: false
                },
                {
                    data: 'task_status',
                    name: 'task_status'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ],

            order: [[7, 'desc']],

            language: {
                search: '',
                searchPlaceholder: 'Search Completed Tasks',
                emptyTable: 'No completed tasks available'
            }
        });
    }

    function loadIncompleteTable() {

        if (
            jq.fn.DataTable.isDataTable(
                '#incompleteTaskTable'
            )
        ) {
            incompleteTable
                .columns
                .adjust();

            return;
        }

        incompleteTable = jq(
            '#incompleteTaskTable'
        ).DataTable({

            processing: true,
            serverSide: true,
            pageLength: 10,

            ajax: commonAjax('incomplete'),

            columns: [
                {
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'task_id_display',
                    name: 'id'
                },
                {
                    data: 'task_name',
                    orderable: false
                },
                {
                    data: 'staff_name',
                    orderable: false
                },
                {
                    data: 'priority_display',
                    orderable: false
                },
                {
                    data: 'due_date_display',
                    orderable: false
                },
                {
                    data: 'task_status',
                    name: 'task_status'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ],

            order: [[7, 'desc']],

            language: {
                search: '',
                searchPlaceholder: 'Search Incomplete Tasks',
                emptyTable: 'No incomplete tasks available'
            }
        });
    }

    function loadReopenedTable() {

        if (
            jq.fn.DataTable.isDataTable(
                '#reopenedTaskTable'
            )
        ) {
            reopenedTable
                .columns
                .adjust();

            return;
        }

        reopenedTable = jq(
            '#reopenedTaskTable'
        ).DataTable({

            processing: true,
            serverSide: true,
            pageLength: 10,

            ajax: commonAjax('reopened'),

            columns: [
                {
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'task_id_display',
                    orderable: false
                },
                {
                    data: 'task_name',
                    orderable: false
                },
                {
                    data: 'staff_name',
                    orderable: false
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'remarks',
                    orderable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ],

            order: [[6, 'desc']],

            language: {
                search: '',
                searchPlaceholder: 'Search Reopened Tasks',
                emptyTable: 'No reopened tasks available'
            }
        });
    }

    if (activeTab === 'incomplete') {
        loadIncompleteTable();
    } else if (activeTab === 'reopened') {
        loadReopenedTable();
    } else {
        loadCompletedTable();
    }

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

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

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

});
</script>

@endsection