<?php $__env->startSection('content'); ?>
<style>
    .dashboard-card {
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        border: none;
        overflow: hidden;
    }

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .stat-card {
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        position: relative;
        overflow: hidden;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: pulse 3s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); opacity: 0.5; }
        50% { transform: scale(1.1); opacity: 0.8; }
    }

    .stat-card.success {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }

    .stat-card.warning {
        background: linear-gradient(135deg, #F2994A 0%, #F2C94C 100%);
    }

    .stat-card.danger {
        background: linear-gradient(135deg, #EB3349 0%, #F45C43 100%);
    }

    .stat-card.info {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .stat-icon {
        font-size: 48px;
        opacity: 0.3;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .stat-value {
        font-size: 36px;
        font-weight: 700;
        margin: 0;
        position: relative;
        z-index: 1;
    }

    .stat-label {
        font-size: 14px;
        opacity: 0.9;
        margin: 5px 0 0;
        position: relative;
        z-index: 1;
    }

    .chart-container {
        position: relative;
        height: 300px;
        width: 100%;
        padding: 10px;
        overflow: hidden;
    }

    .birthday-card {
        display: flex;
        align-items: center;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 10px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }

    .birthday-card:hover {
        background: #e9ecef;
        transform: translateX(5px);
    }

    .birthday-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 20px;
        margin-right: 15px;
    }

    .birthday-info h6 {
        margin: 0;
        font-weight: 600;
        color: #2d3748;
    }

    .birthday-info p {
        margin: 0;
        font-size: 12px;
        color: #718096;
    }

    .dashboard-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        border-radius: 15px;
        margin-bottom: 30px;
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
    }

    .dashboard-header h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 700;
    }

    .dashboard-header p {
        margin: 5px 0 0;
        opacity: 0.9;
    }

    .section-title {
        font-size: 20px;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 3px solid #667eea;
        display: inline-block;
    }

    .leave-badge {
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .leave-badge.pending {
        background: #fef3c7;
        color: #92400e;
    }

    .leave-badge.approved {
        background: #d1fae5;
        color: #065f46;
    }

    .leave-badge.rejected {
        background: #fee2e2;
        color: #991b1b;
    }
</style>

<div class="dashboard-header">
    <h2><i class="ti ti-layout-dashboard me-2"></i>HRM Dashboard</h2>
    <p>Welcome back! Here's what's happening today.</p>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
        <div class="dashboard-card stat-card">
            <div class="stat-icon">
                <i class="ti ti-users"></i>
            </div>
            <h3 class="stat-value"><?php echo e($totalEmployees); ?></h3>
            <p class="stat-label">Total Employees</p>
        </div>
    </div>

    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
        <div class="dashboard-card stat-card success">
            <div class="stat-icon">
                <i class="ti ti-user-check"></i>
            </div>
            <h3 class="stat-value"><?php echo e($todayPresent); ?></h3>
            <p class="stat-label">Present Today</p>
        </div>
    </div>

    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
        <div class="dashboard-card stat-card danger">
            <div class="stat-icon">
                <i class="ti ti-user-x"></i>
            </div>
            <h3 class="stat-value"><?php echo e($todayAbsent); ?></h3>
            <p class="stat-label">Absent Today</p>
        </div>
    </div>

    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
        <div class="dashboard-card stat-card warning">
            <div class="stat-icon">
                <i class="ti ti-calendar-x"></i>
            </div>
            <h3 class="stat-value"><?php echo e($todayLeaves); ?></h3>
            <p class="stat-label">On Leave Today</p>
        </div>
    </div>
</div>

<!-- Attendance Percentage & Charts -->
<div class="row mb-4">
    <!-- Attendance Percentage -->
    <div class="col-xl-4 col-lg-6 mb-4">
        <div class="dashboard-card">
            <div class="card-body">
                <h5 class="section-title">Today's Attendance</h5>
                <div class="chart-container" style="height: 220px;">
                    <canvas id="attendanceChart"></canvas>
                </div>
                <div class="text-center mt-2">
                    <h2 class="mb-0" style="color: #667eea; font-weight: 700;"><?php echo e($attendancePercentage); ?>%</h2>
                    <p class="text-muted">Attendance Rate</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Distribution -->
    <div class="col-xl-4 col-lg-6 mb-4">
        <div class="dashboard-card">
            <div class="card-body">
                <h5 class="section-title">Department Distribution</h5>
                <div class="chart-container">
                    <canvas id="departmentChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Attendance Trend -->
    <div class="col-xl-4 col-lg-12 mb-4">
        <div class="dashboard-card">
            <div class="card-body">
                <h5 class="section-title">Attendance Trend (Last 30 Days)</h5>
                <div class="chart-container">
                    <canvas id="trendChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Birthdays & Recent Leaves -->
<div class="row">
    <!-- Today's Birthdays -->
    <div class="col-lg-6 mb-4">
        <div class="dashboard-card">
            <div class="card-body">
                <h5 class="section-title"><i class="ti ti-cake me-2"></i>Today's Birthdays</h5>
                <?php if($todayBirthdays->count() > 0): ?>
                    <?php $__currentLoopData = $todayBirthdays; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $employee): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="birthday-card">
                            <div class="birthday-avatar">
                                <?php echo e(strtoupper(substr($employee->first_name, 0, 1))); ?><?php echo e(strtoupper(substr($employee->last_name, 0, 1))); ?>

                            </div>
                            <div class="birthday-info">
                                <h6><?php echo e($employee->first_name); ?> <?php echo e($employee->last_name); ?></h6>
                                <p><?php echo e($employee->designation->name ?? 'N/A'); ?> • <?php echo e($employee->department->name ?? 'N/A'); ?></p>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php else: ?>
                    <div class="text-center py-4 text-muted">
                        <i class="ti ti-mood-sad" style="font-size: 48px; opacity: 0.3;"></i>
                        <p class="mt-2">No birthdays today</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Recent Leave Applications -->
    <div class="col-lg-6 mb-4">
        <div class="dashboard-card">
            <div class="card-body">
                <h5 class="section-title"><i class="ti ti-calendar-event me-2"></i>Recent Leave Applications</h5>
                <?php if($recentLeaves->count() > 0): ?>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Leave Type</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__currentLoopData = $recentLeaves; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $leave): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <tr>
                                        <td>
                                            <strong><?php echo e($leave->employee->first_name ?? 'N/A'); ?> <?php echo e($leave->employee->last_name ?? ''); ?></strong>
                                        </td>
                                        <td><?php echo e($leave->leaveType->name ?? 'N/A'); ?></td>
                                        <td>
                                            <span class="leave-badge <?php echo e($leave->approval_status); ?>">
                                                <?php echo e(ucfirst($leave->approval_status)); ?>

                                            </span>
                                        </td>
                                        <td><?php echo e($leave->created_at->format('M d, Y')); ?></td>
                                    </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                    </div>
                <?php else: ?>
                    <div class="text-center py-4 text-muted">
                        <i class="ti ti-inbox" style="font-size: 48px; opacity: 0.3;"></i>
                        <p class="mt-2">No recent leave applications</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── Attendance Doughnut Chart ──────────────────────────────────────
    var presentCount = <?php echo e((int) $todayPresent); ?>;
    var absentCount  = <?php echo e((int) $todayAbsent); ?>;

    // Avoid empty doughnut (Chart.js freezes on all-zero data)
    var donutData = (presentCount === 0 && absentCount === 0)
        ? [1]
        : [presentCount, absentCount];
    var donutLabels = (presentCount === 0 && absentCount === 0)
        ? ['No Data']
        : ['Present', 'Absent'];
    var donutColors = (presentCount === 0 && absentCount === 0)
        ? ['rgba(200, 200, 200, 0.5)']
        : ['rgba(17, 153, 142, 0.8)', 'rgba(235, 51, 73, 0.8)'];

    new Chart(document.getElementById('attendanceChart'), {
        type: 'doughnut',
        data: {
            labels: donutLabels,
            datasets: [{ data: donutData, backgroundColor: donutColors, borderWidth: 0 }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: { duration: 600 },
            plugins: { legend: { display: false } },
            cutout: '70%'
        }
    });

    // ── Department Distribution Chart ──────────────────────────────────
    var deptLabels = <?php echo json_encode($departmentWiseCount->pluck('department')->values()); ?>;
    var deptCounts = <?php echo json_encode($departmentWiseCount->pluck('count')->values()); ?>;

    if (deptLabels.length > 0) {
        new Chart(document.getElementById('departmentChart'), {
            type: 'pie',
            data: {
                labels: deptLabels,
                datasets: [{
                    data: deptCounts,
                    backgroundColor: [
                        'rgba(102, 126, 234, 0.85)',
                        'rgba(118, 75, 162, 0.85)',
                        'rgba(79, 172, 254, 0.85)',
                        'rgba(242, 153, 74, 0.85)',
                        'rgba(56, 239, 125, 0.85)',
                        'rgba(242, 201, 76, 0.85)'
                    ],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: { duration: 600 },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { padding: 12, font: { size: 11 } }
                    }
                }
            }
        });
    }

    // ── Attendance Trend Line Chart ────────────────────────────────────
    var trendLabels = <?php echo json_encode($monthlyAttendance->pluck('date')->values()); ?>;
    var trendCounts = <?php echo json_encode($monthlyAttendance->pluck('count')->values()); ?>;

    new Chart(document.getElementById('trendChart'), {
        type: 'line',
        data: {
            labels: trendLabels,
            datasets: [{
                label: 'Present',
                data: trendCounts,
                borderColor: 'rgba(102, 126, 234, 1)',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 2,
                pointHoverRadius: 5
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: { duration: 600 },
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, ticks: { precision: 0 } },
                x: { ticks: { maxTicksLimit: 10, maxRotation: 45, minRotation: 0 } }
            }
        }
    });

});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/codeproh/demo.laraoffice.com/app/Modules/HR/Dashboard/Providers/../Views/index.blade.php ENDPATH**/ ?>