@extends('layouts.user')

@section('content')
<a href="{{ route('home') }}" class="btn btn-light rounded-circle shadow-sm d-inline-flex align-items-center justify-content-center"
   style="width: 36px; height: 36px; position: absolute; top: 20px; left: 20px;">
    &#8592;
</a>

<div class="container mt-4">
    <h2>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 method="POST" action="{{ route('profil.update') }}">
        @csrf

        <div class="mb-3">
            <label>Nama</label>
            <input type="text" name="name" class="form-control" value="{{ auth()->user()->name }}" required>
        </div>

        <div class="mb-3">
            <label>Email</label>
            <input type="email" name="email" class="form-control" value="{{ auth()->user()->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="new-password">
            </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">
            </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