@extends('layouts.admin')

@section('content')
    <div class="content-wrapper pb-0 min-vh-100">
        <div class="page-header flex-wrap">
            <h3 class="mb-0">Pengaturan</h3>
        </div>

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

            <div class="row">
                <!-- Kolom Foto Profil -->
                <div class="col-md-4 d-flex flex-column align-items-center">
                    <div class="mb-3">
                        <img src="{{ asset('foto/' . $user->foto) }}" class="img-thumbnail rounded-circle" width="150"
                            height="150">
                    </div>
                    <label for="foto" class="btn btn-secondary btn-sm">
                        Ganti Foto
                        <input type="file" class="d-none" id="foto" name="foto" onchange="previewImage(event)">
                    </label>
                </div>

                <!-- Kolom Form -->
                <div class="col-md-8">
                    <form method="POST" action="{{ url('admin/pengaturansimpan') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="mb-3">
                            <label for="username">Username</label>
                            <input type="text" class="form-control @error('username') is-invalid @enderror"
                                name="username" value="{{ old('username', $user->username) }}" required>
                            @error('username')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="email">Email</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                                value="{{ old('email', $user->email) }}" required>
                            @error('email')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="password">Password Baru (Kosongkan jika tidak ingin mengubah)</label>
                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                name="password">
                            @error('password')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="password_confirmation">Konfirmasi Password</label>
                            <input type="password" class="form-control" name="password_confirmation">
                        </div>

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

    <script>
        function previewImage(event) {
            const input = event.target;
            const reader = new FileReader();
            reader.onload = function() {
                const imgElement = document.querySelector(".img-thumbnail");
                imgElement.src = reader.result;
            };
            reader.readAsDataURL(input.files[0]);
        }
    </script>
@endsection