@extends('website.layouts.app')

@section('content')
<section class="profile--edit">
    <div class="container">
        <div class="position-relative text-center">
            <a href="{{ route('profile.index') }}" class="btn btn-light border shadow rounded-pill mb-6"><i class="bi bi-arrow-left"></i> Kembali</a>
        </div>
        <div class="row justify-content-center">
            <div class="col-6 col-md-3 text-center">
                <div class="text-center">
                    <h4>Ganti Photo</h4>
                </div>
                <div class="mb-4">
                    <form action="{{ route('profile.change_photo') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="mb-4">
                            <label for="profile-picture" class="position-relative">
                                <img id="profile-picture-preview" class="rounded-circle border object-fit-cover" width="150" height="150" src="{{ $member->avatar }}" alt="">
                                <div class="position-absolute bottom-0 end-0 btn btn-light border p-1 px-2">
                                    <i class="bi bi-pencil"></i>
                                </div>
                            </label>
                            <input id="profile-picture" type="file" class="d-none @error('image') is-invalid @enderror" name="image" />
                            @error('image')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <button id="profile-picture-btn" type="submit" class="btn btn-indigo shadow border text-white rounded-pill d-none">Upload</button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-md-4">
                <hr>
                <div class="mb-4">
                    <div class="text-center">
                        <h4>Edit Profil</h4>
                    </div>
                    <form action="{{ route('profile.update') }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="mb-4">
                            <label for="name"><i class="bi bi-people"></i> Nama</label>
                            <input id="name" type="text" class="rounded-pill form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name', $member->name) }}" autofocus placeholder="eg: Galandia Mahardika Wijaya"/>
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label for="email"><i class="bi bi-envelope-at"></i> Email</label>
                            <input type="email" class="rounded-pill form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email', $member->email) }}" placeholder="eg: galandia@gmail.com"/>
                            @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="text-center">
                            <button class="btn btn-indigo shadow border text-white rounded-pill">Ubah</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-4">
                <hr>
                <div class="mb-4">
                    <div class="text-center">
                        <h4>Ganti Password</h4>
                    </div>
                    <form action="{{ route('profile.change_password') }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="mb-4">
                            <label for="reset-password"><i class="bi bi-shield-lock"></i> Password baru</label>
                            <div class="input-group @error('password') has-validation @enderror" input-group-password>
                                <input id="reset-password" type="password" class="rounded-start-pill form-control password @error('password') is-invalid @enderror" name="password" />
                                <button class="rounded-end-pill btn btn-light border" type="button" style="padding-left:.8rem; padding-right:1rem;"><i class="bi bi-eye"></i></button>
                                @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="mb-4">
                            <label for="reset-password_confirmation"><i class="bi bi-shield-lock"></i> Konfirmasi password baru</label>
                            <div class="input-group @error('password_confirmation') has-validation @enderror" input-group-password>
                                <input id="reset-password_confirmation" type="password" class="rounded-start-pill form-control password @error('password_confirmation') is-invalid @enderror" name="password_confirmation" />
                                <button class="rounded-end-pill btn btn-light border" type="button" style="padding-left:.8rem; padding-right:1rem;"><i class="bi bi-eye"></i></button>
                                @error('password_confirmation')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-indigo shadow border text-white rounded-pill">Ganti</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
document.addEventListener('DOMContentLoaded', ()=>{
    const inputImage    = document.getElementById(`profile-picture`);
    const previewImage  = document.getElementById(`profile-picture-preview`);
    const previewBtn    = document.getElementById(`profile-picture-btn`);
    inputImage.addEventListener('change', (e)=>{
        var input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                previewBtn.classList.remove('d-none');
            }
            reader.readAsDataURL(input.files[0]);
        }
    });
});
</script>
@endsection