@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 Login Summary</h4>
            <p class="text-muted mb-0">
                View on-time and late login history for the selected staff.
            </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 login-summary-tabs" role="tablist">

                <li class="nav-item" role="presentation">
                    <button
                        type="button"
                        class="nav-link {{ ($activeTab ?? 'on_time') === 'on_time' ? 'active' : '' }}"
                        id="ontime-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#ontime-pane"
                        role="tab"
                        aria-controls="ontime-pane"
                        aria-selected="{{ ($activeTab ?? 'on_time') === 'on_time' ? 'true' : 'false' }}"
                    >
                        <i class="ti tabler-clock-check me-1"></i>
                        On-Time Logins
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button
                        type="button"
                        class="nav-link {{ ($activeTab ?? '') === 'late' ? 'active' : '' }}"
                        id="late-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#late-pane"
                        role="tab"
                        aria-controls="late-pane"
                        aria-selected="{{ ($activeTab ?? '') === 'late' ? 'true' : 'false' }}"
                    >
                        <i class="ti tabler-clock-exclamation me-1"></i>
                        Late Logins
                    </button>
                </li>

            </ul>
        </div>

        <div class="card-body pt-4">
            <div class="tab-content p-0">

                <div
                    class="tab-pane fade {{ ($activeTab ?? 'on_time') === 'on_time' ? 'show active' : '' }}"
                    id="ontime-pane"
                    role="tabpanel"
                    aria-labelledby="ontime-tab"
                >
                    <div class="table-responsive">
                        <table id="onTimeLoginTable" class="table table-hover align-middle w-100">
                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Date</th>
                                    <th>Employee ID</th>
                                    <th>Staff Name</th>
                                    <th>Work Mode</th>
                                    <th>Check In</th>
                                    <th>Type</th>
                                    <th>Check Out</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

                <div
                    class="tab-pane fade {{ ($activeTab ?? '') === 'late' ? 'show active' : '' }}"
                    id="late-pane"
                    role="tabpanel"
                    aria-labelledby="late-tab"
                >
                    <div class="table-responsive">
                        <table id="lateLoginTable" class="table table-hover align-middle w-100">
                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>Date</th>
                                    <th>Employee ID</th>
                                    <th>Staff Name</th>
                                    <th>Work Mode</th>
                                    <th>Check In</th>
                                    <th>Type</th>
                                    <th>Check Out</th>
                                    <th>Late Reason</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

<style>
    .login-summary-tabs {
        gap: 8px;
        padding: 0 14px;
        background: #fff;
    }

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

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

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

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

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

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

        .login-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 selectedStaffId = @json($selectedStaffId ?? '');
        const selectedMonth = @json($selectedMonth ?? '');
        const activeTab = @json($activeTab ?? 'on_time');

        let onTimeLoginTable = null;
        let lateLoginTable = null;

        function loadOnTimeLoginTable() {
            if (jq.fn.DataTable.isDataTable('#onTimeLoginTable')) {
                onTimeLoginTable = jq('#onTimeLoginTable').DataTable();
                onTimeLoginTable.columns.adjust();
                return;
            }

            onTimeLoginTable = jq('#onTimeLoginTable').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                ordering: true,
                pageLength: 10,
                lengthMenu: [
                    [10, 100, 1000, -1],
                    ['10', '100', '1000', 'All']
                ],
                ajax: {
                    url: "{{ route('staff_login_summary_data') }}",
                    type: "GET",
                    data: function (data) {
                        data.type = 'on_time';
                        data.staff_id = selectedStaffId;
                        data.month = selectedMonth;
                    },
                    error: function (xhr) {
                        console.error('On-time login AJAX error:', xhr.responseText);
                    }
                },
                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'employee_id',
                        name: 'user_id'
                    },
                    {
                        data: 'user_name',
                        name: 'user_name'
                    },
                    {
                        data: 'work_mode',
                        name: 'work_mode',
                        defaultContent: '-'
                    },
                    {
                        data: 'check_in',
                        name: 'check_in'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'check_out',
                        name: 'check_out'
                    }
                ],
                order: [[1, 'desc']],
                language: {
                    search: '',
                    searchPlaceholder: 'Search On-Time Login',
                    emptyTable: 'No on-time login records available',
                    processing: 'Loading on-time login records...'
                }
            });
        }

        function loadLateLoginTable() {
            if (jq.fn.DataTable.isDataTable('#lateLoginTable')) {
                lateLoginTable = jq('#lateLoginTable').DataTable();
                lateLoginTable.columns.adjust();
                return;
            }

            lateLoginTable = jq('#lateLoginTable').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                ordering: true,
                pageLength: 10,
                lengthMenu: [
                    [10, 100, 1000, -1],
                    ['10', '100', '1000', 'All']
                ],
                ajax: {
                    url: "{{ route('staff_login_summary_data') }}",
                    type: "GET",
                    data: function (data) {
                        data.type = 'late';
                        data.staff_id = selectedStaffId;
                        data.month = selectedMonth;
                    },
                    error: function (xhr) {
                        console.error('Late login AJAX error:', xhr.responseText);
                    }
                },
                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'employee_id',
                        name: 'user_id'
                    },
                    {
                        data: 'user_name',
                        name: 'user_name'
                    },
                    {
                        data: 'work_mode',
                        name: 'work_mode',
                        defaultContent: '-'
                    },
                    {
                        data: 'check_in',
                        name: 'check_in'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'check_out',
                        name: 'check_out'
                    },
                    {
                        data: 'late_reason',
                        name: 'late_reason',
                        defaultContent: '-'
                    }
                ],
                order: [[1, 'desc']],
                language: {
                    search: '',
                    searchPlaceholder: 'Search Late Login',
                    emptyTable: 'No late login records available',
                    processing: 'Loading late login records...'
                }
            });
        }

        if (activeTab === 'late') {
            loadLateLoginTable();
        } else {
            loadOnTimeLoginTable();
        }

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

        jq('button[data-bs-target="#late-pane"]').on('shown.bs.tab', function () {
            loadLateLoginTable();
        });
    });
</script>

@endsection