@extends('admin.layout')

@section('content')

<div class="card-box">

    <h5 class="mb-4">Edit Profil Admin</h5>

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

    <form method="POST" action="/admin/profile/update" enctype="multipart/form-data">
        @csrf

        <div class="row">

            <!-- FOTO -->
            <div class="col-md-3 text-center">

                @if($user->foto)
                <img src="{{ asset('upload/'.$user->foto) }}" class="rounded-circle mb-3" width="120" height="120"
                    style="object-fit:cover;" id="preview">
                @else
                <div id="preview"
                    style="width:120px;height:120px;background:#4e73df;border-radius:50%;margin:auto;display:flex;align-items:center;justify-content:center;color:white;">
                    <i data-feather="user"></i>
                </div>
                @endif

                <input type="file" name="foto" class="form-control mt-2" onchange="previewFoto(event)">
            </div>

            <!-- DATA -->
            <div class="col-md-9">

                <div class="mb-3">
                    <label>Nama Admin</label>
                    <input type="text" class="form-control" value="{{ $user->nama }}" readonly>
                </div>

                <div class="mb-3">
                    <label>Password Baru</label>
                    <input type="password" name="password" class="form-control"
                        placeholder="Kosongkan jika tidak diubah">
                </div>

                <button class="btn btn-custom">Update Profil</button>

            </div>

        </div>

    </form>

</div>

@endsection

@section('scripts')
<script>
function previewFoto(event) {
    const reader = new FileReader();
    reader.onload = function() {
        let output = document.getElementById('preview');
        output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
}
</script>
@endsection