<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Tiện ích lái xe</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
                    <li class="breadcrumb-item"><a href="/business">Nghiệp vụ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Tiện ích lái xe</li>
                </ol>
            </div>
        </div>

        <div class="card mg-b-20">
            <div class="card-body">
                <div class="panel panel-primary tabs-style-2">
                    <div class="tab-menu-heading">
                        <div class="tabs-menu1">
                            <!-- Tabs -->
                            <ul class="nav panel-tabs main-nav-line">
                                <li>
                                    <a href="#tabAttendance" @click="setActiveTab(1)"
                                        :class="{ 'active': activeTab === 1 }" class="nav-link me-1"
                                        data-bs-toggle="tab">
                                        <i class="fas fa-user-check me-2"></i>Chấm công
                                    </a>
                                </li>
                                <li>
                                    <a href="#tabHandOverVehicle" @click="setActiveTab(2)"
                                        :class="{ 'active': activeTab === 2 }" class="nav-link me-1"
                                        data-bs-toggle="tab">
                                        <i class="fas fa-exchange-alt me-2"></i>Bàn giao xe
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-body tabs-menu-body main-content-body-right border">
                        <div class="tab-content">
                            <!-- Attendance Tab -->
                            <div v-show="activeTab === 1" :class="{ 'active': activeTab === 1 }" class="tab-pane"
                                id="tabAttendance" style="min-height: 400px;">
                                <div v-if="loadingTab === 1" class="text-center py-5">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="mt-2">Đang tải Chấm công...</p>
                                </div>
                                <Attendance v-else :key="`attendance-${attendanceKey}`" />
                            </div>

                            <!-- Hand Over Vehicle Tab -->
                            <div v-show="activeTab === 2" :class="{ 'active': activeTab === 2 }" class="tab-pane"
                                id="tabHandOverVehicle" style="min-height: 400px;">
                                <div v-if="loadingTab === 2" class="text-center py-5">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="mt-2">Đang tải Bàn giao xe...</p>
                                </div>
                                <HandOverVehicle v-else :key="`handover-${handOverVehicleKey}`" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref(1);
const loadingTab = ref(null); // Tab đang loading

// Keys để force re-render components
const attendanceKey = ref(0);
const handOverVehicleKey = ref(0);

//#region Components
import Attendance from "./components/Attendance.vue";
import HandOverVehicle from "./components/HandOverVehicle.vue";
//#endregion

const setActiveTab = async (id) => {
    if (activeTab.value === id) return; // Nếu click vào tab đang active thì không làm gì

    activeTab.value = id;
    loadingTab.value = id;

    // Tăng key để force re-render component
    switch (id) {
        case 1:
            attendanceKey.value++;
            break;
        case 2:
            handOverVehicleKey.value++;
            break;
    }

    // Simulate loading time để user thấy loading state
    await new Promise(resolve => setTimeout(resolve, 300));
    loadingTab.value = null;
};
</script>

<style scoped>
.nav-link {
    transition: all 0.3s ease;
}

.nav-link:hover {
    background-color: #f8f9fa;
}

.nav-link.active {
    background-color: #007bff;
}

.tab-pane {
    padding: 20px;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}
</style>