<template>
    <div class="check-in-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-in-alt text-success me-2"></i>
                            Check-In Lái Xe
                        </h5>
                    </div>
                    <div class="card-body">
                        <form @submit.prevent="handleCheckIn">
                            <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-in <span
                                                class="text-danger">*</span></label>
                                        <input type="datetime-local" class="form-control" v-model="formData.checkInTime"
                                            required />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Địa điểm check-in</label>
                                        <input type="text" class="form-control" v-model="formData.location"
                                            placeholder="Địa điểm check-in" />
                                    </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ú (nếu có)"></textarea>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-success me-2" :disabled="loading">
                                    <i class="fas fa-check me-2"></i>
                                    {{ loading ? 'Đang xử lý...' : 'Check-In' }}
                                </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 để tự động điền thông tin
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Thời gian check-in sẽ được ghi nhận tự động
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                Có thể thêm ghi chú nếu cần thiết
                            </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-in gần đây
                        </h6>
                    </div>
                    <div class="card-body">
                        <div v-if="recentCheckIns.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-in</p>
                        </div>
                        <div v-else>
                            <div v-for="(checkIn, index) in recentCheckIns" :key="index"
                                class="border-bottom pb-2 mb-2">
                                <div class="d-flex justify-content-between">
                                    <strong>{{ checkIn.driverName }}</strong>
                                    <small class="text-muted">{{ formatTime(checkIn.checkInTime) }}</small>
                                </div>
                                <small class="text-muted">{{ checkIn.location }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

const loading = ref(false);

const formData = reactive({
    driverCode: '',
    driverName: '',
    checkInTime: '',
    location: '',
    notes: ''
});

const recentCheckIns = ref([
    {
        driverName: 'Nguyễn Văn A',
        checkInTime: '2024-01-15T08:00:00',
        location: 'Kho Hà Nội'
    },
    {
        driverName: 'Trần Thị B',
        checkInTime: '2024-01-15T07:30:00',
        location: 'Kho TP.HCM'
    }
]);

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

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

        // Add to recent check-ins
        recentCheckIns.value.unshift({
            driverName: formData.driverName || 'Lái xe mới',
            checkInTime: formData.checkInTime,
            location: formData.location || 'Không xác định'
        });

        // Reset form
        resetForm();

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

const resetForm = () => {
    formData.driverCode = '';
    formData.driverName = '';
    formData.checkInTime = '';
    formData.location = '';
    formData.notes = '';
};

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

<style scoped>
.check-in-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;
}
</style>