@extends('layouts.app')
@section('content')
    @include('profile.header')   
    <div class="px-4">
      <div class="clearfix"></div>
      <div class="card" style="margin-top: 10px; border-radius: 20px; background-color: #F9F9F9">
        <div class="card-body">
          <form id="edit">
            <input type="hidden" id="id" value="{{ $user->id }}">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Input Name" name="name" value="{{ $user->name }}">
            </div>
            <div class="form-group">
              <label for="username">Username</label>
              <input type="text" class="form-control" id="username" placeholder="Input Username" name="username" value="{{ $user->username }}">
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" id="password" placeholder="********" name="password" autocomplete="new-password">
            </div>
            <div class="form-group">
                <label for="password-confirm">Confirm Password</label>
                <input id="password-confirm" type="password" class="form-control" placeholder="********" name="password_confirmation" autocomplete="new-password">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="phone">Phone Number</label>
                    <input type="text" class="form-control" id="phone" placeholder="Input Phone" name="phone" value="{{ $user->phone }}">
                </div>
                <div class="form-group col-md-6">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Input Email" value="{{ $user->email }}">
                </div>
            </div>
            <div class="float-right">
                <button type="submit" class="btn btn-kreddo text-white mx-1">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
@endsection
@push('scripts')
  {{-- update funtion --}}
  <script>
    $('#edit').on('submit', function (e) {
        e.preventDefault();
        var id = $('#id').val();
        var name = $('#name').val();
        var username = $('#username').val();
        var phone = $('#phone').val();
        var email = $('#email').val();
        var password = $('#password').val();
        var password_confirmation = $('#password-confirm').val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            method: 'PUT',
            url: "{{ url('profile') }}/"+id,
            data: {
                id: id,
                name: name,
                username: username,
                phone: phone,
                email: email,
                password: password,
                password_confirmation: password_confirmation,
            },
            success: function (response) {
                Swal.fire({
                    position: 'center',
                    icon: 'success',
                    title: response.message,
                    showConfirmButton: false,
                    timer: 1500
                });
                window.location.reload();
            },
            error: function (xhr, status, error) {
                    var response = JSON.parse(xhr.responseText);
                    
                    var errorMessage = response.message;
                    var errors = response.errors;
                    
                    if (errors && errors.password) {
                        errorMessage = errors.password[0];
                    }
                    
                    Swal.fire({
                        position: 'center',
                        icon: 'error',
                        title: errorMessage,
                        showConfirmButton: false,
                        timer: 2500
                    });
            }
        });
      });
  </script>
@endpush