@extends('layouts.admin')
@section('title', 'Pengaturan Sistem')
@section('admin-content')

@push('styles')
<style>
@media(max-width:768px){
  .field-row { grid-template-columns:1fr !important; }
}
</style>
@endpush

<h1 style="font-size:18px;font-weight:800;margin-bottom:20px;">Pengaturan Sistem</h1>

<div style="background:var(--white);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow-sm);">
  <div style="font-size:15px;font-weight:700;margin-bottom:5px;">🔑 Kode Akses User</div>
  <div style="font-size:13px;color:var(--text-muted);margin-bottom:18px;line-height:1.6;">
    Kode ini digunakan karyawan untuk mengajukan permintaan ruangan. Ganti jika dirasa tidak aman.
  </div>
  <div style="display:flex;align-items:center;gap:10px;background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:16px;">
    <div style="font-size:20px;font-weight:800;letter-spacing:.15em;color:var(--green-800);font-variant-numeric:tabular-nums;flex:1;" id="code-display">{{ $accessCode }}</div>
    <button onclick="toggleCode()" style="font-size:12px;color:var(--text-muted);background:none;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;">👁 Lihat</button>
  </div>
  @if(session('success') && !session('success_password'))
    <div class="alert alert-success">✓ {{ session('success') }}</div>
  @endif
  <form method="POST" action="{{ route('admin.settings.code') }}">
    @csrf
    <div style="display:flex;gap:10px;flex-wrap:wrap;">
      <input type="text" name="access_code" class="field-input" placeholder="Masukkan kode baru..." style="flex:1;min-width:160px;text-transform:uppercase;" maxlength="20" required>
      <button type="submit" class="btn btn-primary">Simpan</button>
    </div>
    @error('access_code')<div class="field-error" style="margin-top:6px;">{{ $message }}</div>@enderror
  </form>
  <div class="alert alert-warning" style="margin-top:14px;">
    ⚠️ Setelah mengganti kode, informasikan kode baru kepada seluruh karyawan aktif.
  </div>
</div>

<div style="background:var(--white);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm);">
  <div style="font-size:15px;font-weight:700;margin-bottom:5px;">🔒 Ubah Password Admin</div>
  <div style="font-size:13px;color:var(--text-muted);margin-bottom:18px;line-height:1.6;">
    Gunakan password yang kuat, minimal 6 karakter.
  </div>
  @if(session('success_password'))
    <div class="alert alert-success">✓ {{ session('success_password') }}</div>
  @endif
  @if(session('error_password'))
    <div class="alert alert-error">⚠️ {{ session('error_password') }}</div>
  @endif
  <form method="POST" action="{{ route('admin.settings.password') }}">
    @csrf
    <div class="field">
      <label class="field-label">Password Lama</label>
      <input type="password" name="old_password" class="field-input" placeholder="Password saat ini" required>
    </div>
    <div class="field-row">
      <div class="field">
        <label class="field-label">Password Baru</label>
        <input type="password" name="new_password" class="field-input" placeholder="Minimal 6 karakter" required>
        @error('new_password')<div class="field-error">{{ $message }}</div>@enderror
      </div>
      <div class="field">
        <label class="field-label">Konfirmasi Password</label>
        <input type="password" name="new_password_confirmation" class="field-input" placeholder="Ulangi password baru" required>
      </div>
    </div>
    <button type="submit" class="btn btn-primary" style="margin-top:4px;">Ubah Password</button>
  </form>
</div>

@push('scripts')
<script>
let shown = false;
const real = '{{ $accessCode }}';
function toggleCode(){
  shown = !shown;
  document.getElementById('code-display').textContent = shown ? real : '•'.repeat(real.length);
}
document.getElementById('code-display').textContent = '•'.repeat(real.length);
</script>
@endpush
@endsection