<div class="h-full flex flex-col relative">

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($showFaceModal): ?>
        <?php
            $emp = \App\Models\Employee::where('user_id', auth()->id())->first();
            $gMode = \App\Models\Setting::getVal('geofence_mode', 'radius');
            if ($emp && $emp->geofence_mode) {
                $scanLat = $emp->geofence_lat ?? \App\Models\Setting::getVal('office_latitude', '-6.175392');
                $scanLng = $emp->geofence_lng ?? \App\Models\Setting::getVal('office_longitude', '106.827153');
                $scanRadius = $emp->geofence_radius ?? 100;
                $scanPoly = $emp->geofence_polygon ?? '';
                $scanMode = str_contains($emp->geofence_mode, 'polygon') ? 'polygon' : 'radius';
            } else {
                $scanLat = \App\Models\Setting::getVal('office_latitude', '-6.175392');
                $scanLng = \App\Models\Setting::getVal('office_longitude', '106.827153');
                $scanRadius = \App\Models\Setting::getVal('max_radius', '100');
                $scanPoly = $gMode === 'polygon' ? \App\Models\Setting::getVal('geofence_polygon', '') : '';
                $scanMode = $gMode;
            }
        ?>
        <div class="fixed inset-0 z-50" x-data="attendanceScanner({ officeLat: <?php echo e($scanLat); ?>, officeLng: <?php echo e($scanLng); ?>, maxRadius: <?php echo e($scanRadius); ?>, verifyCode: '<?php echo e($verifyCode); ?>', polygonJson: '<?php echo e($scanPoly); ?>', geofenceMode: '<?php echo e($scanMode); ?>' })" x-init="initScanner()"
             @attendance-error.window="errorMsg = $event.detail.message; statusMsg = 'Verifikasi Gagal';"
             @attendance-success.window="stopCamera()">
            <div class="absolute inset-0 bg-black/80"></div>
            <div class="absolute inset-0 flex items-center justify-center p-4">
                <div class="bg-white rounded-3xl p-6 w-full max-w-sm slide-up">
                    <div class="text-center mb-4">
                        <h3 class="text-xl font-bold text-gray-800">Verifikasi & Lokasi</h3>
                        <p class="text-sm text-gray-500 mt-1">Pastikan wajah terlihat jelas dan GPS aktif</p>
                    </div>
                    
                    <template x-if="errorMsg">
                        <div class="bg-red-50 text-red-600 p-3 rounded-xl text-sm mb-4 text-center">
                            <span x-text="errorMsg"></span>
                        </div>
                    </template>
                    
                    <div class="relative w-48 h-48 mx-auto mb-4 bg-gray-100 rounded-2xl overflow-hidden shadow-inner">
                        <video x-ref="video" autoplay playsinline muted class="w-full h-full object-cover scale-x-[-1]"></video>
                        <canvas x-ref="canvas" class="hidden"></canvas>
                        
                        <!-- Scanner animation overlay -->
                        <div class="face-scanner absolute inset-0 rounded-2xl pointer-events-none opacity-30" x-show="!errorMsg && !stream"></div>
                        
                        <!-- GPS Accuracy badge -->
                        <template x-if="gpsAccuracyText">
                            <div class="absolute top-2 right-2 px-2 py-0.5 rounded-full text-[10px] font-bold"
                                 :class="accuracy <= 25 ? 'bg-green-500/80 text-white' : accuracy <= 100 ? 'bg-yellow-500/80 text-white' : 'bg-red-500/80 text-white'">
                                ± <span x-text="gpsAccuracyText"></span>
                            </div>
                        </template>
                    </div>
                    
                    <div class="text-center mb-6">
                        <p class="text-sm font-medium" :class="errorMsg ? 'text-red-500' : 'text-purple-600'" x-text="statusMsg"></p>
                        <template x-if="lat && lng">
                            <p class="text-xs text-gray-400 mt-1">Lat: <span x-text="lat.toFixed(5)"></span> | Lng: <span x-text="lng.toFixed(5)"></span></p>
                        </template>
                    </div>

                    <button @click="captureAndSubmit" x-bind:disabled="!stream || !gpsReady" class="w-full py-3 gradient-success text-white font-semibold rounded-xl mb-3 disabled:opacity-50 transition">
                        Ambil Foto & Verifikasi
                    </button>
                    <button wire:click="$set('showFaceModal', false)" @click="stopCamera" class="w-full py-3 bg-gray-100 text-gray-600 font-semibold rounded-xl transition hover:bg-gray-200">Batal</button>
                    

                </div>
            </div>
        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <header class="gradient-primary text-white p-4 pt-6">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center text-xl font-bold uppercase">
                    <?php echo e(substr($user_name, 0, 2)); ?>

                </div>
                <div>
                    <p class="text-xs opacity-70 mb-0.5"><?php echo e($company_name); ?></p>
                    <p class="font-bold text-lg leading-tight"><?php echo e($user_name); ?></p>
                </div>
            </div>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(auth()->user()->role === 'admin'): ?>
            <a href="/admin" class="p-2 bg-white/20 rounded-full hover:bg-white/30 transition flex items-center justify-center">
                <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
            </a>
            <?php else: ?>
            <form id="logout-form" action="/logout" method="POST" class="hidden">
                <?php echo csrf_field(); ?>
            </form>
            <button type="button" onclick="confirmLogout(() => document.getElementById('logout-form').submit())" class="p-2 bg-white/20 rounded-full hover:bg-white/30 transition">
                 <i data-lucide="log-out" class="w-5 h-5"></i>
            </button>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>
        <div class="bg-white/10 rounded-xl p-3 flex items-center justify-between">
            <div>
                <p class="text-sm opacity-80">Status Hari Ini</p>
                <p class="font-semibold" id="today-status"><?php echo e($today_status); ?></p>
            </div>
            <div class="text-right" 
                 x-data="{ 
                    serverTime: <?php echo e(now()->getTimestamp() * 1000); ?>,
                    browserTime: Date.now(),
                    get offset() { return this.serverTime - this.browserTime },
                    displayTime: '',
                    update() {
                        let now = new Date(Date.now() + this.offset);
                        this.displayTime = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\./g, ':');
                    }
                 }" 
                 x-init="update(); setInterval(() => update(), 1000)">
                <p class="text-sm opacity-80" id="current-date"><?php echo e(now()->translatedFormat('l, d M Y')); ?></p>
                <p class="font-semibold text-2xl" id="current-time" x-text="displayTime"><?php echo e(now()->format('H:i:s')); ?></p>
            </div>
        </div>
    </header>

    <main class="flex-1 overflow-auto p-4 pb-24">
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($activeTab == 'home'): ?>
        <div class="space-y-4">
            <div class="grid grid-cols-2 gap-3">
                <button wire:click="openCheckIn" <?php if($today_attendance && $today_attendance->check_in): ?> disabled <?php endif; ?> class="gradient-success text-white p-4 rounded-2xl card-shadow flex flex-col items-center gap-2 hover:scale-105 transition-transform disabled:opacity-50 disabled:hover:scale-100">
                    <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center"><i data-lucide="log-in" class="w-7 h-7"></i></div>
                    <span class="font-semibold">Absen Masuk</span>
                </button>
                <button wire:click="openCheckOut" <?php if(!$today_attendance || !$today_attendance->check_in || $today_attendance->check_out): ?> disabled <?php endif; ?> class="gradient-warning text-white p-4 rounded-2xl card-shadow flex flex-col items-center gap-2 hover:scale-105 transition-transform disabled:opacity-50 disabled:hover:scale-100">
                    <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center"><i data-lucide="log-out" class="w-7 h-7"></i></div>
                    <span class="font-semibold">Absen Pulang</span>
                </button>
            </div>

            <div class="bg-white rounded-2xl p-4 card-shadow">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-semibold text-gray-800">Jadwal Hari Ini</h3>
                    <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded-full"><?php echo e($shift_name); ?></span>
                </div>
                <div class="flex items-center gap-4">
                    <div class="flex-1 text-center p-3 bg-green-50 rounded-xl">
                        <p class="text-xs text-gray-500">Jam Masuk</p>
                        <p class="font-bold text-green-600 text-lg"><?php echo e($shift_start); ?></p>
                    </div>
                    <div class="w-8 h-0.5 bg-gray-200"></div>
                    <div class="flex-1 text-center p-3 bg-red-50 rounded-xl">
                        <p class="text-xs text-gray-500">Jam Pulang</p>
                        <p class="font-bold text-red-600 text-lg"><?php echo e($shift_end); ?></p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl p-4 card-shadow">
                <h3 class="font-semibold text-gray-800 mb-3">Ringkasan Bulan Ini</h3>
                <div class="grid grid-cols-4 gap-2">
                    <div class="text-center p-2">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-1"><span class="font-bold text-green-600"><?php echo e($hadir_count); ?></span></div>
                        <p class="text-xs text-gray-500">Hadir</p>
                    </div>
                    <div class="text-center p-2">
                        <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-1"><span class="font-bold text-purple-600"><?php echo e($cuti_count); ?></span></div>
                        <p class="text-xs text-gray-500">Cuti</p>
                    </div>
                    <div class="text-center p-2">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-1"><span class="font-bold text-blue-600"><?php echo e($izin_count); ?></span></div>
                        <p class="text-xs text-gray-500">Izin/Sakit</p>
                    </div>
                    <div class="text-center p-2">
                        <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-1"><span class="font-bold text-red-600"><?php echo e($absen_count); ?></span></div>
                        <p class="text-xs text-gray-500">Alpha</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-2xl p-4 card-shadow">
                <h3 class="font-semibold text-gray-800 mb-3">Aktivitas Terakhir</h3>
                <div class="space-y-3">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $recent_activities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $activity): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                        <div class="flex items-center gap-3 p-2 bg-gray-50 rounded-xl">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center"><i data-lucide="log-in" class="w-5 h-5 text-green-600"></i></div>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800"><?php echo e(\Carbon\Carbon::parse($activity->date)->translatedFormat('d M Y')); ?></p>
                                <p class="text-xs text-gray-500">Masuk: <?php echo e($activity->check_in ?? '-'); ?> | Pulang: <?php echo e($activity->check_out ?? '-'); ?></p>
                            </div>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($activity->status == 'present'): ?>
                                <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">Hadir</span>
                            <?php elseif($activity->status == 'late'): ?>
                                <span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full">Terlambat</span>
                            <?php elseif(in_array($activity->status, ['cuti', 'sakit', 'permit', 'pulang_cepat'])): ?>
                                <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded-full uppercase"><?php echo e(str_replace('_', ' ', $activity->status)); ?></span>
                            <?php else: ?>
                                <span class="text-xs bg-gray-100 text-gray-500 px-2 py-1 rounded-full uppercase"><?php echo e($activity->status); ?></span>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                        <p class="text-center text-sm text-gray-500 py-4">Belum ada aktivitas absensi.</p>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </div>
            </div>
        </div>

        <?php elseif($activeTab == 'history'): ?>
            <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('user.attendance-history', []);

