@extends('layouts.app')

@section('title', 'System Features')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12 text-center">
            <h2 class="fw-bold text-primary">HRMS Pro Features</h2>
            <p class="text-muted">A comprehensive overview of the capabilities of your Human Resource Management System.</p>
        </div>
    </div>

    <div class="row g-4">
        <!-- Employee Management -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm hover-shadow transition-all">
                <div class="card-body p-4 text-center">
                    <div class="d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary rounded-circle mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-users fa-2x"></i>
                    </div>
                    <h5 class="fw-bold">Employee Management</h5>
                    <p class="text-muted small">Complete employee lifecycle management from onboarding to exit.</p>
                    <ul class="text-start small text-muted list-unstyled mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Profile Management</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Organization Chart</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>ID Card Generation</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Document Storage</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Attendance System -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm hover-shadow transition-all">
                <div class="card-body p-4 text-center">
                    <div class="d-inline-flex align-items-center justify-content-center bg-success bg-opacity-10 text-success rounded-circle mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-clock fa-2x"></i>
                    </div>
                    <h5 class="fw-bold">Smart Attendance</h5>
                    <p class="text-muted small">Real-time attendance tracking with multiple input methods.</p>
                    <ul class="text-start small text-muted list-unstyled mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Biometric Integration (eSSL)</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Web Punch In/Out</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Regularization Requests</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Late/Overtime Calculation</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Payroll & Salary -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm hover-shadow transition-all">
                <div class="card-body p-4 text-center">
                    <div class="d-inline-flex align-items-center justify-content-center bg-warning bg-opacity-10 text-warning rounded-circle mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-money-bill-wave fa-2x"></i>
                    </div>
                    <h5 class="fw-bold">Payroll Automation</h5>
                    <p class="text-muted small">Automated salary processing and payslip generation.</p>
                    <ul class="text-start small text-muted list-unstyled mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Automated Salary Calculation</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>PDF Payslip Generation</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Deductions Management</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Bonuses & Allowances</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Leave Management -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm hover-shadow transition-all">
                <div class="card-body p-4 text-center">
                    <div class="d-inline-flex align-items-center justify-content-center bg-info bg-opacity-10 text-info rounded-circle mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-calendar-check fa-2x"></i>
                    </div>
                    <h5 class="fw-bold">Leave Management</h5>
                    <p class="text-muted small">Streamlined leave application and approval workflow.</p>
                    <ul class="text-start small text-muted list-unstyled mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Multi-type Leave Configuration</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Approval Workflow</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Balance Tracking</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Holiday Calendar</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Asset Management -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm hover-shadow transition-all">
                <div class="card-body p-4 text-center">
                    <div class="d-inline-flex align-items-center justify-content-center bg-secondary bg-opacity-10 text-secondary rounded-circle mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-box fa-2x"></i>
                    </div>
                    <h5 class="fw-bold">Asset Management</h5>
                    <p class="text-muted small">Track company assets assigned to employees.</p>
                    <ul class="text-start small text-muted list-unstyled mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Asset Assignment/Return</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Warranty Tracking</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Condition Monitoring</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Categories & Types</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Reports & Analytics -->
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm hover-shadow transition-all">
                <div class="card-body p-4 text-center">
                    <div class="d-inline-flex align-items-center justify-content-center bg-danger bg-opacity-10 text-danger rounded-circle mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-chart-bar fa-2x"></i>
                    </div>
                    <h5 class="fw-bold">Reports & Analytics</h5>
                    <p class="text-muted small">Data-driven insights for better decision making.</p>
                    <ul class="text-start small text-muted list-unstyled mt-3">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Daily/Monthly Attendance</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Payroll Summary</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Issue Tracking</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Export to CSV/Excel</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    cursor: pointer;
}
.transition-all {
    transition: all 0.3s ease;
}
</style>
@endsection