@include('master.header')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">{{$config['title']}}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                @foreach($config['breadcrumbs'] ?? array() as $item)
                                <li class="breadcrumb-item"><a
                                        href="{{ $item['url'] ?? '#' }}">{{ $item['title'] ?? '' }}</a></li>
                                @endforeach
                            </ol>
                        </div>

                    </div>
                </div>
            </div>

            
          
            
          <div class="row">
            <div class="col-6">
              <form id="formStoreProfile" action="{{ $config['form_profile']->action }}" method="POST">
                @method($config['form_profile']->method)
                @csrf
                
                    <div class="card">
                      <div class="card-header justify-content-between">
                        <div class="header-title">
                          <div class="row">
                            <div class="col-sm-6 col-lg-6">
                              <h4 class="card-title">Profile</h4>
                            </div>
                            <div class="col-sm-6 col-lg-6">
                              
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="card-body">
                        <div class="form-group">
                          <div id="errorCreate" class="mb-3" style="display:none;">
                            <div class="alert alert-danger" role="alert">
                              <div class="alert-icon"><i class="flaticon-danger text-danger"></i></div>
                              <div class="alert-text">
                              </div>
                            </div>
                          </div>
                          <div class="form-group row">
                            <label class="control-label col-sm-3 align-self-center mb-0" for="name">Nama :</label>
                            <div class="col-sm-9">
                              <input type="text" class="form-control" id="name" name="name" placeholder="Masukkan Nama Anda"
                                    value="{{ $data->name ?? '' }}">
                            </div>
                          </div>
                          <div class="form-group row">
                            <label class="control-label col-sm-3 align-self-center mb-0" for="name">Jabatan :</label>
                            <div class="col-sm-9">
                              <input type="text" class="form-control" id="position" name="position" placeholder="Masukkan Jabatan Anda"
                                    value="{{ $data->position ?? '' }}">
                            </div>
                          </div>
                          <div class="form-group row">
                            <label class="control-label col-sm-3 align-self-center mb-0" for="username">Username :</label>
                            <div class="col-sm-9">
                              <input type="text" class="form-control" id="username" name="username"
                                    placeholder="Masukan Username Anda"
                                    value="{{ $data->username ?? '' }}" {{ (isset($data) ? 'readonly' : '') }}>
                            </div>
                          </div>
                          <div class="form-group row">
                          <label class="mb-2 text-bold d-block">Foto</label>
                            <img id="avatar"
                                @if(isset($data['image']))
                                  src="{{ $data['image'] != NULL ? asset("storage/images/original/".$data['image']) : asset('images/no-content.svg') }}"
                                @else
                                  src="{{ asset('images/no-content.svg') }}"
                                @endif
                                style="object-fit: cover; border: 1px solid #d9d9d9" class="mb-2 border-2 mx-auto" height="200px"
                                width="200px" alt="">
                              <input class="form-control image" type="file" id="customFile1" name="image" accept=".jpg, .jpeg, .png">
                            <p class="text-muted ms-75 mt-50"><small>Allowed JPG, JPEG or PNG. Max
                                size of
                                2MB</small></p>
                          </div>
                        </div>
                        <br>
                        <div class="btn-group float-end" role="group" aria-label="Basic outlined example">
                            <a onclick="history.back()" class="btn btn-sm btn-outline-primary"><i
                                class="fa-solid fa-rotate-left"></i> Back</a>
                            <button type="submit" class="btn btn-sm btn-primary">Save <i
                                class="fa-solid fa-floppy-disk"></i></button>
                        </div>
                      </div>
                    </div>
              </form>
            </div>
            <div class="col-6">
              <form id="formStore" action="{{ $config['form']->action }}" method="POST">
                @method($config['form']->method)
                @csrf
                    <div class="card">
                      <div class="card-header justify-content-between">
                        <div class="header-title">
                          <div class="row">
                            <div class="col-sm-6 col-lg-6">
                              <h4 class="card-title">{{ $config['title'] }}</h4>
                            </div>
                            <div class="col-sm-6 col-lg-6">
                              <div class="btn-group float-end" role="group" aria-label="Basic outlined example">
                                <a onclick="history.back()" class="btn btn-sm btn-outline-primary"><i
                                    class="fa-solid fa-rotate-left"></i> Kembali</a>
                                <button type="submit" class="btn btn-sm btn-primary">Simpan <i
                                    class="fa-solid fa-floppy-disk"></i></button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="card-body">
                        <div class="form-group">
                          <div id="errorCreate" class="mb-3" style="display:none;">
                            <div class="alert alert-danger" role="alert">
                              <div class="alert-icon"><i class="flaticon-danger text-danger"></i></div>
                              <div class="alert-text">
                              </div>
                            </div>
                          </div>
                          <div class="form-group row">
                            <label class="control-label col-sm-3 align-self-center mb-0" for="old_password">Password Lama:</label>
                            <div class="col-sm-8">
                              <input type="password" class="form-control" name="old_password" id="old_password"
                                    placeholder="Enter Your Old password">
                            </div>
                            <div class="col-sm-1 input-group-addon">
                              <i class="fa fa-eye-slash pt-3 togglePassword" aria-hidden="true"></i>
                            </div>
                          </div>
                            <div class="form-group row">
                              <label class="control-label col-sm-3 align-self-center mb-0" for="password">Password :</label>
                              <div class="col-sm-8">
                                <input type="password" class="form-control" name="password" id="password"
                                      placeholder="Enter Your password">
                              </div>
                              <div class="col-sm-1 input-group-addon">
                                <i class="fa fa-eye-slash pt-3 togglePassword" aria-hidden="true"></i>
                              </div>
                            </div>
                            <div class="form-group row">
                              <label class="control-label col-sm-3 align-self-center mb-0" for="confirm_password">Konfirmasi
                                Password :</label>
                              <div class="col-sm-8">
                                <input type="password" class="form-control" id="confirm_password" name="password_confirmation"
                                      placeholder="Konfirmasi Password">
                              </div>
                              <div class="col-sm-1 input-group-addon">
                              <i class="fa fa-eye-slash pt-3 togglePassword" aria-hidden="true"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
              </form>
            </div>
          </div>

            
        </div> 
    </div>