$__keyOuter = $__key ?? null;

$__key = 'tab-history';
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-447840563-0', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>
        <?php elseif($activeTab == 'leave'): ?>
            <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('user.leave-request', []);

$__keyOuter = $__key ?? null;

$__key = 'tab-leave';
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-447840563-1', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>
        <?php elseif($activeTab == 'permit'): ?>
            <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('user.permit-request', []);

$__keyOuter = $__key ?? null;

$__key = 'tab-permit';
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-447840563-2', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>
        <?php elseif($activeTab == 'team'): ?>
            <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('user.team-approval', []);

$__keyOuter = $__key ?? null;

$__key = 'tab-team';
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-447840563-3', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>
        <?php elseif($activeTab == 'calendar'): ?>
            <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('user.calendar-view', []);

$__keyOuter = $__key ?? null;

$__key = 'tab-calendar';
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-447840563-4', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>
        <?php elseif($activeTab == 'profile'): ?>
            <div class="space-y-4 slide-up">
                <div class="bg-white rounded-2xl p-6 card-shadow text-center">
                    <div class="w-24 h-24 gradient-primary rounded-full flex items-center justify-center text-white text-3xl font-bold mx-auto mb-4 uppercase">
                        <?php echo e(substr($user_name, 0, 2)); ?>

                    </div>
                    <h2 class="text-xl font-bold text-gray-800"><?php echo e($user_name); ?></h2>
                    <p class="text-gray-500">Karyawan</p>
                    <p class="text-sm text-gray-400">Tim Umum</p>
                </div>
                <div class="bg-white rounded-2xl p-4 card-shadow space-y-3">
                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                        <i data-lucide="mail" class="w-5 h-5 text-purple-500"></i>
                        <div>
                            <p class="text-xs text-gray-500">Email</p>
                            <p class="font-medium text-gray-800"><?php echo e(auth()->user()->email); ?></p>
                        </div>
                    </div>
                    <!-- Add more dummy profile info -->
                </div>
                <!-- Optional Button -->
                <button type="button" onclick="confirmLogout(() => $wire.logout())" class="w-full py-3 bg-white text-red-600 font-semibold rounded-xl card-shadow flex items-center justify-center gap-2 transition active:scale-95"> 
                    <i data-lucide="log-out" class="w-5 h-5"></i> Logout
                </button>
            </div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </main>

    <nav class="fixed bottom-0 left-0 right-0 bg-white nav-shadow px-2 py-1 flex justify-between overflow-x-auto scrollbar-hide z-40 items-center">
        <button wire:click="$set('activeTab', 'home')" class="nav-btn flex-shrink-0 flex flex-col items-center p-2 min-w-[64px] pb-3 <?php echo e($activeTab == 'home' ? 'text-purple-600' : 'text-gray-400'); ?>"> 
            <i data-lucide="home" class="w-6 h-6"></i> <span class="text-[10px] mt-1 font-medium">Beranda</span> 
        </button> 
        <button wire:click="$set('activeTab', 'permit')" class="nav-btn flex-shrink-0 flex flex-col items-center p-2 min-w-[64px] pb-3 <?php echo e($activeTab == 'permit' ? 'text-purple-600' : 'text-gray-400'); ?>"> 
            <i data-lucide="file-plus" class="w-6 h-6"></i> <span class="text-[10px] mt-1 font-medium">Izin / Cuti</span> 
        </button> 
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($isManager): ?>
        <button wire:click="$set('activeTab', 'team')" class="nav-btn flex-shrink-0 flex flex-col items-center p-2 min-w-[64px] pb-3 <?php echo e($activeTab == 'team' ? 'text-purple-600' : 'text-gray-400'); ?>"> 
            <i data-lucide="users" class="w-6 h-6"></i> <span class="text-[10px] mt-1 font-medium">Tim</span> 
        </button> 
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        <button wire:click="$set('activeTab', 'calendar')" class="nav-btn flex-shrink-0 flex flex-col items-center p-2 min-w-[64px] pb-3 <?php echo e($activeTab == 'calendar' ? 'text-purple-600' : 'text-gray-400'); ?>"> 
            <i data-lucide="calendar-days" class="w-6 h-6"></i> <span class="text-[10px] mt-1 font-medium">Kalender</span> 
        </button>
        <button wire:click="$set('activeTab', 'history')" class="nav-btn flex-shrink-0 flex flex-col items-center p-2 min-w-[64px] pb-3 <?php echo e($activeTab == 'history' ? 'text-purple-600' : 'text-gray-400'); ?>"> 
            <i data-lucide="calendar" class="w-6 h-6"></i> <span class="text-[10px] mt-1 font-medium">Riwayat</span> 
        </button> 
        <button wire:click="$set('activeTab', 'profile')" class="nav-btn flex-shrink-0 flex flex-col items-center p-2 min-w-[64px] pb-3 <?php echo e($activeTab == 'profile' ? 'text-purple-600' : 'text-gray-400'); ?>"> 
            <i data-lucide="user" class="w-6 h-6"></i> <span class="text-[10px] mt-1 font-medium">Profil</span> 
        </button>
    </nav>
</div><?php /**PATH C:\laragon\www\absen-app\resources\views/livewire/user/dashboard.blade.php ENDPATH**/ ?>