@extends('layouts.app')

@section('title', 'Fitur Sistem')

@section('content')
<style>
    h1::before,
    h1::after,
    h2::before,
    h2::after {
        content: none !important;
        display: none !important;
    }
</style>
<div class="container py-5">
    <h1 class="text-center mb-5"><i class="bi bi-grid"></i> FITUR SISTEM</h1>
    
    <div class="row g-4">
        <div class="col-md-6">
            <div class="card shadow h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <i class="bi bi-person-badge fs-1 text-primary me-3"></i>
                        <h4>Manajemen Pegawai</h4>
                    </div>
                    <ul>
                        <li>Data pegawai lengkap dengan profil</li>
                        <li>Perhitungan masa kerja otomatis</li>
                        <li>Manajemen status aktif/non-aktif</li>
                        <li>Riwayat jabatan dan pendidikan</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card shadow h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <i class="bi bi-calendar-check fs-1 text-success me-3"></i>
                        <h4>Absensi Digital</h4>
                    </div>
                    <ul>
                        <li>Integrasi dengan fingerprint device</li>
                        <li>Perhitungan keterlambatan otomatis</li>
                        <li>Perhitungan cepat pulang otomatis</li>
                        <li>Riwayat absensi lengkap</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card shadow h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <i class="bi bi-calendar-event fs-1 text-warning me-3"></i>
                        <h4>Manajemen Cuti</h4>
                    </div>
                    <ul>
                        <li>Pengajuan cuti online</li>
                        <li>Workflow persetujuan</li>
                        <li>Tracking status cuti</li>
                        <li>Riwayat cuti pegawai</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card shadow h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <i class="bi bi-graph-up fs-1 text-info me-3"></i>
                        <h4>Penilaian Kinerja</h4>
                    </div>
                    <ul>
                        <li>Sistem penilaian terstruktur</li>
                        <li>Kriteria penilaian yang jelas</li>
                        <li>Riwayat penilaian</li>
                        <li>Laporan penilaian kinerja</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card shadow h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <i class="bi bi-cash-coin fs-1 text-success me-3"></i>
                        <h4>Manajemen Gaji</h4>
                    </div>
                    <ul>
                        <li>Perhitungan gaji otomatis</li>
                        <li>Sistem approval gaji</li>
                        <li>Tracking pembayaran</li>
                        <li>Laporan gaji bulanan</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card shadow h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <i class="bi bi-fingerprint fs-1 text-danger me-3"></i>
                        <h4>Integrasi Fingerprint</h4>
                    </div>
                    <ul>
                        <li>API untuk fingerprint device</li>
                        <li>Manajemen device</li>
                        <li>Real-time attendance</li>
                        <li>Monitoring device status</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card shadow h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <i class="bi bi-shield-lock fs-1 text-primary me-3"></i>
                        <h4>Security Features</h4>
                    </div>
                    <ul>
                        <li>Password hashing (bcrypt)</li>
                        <li>Role-based access control</li>
                        <li>Audit logging</li>
                        <li>Session management</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card shadow h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <i class="bi bi-file-earmark-text fs-1 text-secondary me-3"></i>
                        <h4>Laporan & Dashboard</h4>
                    </div>
                    <ul>
                        <li>Dashboard interaktif</li>
                        <li>Laporan absensi</li>
                        <li>Laporan cuti</li>
                        <li>Statistik SDM</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection