<?php
$page_title = 'Dashboard Overview';
require_once __DIR__ . '/header.php';

// Mock Data
$verification_progress = 88;
$present = 142;
$absent = 5;
$on_leave = 12;
$pending_verif = 24;
$new_joiners = 8;
$open_tickets = 3;
?>

<!-- KPI Cards -->
<div class="grid-4" style="margin-bottom:24px;">
    <div class="card" style="margin-bottom:0; padding:20px; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">PRESENT TODAY</div>
        <div style="font-size:1.6rem; font-weight:700; color:#10b981;"><?= $present ?> <span style="font-size:0.85rem; color:#94a3b8; font-weight:500;">/ 159</span></div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-users"></i> 89% Attendance</div>
    </div>
    <div class="card" style="margin-bottom:0; padding:20px; border-top:4px solid #ef4444;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">ABSENT / ON LEAVE</div>
        <div style="font-size:1.6rem; font-weight:700; color:#ef4444;"><?= $absent ?> <span style="font-size:1rem; color:#f59e0b;">/ <?= $on_leave ?></span></div>
        <div style="color:#64748b; font-size:0.8rem; margin-top:5px;"><i class="fas fa-calendar-times"></i> Today's absences</div>
    </div>
    <div class="card" style="margin-bottom:0; padding:20px; border-top:4px solid #3b82f6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">PENDING VERIFICATION</div>
        <div style="font-size:1.6rem; font-weight:700; color:#3b82f6;"><?= $pending_verif ?></div>
        <div style="color:#3b82f6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-user-clock"></i> Needs HR Review</div>
    </div>
    <div class="card" style="margin-bottom:0; padding:20px; border-top:4px solid #8b5cf6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">NEW JOINERS & TICKETS</div>
        <div style="font-size:1.6rem; font-weight:700; color:#8b5cf6;"><?= $new_joiners ?> <span style="font-size:1rem; color:#0f172a;">/ <?= $open_tickets ?></span></div>
        <div style="color:#8b5cf6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-headset"></i> Onboarding / Support</div>
    </div>
</div>