@include('master.footer')

<script>
  $(document).ready(function () {
    $(".togglePassword").click(function(e){
          var input = $(this).closest('div.form-group').find('input');
          if (input.attr('type') === 'password') {
              $(this).html('<i class="far fa-eye pt-3"></i>');
              input.attr('type','text');
          }else{
              $(this).html('<i class="far fa-eye-slash pt-3"></i>');
              input.attr('type','password');
          }
        });
    $("#formStoreProfile").submit(function (e) {
      e.preventDefault();
      let form = $(this);
      let btnSubmit = form.find("[type='submit']");
      let btnSubmitHtml = btnSubmit.html();
      let url = form.attr("action");
      let data = new FormData(this);
      $.ajax({
        cache: false,
        processData: false,
        contentType: false,
        type: "POST",
        url: url,
        data: data,
        beforeSend: function () {
          btnSubmit.addClass("disabled").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...').prop("disabled", "disabled");
        },
        success: function (response) {
          let errorCreate = $('#errorCreate');
          errorCreate.css('display', 'none');
          errorCreate.find('.alert-text').html('');
          btnSubmit.removeClass("disabled").html(btnSubmitHtml).removeAttr("disabled");
          if (response.status === "success") {
            toastr.success(response.message, 'Success !');
            setTimeout(function () {
                location.reload();
              // if (response.redirect === "" || response.redirect === "reload") {
              // } else {
              //   location.href = response.redirect;
              // }
            }, 1000);
          } else {
            toastr.error((response.message ? response.message : "Please complete your form"), 'Failed !');
            if (response.error !== undefined) {
              errorCreate.removeAttr('style');
              $.each(response.error, function (key, value) {
                errorCreate.find('.alert-text').append('<span style="display: block">' + value + '</span>');
              });
            }
          }
        },
        error: function (response) {
          btnSubmit.removeClass("disabled").html(btnSubmitHtml).removeAttr("disabled");
          toastr.error(response.responseJSON.message, 'Failed !');
        }
      });
    });

    $(".image").change(function () {
      let thumb = $(this).parent().find('img');
      if (this.files && this.files[0]) {
        let reader = new FileReader();
        reader.onload = function (e) {
          thumb.attr('src', e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
      }
    });

    $("#formStore").submit(function (e) {
      e.preventDefault();
      let form = $(this);
      let btnSubmit = form.find("[type='submit']");
      let btnSubmitHtml = btnSubmit.html();
      let url = form.attr("action");
      let data = new FormData(this);
      $.ajax({
        cache: false,
        processData: false,
        contentType: false,
        type: "POST",
        url: url,
        data: data,
        beforeSend: function () {
          btnSubmit.addClass("disabled").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...').prop("disabled", "disabled");
        },
        success: function (response) {
          let errorCreate = $('#errorCreate');
          errorCreate.css('display', 'none');
          errorCreate.find('.alert-text').html('');
          btnSubmit.removeClass("disabled").html(btnSubmitHtml).removeAttr("disabled");
          if (response.status === "success") {
            toastr.success(response.message, 'Success !');
            setTimeout(function () {
              if (response.redirect === "" || response.redirect === "reload") {
                location.reload();
              } else {
                location.href = response.redirect;
              }
            }, 1000);
          } else {
            toastr.error((response.message ? response.message : "Please complete your form"), 'Failed !');
            if (response.error !== undefined) {
              errorCreate.removeAttr('style');
              $.each(response.error, function (key, value) {
                errorCreate.find('.alert-text').append('<span style="display: block">' + value + '</span>');
              });
            }
          }
        },
        error: function (response) {
          btnSubmit.removeClass("disabled").html(btnSubmitHtml).removeAttr("disabled");
          toastr.error(response.responseJSON.message, 'Failed !');
        }
      });
    });
  });
</script>
   </body>
</html>