<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vitxpert Cloud HR System</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="<?php echo e(asset('css/custom.css')); ?>">

    <!-- Custom JS -->
    <script src="<?php echo e(asset('js/custom.js')); ?>" defer></script>
</head>

<body class="text-gray-800 h-screen flex flex-col">
    <?php echo $__env->make('admin.partials.header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <!-- Secondary Nav -->
    <nav class="bg-[#ff5722] text-white flex flex-wrap justify-between shadow-md z-10 relative">
        <div class="flex flex-wrap">
            <a href="<?php echo e(route('admin.dashboard')); ?>"
                class="<?php echo e(request()->routeIs('admin.dashboard') ? 'active-nav' : ''); ?> nav-link flex flex-col items-center px-6 py-2 transition">
                <i class="fa-solid fa-table-cells-large mb-1 text-xl"></i>
                <span class="text-xs font-semibold">Dashboard</span>
            </a>
            <div class="relative group">
                <a href="javascript:void(0)"
                    class="nav-link flex flex-col items-center px-6 py-2 transition h-full group-hover:bg-[#e64a19] cursor-pointer focus:bg-[#e64a19]">
                    <i class="fa-solid fa-desktop mb-1 text-xl"></i>
                    <span class="text-xs font-semibold">Device Setup</span>
                </a>

                <!-- Dropdown Menu -->
                <div
                    class="absolute left-0 mt-0 w-72 bg-white border border-gray-200 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                    <ul class="py-2 text-sm text-[#e64a19] font-semibold flex flex-col">
                        <li>
                            <a href="<?php echo e(route('machines.index')); ?>"
                                class="block px-6 py-3 hover:bg-orange-50 border-b border-gray-100">Add Edit Machine</a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('hardware_setup.selection')); ?>"
                                class="block px-6 py-3 hover:bg-orange-50 border-b border-gray-100">Hardware Setup</a>
                        </li>
                        <li>
                            <a href="#" class="block px-6 py-3 hover:bg-orange-50">Enroll User From Photo For Pro
                                Device</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="relative group">
                <a href="javascript:void(0)"
                    class="nav-link flex flex-col items-center px-6 py-2 transition h-full group-hover:bg-[#e64a19] cursor-pointer focus:bg-[#e64a19]">
                    <i class="fa-solid fa-file-lines mb-1 text-xl"></i>
                    <span class="text-xs font-semibold">File</span>
                </a>

                <!-- Dropdown Menu -->
                <div
                    class="absolute left-0 mt-0 w-48 bg-white border border-gray-200 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                    <ul class="py-2 text-[13px] text-[#cc4c1f] font-semibold flex flex-col">
                        <li>
                            <a href="<?php echo e(route('company.index')); ?>"
                                class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Company</a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('branch.index')); ?>"
                                class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Branch</a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('departments.index')); ?>"
                                class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Department</a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('designations.index')); ?>"
                                class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Designation</a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('policies.index')); ?>" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Office Time
                                Policy</a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('shifts.index')); ?>" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Shift
                                Details</a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('employees.index')); ?>"
                                class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Employee List</a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('leave-types.index')); ?>" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Define Leave</a>
                        </li>
                        <li>
                            <a href="<?php echo e(route('holidays.index')); ?>" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Define Holiday</a>
                        </li>
                        <li>
                            <a href="#" class="block px-5 py-2 hover:bg-orange-50">Parameters Setting</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="relative group">
                <a href="javascript:void(0)"
                    class="<?php echo e(request()->is('attendance*') ? 'active-nav' : ''); ?> nav-link flex flex-col items-center px-6 py-2 transition h-full group-hover:bg-[#e64a19] cursor-pointer focus:bg-[#e64a19]">
                    <i class="fa-solid fa-gear mb-1 text-xl"></i>
                    <span class="text-xs font-semibold">Transaction</span>
                </a>

                <!-- Dropdown Menu -->
                <div class="absolute left-0 mt-0 w-56 bg-white border border-gray-200 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                    <ul class="py-2 text-[13px] text-[#cc4c1f] font-semibold flex flex-col">
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Leave Opening Entry</a></li>
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Leave Applicaton</a></li>
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Leave Approval</a></li>
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Shift Change</a></li>
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Generate Shift</a></li>
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Shift Roaster</a></li>
                        <li><a href="<?php echo e(route('manual_punch.index')); ?>" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Manual Punch</a></li>
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Bulk Manual Punch</a></li>
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Approval GPS Punch</a></li>
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50 border-b border-gray-100">Approval Manual Punch</a></li>
                        <li><a href="#" class="block px-5 py-2 hover:bg-orange-50">Attendance Process</a></li>
                    </ul>
                </div>
            </div>
            <a href="#" class="nav-link flex flex-col items-center px-6 py-2 transition">
                <i class="fa-solid fa-download mb-1 text-xl"></i>
                <span class="text-xs font-semibold">Data Download</span>
            </a>
            <a href="#" class="nav-link flex flex-col items-center px-6 py-2 transition">
                <i class="fa-regular fa-calendar-days mb-1 text-xl"></i>
                <span class="text-xs font-semibold">Report</span>
            </a>
            <a href="#" class="nav-link flex flex-col items-center px-6 py-2 transition">
                <i class="fa-solid fa-money-bill mb-1 text-xl"></i>
                <span class="text-xs font-semibold">PayRoll</span>
            </a>
            <a href="#" class="nav-link flex flex-col items-center px-6 py-2 transition">
                <i class="fa-solid fa-lock mb-1 text-xl"></i>
                <span class="text-xs font-semibold">Acces Control</span>
            </a>
            <a href="#" class="nav-link flex flex-col items-center px-6 py-2 transition">
                <i class="fa-solid fa-user-gear mb-1 text-xl"></i>
                <span class="text-xs font-semibold">Admin</span>
            </a>
        </div>
        <a href="#"
            class="bg-[#e64a19] flex flex-col items-center justify-center px-8 py-2 hover:bg-[#d84315] transition shadow-inner w-full md:w-auto">
            <i class="fa-solid fa-user-plus mb-1 text-2xl"></i>
            <span class="text-xs font-bold">Visitor Dashboard</span>
        </a>
    </nav>

    <!-- Main Content -->
    <main class="flex-1 p-4 overflow-y-auto relative z-0">
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <!-- Custom OTP-Style Logout Modal -->
    <div id="logoutModal"
        class="fixed inset-0 z-[100] hidden flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm transition-opacity duration-300">
        <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-sm w-full mx-4 transform scale-95 transition-transform duration-300 relative"
            id="logoutModalContent">

            <div class="absolute -top-10 left-1/2 transform -translate-x-1/2">
                <div class="bg-[#ff5722] text-white rounded-full p-4 shadow-lg border-4 border-white">
                    <i class="fa-solid fa-shield-halved text-3xl"></i>
                </div>
            </div>

            <div class="mt-8 text-center">
                <h3 class="text-2xl font-bold text-gray-800 mb-2">Admin Logout</h3>
                <p class="text-sm text-gray-500 mb-6">Security Check: Please confirm your exit from the admin panel.</p>

                <div class="flex flex-col space-y-3">
                    <button onclick="submitLogout()"
                        class="w-full bg-[#ff5722] hover:bg-[#e64a19] text-white font-bold py-3 rounded-lg shadow-md transition duration-200 flex items-center justify-center">
                        <i class="fa-solid fa-lock mr-2"></i> Confirm Logout
                    </button>
                    <button onclick="closeLogoutModal()"
                        class="w-full bg-gray-100 hover:bg-gray-200 text-gray-600 font-bold py-3 rounded-lg transition duration-200">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openLogoutModal() {
            const modal = document.getElementById('logoutModal');
            const content = document.getElementById('logoutModalContent');
            modal.classList.remove('hidden');
            // Small delay to allow CSS transition to play
            setTimeout(() => {
                content.classList.remove('scale-95');
                content.classList.add('scale-100');
            }, 10);
        }

        function closeLogoutModal() {
            const modal = document.getElementById('logoutModal');
            const content = document.getElementById('logoutModalContent');
            content.classList.remove('scale-100');
            content.classList.add('scale-95');
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }

        function submitLogout() {
            document.getElementById('logout-form').submit();
        }
    </script>
</body>

</html><?php /**PATH C:\xampp\htdocs\realtime\resources\views/admin/layouts/app.blade.php ENDPATH**/ ?>