@extends('layouts.app')

@section('title', 'Profil Saya')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Pengaturan /</span> Profil Saya
    </h4>

    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Ubah Profil</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        
                        <div class="d-flex align-items-start align-items-sm-center gap-4 mb-4">
                            @if($user->photo_path)
                                <img src="{{ Storage::url($user->photo_path) }}" alt="user-avatar" class="d-block rounded" height="100" width="100" style="object-fit: cover;" id="uploadedAvatar" />
                            @else
                                <div class="d-flex align-items-center justify-content-center bg-primary text-white rounded" style="width: 100px; height: 100px; font-size: 40px; font-weight: 600;" id="uploadedAvatar">
                                    {{ strtoupper(mb_substr($user->name, 0, 1, 'UTF-8')) }}
                                </div>
                            @endif
                            <div class="button-wrapper">
                                <label for="upload" class="btn btn-primary me-2 mb-2" tabindex="0">
                                    <span class="d-none d-sm-block">Unggah Foto Baru</span>
                                    <i class="bx bx-upload d-block d-sm-none"></i>
                                    <input type="file" id="upload" name="photo" class="account-file-input" hidden accept="image/png, image/jpeg, image/jpg" onchange="previewImage(this)" />
                                </label>
                                <p class="text-muted mb-0">Format: JPG, JPEG, PNG. Ukuran maksimal: 2MB.</p>
                                @error('photo')<div class="text-danger mt-1" style="font-size: 13px;">{{ $message }}</div>@enderror
                            </div>
                        </div>

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

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

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="password">Kata Sandi Baru (Kosongkan jika tidak ingin diubah)</label>
                                <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" />
                                @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="password_confirmation">Konfirmasi Kata Sandi Baru</label>
                                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" />
                            </div>
                        </div>

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

@section('page-script')
<script>
    function previewImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var avatar = document.getElementById('uploadedAvatar');
                if (avatar.tagName === 'IMG') {
                    avatar.src = e.target.result;
                } else {
                    var img = document.createElement('img');
                    img.id = 'uploadedAvatar';
                    img.src = e.target.result;
                    img.alt = 'user-avatar';
                    img.className = 'd-block rounded';
                    img.height = 100;
                    img.width = 100;
                    img.style.objectFit = 'cover';
                    avatar.parentNode.replaceChild(img, avatar);
                }
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection