@extends('layouts.app')

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

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center mb-4" style="font-size: 2rem; font-weight: 500;">
                <i class="bi bi-info-circle me-2"></i>Profil Sistem
            </h1>
            
            <div class="card shadow mb-4">
                <div class="card-body p-4">
                    <h3 class="mb-3" style="font-size: 1.5rem; font-weight: 500;">Tentang Sistem</h3>
                    <p class="lead" style="font-size: 1.125rem; line-height: 1.7; margin-bottom: 1.5rem;">
                        Sistem Informasi Manajemen SDM Puskesmas Muara Kumpeh merupakan sistem yang dirancang khusus 
                        untuk mengelola sumber daya manusia di Puskesmas Muara Kumpeh dengan menerapkan prinsip 
                        <strong>Security By Design</strong>.
                    </p>
                    
                    <h4 class="mt-4 mb-3" style="font-size: 1.25rem; font-weight: 500;">Visi</h4>
                    <p style="font-size: 15px; line-height: 1.7;">
                        Menjadi sistem manajemen SDM yang terpercaya, aman, dan efisien di Puskesmas Muara Kumpeh.
                    </p>
                    
                    <h4 class="mt-4 mb-3" style="font-size: 1.25rem; font-weight: 500;">Misi</h4>
                    <ul style="font-size: 15px; line-height: 1.8; padding-left: 1.5rem;">
                        <li style="margin-bottom: 0.5rem;">Menyediakan sistem pengelolaan SDM yang terintegrasi dan mudah digunakan</li>
                        <li style="margin-bottom: 0.5rem;">Memastikan keamanan data pegawai dengan penerapan Security By Design</li>
                        <li style="margin-bottom: 0.5rem;">Meningkatkan efisiensi dalam manajemen absensi, cuti, dan penilaian kinerja</li>
                        <li style="margin-bottom: 0.5rem;">Menyediakan laporan dan analitik yang akurat untuk pengambilan keputusan</li>
                    </ul>
                    
                    <h4 class="mt-4 mb-3" style="font-size: 1.25rem; font-weight: 500;">Tujuan</h4>
                    <ul style="font-size: 15px; line-height: 1.8; padding-left: 1.5rem;">
                        <li style="margin-bottom: 0.5rem;">Mengoptimalkan pengelolaan data pegawai secara digital</li>
                        <li style="margin-bottom: 0.5rem;">Meningkatkan akuntabilitas dalam manajemen SDM</li>
                        <li style="margin-bottom: 0.5rem;">Mempercepat proses pengajuan dan persetujuan cuti</li>
                        <li style="margin-bottom: 0.5rem;">Meningkatkan transparansi dalam penilaian kinerja</li>
                        <li style="margin-bottom: 0.5rem;">Memastikan keamanan dan privasi data pegawai</li>
                    </ul>
                </div>
            </div>
            
            <div class="card shadow mb-4">
                <div class="card-body p-4">
                    <h3 class="mb-3" style="font-size: 1.5rem; font-weight: 500;">Security By Design</h3>
                    <p style="font-size: 15px; line-height: 1.7; margin-bottom: 1.5rem;">
                        Sistem ini menerapkan prinsip Security By Design yang mencakup:
                    </p>
                    <div class="row mt-3">
                        <div class="col-md-6 mb-3">
                            <h5 style="font-size: 1.125rem; font-weight: 500; margin-bottom: 0.5rem;">
                                <i class="bi bi-shield-lock text-primary me-2"></i>Enkripsi Data
                            </h5>
                            <p style="font-size: 15px; line-height: 1.7; margin-bottom: 0;">
                                Semua password dienkripsi menggunakan bcrypt dengan salt yang unik.
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <h5 style="font-size: 1.125rem; font-weight: 500; margin-bottom: 0.5rem;">
                                <i class="bi bi-person-check text-success me-2"></i>Role-Based Access Control
                            </h5>
                            <p style="font-size: 15px; line-height: 1.7; margin-bottom: 0;">
                                Sistem akses berbasis peran (Pegawai, Kepala Tata Usaha, Pimpinan).
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <h5 style="font-size: 1.125rem; font-weight: 500; margin-bottom: 0.5rem;">
                                <i class="bi bi-journal-text text-warning me-2"></i>Audit Log
                            </h5>
                            <p style="font-size: 15px; line-height: 1.7; margin-bottom: 0;">
                                Semua aktivitas dicatat dalam audit log untuk keamanan dan transparansi.
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <h5 style="font-size: 1.125rem; font-weight: 500; margin-bottom: 0.5rem;">
                                <i class="bi bi-lock-fill text-danger me-2"></i>Session Management
                            </h5>
                            <p style="font-size: 15px; line-height: 1.7; margin-bottom: 0;">
                                Manajemen session yang aman dengan timeout otomatis.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card shadow">
                <div class="card-body p-4">
                    <h3 class="mb-3" style="font-size: 1.5rem; font-weight: 500;">Struktur Organisasi</h3>
                    <p style="font-size: 15px; line-height: 1.7; margin-bottom: 1.5rem;">
                        Sistem ini mendukung tiga level pengguna:
                    </p>
                    <div class="row mt-3">
                        <div class="col-md-4 mb-3">
                            <div class="card border-primary">
                                <div class="card-body text-center p-3">
                                    <i class="bi bi-person fs-1 text-primary"></i>
                                    <h5 class="mt-3 mb-2" style="font-size: 1.125rem; font-weight: 500;">Pegawai</h5>
                                    <p style="font-size: 14px; line-height: 1.6; margin-bottom: 0;">
                                        Mengelola data pribadi, absensi, gaji dan pengajuan cuti
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card border-success">
                                <div class="card-body text-center p-3">
                                    <i class="bi bi-person-badge fs-1 text-success"></i>
                                    <h5 class="mt-3 mb-2" style="font-size: 1.125rem; font-weight: 500;">Kepala Tata Usaha</h5>
                                    <p style="font-size: 14px; line-height: 1.6; margin-bottom: 0;">
                                        Mengelola data pegawai, absensi, cuti, gaji, user akun, dan audit log
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card border-warning">
                                <div class="card-body text-center p-3">
                                    <i class="bi bi-person-check fs-1 text-warning"></i>
                                    <h5 class="mt-3 mb-2" style="font-size: 1.125rem; font-weight: 500;">Pimpinan</h5>
                                    <p style="font-size: 14px; line-height: 1.6; margin-bottom: 0;">
                                        Memvalidasi pengajuan cuti dan monitoring laporan
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection