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

            <p class="text-muted mb-0">
                View staff leave, work from home and permission 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">

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

            <ul class="nav nav-tabs attendance-tabs"
                id="attendanceTabs"
                role="tablist">

                <li class="nav-item" role="presentation">

                    <button
                        type="button"
                        class="nav-link {{ ($activeTab ?? 'leave') === 'leave' ? 'active' : '' }}"
                        id="leave-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#leave-pane"
                        role="tab"
                        aria-controls="leave-pane"
                        aria-selected="{{ ($activeTab ?? 'leave') === 'leave' ? 'true' : 'false' }}">

                        <i class="ti tabler-calendar-off me-1"></i>
                        Leave Request
                    </button>

                </li>

                <li class="nav-item" role="presentation">

                    <button
                        type="button"
                        class="nav-link {{ ($activeTab ?? '') === 'wfh' ? 'active' : '' }}"
                        id="wfh-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#wfh-pane"
                        role="tab"
                        aria-controls="wfh-pane"
                        aria-selected="{{ ($activeTab ?? '') === 'wfh' ? 'true' : 'false' }}">

                        <i class="ti tabler-home-laptop me-1"></i>
                        Work From Home
                    </button>

                </li>

                <li class="nav-item" role="presentation">

                    <button
                        type="button"
                        class="nav-link {{ ($activeTab ?? '') === 'permission' ? 'active' : '' }}"
                        id="permission-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#permission-pane"
                        role="tab"
                        aria-controls="permission-pane"
                        aria-selected="{{ ($activeTab ?? '') === 'permission' ? 'true' : 'false' }}">

                        <i class="ti tabler-clock-edit me-1"></i>
                        Permission
                    </button>

                </li>

            </ul>

        </div>

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

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

                {{-- Leave Tab --}}
                <div
                    class="tab-pane fade {{ ($activeTab ?? 'leave') === 'leave' ? 'show active' : '' }}"
                    id="leave-pane"
                    role="tabpanel"
                    aria-labelledby="leave-tab">

                    <div class="table-responsive">

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

                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Request Date</th>
                                    <th>Staff Name</th>
                                    <th>From Date</th>
                                    <th>To Date</th>
                                    <th>Informed To</th>
                                    <th>Mailed</th>
                                    <th>Loss Of Pay</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                        </table>

                    </div>

                </div>

                {{-- WFH Tab --}}
                <div
                    class="tab-pane fade {{ ($activeTab ?? '') === 'wfh' ? 'show active' : '' }}"
                    id="wfh-pane"
                    role="tabpanel"
                    aria-labelledby="wfh-tab">

                    <div class="table-responsive">

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

                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Request Date</th>
                                    <th>Staff Name</th>
                                    <th>From Date</th>
                                    <th>To Date</th>
                                    <th>Informed To</th>
                                    <th>Mailed</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                        </table>

                    </div>

                </div>

                {{-- Permission Tab --}}
                <div
                    class="tab-pane fade {{ ($activeTab ?? '') === 'permission' ? 'show active' : '' }}"
                    id="permission-pane"
                    role="tabpanel"
                    aria-labelledby="permission-tab">

                    <div class="table-responsive">

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

                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Staff Name</th>
                                    <th>From Time</th>
                                    <th>To Time</th>
                                    <th>Informed To</th>
                                    <th>Mailed</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<style>
    .attendance-tabs {
        padding: 0 12px;
        gap: 8px;
        background: #fff;
    }

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

    .attendance-tabs .nav-link:hover {
        color: #ea1d2c;
        background: #fff1f2;
    }

    .attendance-tabs .nav-link.active {
        color: #fff;
        background: #ea1d2c;
        box-shadow: 0 4px 10px
            rgba(234, 29, 44, 0.25);
    }

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

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

    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 15px;
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width: 220px;
        margin-left: 8px;
        border: 1px solid #dbdade;
        border-radius: 6px;
        padding: 7px 10px;
    }

    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #dbdade;
        border-radius: 6px;
        padding: 5px 28px 5px 8px;
    }

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

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

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
$(document).ready(function () {

    const selectedMonth = @json($selectedMonth ?? '');
    const selectedStaffId = @json($selectedStaffId ?? '');
    const activeTab = @json($activeTab ?? 'leave');

    let leaveTable = null;
    let wfhTable = null;
    let permissionTable = null;

    /*
    |--------------------------------------------------------------------------
    | Leave DataTable
    |--------------------------------------------------------------------------
    */
    function loadLeaveTable() {

        if ($.fn.DataTable.isDataTable('#leaveTable')) {
            return;
        }

        leaveTable = $('#leaveTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,
            searching: true,
            ordering: true,
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],

            ajax: {
                url: "{{ route('staff_attendance_summary') }}",
                type: "GET",
                data: function (data) {
                    data.type = 'leave';
                    data.month = selectedMonth;
                    data.staff_id = selectedStaffId;
                }
            },

            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'request_date',
                    name: 'created_at'
                },
                {
                    data: 'staff_name',
                    name: 'staff_name'
                },
                {
                    data: 'from',
                    name: 'from'
                },
                {
                    data: 'to',
                    name: 'to'
                },
                {
                    data: 'informed_to',
                    name: 'informed_to',
                    defaultContent: '-'
                },
                {
                    data: 'mailed_status',
                    name: 'mailed',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'loss_of_pay_status',
                    name: 'loss_of_pay',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'reason',
                    name: 'reason',
                    defaultContent: '-'
                },
                {
                    data: 'request_status',
                    name: 'is_replied',
                    orderable: false,
                    searchable: false
                }
            ],

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

            language: {
                search: '',
                searchPlaceholder: 'Search Leave',
                emptyTable: 'No leave records available',
                processing: 'Loading leave records...'
            }
        });
    }

    /*
    |--------------------------------------------------------------------------
    | WFH DataTable
    |--------------------------------------------------------------------------
    */
    function loadWfhTable() {

        if ($.fn.DataTable.isDataTable('#wfhTable')) {
            return;
        }

        wfhTable = $('#wfhTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,
            searching: true,
            ordering: true,
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],

            ajax: {
                url: "{{ route('staff_attendance_summary') }}",
                type: "GET",
                data: function (data) {
                    data.type = 'wfh';
                    data.month = selectedMonth;
                    data.staff_id = selectedStaffId;
                }
            },

            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'request_date',
                    name: 'created_at'
                },
                {
                    data: 'staff_name',
                    name: 'staff_name'
                },
                {
                    data: 'from',
                    name: 'from'
                },
                {
                    data: 'to',
                    name: 'to'
                },
                {
                    data: 'informed_to',
                    name: 'informed_to',
                    defaultContent: '-'
                },
                {
                    data: 'mailed_status',
                    name: 'mailed',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'reason',
                    name: 'reason',
                    defaultContent: '-'
                },
                {
                    data: 'request_status',
                    name: 'is_replied',
                    orderable: false,
                    searchable: false
                }
            ],

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

            language: {
                search: '',
                searchPlaceholder: 'Search WFH',
                emptyTable: 'No work from home records available',
                processing: 'Loading WFH records...'
            }
        });
    }

    /*
    |--------------------------------------------------------------------------
    | Permission DataTable
    |--------------------------------------------------------------------------
    */
    function loadPermissionTable() {

        if ($.fn.DataTable.isDataTable('#permissionTable')) {
            return;
        }

        permissionTable = $('#permissionTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,
            searching: true,
            ordering: true,
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],

            ajax: {
                url: "{{ route('staff_attendance_summary') }}",
                type: "GET",
                data: function (data) {
                    data.type = 'permission';
                    data.month = selectedMonth;
                    data.staff_id = selectedStaffId;
                }
            },

            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'staff_name',
                    name: 'staff_name'
                },
                {
                    data: 'from',
                    name: 'from'
                },
                {
                    data: 'to',
                    name: 'to'
                },
                {
                    data: 'informed_to',
                    name: 'informed_to',
                    defaultContent: '-'
                },
                {
                    data: 'mailed_status',
                    name: 'mailed',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'reason',
                    name: 'reason',
                    defaultContent: '-'
                },
                {
                    data: 'request_status',
                    name: 'is_replied',
                    orderable: false,
                    searchable: false
                }
            ],

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

            language: {
                search: '',
                searchPlaceholder: 'Search Permission',
                emptyTable: 'No permission records available',
                processing: 'Loading permission records...'
            }
        });
    }

    /*
    |--------------------------------------------------------------------------
    | Initial Table
    |--------------------------------------------------------------------------
    */
    if (activeTab === 'wfh') {
        loadWfhTable();
    } else if (activeTab === 'permission') {
        loadPermissionTable();
    } else {
        loadLeaveTable();
    }

    /*
    |--------------------------------------------------------------------------
    | Tab Change Events
    |--------------------------------------------------------------------------
    */
    $('button[data-bs-target="#leave-pane"]').on(
        'shown.bs.tab',
        function () {
            loadLeaveTable();

            setTimeout(function () {
                if (leaveTable) {
                    leaveTable.columns.adjust();
                }
            }, 100);
        }
    );

    $('button[data-bs-target="#wfh-pane"]').on(
        'shown.bs.tab',
        function () {
            loadWfhTable();

            setTimeout(function () {
                if (wfhTable) {
                    wfhTable.columns.adjust();
                }
            }, 100);
        }
    );

    $('button[data-bs-target="#permission-pane"]').on(
        'shown.bs.tab',
        function () {
            loadPermissionTable();

            setTimeout(function () {
                if (permissionTable) {
                    permissionTable.columns.adjust();
                }
            }, 100);
        }
    );

});
</script>

@endsection