<div style="display:grid; grid-template-columns: 2fr 1fr; gap:24px; margin-bottom:24px;">
    
    <!-- Left Column -->
    <div style="display:flex; flex-direction:column; gap:24px;">
        
        <!-- Personal Card -->
        <div class="card" style="margin-bottom:0; padding:0; overflow:hidden; border:none; background:linear-gradient(135deg, #0a1f4e, #1e3a7a); color:#fff;">
            <div style="display:flex; padding:30px;">
                <div style="flex:1;">
                    <h2 style="margin:0 0 5px; font-family:'Outfit',sans-serif; font-size:1.8rem;"><?= h($emp['name']) ?></h2>
                    <div style="font-size:1rem; color:#94a3b8; margin-bottom:20px;"><?= h($emp['designation'] ?? $dept) ?></div>
                    
                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:15px; font-size:0.9rem;">
                        <div><span style="color:#cbd5e1;">Employee ID:</span> <br><strong><?= h($_SESSION['emp_code']) ?></strong></div>
                        <div><span style="color:#cbd5e1;">Department:</span> <br><strong><?= h($dept) ?></strong></div>
                        <div><span style="color:#cbd5e1;">Shift:</span> <br><strong>General (9:00 AM - 6:00 PM)</strong></div>
                        <div><span style="color:#cbd5e1;">Joining Date:</span> <br><strong>01 Apr 2024</strong></div>
                    </div>
                    
                    <div style="margin-top:25px; max-width:300px;">
                        <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:5px;">
                            <span>Document Verification</span>
                            <span style="font-weight:bold; color:#10b981;"><?= $verification_progress ?>% Complete</span>
                        </div>
                        <div style="background:rgba(255,255,255,0.15); height:8px; border-radius:4px; overflow:hidden;">
                            <div style="width:<?= $verification_progress ?>%; height:100%; background:linear-gradient(90deg,#10b981,#34d399); border-radius:4px;"></div>
                        </div>
                    </div>
                </div>
                <div style="width:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,0.1); border-radius:12px; padding:15px;">
                    <i class="fas fa-qrcode" style="font-size:4rem; margin-bottom:10px;"></i>
                    <span style="font-size:0.75rem; text-align:center;">Scan for<br>E-ID Card</span>
                </div>
            </div>
        </div>

        <!-- Task Board Preview -->
        <div class="card" style="margin-bottom:0;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
                <h3 style="margin:0; font-size:1.15rem; color:#0f172a;"><i class="fas fa-tasks" style="color:#3b82f6; margin-right:8px;"></i>My Tasks</h3>
                <a href="tasks.php" style="font-size:0.85rem; color:#2563eb; text-decoration:none;">View All</a>
            </div>
            <?php
            $tasks = [
                ['Submit Weekly Production Report', 'Today, 5:00 PM', 'High', 80, '#ef4444'],
                ['Review Quality Audit Guidelines', 'Tomorrow', 'Medium', 30, '#f59e0b'],
                ['Complete Mandatory Safety Training', 'Fri, 28 Apr', 'Low', 0, '#10b981'],
            ];
            foreach ($tasks as $t): ?>
            <div style="padding:12px 0; border-bottom:1px solid #f1f5f9;">
                <div style="display:flex; justify-content:space-between; margin-bottom:8px;">
                    <div style="font-weight:600; font-size:0.9rem; color:#0f172a;"><?= $t[0] ?></div>
                    <span style="font-size:0.75rem; background:<?= $t[4] ?>15; color:<?= $t[4] ?>; padding:2px 8px; border-radius:4px; font-weight:600;"><?= $t[2] ?></span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center;">
                    <div style="font-size:0.8rem; color:#64748b;"><i class="far fa-clock"></i> Due: <?= $t[1] ?></div>
                    <div style="display:flex; align-items:center; gap:8px; width:100px;">
                        <div style="flex:1; background:#e2e8f0; height:6px; border-radius:3px; overflow:hidden;">
                            <div style="width:<?= $t[3] ?>%; height:100%; background:#2563eb; border-radius:3px;"></div>
                        </div>
                        <span style="font-size:0.7rem; font-weight:bold;"><?= $t[3] ?>%</span>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <div class="grid-2">
            <!-- Attendance Panel -->
            <div class="card" style="margin-bottom:0;">
                <h3 style="margin:0 0 15px; font-size:1.1rem; color:#0f172a;"><i class="fas fa-clock" style="color:#f59e0b; margin-right:8px;"></i>Attendance</h3>
                <div style="text-align:center; padding:15px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0; margin-bottom:15px;">
                    <div style="font-size:1.8rem; font-weight:700; color:#0f172a;">09:05 AM</div>
                    <div style="font-size:0.85rem; color:#10b981; font-weight:600;">Checked In</div>
                    <div style="font-size:0.75rem; color:#64748b; margin-top:5px;">Shift ends at 06:00 PM</div>
                </div>
                <div style="display:flex; justify-content:space-between; font-size:0.85rem; padding:8px 0; border-bottom:1px solid #f1f5f9;">
                    <span style="color:#64748b;">Late Marks (This Month)</span><span style="font-weight:bold; color:#ef4444;">1</span>
                </div>
                <div style="display:flex; justify-content:space-between; font-size:0.85rem; padding:8px 0;">
                    <span style="color:#64748b;">Overtime Hours</span><span style="font-weight:bold; color:#10b981;">12.5 hrs</span>
                </div>
            </div>
            
            <!-- Leave Panel -->
            <div class="card" style="margin-bottom:0;">
                <h3 style="margin:0 0 15px; font-size:1.1rem; color:#0f172a;"><i class="fas fa-calendar-alt" style="color:#10b981; margin-right:8px;"></i>Leave Balances</h3>
                <div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f1f5f9;">
                    <div style="font-size:0.85rem; color:#64748b;">Casual Leave (CL)</div>
                    <div style="font-weight:bold; font-size:1rem;">4 <span style="font-size:0.75rem; color:#94a3b8; font-weight:normal;">/ 12</span></div>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f1f5f9;">
                    <div style="font-size:0.85rem; color:#64748b;">Sick Leave (SL)</div>
                    <div style="font-weight:bold; font-size:1rem;">5 <span style="font-size:0.75rem; color:#94a3b8; font-weight:normal;">/ 10</span></div>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0;">
                    <div style="font-size:0.85rem; color:#64748b;">Earned Leave (EL)</div>
                    <div style="font-weight:bold; font-size:1rem;">18 <span style="font-size:0.75rem; color:#94a3b8; font-weight:normal;">/ 24</span></div>
                </div>
                <button style="width:100%; padding:8px; background:#f8fafc; color:#2563eb; border:1px solid #bfdbfe; border-radius:6px; font-size:0.85rem; font-weight:600; cursor:pointer; margin-top:10px;">Apply Leave</button>
            </div>
        </div>
    </div>

    <!-- Right Column -->
    <div style="display:flex; flex-direction:column; gap:24px;">
        
        <!-- Quick Actions -->
        <div class="card" style="margin-bottom:0;">
            <h3 style="margin:0 0 15px; font-size:1.1rem; color:#0f172a;">Quick Actions</h3>
            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px;">
                <button style="padding:15px 10px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; border-radius:8px; cursor:pointer; transition:all 0.2s;"><i class="fas fa-sign-in-alt" style="display:block; font-size:1.2rem; margin-bottom:5px;"></i><span style="font-size:0.8rem; font-weight:600;">Check In</span></button>
                <button style="padding:15px 10px; background:#fef2f2; color:#991b1b; border:1px solid #fecaca; border-radius:8px; cursor:pointer; transition:all 0.2s;"><i class="fas fa-sign-out-alt" style="display:block; font-size:1.2rem; margin-bottom:5px;"></i><span style="font-size:0.8rem; font-weight:600;">Check Out</span></button>
                <a href="documents.php" style="text-decoration:none; text-align:center; padding:15px 10px; background:#f8fafc; color:#475569; border:1px solid #e2e8f0; border-radius:8px; transition:all 0.2s;"><i class="fas fa-file-upload" style="display:block; font-size:1.2rem; margin-bottom:5px;"></i><span style="font-size:0.8rem; font-weight:600;">Upload Docs</span></a>
                <button style="padding:15px 10px; background:#f8fafc; color:#475569; border:1px solid #e2e8f0; border-radius:8px; cursor:pointer; transition:all 0.2s;"><i class="fas fa-file-invoice-dollar" style="display:block; font-size:1.2rem; margin-bottom:5px;"></i><span style="font-size:0.8rem; font-weight:600;">Payslip</span></button>
                <button style="padding:15px 10px; background:#f8fafc; color:#475569; border:1px solid #e2e8f0; border-radius:8px; cursor:pointer; transition:all 0.2s; grid-column: span 2;"><i class="fas fa-life-ring" style="margin-right:8px;"></i><span style="font-size:0.85rem; font-weight:600;">Raise Support Ticket</span></button>
            </div>
        </div>

        <!-- Document Verification Status -->
        <div class="card" style="margin-bottom:0;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
                <h3 style="margin:0; font-size:1.1rem; color:#0f172a;"><i class="fas fa-folder-check" style="color:#8b5cf6; margin-right:8px;"></i>Documents</h3>
                <a href="documents.php" style="font-size:0.85rem; color:#2563eb; text-decoration:none;">View Vault</a>
            </div>
            <div style="display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f1f5f9;">
                <i class="fas fa-check-circle" style="color:#10b981;"></i>
                <span style="font-size:0.85rem; color:#475569; flex:1;">Verified Docs</span>
                <span style="font-weight:bold; font-size:0.9rem;">12</span>
            </div>
            <div style="display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f1f5f9;">
                <i class="fas fa-clock" style="color:#f59e0b;"></i>
                <span style="font-size:0.85rem; color:#475569; flex:1;">Pending Review</span>
                <span style="font-weight:bold; font-size:0.9rem;">2</span>
            </div>
            <div style="display:flex; align-items:center; gap:10px; padding:8px 0;">
                <i class="fas fa-exclamation-triangle" style="color:#ef4444;"></i>
                <span style="font-size:0.85rem; color:#475569; flex:1;">Action Required</span>
                <span style="font-weight:bold; font-size:0.9rem; color:#ef4444;">1</span>
            </div>
        </div>

        <!-- Latest Salary Panel -->
        <div class="card" style="margin-bottom:0; background:linear-gradient(135deg, #10b981, #059669); color:#fff;">
            <h3 style="margin:0 0 15px; font-size:1.1rem;"><i class="fas fa-money-check-alt" style="margin-right:8px;"></i>Latest Salary</h3>
            <div style="font-size:0.85rem; opacity:0.9; margin-bottom:5px;">Credited for March 2024</div>
            <div style="font-size:1.8rem; font-weight:700; margin-bottom:15px;">₹45,200 <span style="font-size:0.8rem; font-weight:normal; opacity:0.8;">Net Pay</span></div>
            <div style="display:flex; justify-content:space-between; font-size:0.8rem; padding-top:10px; border-top:1px solid rgba(255,255,255,0.2);">
                <span>PF/ESIC Deducted: ₹2,450</span>
                <a href="#" style="color:#fff; font-weight:600;"><i class="fas fa-download"></i> PDF</a>
            </div>
        </div>

    </div>
</div>

<?php require_once __DIR__ . '/footer.php'; ?>
