Anons79 Mini Shell

@extends('app')

@section('content')
    <div class="page-heading">
        <h3>Profile</h3>
    </div>
    <div class="page-content ">
        <div class="row">
            <div class="col-md-6">
                <div class="card ">
                    <div class="card-header">
                        <h4 class="card-title">Form Profile</h4>
                    </div>

                    <div class="card-body ">
                        <div class="row ">
                            <div class="col-md-12">
                                <form>

                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <input type="email" class="form-control" id="email" name="email"
                                            placeholder="Masukan Email" value="{{ $profile->user->email }}"
                                            autocomplete="email" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="name">Username</label>
                                        <input type="text" class="form-control" id="name" name="name"
                                            placeholder="Masukan Username" value="{{ $profile->user->name }}"
                                            autocomplete="username" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="name">Ganti Password</label>
                                        <input type="password" class="form-control" id="password" name="password"
                                            placeholder="*******" autocomplete="new-password">
                                    </div>

                                    <div class="form-group">
                                        <label for="password_confirmation">Konfirmasi Password</label>
                                        <input type="password" class="form-control" id="password_confirmation"
                                            name="password_confirmation" placeholder="*******" autocomplete="new-password">
                                    </div>

                                    <div class="form-group">
                                        <label for="nama_lengkap">Nama Lengkap</label>
                                        <input type="text" class="form-control" id="nama_lengkap" name="nama_lengkap"
                                            placeholder="Masukan Nama Lengkap" value="{{ $profile->nama_lengkap }}"
                                            autocomplete="nama_lengkap" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="alamat">Alamat</label>
                                        <input type="text" class="form-control" id="alamat" name="alamat"
                                            placeholder="Masukan Alamat" value="{{ $profile->alamat }}"
                                            autocomplete="street-address" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="no_telp">No WhatsApp</label>
                                        <input type="number" class="form-control" id="no_telp" name="no_telp"
                                            placeholder="Masukan Nomor Telp" value="{{ $profile->no_telp }}"
                                            autocomplete="tel" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="photo">Foto Profil</label>
                                        <input type="file" class="form-control" id="photo" name="photo"
                                            accept="image/*">
                                        <p><small class="text-muted">Masukkan foto profil (JPG, PNG, JPEG).</small></p>
                                    </div>

                                    <div class="form-group">
                                        <button class="btn btn-success" id="submit-btn">Simpan</button>
                                    </div>



                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card ">
                    <div class="card-body">
                        <img class="img-fluid w-100" id="profile-picture"
                            @if (isset($profile->photo)) src="{{ asset('images/profile/' . $profile->photo) }}"@else src="{{ asset('assets\static\images\samples\1.png') }}" @endif
                            alt="">
                    </div>

                </div>
            </div>


        </div>
    </div>
    @include('Component.sweetalert')

    <script>
        $(document).ready(function() {

            $('#submit-btn').click(function(e) {
                e.preventDefault();

                var formData = new FormData();
                formData.append('_method', 'PUT');
                formData.append('email', $('#email').val());
                formData.append('name', $('#name').val());
                formData.append('password', $('#password').val());
                formData.append('password_confirmation', $('#password_confirmation').val());
                formData.append('nama_lengkap', $('#nama_lengkap').val());
                formData.append('alamat', $('#alamat').val());
                formData.append('no_telp', $('#no_telp').val());

                if ($('#photo').length > 0 && $('#photo')[0].files && $('#photo')[0].files[0]) {
                    formData.append('photo', $('#photo')[0].files[0]);
                }

                $.ajax({
                    url: '{{ route('profile.update', $profile->user->id) }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            showAlert(
                                'Berhasil Diubah!',
                                response.message,
                                response.status,
                                function() {}
                            );
                            var newImageSrc = '{{ asset('images/profile/') }}/' + response
                                .photo;
                            $('#profile-picture').attr('src', newImageSrc);
                        } else {
                            showAlert(
                                'Gagal Diubah!',
                                response.message,
                                response.status,
                                function() {}
                            );
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            var errors = xhr.responseJSON.errors;
                            var errorMessage = '';
                            $.each(errors, function(key, value) {
                                errorMessage += value + '\n';
                            });
                            showAlert(
                                'Gagal Diubah!',
                                errorMessage,
                                'error',
                                function() {}
                            );
                        } else {
                            alert('Terjadi kesalahan server.');
                        }
                    }
                });
            });





        });
    </script>
@endsection