@extends('layouts.admin')

@section('content')
<script>
window.remoteControlApp = function(initialMachineId) {
    return {
        machines: @js($machines),
        searchQuery: '',
        selectedMachine: null,
        commands: [],
        viewMode: initialMachineId ? 'control' : 'list',
        loading: false,
        submitting: false,
        
        // Form States
        lockStatus: false, // false = unlocked, true = locked
        changeAmount: 100,
        selectedSlot: '',
        note: '',

        async init() {
            if (initialMachineId) {
                const machine = this.machines.find(m => m.id == initialMachineId);
                if (machine) {
                    await this.selectMachine(machine);
                }
            }
        },

        async selectMachine(machine) {
            this.selectedMachine = machine;
            this.viewMode = 'control';
            this.loading = true;
            this.commands = [];
            
            // Update URL without refresh
            const url = new URL(window.location);
            url.searchParams.set('machine_id', machine.id);
            window.history.pushState({}, '', url);

            try {
                // Fetch recent commands and full machine info (with slots)
                const res = await fetch(`/admin/remote?machine_id=${machine.id}`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                // Note: For now we'll just use the already loaded $selectedMachine if available
                // But in a real app, an AJAX fetch for commands is better.
                // Since we are doing a full page load or partial, I'll assume we have commands passed.
                this.commands = @js($selectedMachine ? $selectedMachine->commands : []);
            } catch (e) {
                console.error('Fetch error:', e);
            } finally {
                this.loading = false;
            }
        },

        backToList() {
            this.viewMode = 'list';
            this.selectedMachine = null;
            const url = new URL(window.location);
            url.searchParams.delete('machine_id');
            window.history.pushState({}, '', url);
        },

        async sendCommand(type, params = {}) {
            if (!confirm(`{{ __('Are you sure you want to send this command?') }}`)) return;

            this.submitting = true;
            try {
                const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                const formData = new FormData();
                formData.append('machine_id', this.selectedMachine.id);
                formData.append('command_type', type);
                formData.append('note', this.note);
                
                if (params.amount) formData.append('amount', params.amount);
                if (params.slot_no) formData.append('slot_no', params.slot_no);

                const res = await fetch('{{ route('admin.remote.store-command') }}', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrf },
                    body: formData
                });

                if (res.ok) {
                    // Success feedback
                    const toast = window.HSStaticMethods.autoInit ? null : null; // Use Preline toast if available
                    alert('{{ __('Command queued successfully.') }}');
                    location.reload(); // Simple refresh to see new command in list
                }
            } catch (e) {
                console.error('Command error:', e);
            } finally {
                this.submitting = false;
            }
        },

        getCommandBadgeClass(status) {
            switch(status) {
                case 'pending': return 'bg-amber-100 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400 border-amber-200 dark:border-amber-500/20';
                case 'sent': return 'bg-cyan-100 text-cyan-600 dark:bg-cyan-500/10 dark:text-cyan-400 border-cyan-200 dark:border-cyan-500/20';
                case 'success': return 'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/20';
                case 'failed': return 'bg-rose-100 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400 border-rose-200 dark:border-rose-500/20';
                default: return 'bg-slate-100 text-slate-600 border-slate-200';
            }
        },

        getCommandName(type) {
            const names = {
                'reboot': {{ Js::from(__('System Reboot')) }},
                'reboot_card': {{ Js::from(__('Card Reader Reboot')) }},
                'checkout': {{ Js::from(__('Remote Settlement')) }},
                'lock': {{ Js::from(__('Page Lock')) }},
                'unlock': {{ Js::from(__('Page Unlock')) }},
                'change': {{ Js::from(__('Remote Change')) }},
                'dispense': {{ Js::from(__('Remote Dispense')) }},
                'reload_stock': {{ Js::from(__('Stock Sync')) }}
            };
            return names[type] || type;
        }
    };
};
</script>

