@extends('layout.assessor')
@section('content')
<main id="main" class="main">

  <div class="pagetitle">
    <h1>Profile</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/assessor/dashboard">Home</a></li>
        <li class="breadcrumb-item"><a href="/assessor/profile-view-assesor">Profile</a></li>
        <li class=" breadcrumb-item active">Edit</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->

  <section class="section profile">
    <div class="row justify-content-center">

      <div class="col-xl-11">

        <div class="card">
          <div class="card-body pt-3">

            <h5 class="card-title center" align="center">Ubah Data {{ $assessor->id }}</h5>
            <div class="tab-content pt-2">

              <div class="tab-pane fade show active profile-edit pt-3" id="profile-edit">


                <!-- Profile Edit Form -->
                <form method="POST" action="{{ route('profile-edit-assessor', $assessor->id) }}" enctype="multipart/form-data">
                  @csrf
                  <div class="row mb-3">
                    <label for="foto" class="col-md-4 col-lg-3 col-form-label">Foto Profil</label>

                    <div class="col-md-8 col-lg-9">
                      <img id="fotoPreview"
                        src="{{ $assessor->foto ? asset('Data/profile_pict_assesor/' . $assessor->foto) : asset('assets/default_profile.png') }}"
                        alt="Preview Foto"
                        class="mt-3"
                        style="max-width: 180px; border-radius: 8px;">
                      <input type="file" class="form-control-file" id="foto" name="foto" accept="image/*">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="nama" class="col-md-4 col-lg-3 col-form-label">Nama Assessor</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" class="form-control" id="nama" name="nama" value="{{ $assessor->nama }}" required>
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">Jenis Kelamin</label>
                    <div class="col-md-8 col-lg-9">
                      <select name="kelamin" class="form-select">
                        <option value="">- Pilih -</option>
                        <option value="laki-laki" {{ $assessor->kelamin=='laki-laki'?'selected':'' }}>Laki-laki</option>
                        <option value="perempuan" {{ $assessor->kelamin=='perempuan'?'selected':'' }}>Perempuan</option>
                      </select>
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">Pangkat/Golongan</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" name="pangkat" class="form-control" value="{{ $assessor->pangkat }}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">Jabatan</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" name="jabatan" class="form-control" value="{{ $assessor->jabatan }}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">NIP / NIDN</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" name="nip_nidn" class="form-control" value="{{ $assessor->nip_nidn }}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">Tempat Tanggal Lahir</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" name="ttl" class="form-control" value="{{ $assessor->ttl }}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">Perusahaan Bekerja Sekarang</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" name="nama_pt" class="form-control" value="{{ $assessor->nama_pt }}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">Alamat PT</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" name="alamat_pt" class="form-control" value="{{ $assessor->alamat_pt }}">
                    </div>
                  </div>


                  <div class="row mb-3">
                    <label for="no_hp" class="col-md-4 col-lg-3 col-form-label">Nomor Telepon</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="no_hp" type="text" class="form-control" id="no_hp" value="{{ $assessor->no_hp }}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">No Telp Kantor</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" name="no_telp" class="form-control" value="{{ $assessor->no_telp }}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">Pendidikan Terakhir</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" name="pendidikan_terakhir" class="form-control" value="{{ $assessor->pendidikan_terakhir }}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label class="col-md-4 col-lg-3 col-form-label">Keanggotaan</label>
                    <div class="col-md-8 col-lg-9">
                      <textarea name="keanggotaan" class="form-control" rows="3">{{ $assessor->keanggotaan }}</textarea>
                      <small class="text-muted">
                        Contoh: isi keterangan terkait keanggotaan profesional, organisasi, atau asosiasi yang relevan.
                      </small>
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="alamat" class="col-md-4 col-lg-3 col-form-label">Alamat</label>
                    <div class="col-md-8 col-lg-9">
                      <input type="text" class="form-control" id="alamat" name="alamat" value="{{ $assessor->alamat }}">
                    </div>
                  </div>


                  <!-- Modal -->
                  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLongTitle">Peringatan!</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          Apakah Kamu Yakin ingin mengirim?
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="text-end">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">Submit</button>
                  </div>
                </form><!-- End Profile Edit Form -->

              </div>

            </div><!-- End Bordered Tabs -->

          </div>
        </div>

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

</main><!-- End #main -->

<script>
  document.getElementById('foto').addEventListener('change', function(event) {
    const reader = new FileReader();
    reader.onload = function() {
      document.getElementById('fotoPreview').src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
  });
</script>

@endsection