@extends('layouts.app')

@section('content')
<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="{{asset('')}}/assets/img/photos/bg4.jpg">
  <div class="container py-10 py-md-10" data-cue="slideInLeft" data-duration="1500">
      <h2 class="display-1 mb-3 text-center text-white">Profile</h2>
      
  </div>
</section>

<section id="sectionLayanan" class="wrapper bg-pale-ash p-4 px-13 pb-16">
  <div class="row">
    
    <div class="col-md-3">
      <div class="card">
        <div class="card-body">
          <center>
            <img src="https://www.suarasurabaya.net/wp-content/uploads/2021/08/google-6054007_960_720.png" class="avatar bg-primary text-white w-15 h-15">
            <br>
            <a type="button" class="nav-link" onclick="showFormProfile('open')"><i class="fa fa-edit" ></i> Edit Profile</a>
            <h3>{{$profile->nama_lengkap}}</h3>
            ({{$profile->no_ktp}})
          </center>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="card">
        <div class="card-body">
        
          {{-- detail profile --}}
          <div id="detail_container">
            <ul class="nav nav-tabs nav-tabs-basic">
              <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab_informasi_umum">Informasi Umum</a> </li>
              <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab_kelengkapan_dokumen">Kelengkapan Dokumen</a> </li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane fade show active" id="tab_informasi_umum">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-control mb-4">
                      <h5>Nomor KTP </h5>
                      {{$profile->no_ktp}}
                    </div>
    
                    <div class="form-control mb-4">
                      <h5>Nama Lengkap </h5>
                      {{$profile->nama_lengkap}}
                    </div>
    
                    <div class="form-control mb-4">
                      <h5>Tempat Lahir </h5>
                      {{$profile->tempat_lahir}}
                    </div>
    
                    <div class="form-control mb-4">
                      <h5>Tanggal Lahir </h5>
                      {{$profile->tanggal_lahir}}
                    </div>
    
                    <div class="form-control mb-4">
                      <h5>Alamat </h5>
                      {!!$profile->no_ktp!!}
                    </div>
                  </div>
    
                  <div class="col-md-6">
                    
                    <div class="form-control mb-4">
                      <h5>Telepon </h5>
                      {{$profile->telepon}}
                    </div>
                    <div class="form-control mb-4">
                      <h5>Nomor HP </h5>
                      {{$profile->no_hp}}
                    </div>
                    <div class="form-control mb-4">
                      <h5>Email </h5>
                      {{$profile->email}}
                    </div>
                    <div class="form-control mb-4">
                      <h5>Kewarganegaraan</h5>
                      {{$profile->kewarganegaraan}}
                    </div>
                  </div>
                </div>
              </div>
              <!--/.tab-pane -->
              
              <div class="tab-pane fade" id="tab_kelengkapan_dokumen">
                <div class="form-control mb-4">
                  <h5>File KTP</h5>
                  Lihat Dokumen yang sudah diupload
                  @if (isset($dokumen['ktp']))
                    <br><a target="blank" href="{{$dokumen['ktp']}}" class="hover more text-blue">Buka Dokumen KTP.</a>
                  @endif
                  
                </div>
              </div>
              <!--/.tab-pane -->

            </div>
          </div>
          
          {{-- Form update profile --}}
          <div id="form_profile_container">
            <a class="float-right nav-link" onclick="showFormProfile('close')"><i class="fa fa-times" aria-hidden="true"></i></a>
            <form id="form_profile" enctype="multipart/form-data">
              @csrf
              <ul class="nav nav-tabs nav-tabs-basic">
                <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#form_informasi_umum">Informasi Umum</a> </li>
                <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#form_dokumen">Kelengkapan Dokumen</a> </li>
              </ul>

              <div class="tab-content mt-0 mt-md-5">
                <div class="tab-pane fade show active" id="form_informasi_umum">
                  <div class="form-control mb-4">
                    <label for="jenis_url">Nomor KTP</label>
                    <input type="number" id="no_ktp" name="no_ktp" class="form-control" value="{{$profile->no_ktp}}">
                  </div>
    
                  <div class="form-control mb-4">
                    <label for="jenis_url">Nama Lengkap</label>
                    <input type="text" id="nama_lengkap" name="nama_lengkap" class="form-control" value="{{$profile->nama_lengkap}}">
                  </div>
    
                  <div class="form-control mb-4">
                    <label for="jenis_url">Tempat Lahir</label>
                    <input type="text" id="tempat_lahir" name="tempat_lahir" class="form-control" value="{{$profile->tempat_lahir}}">
                  </div>
    
                  <div class="form-control mb-4">
                    <label for="jenis_url">Tanggal Lahir</label>
                    <input type="date" id="tanggal_lahir" name="tanggal_lahir" class="form-control" value="{{$profile->tanggal_lahir}}">
                  </div>
                  
                  <div class="form-control mb-4">
                    <label for="jenis_url">Alamat</label>
                    <textarea name="alamat" id="alamat" class="form-control texteditor">
                      {!!$profile->alamat!!}
                    </textarea>
                  </div>
    
                  <div class="form-control mb-4">
                    <label for="jenis_url">Telepon</label>
                    <input type="number" id="telepon" name="telepon" class="form-control" value="{{$profile->telepon}}">
                  </div>
    
                  <div class="form-control mb-4">
                    <label for="jenis_url">Nomor HP</label>
                    <input type="number" id="no_hp" name="no_hp" class="form-control" value="{{$profile->no_hp}}">
                  </div>
                  
                  <div class="form-control mb-4">
                    <label for="jenis_url">Email</label>
                    <input type="text" id="email" name="email" class="form-control" value="{{$profile->email}}">
                  </div>
    
                  <div class="form-control mb-4">
                    <label for="jenis_url">Kewarganegaraan</label>
                    <input type="text" id="kewarganegaraan" name="kewarganegaraan" class="form-control" value="{{$profile->kewarganegaraan}}">
                  </div>
                </div>
                <!--/.tab-pane -->
                <div class="tab-pane fade" id="form_dokumen">
                  <div class="form-control mb-4">
                    <label for="jenis_url">KTP / Passport</label>
                    <input type="file" id="file_ktp" name="file_ktp" class="form-control">
                    
                    @if (isset($dokumen['ktp']))
                       Jika anda tidak ingin memperbaharui KTP/Passport, silahkan abaikan field ini.
                       <br>Klik link berikut ini untuk melihat File yang sudah anda upload.
                       <br><a target="blank" href="{{$dokumen['ktp']}}" class="hover more text-blue">Buka Dokumen yang sudah tersimpan.</a> 
                    @endif
                  </div>


                </div>
                <!--/.tab-pane -->
              </div>

              

              {{-- <button type="button" class="btn btn-lg btn-blue" onclick="simpanProfile()">Simpan Perubahan</button> --}}
              <button type="submit" class="btn btn-lg btn-blue">Simpan Perubahan</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  
</section>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script>
  $(document).ready(function() {
    $("#form_profile_container").hide()
    
    $('.texteditor').summernote({
        tabsize: 1,
        height: 300,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link']],
        ]
    });
  });

  function showFormProfile(action)
  {
    if(action == "open"){
      $("#detail_container").hide()
      $("#form_profile_container").show()
    }else{
      $("#form_profile_container").hide()
      $("#detail_container").show()
    }
     
  }

  $("#form_profile").on("submit", function (event) {
    event.preventDefault();
    // swal.showLoading();
    let formData = new FormData(this);
    $.ajax({
        type:'POST',
        url: "{{route('user.profile.update')}}",
        data: formData,
        cache:false,
        contentType: false,
        processData: false,
        success: (data) => {
            this.reset();
            let status = data.result.status;  
            let title_status = data.result.title_status;  
            let keterangan_status = data.result.keterangan_status;  
            let redirect = data.result.redirect;  
            
            showSwal(status,title_status,keterangan_status);
            location.reload();
        },
        error: function(data){
            alert('File tidak dapat diupload');
        }
    });
  });
</script>
@endsection