<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Order Management - Vue 3.2</title>
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .card-container {
            height: 400px;
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
    <div id="app" class="max-w-6xl mx-auto">
        <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">Restaurant Order Management - Vue 3.2</h1>
        
        <div class="card-container overflow-x-auto scrollbar-hide">
            <div class="flex gap-6 h-full">
                <!-- Card 1 - Horizontal Layout -->
                <order-card 
                    :table-info="tableInfo1"
                    :items="items1"
                    layout="horizontal"
                    :item-width="100"
                    @start-all="handleStartAll"
                    @done-all="handleDoneAll"
                ></order-card>
                
                <!-- Card 2 - Grid Layout -->
                <order-card 
                    :table-info="tableInfo2"
                    :items="items2"
                    layout="grid"
                    @start-all="handleStartAll"
                    @done-all="handleDoneAll"
                ></order-card>
                
                <!-- Card 3 - Grid Layout with 10 items -->
                <order-card 
                    v-if="showThirdCard"
                    :table-info="tableInfo3"
                    :items="items3"
                    layout="grid"
                    @start-all="handleStartAll"
                    @done-all="handleDoneAll"
                ></order-card>
            </div>
        </div>
        
        <div class="mt-6 text-center">
            <button @click="toggleThirdCard" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg">
                {{ showThirdCard ? 'Sembunyikan Card 3' : 'Tampilkan Card 3 (10 items)' }}
            </button>
        </div>
    </div>

    <script>
        const { createApp, ref, computed } = Vue;

        // Komponen OrderCard
        const OrderCard = {
            props: {
                tableInfo: {
                    type: Object,
                    required: true
                },
                items: {
                    type: Array,
                    required: true
                },
                layout: {
                    type: String,
                    default: 'grid',
                    validator: (value) => ['horizontal', 'grid'].includes(value)
                },
                itemWidth: {
                    type: Number,
                    default: 100
                }
            },
            emits: ['start-all', 'done-all'],
            setup(props) {
                const isStarted = ref(false);
                const isDone = ref(false);
                
                const handleStartAll = () => {
                    isStarted.value = !isStarted.value;
                    if (isStarted.value) {
                        isDone.value = false;
                    }
                };
                
                const handleDoneAll = () => {
                    isDone.value = !isDone.value;
                    if (isDone.value) {
                        isStarted.value = false;
                    }
                };
                
                // Menghitung lebar card untuk layout horizontal
                const cardWidth = computed(() => {
                    if (props.layout === 'horizontal') {
                        const gap = 16; // 1rem = 16px
                        const padding = 32; // 2rem = 32px
                        return (props.items.length * props.itemWidth) + ((props.items.length - 1) * gap) + padding;
                    }
                    return 'auto';
                });
                
                // Menghitung jumlah kolom untuk layout grid
                const gridColumns = computed(() => {
                    const itemCount = props.items.length;
                    if (itemCount <= 2) return 1;
                    if (itemCount <= 6) return 2;
                    if (itemCount <= 9) return 3;
                    return 4;
                });
                
                return {
                    isStarted,
                    isDone,
                    handleStartAll,
                    handleDoneAll,
                    cardWidth,
                    gridColumns
                };
            },
            template: `
                <div 
                    class="bg-white rounded-lg shadow-lg overflow-hidden flex-shrink-0"
                    :style="layout === 'horizontal' ? { width: cardWidth + 'px' } : {}"
                >
                    <div class="bg-blue-600 text-white p-4 flex justify-between items-center">
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-table"></i>
                            <span class="font-bold">Table: {{ tableInfo.number }} ({{ tableInfo.role }})</span>
                        </div>
                        <div class="text-right">
                            <div class="text-sm">{{ tableInfo.time }}</div>
                            <div class="text-xs bg-red-500 px-2 py-1 rounded mt-1">{{ tableInfo.urgent }}</div>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <!-- Horizontal Layout -->
                        <div v-if="layout === 'horizontal'" class="flex space-x-4">
                            <div 
                                v-for="item in items" 
                                :key="item.name" 
                                class="bg-white rounded-lg shadow p-3 flex-shrink-0"
                                :style="{ width: itemWidth + 'px' }"
                            >
                                <h3 class="font-bold text-gray-800 text-sm truncate">{{ item.name }} x{{ item.quantity }}</h3>
                                <p v-if="item.description" class="text-xs text-gray-600 mt-1 truncate">{{ item.description }}</p>
                                <div v-if="item.time" class="mt-2 flex items-center text-xs text-gray-500">
                                    <i class="fas fa-clock mr-1"></i>
                                    <span>{{ item.time }}</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Grid Layout -->
                        <div v-else class="grid gap-4" :style="{ gridTemplateColumns: 'repeat(' + gridColumns + ', 100px)' }">
                            <div 
                                v-for="item in items" 
                                :key="item.name" 
                                class="bg-green-100 border border-green-300 rounded-lg p-4"
                            >
                                <div class="flex flex-col h-full">
                                    <div class="flex-grow">
                                        <h3 class="font-bold text-gray-800">{{ item.name }}</h3>
                                        <div class="flex items-center mt-1">
                                            <span class="bg-green-500 text-white text-xs px-2 py-1 rounded">x{{ item.quantity }}</span>
                                        </div>
                                        <p v-if="item.description" class="text-xs text-gray-600 mt-1">{{ item.description }}</p>
                                    </div>
                                    <div v-if="item.time" class="text-xs text-gray-500 mt-2">
                                        <i class="fas fa-clock mr-1"></i>
                                        <span>{{ item.time }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 flex space-x-3">
                        <button 
                            @click="handleStartAll"
                            :class="[
                                'flex-1 py-2 px-4 rounded-lg font-semibold transition duration-200',
                                isStarted 
                                    ? 'bg-yellow-500 hover:bg-yellow-600' 
                                    : 'bg-orange-500 hover:bg-orange-600 text-white'
                            ]"
                        >
                            <i class="fas" :class="isStarted ? 'fa-pause' : 'fa-play'"></i>
                            {{ isStarted ? 'Pause All' : 'Start All' }}
                        </button>
                        <button 
                            @click="handleDoneAll"
                            :class="[
                                'flex-1 py-2 px-4 rounded-lg font-semibold transition duration-200',
                                isDone 
                                    ? 'bg-blue-500 hover:bg-blue-600' 
                                    : 'bg-green-500 hover:bg-green-600 text-white'
                            ]"
                        >
                            <i class="fas" :class="isDone ? 'fa-redo' : 'fa-check'"></i>
                            {{ isDone ? 'Reset All' : 'Done All' }}
                        </button>
                    </div>
                </div>
            `
        };

        // Aplikasi Vue
        createApp({
            components: {
                OrderCard
            },
            setup() {
                const showThirdCard = ref(false);
                
                const tableInfo1 = {
                    number: 19,
                    role: 'ADMIN',
                    time: '12:05:43',
                    urgent: '122:36 Urgent'
                };
                
                const tableInfo2 = {
                    number: 19,
                    role: 'ADMIN',
                    time: '12:07:11',
                    urgent: '121:08 Urgent'
                };
                
                const tableInfo3 = {
                    number: 20,
                    role: 'ADMIN',
                    time: '12:10:25',
                    urgent: '95:42 Urgent'
                };
                
                const items1 = [
                    { name: 'Yatai Fu Saba Yaki', quantity: 1, description: 'Grilled mackerel', time: '15 min' },
                    { name: 'Kyuri Breeze', quantity: 1, description: 'Cucumber salad', time: '5 min' }
                ];
                
                const items2 = [
                    { name: 'Yatai Fu Saba Yaki', quantity: 1, time: '15 min' },
                    { name: 'Kyuri Breeze', quantity: 1, time: '5 min' },
                    { name: 'Mineral Water', quantity: 2, time: '2 min' },
                    { name: 'Umakara Ramen', quantity: 2, time: '20 min' },
                    { name: 'Tori Chili Don', quantity: 1, time: '18 min' }
                ];
                
                const items3 = [
                    { name: 'Yatai Fu Saba Yaki', quantity: 1, time: '15 min' },
                    { name: 'Kyuri Breeze', quantity: 2, time: '5 min' },
                    { name: 'Mineral Water', quantity: 3, time: '2 min' },
                    { name: 'Umakara Ramen', quantity: 2, time: '20 min' },
                    { name: 'Tori Chili Don', quantity: 1, time: '18 min' },
                    { name: 'Edamame', quantity: 2, time: '8 min' },
                    { name: 'Gyoza', quantity: 1, time: '12 min' },
                    { name: 'Takoyaki', quantity: 1, time: '10 min' },
                    { name: 'Miso Soup', quantity: 2, time: '3 min' },
                    { name: 'Green Tea', quantity: 1, time: '2 min' }
                ];
                
                const toggleThirdCard = () => {
                    showThirdCard.value = !showThirdCard.value;
                };
                
                const handleStartAll = () => {
                    console.log('Start All clicked');
                };
                
                const handleDoneAll = () => {
                    console.log('Done All clicked');
                };
                
                return {
                    showThirdCard,
                    tableInfo1,
                    tableInfo2,
                    tableInfo3,
                    items1,
                    items2,
                    items3,
                    toggleThirdCard,
                    handleStartAll,
                    handleDoneAll
                };
            }
        }).mount('#app');
    </script>
</body>
</html>