@extends('layouts.admin')

@section('content')
<div class="container mt-4">
    <h2>Edit Profil</h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.profile.update') }}" method="POST">
        @csrf
        <div class="mb-3">
            <label>Nama</label>
            <input type="text" name="name" class="form-control" value="{{ $admin->name }}" required>
        </div>
        <div class="mb-3">
            <label>Email</label>
            <input type="email" name="email" class="form-control" value="{{ $admin->email }}" required>
        </div>

        <div class="mb-3">
            <button type="button" class="btn btn-outline-secondary" onclick="togglePasswordFields()">Ubah Password</button>
        </div>

        <div id="password-fields" style="display: none;">
            <div class="mb-3">
                <label>Password Lama</label>
                <input type="password" name="current_password" class="form-control" autocomplete="off">
            </div>
            <div class="mb-3">
                <label>Password Baru</label>
                <input type="password" name="new_password" class="form-control" autocomplete="new-password">
            </div>
            <div class="mb-3">
                <label>Konfirmasi Password Baru</label>
                <input type="password" name="new_password_confirmation" class="form-control" autocomplete="new-password">
            </div>
        </div>

        <button type="submit" class="btn btn-primary mt-2">Simpan Perubahan</button>
    </form>
</div>

<script>
  function togglePasswordFields() {
    const pwFields = document.getElementById('password-fields');
    pwFields.style.display = pwFields.style.display === 'none' ? 'block' : 'none';
  }
</script>
@endsection