<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kasir - SI Apotek</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        secondary: '#047857',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @theme  {
            --color-primary: #10b981;
            --color-secondary: #047857;
        }
        [x-cloak] { display: none !important; }
        
        /* Dark Mode Overrides */
        .dark {
            background-color: #111827 !important; color: #f3f4f6 !important;
        }
        .dark .bg-white { background-color: #1f2937 !important; }
        .dark .bg-gray-50, .dark .bg-gray-100 { background-color: #111827 !important; }
        .dark .text-gray-800, .dark .text-gray-700, .dark .text-gray-600 { color: #f3f4f6 !important; }
        .dark .text-gray-500 { color: #9ca3af !important; }
        .dark .border, .dark .border-b, .dark .border-t, .dark .border-gray-200, .dark .border-gray-100, .dark .border-gray-300 { border-color: #374151 !important; }
        .dark input, .dark select, .dark textarea { background-color: #374151 !important; color: #f3f4f6 !important; border-color: #4b5563 !important; }
        .dark .shadow-sm, .dark .shadow-md, .dark .shadow-lg { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important; }
        .dark .divide-y > * + * { border-color: #374151 !important; }
        .dark table th { background-color: #374151 !important; color: #e5e7eb !important; border-color: #4b5563 !important; }
        .dark table td { border-color: #4b5563 !important; }
        .dark aside { background-color: #1f2937 !important; border-right: 1px solid #374151; }
        .dark header { background-color: #1f2937 !important; border-bottom: 1px solid #374151; }
        .dark canvas { filter: invert(0.8) hue-rotate(180deg); }
        .dark .bg-emerald-50, .dark .bg-emerald-100 { background-color: #064e3b !important; color: #34d399 !important; }
    </style>
</head>
<body class="bg-gray-100 font-sans antialiased text-gray-800 h-screen overflow-hidden flex flex-col transition-colors duration-200"
      x-data="{ 
          darkMode: localStorage.getItem('theme') === 'dark'
      }" 
      x-init="$watch('darkMode', val => localStorage.setItem('theme', val ? 'dark' : 'light'))"
      :class="{ 'dark': darkMode }">
    <!-- Navbar Khusus POS -->
    <header class="bg-emerald-700 text-white shadow-md z-10 flex-shrink-0">
        <div class="px-6 py-3 flex justify-between items-center">
            <div class="flex items-center gap-4">
                <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="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
                <div>
                    <h1 class="text-xl font-bold leading-tight flex items-center gap-2">
                        <?php if(isset($appSetting) && $appSetting->logo_path): ?>
                            <img src="<?php echo e(asset($appSetting->logo_path)); ?>" alt="Logo" class="h-6 object-contain bg-white rounded p-0.5">
                        <?php endif; ?>
                        POS <?php echo e($appSetting->app_name ?? 'ApotekKu'); ?>

                    </h1>
                    <p class="text-xs text-emerald-200"><?php echo e(date('d M Y')); ?></p>
                </div>
            </div>
            <div class="flex items-center gap-6">
                <!-- Link back to Dashboard -->
                <?php if(Auth::user()->role === 'admin' || Auth::user()->role === 'apoteker'): ?>
                <a href="<?php echo e(route('dashboard')); ?>" class="flex items-center gap-2 px-3 py-2 bg-emerald-800 hover:bg-emerald-900 rounded-lg text-sm font-bold shadow-sm transition-colors text-emerald-50 border border-emerald-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                    Dashboard Admin
                </a>
                <?php endif; ?>

                <div class="text-right">
                    <p class="text-sm font-semibold"><?php echo e(Auth::user()->name); ?></p>
                    <p class="text-xs text-emerald-200">Kasir</p>
                </div>
                
                <!-- Theme Toggler -->
                <button class="rounded-md focus:outline-none focus:shadow-outline-emerald text-emerald-100 hover:text-white" @click="darkMode = !darkMode" aria-label="Toggle color mode">
                    <template x-if="!darkMode">
                        <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                        </svg>
                    </template>
                    <template x-if="darkMode">
                        <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4.22 4.22a1 1 0 011.415 0l.708.708a1 1 0 01-1.414 1.414l-.708-.708a1 1 0 010-1.414zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM14.22 15.636a1 1 0 01-1.415 0l-.708-.708a1 1 0 011.414-1.414l.708.708a1 1 0 010 1.414zM10 18a1 1 0 01-1-1v-1a1 1 0 112 0v1a1 1 0 01-1 1zm-4.22-4.22a1 1 0 01-1.415 0l-.708-.708a1 1 0 011.414-1.414l.708.708a1 1 0 010 1.414zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm1.564-4.22a1 1 0 010-1.415l.708-.708a1 1 0 111.414 1.414l-.708.708a1 1 0 01-1.414 0zM10 14a4 4 0 100-8 4 4 0 000 8z" clip-rule="evenodd"></path>
                        </svg>
                    </template>
                </button>
                
                <?php if(isset($activeShift)): ?>
                <!-- Modal Tutup Shift -->
                <div x-data="{ openCloseShift: false }">
                    <button @click="openCloseShift = true" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-sm font-bold shadow-sm flex items-center gap-2 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                        Tutup Shift
                    </button>
                    
                    <div x-show="openCloseShift" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm" x-cloak>
                        <div @click.away="openCloseShift = false" class="bg-white text-gray-800 rounded-2xl p-6 w-[400px] text-left shadow-xl">
                            <h3 class="text-xl font-bold mb-4">Tutup Shift Kasir</h3>
                            <form action="<?php echo e(route('shift.close')); ?>" method="POST">
                                <?php echo csrf_field(); ?>
                                <div class="mb-6">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Hitung & Masukkan Saldo Fisik Laci (Rp)</label>
                                    <input type="number" name="actual_ending_cash" class="w-full px-4 py-3 text-lg font-bold text-center border-2 rounded-xl focus:ring-emerald-500 focus:border-emerald-500" placeholder="0" required autofocus>
                                    <p class="text-xs text-gray-500 mt-2 text-center">Ini akan mengakhiri sesi Anda dan mencetak laporan shift.</p>
                                </div>
                                <div class="flex justify-end gap-3">
                                    <button type="button" @click="openCloseShift = false" class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg">Batal</button>
                                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg">Tutup Shift</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <?php else: ?>
                <form method="POST" action="<?php echo e(route('logout')); ?>">
                    <?php echo csrf_field(); ?>
                    <button class="bg-emerald-800 hover:bg-emerald-900 px-4 py-2 rounded-lg text-sm font-bold shadow-sm flex items-center gap-2 transition">
                        Keluar
                    </button>
                </form>
                <?php endif; ?>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1 overflow-hidden h-full">
        <?php echo $__env->yieldContent('content'); ?>
    </main>
</body>
</html>
<?php /**PATH D:\PROJECT\xampp\htdocs\apoteks\resources\views/layouts/pos.blade.php ENDPATH**/ ?>