<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <div class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <!-- Header Section -->
        <div class="mb-8 animate-fade-in">
            <h1 class="text-4xl font-bold text-gray-900 font-display">Welcome in, <?php echo e(Auth::user()->name); ?></h1>
            
            <!-- Top Stats Row -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mt-8">
                <!-- Interviews / Total Members -->
                <div class="bg-gray-900 rounded-2xl p-5 text-white shadow-lg transform hover:scale-105 transition-transform duration-300">
                    <div class="text-sm text-gray-400 mb-1">Total Members</div>
                    <div class="flex items-end justify-between">
                        <div class="text-2xl font-bold"><?php echo e($totalMembers ?? 0); ?></div>
                        <div class="h-1 w-16 bg-gray-700 rounded-full overflow-hidden">
                            <div class="h-full bg-white w-3/4"></div>
                        </div>
                    </div>
                    <div class="mt-2 text-xs text-gray-400">15% increase</div>
                </div>

                <!-- Hired / Total Contributions -->
                <div class="bg-crextio-accent rounded-2xl p-5 text-gray-900 shadow-lg transform hover:scale-105 transition-transform duration-300">
                    <div class="text-sm text-gray-800 font-medium mb-1">Total Contributions</div>
                    <div class="flex items-end justify-between">
                        <div class="text-xl font-bold truncate">TZS <?php echo e(number_format($totalContributions ?? 0)); ?></div>
                    </div>
                    <div class="mt-2 h-1 w-full bg-yellow-600/20 rounded-full overflow-hidden">
                        <div class="h-full bg-gray-900 w-1/2"></div>
                    </div>
                </div>

                <!-- Project Time / Recent Transactions -->
                <div class="bg-white rounded-2xl p-5 shadow-soft border border-gray-100 transform hover:scale-105 transition-transform duration-300">
                    <div class="text-sm text-gray-500 mb-1">Recent Transactions</div>
                    <div class="flex items-end justify-between">
                        <div class="text-2xl font-bold text-gray-900"><?php echo e($recentTransactions ? $recentTransactions->count() : 0); ?></div>
                        <div class="text-xs text-green-500 font-medium">+12%</div>
                    </div>
                    <div class="mt-2 h-1 w-full bg-gray-100 rounded-full overflow-hidden">
                        <div class="h-full bg-gray-300 w-2/3" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, #fff 2px, #fff 4px);"></div>
                    </div>
                </div>

                <!-- Output / Monthly Contributions -->
                <div class="bg-white rounded-2xl p-5 shadow-soft border border-gray-100 transform hover:scale-105 transition-transform duration-300">
                    <div class="text-sm text-gray-500 mb-1">This Month</div>
                    <div class="flex items-end justify-between">
                        <div class="text-xl font-bold text-gray-900 truncate">TZS <?php echo e(number_format(($monthlyContributionsFull[date('n')] ?? 0) ?? 0)); ?></div>
                        <div class="text-xs text-gray-400">10%</div>
                    </div>
                    <div class="mt-2 h-8 w-full border border-gray-200 rounded-full flex items-center px-1">
                         <div class="h-6 w-6 bg-gray-900 rounded-full"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            
            <!-- Left Column (Profile & Accordion) -->
            <div class="lg:col-span-3 space-y-6 animate-slide-up" style="animation-delay: 0.1s;">
                <!-- Profile Card -->
                <div class="bg-gradient-to-br from-gray-200 to-gray-300 rounded-3xl p-6 relative overflow-hidden shadow-soft h-80 group">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile" class="w-full h-full object-cover absolute inset-0 opacity-80 group-hover:scale-110 transition-transform duration-700">
                    <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/60 to-transparent text-white">
                        <h3 class="text-xl font-bold"><?php echo e(Auth::user()->name); ?></h3>
                        <p class="text-sm opacity-90"><?php echo e(Auth::user()->role); ?></p>
                        <div class="mt-3 inline-block bg-white/20 backdrop-blur-md rounded-full px-4 py-1 text-sm border border-white/30">
                            $1,200
                        </div>
                    </div>
                </div>

                <!-- Accordion Menu -->
                <div class="bg-crextio-bg space-y-2">
                    <div class="bg-white rounded-xl p-4 shadow-sm flex justify-between items-center cursor-pointer hover:bg-gray-50 transition">
                        <span class="font-medium text-gray-700">Pension contributions</span>
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </div>
                    <div class="bg-white rounded-xl p-4 shadow-sm cursor-pointer hover:bg-gray-50 transition">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-medium text-gray-700">Devices</span>
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
                        </div>
                        <div class="flex items-center p-2 bg-gray-50 rounded-lg">
                            <div class="w-10 h-8 bg-gray-800 rounded flex items-center justify-center text-white text-xs mr-3">Mac</div>
                            <div>
                                <div class="text-sm font-bold text-gray-900">MacBook Air</div>
                                <div class="text-xs text-gray-500">Version M1</div>
                            </div>
                            <button class="ml-auto text-gray-400 hover:text-gray-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
                            </button>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-4 shadow-sm flex justify-between items-center cursor-pointer hover:bg-gray-50 transition">
                        <span class="font-medium text-gray-700">Compensation Summary</span>
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </div>
                    <div class="bg-white rounded-xl p-4 shadow-sm flex justify-between items-center cursor-pointer hover:bg-gray-50 transition">
                        <span class="font-medium text-gray-700">Employee Benefits</span>
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </div>
                </div>
            </div>

            <!-- Middle Column (Charts) -->
            <div class="lg:col-span-6 space-y-6 animate-slide-up" style="animation-delay: 0.2s;">
                <!-- Progress & Time Tracker Row -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Progress Chart -->
                    <div class="bg-white rounded-3xl p-6 shadow-soft relative overflow-hidden">
                        <div class="flex justify-between items-start mb-6">
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Progress</h3>
                                <div class="text-3xl font-bold text-gray-900 mt-1">6.1 h</div>
                                <div class="text-xs text-gray-500">Work Time this week</div>
                            </div>
                            <button class="p-2 rounded-full bg-gray-50 hover:bg-gray-100 transition">
                                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
                            </button>
                        </div>
                        <!-- Bar Chart Placeholder -->
                        <div class="flex items-end justify-between h-32 space-x-2">
                            <div class="w-2 bg-gray-100 rounded-full h-1/3"></div>
                            <div class="w-2 bg-gray-900 rounded-full h-2/3"></div>
                            <div class="w-2 bg-gray-100 rounded-full h-1/2"></div>
                            <div class="w-2 bg-gray-900 rounded-full h-3/4"></div>
                            <div class="w-2 bg-crextio-accent rounded-full h-full relative group">
                                <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-crextio-accent text-xs font-bold px-2 py-1 rounded shadow-sm opacity-0 group-hover:opacity-100 transition">5h 23m</div>
                            </div>
                            <div class="w-2 bg-gray-900 rounded-full h-2/3"></div>
                            <div class="w-2 bg-gray-100 rounded-full h-1/4"></div>
                        </div>
                        <div class="flex justify-between text-xs text-gray-400 mt-4 font-medium">
                            <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span>
                        </div>
                    </div>

                    <!-- Time Tracker -->
                    <div class="bg-white rounded-3xl p-6 shadow-soft relative">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-lg font-bold text-gray-900">Time tracker</h3>
                            <button class="p-2 rounded-full bg-gray-50 hover:bg-gray-100 transition">
                                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
                            </button>
                        </div>
                        <div class="flex justify-center my-4 relative">
                            <!-- Circular Progress Placeholder -->
                            <div class="w-32 h-32 rounded-full border-8 border-gray-100 flex items-center justify-center relative">
                                <svg class="absolute inset-0 w-full h-full transform -rotate-90">
                                    <circle cx="64" cy="64" r="56" stroke="currentColor" stroke-width="8" fill="transparent" class="text-crextio-accent" stroke-dasharray="351" stroke-dashoffset="100" stroke-linecap="round" />
                                </svg>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-gray-900">02:35</div>
                                    <div class="text-xs text-gray-500">Work Time</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center mt-4">
                            <div class="flex space-x-2">
                                <button class="p-2 rounded-full bg-white border border-gray-200 hover:bg-gray-50 shadow-sm">
                                    <svg class="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                                </button>
                                <button class="p-2 rounded-full bg-white border border-gray-200 hover:bg-gray-50 shadow-sm">
                                    <svg class="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                                </button>
                            </div>
                            <button class="p-3 rounded-full bg-gray-900 text-white shadow-lg hover:bg-gray-800 transition">
                                <svg class="w-5 h-5" 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"></path></svg>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Calendar / Schedule -->
                <div class="bg-white rounded-3xl p-6 shadow-soft">
                    <div class="flex justify-between items-center mb-6">
                        <button class="text-sm font-medium text-gray-500 hover:text-gray-900">August</button>
                        <h3 class="text-lg font-bold text-gray-900">September 2024</h3>
                        <button class="px-3 py-1 rounded-full bg-white border border-gray-200 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">October</button>
                    </div>
                    
                    <!-- Calendar Grid Placeholder -->
                    <div class="grid grid-cols-5 gap-4 text-center mb-4">
                        <div class="text-xs text-gray-400">Mon</div>
                        <div class="text-xs text-gray-400">Tue</div>
                        <div class="text-xs text-gray-400">Wed</div>
                        <div class="text-xs text-gray-400">Thu</div>
                        <div class="text-xs text-gray-400">Fri</div>
                        
                        <div class="text-sm text-gray-500 py-2">22</div>
                        <div class="text-sm text-gray-500 py-2">23</div>
                        <div class="text-sm font-bold text-gray-900 py-2 bg-gray-50 rounded-lg">24</div>
                        <div class="text-sm text-gray-500 py-2">25</div>
                        <div class="text-sm text-gray-500 py-2">26</div>
                    </div>

                    <!-- Events -->
                    <div class="space-y-3 relative">
                        <div class="absolute left-1/2 top-0 bottom-0 w-px bg-gray-100 border-l border-dashed border-gray-300"></div>
                        
                        <div class="flex items-center relative">
                            <div class="w-1/2 pr-4 text-right">
                                <div class="text-xs text-gray-500">8:00 am</div>
                            </div>
                            <div class="w-1/2 pl-4"></div>
                        </div>

                        <div class="flex items-center relative">
                            <div class="w-1/2 pr-4 text-right">
                                <div class="text-xs text-gray-500">9:00 am</div>
                            </div>
                            <div class="w-1/2 pl-4">
                                <div class="bg-gray-900 text-white p-3 rounded-xl shadow-lg text-left">
                                    <div class="text-xs font-bold">Weekly Team Sync</div>
                                    <div class="text-[10px] text-gray-400">Discuss progress on projects</div>
                                    <div class="flex -space-x-2 mt-2">
                                        <img class="w-6 h-6 rounded-full border-2 border-gray-900" src="https://ui-avatars.com/api/?name=John+Doe&background=random" alt="">
                                        <img class="w-6 h-6 rounded-full border-2 border-gray-900" src="https://ui-avatars.com/api/?name=Jane+Doe&background=random" alt="">
                                        <img class="w-6 h-6 rounded-full border-2 border-gray-900" src="https://ui-avatars.com/api/?name=Bob+Smith&background=random" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center relative">
                            <div class="w-1/2 pr-4 text-right">
                                <div class="bg-white border border-gray-100 p-3 rounded-xl shadow-sm text-right">
                                    <div class="text-xs font-bold text-gray-900">Onboarding Session</div>
                                    <div class="text-[10px] text-gray-500">Introduction for new hires</div>
                                    <div class="flex justify-end -space-x-2 mt-2">
                                        <img class="w-6 h-6 rounded-full border-2 border-white" src="https://ui-avatars.com/api/?name=Alice+W&background=random" alt="">
                                        <img class="w-6 h-6 rounded-full border-2 border-white" src="https://ui-avatars.com/api/?name=Tom+H&background=random" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="w-1/2 pl-4">
                                <div class="text-xs text-gray-500">10:00 am</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column (Stats & Tasks) -->
            <div class="lg:col-span-3 space-y-6 animate-slide-up" style="animation-delay: 0.3s;">
                <!-- Top Right Stats -->
                <div class="flex justify-between text-center">
                    <div>
                        <div class="text-2xl font-display font-light text-gray-900">78</div>
                        <div class="text-xs text-gray-500">Employe</div>
                    </div>
                    <div>
                        <div class="text-2xl font-display font-light text-gray-900">56</div>
                        <div class="text-xs text-gray-500">Hirings</div>
                    </div>
                    <div>
                        <div class="text-2xl font-display font-light text-gray-900">203</div>
                        <div class="text-xs text-gray-500">Projects</div>
                    </div>
                </div>

                <!-- Onboarding Card -->
                <div class="bg-white rounded-3xl p-6 shadow-soft">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-bold text-gray-900">Onboarding</h3>
                        <div class="text-2xl font-light text-gray-900">18%</div>
                    </div>
                    <div class="flex space-x-2 mb-6">
                        <div class="h-12 flex-1 bg-crextio-accent rounded-xl flex items-center justify-center text-xs font-bold">Task</div>
                        <div class="h-12 flex-1 bg-gray-900 rounded-xl"></div>
                        <div class="h-12 flex-1 bg-gray-400 rounded-xl"></div>
                    </div>
                </div>

                <!-- Tasks List -->
                <div class="bg-gray-900 rounded-3xl p-6 text-white shadow-lg h-auto">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-medium">Onboarding Task</h3>
                        <span class="text-2xl font-light text-gray-400">2/8</span>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex items-center group cursor-pointer">
                            <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3 group-hover:bg-gray-700 transition">
                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                            </div>
                            <div class="flex-1">
                                <div class="text-sm font-medium text-gray-200">Interview</div>
                                <div class="text-xs text-gray-500">Sep 13, 08:30</div>
                            </div>
                            <div class="w-5 h-5 rounded-full bg-crextio-accent flex items-center justify-center">
                                <svg class="w-3 h-3 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                            </div>
                        </div>

                        <div class="flex items-center group cursor-pointer">
                            <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3 group-hover:bg-gray-700 transition">
                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            </div>
                            <div class="flex-1">
                                <div class="text-sm font-medium text-gray-200">Team Meeting</div>
                                <div class="text-xs text-gray-500">Sep 13, 10:30</div>
                            </div>
                            <div class="w-5 h-5 rounded-full bg-crextio-accent flex items-center justify-center">
                                <svg class="w-3 h-3 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                            </div>
                        </div>

                        <div class="flex items-center group cursor-pointer opacity-50">
                            <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3">
                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                            </div>
                            <div class="flex-1">
                                <div class="text-sm font-medium text-gray-200">Project Update</div>
                                <div class="text-xs text-gray-500">Sep 13, 13:00</div>
                            </div>
                            <div class="w-5 h-5 rounded-full border border-gray-600"></div>
                        </div>
                        
                        <div class="flex items-center group cursor-pointer opacity-50">
                            <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3">
                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                            </div>
                            <div class="flex-1">
                                <div class="text-sm font-medium text-gray-200">Discuss Q3 Goals</div>
                                <div class="text-xs text-gray-500">Sep 13, 14:45</div>
                            </div>
                            <div class="w-5 h-5 rounded-full border border-gray-600"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH /var/www/html/Arise/resources/views/dashboard.blade.php ENDPATH**/ ?>