<div class="space-y-4 pb-20 mt-4" 
     x-data="remoteControlApp({{ Js::from($selectedMachine ? $selectedMachine->id : '') }})">
    
    <!-- Master View: Machine List -->
    <template x-if="viewMode === 'list'">
        <div class="space-y-6 animate-luxury-in">
            <div class="flex flex-col gap-4">
                <div>
                    <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">
                        {{ __('Remote Command Center') }}
                    </h1>
                    <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
                        {{ __('Execute maintenance and operational commands remotely') }}
                    </p>
                </div>
                
                <div class="relative group max-w-md">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 transition-transform duration-300 group-focus-within:scale-110">
                        <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                            <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                    </span>
                    <input type="text" x-model="searchQuery" 
                           class="luxury-input w-full pl-11 py-3 text-sm focus:ring-cyan-500/20" 
                           placeholder="{{ __('Search by name or S/N...') }}">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                <template x-for="machine in machines.filter(m => 
                    m.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
                    m.serial_no.toLowerCase().includes(searchQuery.toLowerCase())
                )" :key="machine.id">
                    <div @click="selectMachine(machine)" 
                         class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/60 dark:border-slate-800/60 hover:border-cyan-500/50 hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500 cursor-pointer group flex flex-col justify-between h-full relative overflow-hidden">
                        
                        <div class="absolute -right-10 -top-10 w-32 h-32 bg-cyan-500/5 rounded-full blur-3xl group-hover:bg-cyan-500/10 transition-colors"></div>

                        <div class="flex items-start gap-5 relative z-10">
                            <div class="w-16 h-16 rounded-2xl bg-slate-50 dark:bg-slate-900 flex items-center justify-center text-slate-400 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-inner group-hover:scale-110 transition-transform duration-500 shrink-0">
                                <svg class="w-8 h-8 opacity-40 group-hover:text-cyan-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 x-text="machine.name" class="text-xl font-black text-slate-800 dark:text-white truncate"></h3>
                                <div class="flex items-center gap-2 mt-1">
                                    <span x-text="machine.serial_no" class="text-xs font-mono font-bold text-cyan-600 dark:text-cyan-400 tracking-widest uppercase"></span>
                                </div>
                            </div>
                        </div>

                        <div class="mt-8 flex items-center justify-between relative z-10">
                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('Click to Open Dashboard') }}</span>
                            <div class="w-10 h-10 rounded-full bg-slate-50 dark:bg-slate-900 flex items-center justify-center text-slate-300 dark:text-slate-600 border border-slate-100 dark:border-slate-800 transition-all duration-300 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 group-hover:scale-110">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- Detail View: Remote Control Dashboard -->
    <template x-if="viewMode === 'control'">
        <div class="space-y-6 animate-luxury-in">
            <!-- Header Controls -->
            <div class="flex items-center gap-4 mb-2 px-1">
                <button @click="backToList()" 
                        class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all border border-slate-200/50 dark:border-slate-700/50 shadow-sm hover:shadow-md active:scale-95">
                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                    </svg>
                </button>
                <h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Command Center') }}</h1>
            </div>

            <!-- Dashboard Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                
                <!-- Left: Control Actions (Spans 2 columns) -->
                <div class="lg:col-span-2 space-y-8">
                    
                    <!-- Machine Status Card -->
                    <div class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/60 dark:border-slate-800/60 flex items-center justify-between">
                        <div class="flex items-center gap-6">
                            <div class="w-16 h-16 rounded-2xl bg-cyan-500/10 flex items-center justify-center text-cyan-500 border border-cyan-500/20">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <div>
                                <h2 class="text-2xl font-black text-slate-800 dark:text-white leading-tight" x-text="selectedMachine.name"></h2>
                                <p class="text-xs font-mono font-bold text-slate-400 mt-1 uppercase tracking-widest" x-text="selectedMachine.serial_no"></p>
                            </div>
                        </div>
                        <div class="flex gap-3">
                            <span class="px-4 py-2 rounded-full bg-emerald-500/10 text-emerald-600 text-xs font-black uppercase tracking-widest border border-emerald-500/20 flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                                {{ __('Connected') }}
                            </span>
                        </div>
                    </div>

                    <!-- Actions Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        
                        <!-- Quick Actions Card -->
                        <div class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/60 dark:border-slate-800/60 transition-all duration-300">
                            <h3 class="text-lg font-black text-slate-800 dark:text-white uppercase tracking-wider mb-6 flex items-center gap-3">
                                <span class="w-2 h-6 bg-cyan-500 rounded-full"></span>
                                {{ __('Quick Maintenance') }}
                            </h3>
                            <div class="grid gap-4">
                                <button @click="sendCommand('reboot')" class="luxury-card p-5 rounded-2xl border border-slate-100 dark:border-slate-800 flex items-center gap-4 hover:border-cyan-500/50 hover:bg-cyan-500/5 group transition-all">
                                    <div class="w-12 h-12 rounded-xl bg-slate-50 dark:bg-slate-900 flex items-center justify-center text-slate-400 group-hover:text-cyan-500 group-hover:scale-110 transition-all duration-300">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
                                    </div>
                                    <div class="text-left">
                                        <div class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('System Reboot') }}</div>
                                        <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">{{ __('Restart entire machine') }}</div>
                                    </div>
                                </button>

                                <button @click="sendCommand('reboot_card')" class="luxury-card p-5 rounded-2xl border border-slate-100 dark:border-slate-800 flex items-center gap-4 hover:border-cyan-500/50 hover:bg-cyan-500/5 group transition-all">
                                    <div class="w-12 h-12 rounded-xl bg-slate-50 dark:bg-slate-900 flex items-center justify-center text-slate-400 group-hover:text-cyan-500 group-hover:scale-110 transition-all duration-300">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /></svg>
                                    </div>
                                    <div class="text-left">
                                        <div class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('Card Reader Reboot') }}</div>
                                        <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">{{ __('Reset POS terminal') }}</div>
                                    </div>
                                </button>

                                <button @click="sendCommand('checkout')" class="luxury-card p-5 rounded-2xl border border-slate-100 dark:border-slate-800 flex items-center gap-4 hover:border-emerald-500/50 hover:bg-emerald-500/5 group transition-all">
                                    <div class="w-12 h-12 rounded-xl bg-slate-50 dark:bg-slate-900 flex items-center justify-center text-slate-400 group-hover:text-emerald-500 group-hover:scale-110 transition-all duration-300">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
                                    </div>
                                    <div class="text-left">
                                        <div class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('Remote Settlement') }}</div>
                                        <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">{{ __('Force end current session') }}</div>
                                    </div>
                                </button>
                            </div>
                        </div>

                        <!-- Stateful Actions Card -->
                        <div class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/60 dark:border-slate-800/60 transition-all duration-300">
                            <h3 class="text-lg font-black text-slate-800 dark:text-white uppercase tracking-wider mb-6 flex items-center gap-3">
                                <span class="w-2 h-6 bg-rose-500 rounded-full"></span>
                                {{ __('Security & State') }}
                            </h3>
                            <div class="space-y-6">
                                <!-- Lock/Unlock Toggle -->
                                <div class="p-6 rounded-[2rem] bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800/50 relative overflow-hidden group">
                                    <div class="flex items-center justify-between relative z-10">
                                        <div>
                                            <div class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('Page Lock Status') }}</div>
                                            <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">{{ __('Restrict machine UI access') }}</div>
                                        </div>
                                        <div class="flex gap-2">
                                            <button @click="sendCommand('unlock')" class="px-4 py-2 rounded-xl bg-emerald-500/10 text-emerald-600 text-[10px] font-black uppercase tracking-widest border border-emerald-500/20 hover:bg-emerald-500 hover:text-white transition-all">{{ __('Unlock') }}</button>
                                            <button @click="sendCommand('lock')" class="px-4 py-2 rounded-xl bg-rose-500/10 text-rose-600 text-[10px] font-black uppercase tracking-widest border border-rose-500/20 hover:bg-rose-500 hover:text-white transition-all">{{ __('Lock') }}</button>
                                        </div>
                                    </div>
                                    <div class="absolute -right-4 -bottom-4 opacity-[0.03] group-hover:scale-110 transition-transform duration-700">
                                        <svg class="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
                                    </div>
                                </div>

                                <!-- Note Field -->
                                <div class="space-y-2">
                                    <label class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1">{{ __('Operation Note') }}</label>
                                    <textarea x-model="note" class="luxury-input w-full min-h-[100px] text-sm py-4" placeholder="{{ __('Reason for this command...') }}"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Parametric Actions -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        
                        <!-- Remote Change -->
                        <div class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/60 dark:border-slate-800/60">
                            <h3 class="text-lg font-black text-slate-800 dark:text-white uppercase tracking-wider mb-6 flex items-center gap-3">
                                <span class="w-2 h-6 bg-amber-500 rounded-full"></span>
                                {{ __('Remote Change') }}
                            </h3>
                            <div class="space-y-4">
                                <div class="flex items-center gap-4 bg-slate-50 dark:bg-slate-900/50 p-6 rounded-3xl border border-slate-100 dark:border-slate-800/50">
                                    <div class="text-3xl font-black text-slate-300 dark:text-slate-700 shrink-0">$</div>
                                    <input type="number" x-model="changeAmount" class="w-full bg-transparent border-none p-0 text-3xl font-black text-slate-800 dark:text-white focus:ring-0">
                                </div>
                                <div class="grid grid-cols-4 gap-2">
                                    <template x-for="amt in [10, 50, 100, 200]">
                                        <button @click="changeAmount = amt" class="py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 text-[10px] font-black uppercase tracking-widest hover:border-cyan-500 hover:text-cyan-500 transition-all" x-text="amt"></button>
                                    </template>
                                </div>
                                <button @click="sendCommand('change', { amount: changeAmount })" :disabled="submitting" class="btn-luxury-primary w-full py-4 mt-2">
                                    {{ __('Execute Change') }}
                                </button>
                            </div>
                        </div>

                        <!-- Remote Dispense -->
                        <div class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/60 dark:border-slate-800/60">
                            <h3 class="text-lg font-black text-slate-800 dark:text-white uppercase tracking-wider mb-6 flex items-center gap-3">
                                <span class="w-2 h-6 bg-violet-500 rounded-full"></span>
                                {{ __('Remote Dispense') }}
                            </h3>
                            <div class="space-y-4">
                                <div class="space-y-2">
                                    <label class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1">{{ __('Select Cargo Lane') }}</label>
                                    <template x-if="selectedMachine.slots && selectedMachine.slots.length > 0">
                                        <select x-model="selectedSlot" class="luxury-input w-full py-4 text-sm bg-white dark:bg-slate-900">
                                            <option value="">{{ __('Select Slot...') }}</option>
                                            <template x-for="slot in selectedMachine.slots" :key="slot.id">
                                                <option :value="slot.slot_no" x-text="'Slot ' + slot.slot_no + ' (' + (slot.product ? slot.product.name : 'Unknown') + ')'"></option>
                                            </template>
                                        </select>
                                    </template>
                                    <template x-if="!selectedMachine.slots || selectedMachine.slots.length == 0">
                                        <div class="p-4 rounded-xl bg-rose-50 text-rose-500 text-[10px] font-black uppercase text-center border border-rose-100">
                                            {{ __('No active cargo lanes found') }}
                                        </div>
                                    </template>
                                </div>
                                <button @click="sendCommand('dispense', { slot_no: selectedSlot })" 
                                        :disabled="submitting || !selectedSlot" 
                                        class="btn-luxury-ghost w-full py-4 mt-2 border-violet-500/30 text-violet-600 dark:text-violet-400 hover:bg-violet-500 hover:text-white transition-all shadow-sm">
                                    {{ __('Trigger Dispense') }}
                                </button>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Right: Command History (Sidebar) -->
                <div class="space-y-6">
                    <h3 class="text-lg font-black text-slate-800 dark:text-white uppercase tracking-wider flex items-center gap-3">
                        <span class="w-2 h-6 bg-slate-300 dark:bg-slate-700 rounded-full"></span>
                        {{ __('Recent Commands') }}
                    </h3>

                    <div class="space-y-4 max-h-[1000px] overflow-y-auto pr-2 custom-scrollbar">
                        <template x-for="cmd in commands" :key="cmd.id">
                            <div class="luxury-card p-5 rounded-[2rem] border border-slate-100 dark:border-slate-800 transition-all hover:bg-slate-50 dark:hover:bg-slate-900/40 relative group">
                                <div class="flex items-start justify-between mb-3">
                                    <span class="text-xs font-black text-slate-800 dark:text-white" x-text="getCommandName(cmd.command_type)"></span>
                                    <span :class="getCommandBadgeClass(cmd.status)" class="px-2.5 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wider border" x-text="cmd.status"></span>
                                </div>
                                <div class="text-[9px] font-bold text-slate-400 flex items-center gap-2 mb-2">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                    <span x-text="new Date(cmd.created_at).toLocaleString()"></span>
                                </div>
                                <template x-if="cmd.payload && Object.keys(cmd.payload).length > 0">
                                    <div class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-[10px] font-mono text-slate-500 dark:text-slate-400 break-all">
                                        <span x-text="JSON.stringify(cmd.payload)"></span>
                                    </div>
                                </template>
                                <template x-if="cmd.note">
                                    <div class="mt-2 text-[10px] font-bold text-slate-400 italic" x-text="'\"' + cmd.note + '\"'"></div>
                                </template>
                            </div>
                        </template>
                        
                        <template x-if="commands.length === 0">
                            <div class="py-20 text-center flex flex-col items-center opacity-30">
                                <svg class="w-12 h-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                                <div class="text-[10px] font-black uppercase tracking-widest">{{ __('No command history') }}</div>
                            </div>
                        </template>
                    </div>
                </div>

            </div>
        </div>
    </template>
</div>

<style>
/* Custom Scrollbar for Luxury UI */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e133; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e166; }

/* Hide default number spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: none;
}
</style>
@endsection