@extends('admin.layouts.admin')

@section('content')
<div class="page-content">
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom pb-0">
            <h5 class="card-title mb-3">Edit Profile</h5>
        </div>
        <div class="card-body">
            <form id="formProfile" action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT') <div class="row">
                    <div class="col-md-4 text-center mb-4 border-end">
                        <div class="position-relative d-inline-block mt-3">
                            <img id="avatarPreview" 
                                 src="{{ $user->profile_picture && file_exists(public_path('storage/'.$user->profile_picture)) ? asset('storage/'.$user->profile_picture) : 'https://ui-avatars.com/api/?name='.urlencode($user->name_account).'&background=random' }}"
                                 alt="Profile Picture" 
                                 class="rounded-circle img-thumbnail shadow-sm" 
                                 style="width: 160px; height: 160px; object-fit: cover;">
                                 
                            <label for="profile_picture" class="position-absolute bottom-0 end-0 btn btn-search btn-sm rounded-circle shadow" style="cursor: pointer; padding: 8px 12px;">
                                <i class="bi bi-camera"></i>
                            </label>
                            <input type="file" id="profile_picture" name="profile_picture" class="d-none" accept="image/*">
                        </div>
                        <p class="text-muted mt-2 small">Allowed JPG, JPEG or PNG. Max size of 2MB</p>
                    </div>

                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-6 mb-3 mt-2">
                                <label class="form-label fw-semibold">Name Account</label>
                                <input type="text" name="name_account" value="{{ $user->name_account }}" class="form-control" required>
                            </div>
                            <div class="col-md-6 mb-3 mt-2">
                                <label class="form-label fw-semibold">Username</label>
                                <input type="text" name="username" value="{{ $user->username }}" class="form-control" disabled readonly>
                            </div>
                            <div class="col-md-4 mb-3 mt-2">
                                <label class="form-label fw-semibold">Bank Account Number</label>
                                <input type="text" name="no_rekening" value="{{ $user->no_rekening }}" class="form-control">
                            </div>
                            <div class="col-md-4 mb-3 mt-2">
                                <label class="form-label fw-semibold">Bank Account Name</label>
                                <input type="text" name="nama_rekening" value="{{ $user->nama_rekening }}" class="form-control">
                            </div>
                            <div class="col-md-4 mb-3 mt-2">
                                <label class="form-label fw-semibold">Bank Name</label>
                                <input type="text" name="bank" value="{{ $user->bank }}" class="form-control">
                            </div>
                            <div class="col-md-12 mb-3 d-none">
                                <label class="form-label fw-semibold">Email Address</label>
                                <input type="email" name="email" value="{{ $user->email }}" class="form-control" disabled readonly required>
                            </div>
                            <div class="col-md-12 mb-4">
                                <label class="form-label fw-semibold">Password</label>
                                <div class="input-group">
                                    <input type="password" name="password" class="form-control" autocomplete="new-password" placeholder="Leave blank if you don't want to change the password.">
                                    <button type="button" class="btn btn-secondary toggle-pass">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="submit" class="btn btn-primary px-4">Save Changes</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {

        $(document).on('click','.toggle-pass',function(){
            const input=$(this).closest('.input-group').find('input')
            const icon=$(this).find('i')
            const type=input.attr('type')==='password'?'text':'password'
            input.attr('type',type)
            icon.toggleClass('bi-eye bi-eye-slash')
        })

        $('#profile_picture').change(function(e) {
            const file = e.target.files[0];
            if (file) {
                $('#avatarPreview').attr('src', URL.createObjectURL(file));
            }
        });

        $('#formProfile').submit(function(e) {
            e.preventDefault();
            
            ajaxFormSubmitAuto(this, function(res) {
                if(res.success){
                    const file = $('#profile_picture')[0].files[0]
                    if(file){
                        $('#profile-pic').attr('src',URL.createObjectURL(file))
                    }
                }

                console.log(res.message || 'Error Server')
            });
        });
    });
</script>
@endpush