@extends('layout.app')

@section('content')
<div class="page-header">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item active">Account Settings</li>
    </ol>
</div>

<div class="row gutters">
    {{-- KOLOM KIRI: FORM PENGATURAN PIN --}}
    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="card h-100 shadow-sm border-0">
            <div class="card-header bg-white border-bottom py-3">
                <div class="card-title font-weight-bold text-dark mb-0">
                    <i class="icon-shield text-success mr-2"></i> Keamanan PIN Perbandingan
                </div>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success border-0 shadow-sm mb-4">
                        <i class="icon-check"></i> {{ session('success') }}
                    </div>
                @endif

                <form action="{{ route('account.updatePin') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label class="font-weight-bold small text-muted text-uppercase">Nama Pengguna</label>
                        <input type="text" class="form-control bg-light border-0" value="{{ $user->nama_lengkap }}" readonly>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold small text-muted text-uppercase">Role / Hak Akses</label>
                        <input type="text" class="form-control bg-light border-0" value="{{ ucfirst($user->role) }}" readonly>
                    </div>

                    <hr class="my-4">

                    <div class="form-group mb-4">
                        <label class="text-success font-weight-bold small text-uppercase">PIN Pakar Aktif Saat Ini</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white border-right-0"><i class="icon-lock text-success"></i></span>
                            </div>
                            <input type="text" class="form-control font-weight-bold text-success border-left-0" style="letter-spacing: 2px;" value="{{ $pinPakar->nilai_pengaturan ?? '-' }}" readonly>
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <label class="font-weight-bold small text-muted text-uppercase">Input PIN Baru (6 Digit)</label>
                        <input type="password" name="pin_baru" maxlength="6" class="form-control @error('pin_baru') is-invalid @enderror" placeholder="Contoh: 123456" required>
                        @error('pin_baru') <small class="text-danger font-weight-bold">{{ $message }}</small> @enderror
                    </div>

                    <div class="text-right">
                        <button type="submit" class="btn btn-success px-5 shadow-sm font-weight-bold">
                            <i class="icon-save"></i> Simpan PIN Baru
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- KOLOM KANAN: INFORMASI EDUKASI (Agar Ruang Tidak Kosong) --}}
    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="card h-100 shadow-sm border-0 bg-light">
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <div class="icon-container mb-3 d-inline-flex align-items-center justify-content-center bg-white rounded-circle shadow-sm" style="width: 70px; height: 70px;">
                        <i class="icon-shield text-success" style="font-size: 2rem;"></i>
                    </div>
                    <h5 class="font-weight-bold text-dark">Mengapa PIN Penting?</h5>
                </div>

                <div class="timeline-info small">
                    <div class="d-flex mb-3">
                        <div class="mr-3 text-success"><i class="icon-check-circle"></i></div>
                        <div>
                            <p class="font-weight-bold mb-1">Integritas Data F-AHP</p>
                            <p class="text-muted">PIN memastikan bahwa hanya Admin yang sah yang dapat memvalidasi dan menyimpan matriks perbandingan kriteria pakar.</p>
                        </div>
                    </div>
                    <div class="d-flex mb-3">
                        <div class="mr-3 text-success"><i class="icon-check-circle"></i></div>
                        <div>
                            <p class="font-weight-bold mb-1">Otoritas Keputusan</p>
                            <p class="text-muted">Setiap perubahan bobot kriteria akan berdampak pada urutan ranking warga, sehingga dibutuhkan proteksi PIN tambahan.</p>
                        </div>
                    </div>
                    <div class="d-flex">
                        <div class="mr-3 text-success"><i class="icon-check-circle"></i></div>
                        <div>
                            <p class="font-weight-bold mb-1">Log Audit</p>
                            <p class="text-muted">Penggunaan PIN memudahkan pelacakan perubahan konfigurasi sistem jika terjadi ketidaksesuaian data di masa depan.</p>
                        </div>
                    </div>
                </div>

                <div class="alert alert-warning border-0 mt-4 small shadow-sm">
                    <strong>Peringatan Keamanan:</strong><br>
                    Jangan berikan PIN ini kepada siapapun selain perangkat desa yang memiliki kewenangan sebagai pakar kriteria.
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .card { border-radius: 12px; overflow: hidden; }
    .form-control { border-radius: 8px; padding: 12px 15px; height: auto; }
    .form-control:focus { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40,167,69,0.1); }
    .btn-success { border-radius: 8px; padding: 10px 20px; background-color: #28a745; border: none; }
    .btn-success:hover { background-color: #1e7e34; }
    .input-group-text { border-radius: 8px 0 0 8px; }
    .border-left-0 { border-radius: 0 8px 8px 0 !important; }
</style>
@endsection