<?php $__env->startSection('content'); ?>
<!-- Stat Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-4 pl-2 pr-2">
    <!-- Card 1 -->
    <div class="relative bg-white pt-8 pb-3 px-4 shadow-sm border border-gray-200 rounded-sm">
        <div class="absolute -top-5 left-4 w-12 h-12 bg-[#4caf50] rounded-sm flex items-center justify-center shadow-md text-white text-2xl">
            <i class="fa-solid fa-users"></i>
        </div>
        <div class="text-right">
            <p class="text-[32px] font-normal text-gray-700 leading-none">1</p>
        </div>
        <div class="text-center mt-3 pb-2 border-b border-gray-200">
            <p class="text-gray-400 font-semibold text-lg">Total Employee</p>
        </div>
        <div class="pt-2 text-left">
            <a href="#" class="text-gray-400 text-[11px] font-bold hover:text-gray-600 tracking-wider"><i class="fa-solid fa-circle-plus mr-1"></i> View Details</a>
        </div>
    </div>
    
    <!-- Card 2 -->
    <div class="relative bg-white pt-8 pb-3 px-4 shadow-sm border border-gray-200 rounded-sm">
        <div class="absolute -top-5 left-4 w-12 h-12 bg-[#9e9e9e] rounded-sm flex items-center justify-center shadow-md text-white text-2xl">
            <i class="fa-solid fa-user"></i>
        </div>
        <div class="text-right">
            <p class="text-[32px] font-normal text-gray-700 leading-none">0</p>
        </div>
        <div class="text-center mt-3 pb-2 border-b border-gray-200">
            <p class="text-gray-400 font-semibold text-lg">Total Present Employees</p>
        </div>
        <div class="pt-2 text-left">
            <a href="#" class="text-gray-400 text-[11px] font-bold hover:text-gray-600 tracking-wider"><i class="fa-solid fa-circle-plus mr-1"></i> View Details</a>
        </div>
    </div>

    <!-- Card 3 -->
    <div class="relative bg-white pt-8 pb-3 px-4 shadow-sm border border-gray-200 rounded-sm">
        <div class="absolute -top-5 left-4 w-12 h-12 bg-[#f44336] rounded-sm flex items-center justify-center shadow-md text-white text-2xl">
            <i class="fa-solid fa-users"></i>
        </div>
        <div class="text-right">
            <p class="text-[32px] font-normal text-gray-700 leading-none">1</p>
        </div>
        <div class="text-center mt-3 pb-2 border-b border-gray-200">
            <p class="text-gray-400 font-semibold text-lg">Total Absent Employee</p>
        </div>
        <div class="pt-2 text-left">
            <a href="#" class="text-gray-400 text-[11px] font-bold hover:text-gray-600 tracking-wider"><i class="fa-solid fa-circle-plus mr-1"></i> View Details</a>
        </div>
    </div>
    
    <!-- Card 4 -->
    <div class="relative bg-white pt-8 pb-3 px-4 shadow-sm border border-gray-200 rounded-sm">
        <div class="absolute -top-5 left-4 w-12 h-12 bg-[#00bcd4] rounded-sm flex items-center justify-center shadow-md text-white text-2xl">
            <i class="fa-solid fa-user"></i>
        </div>
        <div class="text-right">
            <p class="text-[32px] font-normal text-gray-700 leading-none">0</p>
        </div>
        <div class="text-center mt-3 pb-2 border-b border-gray-200">
            <p class="text-gray-400 font-semibold text-lg">Total Late Employee</p>
        </div>
        <div class="pt-2 text-left">
            <a href="#" class="text-gray-400 text-[11px] font-bold hover:text-gray-600 tracking-wider"><i class="fa-solid fa-circle-plus mr-1"></i> View Details</a>
        </div>
    </div>
</div>

<!-- Charts Area -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8 pl-2 pr-2">
    <!-- Chart 1 -->
    <div>
        <div class="bg-[#00bcd4] text-white py-2 px-3 text-sm font-semibold flex items-center shadow-sm rounded-t-sm">
            <i class="fa-solid fa-chart-simple mr-2"></i> Department Attendance Chart
        </div>
        <div class="bg-white h-[200px] shadow-sm border border-gray-200 flex items-center justify-center p-6">
            <div class="w-full h-full bg-[#d3d3d3] shadow-md relative">
                <!-- 3D effect shadow on right edge like in image -->
                <div class="absolute top-0 right-0 h-full w-2 bg-gray-400 skew-y-[45deg] origin-top-right transform"></div>
            </div>
        </div>
    </div>
    <!-- Chart 2 -->
    <div>
        <div class="bg-[#f44336] text-white py-2 px-3 text-sm font-semibold flex items-center shadow-sm rounded-t-sm">
            <i class="fa-solid fa-chart-simple mr-2"></i> Department wise Absent Chart
        </div>
        <div class="bg-white h-[200px] shadow-sm border border-gray-200 flex flex-col items-center justify-center text-xs text-black">
            <span class="mb-4 text-[10px]">Department wise Absent Chart</span>
        </div>
    </div>
</div>

<!-- Tables Area -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6 pl-2 pr-2 mb-8">
    <!-- Table 1 -->
    <div>
        <div class="bg-[#ff9800] text-white py-2 px-3 text-sm font-semibold flex items-center shadow-sm rounded-t-sm">
            <i class="fa-solid fa-eye mr-2"></i> Today's Machine Connection Status.
        </div>
        <div class="bg-white shadow-sm border border-gray-200 overflow-x-auto">
            <table class="w-full text-center text-sm border-collapse">
                <thead>
                    <tr class="border-b-2 border-gray-200 font-bold text-gray-800 bg-white">
                        <th class="py-3 border-r border-gray-200 w-16">S.N.</th>
                        <th class="py-3 border-r border-gray-200">Machine-No</th>
                        <th class="py-3 border-r border-gray-200">Location</th>
                        <th class="py-3 text-transparent">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="h-16 text-gray-500 text-xs">
                        <td colspan="4" class="text-center font-bold text-gray-600 bg-gray-200">अगली वीडियो में हम देखेंगे कि इस...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- Table 2 -->
    <div>
        <div class="bg-[#4caf50] text-white py-2 px-3 text-sm font-semibold flex items-center shadow-sm rounded-t-sm">
            <i class="fa-solid fa-eye mr-2"></i> Last Machine Connection Status.
        </div>
        <div class="bg-white shadow-sm border border-gray-200 overflow-x-auto">
            <table class="w-full text-center text-[11px] font-bold border-collapse">
                <thead>
                    <tr class="border-b-2 border-gray-200 text-gray-800 bg-white">
                        <th class="py-3 border-r border-gray-200 px-2">Machine-No</th>
                        <th class="py-3 border-r border-gray-200 px-2">Machine Type</th>
                        <th class="py-3 border-r border-gray-200 px-2">Machine Serial No</th>
                        <th class="py-3 border-r border-gray-200 px-2">Branch Name</th>
                        <th class="py-3 px-2">Last-OnLine</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="h-16 text-gray-500 text-xs">
                        <td colspan="5"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\realtime\resources\views/admin/dashboard.blade.php ENDPATH**/ ?>