<template>
    <div class="check-out-container">
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">
                            <i class="fas fa-sign-out-alt text-danger me-2"></i>
                            Check-Out Lái Xe
                        </h5>
                    </div>
                    <div class="card-body">
                        <form @submit.prevent="handleCheckOut">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Mã lái xe <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" v-model="formData.driverCode"
                                            placeholder="Nhập mã lái xe" required />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Tên lái xe</label>
                                        <input type="text" class="form-control" v-model="formData.driverName"
                                            placeholder="Tên lái xe" readonly />
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Thời gian check-out <span
                                                class="text-danger">*</span></label>
                                        <input type="datetime-local" class="form-control"
                                            v-model="formData.checkOutTime" required />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Địa điểm check-out</label>
                                        <input type="text" class="form-control" v-model="formData.location"
                                            placeholder="Địa điểm check-out" />
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Tổng thời gian làm việc</label>
                                        <input type="text" class="form-control" v-model="formData.totalWorkTime"
                                            placeholder="Tự động tính" readonly />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Trạng thái</label>
                                        <select class="form-control" v-model="formData.status">
                                            <option value="normal">Bình thường</option>
                                            <option value="overtime">Làm thêm giờ</option>
                                            <option value="early">Về sớm</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mb-3">
                                <label class="form-label">Ghi chú</label>
                                <textarea class="form-control" rows="3" v-model="formData.notes"
                                    placeholder="Ghi chú về ca làm việc"></textarea>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-danger me-2" :disabled="loading">
                                    <i class="fas fa-sign-out-alt me-2"></i>
                                    {{ loading ? 'Đang xử lý...' : 'Check-Out' }}
                                </button>
                                <button type="button" class="btn btn-secondary" @click="resetForm">
                                    <i class="fas fa-undo me-2"></i>
                                    Làm mới
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">
                            <i class="fas fa-info-circle text-info me-2"></i>
                            Thông tin hướng dẫn
                        </h6>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Nhập mã lái xe để xác nhận thông tin
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Thời gian làm việc sẽ được tính tự động
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Chọn trạng thái phù hợp với ca làm việc
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <h6 class="card-title">
                            <i class="fas fa-history text-warning me-2"></i>
                            Lịch sử check-out gần đây
                        </h6>
                    </div>
                    <div class="card-body">
                        <div v-if="recentCheckOuts.length === 0" class="text-muted text-center">
                            <i class="fas fa-inbox fa-2x mb-2"></i>
                            <p>Chưa có lịch sử check-out</p>
                        </div>
                        <div v-else>
                            <div v-for="(checkOut, index) in recentCheckOuts" :key="index"
                                class="border-bottom pb-2 mb-2">
                                <div class="d-flex justify-content-between">
                                    <strong>{{ checkOut.driverName }}</strong>
                                    <small class="text-muted">{{ formatTime(checkOut.checkOutTime) }}</small>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <small class="text-muted">{{ checkOut.totalWorkTime }}</small>
                                    <span :class="getStatusClass(checkOut.status)">
                                        {{ getStatusText(checkOut.status) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

const loading = ref(false);

const formData = reactive({
    driverCode: '',
    driverName: '',
    checkOutTime: '',
    location: '',
    totalWorkTime: '',
    status: 'normal',
    notes: ''
});

const recentCheckOuts = ref([
    {
        driverName: 'Nguyễn Văn A',
        checkOutTime: '2024-01-15T17:00:00',
        totalWorkTime: '9 giờ',
        status: 'normal'
    },
    {
        driverName: 'Trần Thị B',
        checkOutTime: '2024-01-15T18:30:00',
        totalWorkTime: '11 giờ',
        status: 'overtime'
    }
]);

const handleCheckOut = async () => {
    loading.value = true;

    try {
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 1000));

        // Add to recent check-outs
        recentCheckOuts.value.unshift({
            driverName: formData.driverName || 'Lái xe mới',
            checkOutTime: formData.checkOutTime,
            totalWorkTime: formData.totalWorkTime || '8 giờ',
            status: formData.status
        });

        // Reset form
        resetForm();

        // Show success message
        alert('Check-out thành công!');
    } catch (error) {
        console.error('Check-out error:', error);
        alert('Có lỗi xảy ra khi check-out!');
    } finally {
        loading.value = false;
    }
};

const resetForm = () => {
    formData.driverCode = '';
    formData.driverName = '';
    formData.checkOutTime = '';
    formData.location = '';
    formData.totalWorkTime = '';
    formData.status = 'normal';
    formData.notes = '';
};

const formatTime = (timeString) => {
    return new Date(timeString).toLocaleString('vi-VN');
};

const getStatusClass = (status) => {
    const classes = {
        normal: 'badge bg-success',
        overtime: 'badge bg-warning',
        early: 'badge bg-info'
    };
    return classes[status] || 'badge bg-secondary';
};

const getStatusText = (status) => {
    const texts = {
        normal: 'Bình thường',
        overtime: 'Làm thêm',
        early: 'Về sớm'
    };
    return texts[status] || 'Không xác định';
};
</script>

<style scoped>
.check-out-container {
    padding: 20px 0;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.form-label {
    font-weight: 500;
    color: #495057;
}

.btn {
    border-radius: 0.375rem;
}

.btn:disabled {
    opacity: 0.65;
}

.badge {
    font-size: 0.75em;
}
</style>