@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">Profile</li>
      </ol>
    </nav>
  </div>

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

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

            @if($assessor->id)
            <a href="{{ route('profile-assessor-edit-view', $assessor->id) }}"
              class="btn btn-warning float-end mt-2">
              Ubah Data
            </a>
            @endif

            <h5 class="card-title text-center mt-4">Data Diri</h5>

            <div class="row mt-4">

              {{-- =======================
                  KOLOM KIRI
                  FOTO + DATA PROFILE
              ======================= --}}
              <div class="col-md-8">

                {{-- FOTO PROFIL --}}
                <div class="text-center mb-4">
                  @if ($assessor->foto)
                  <img src="{{ asset('/Data/profile_pict_assesor/' . $assessor->foto) }}"
                    class="rounded-circle img-fluid"
                    style="width:180px;height:180px;object-fit:cover;">
                  @else
                  <img src="{{ asset('/assets/img/profile-img.jpg') }}"
                    class="rounded-circle img-fluid"
                    style="width:180px;height:180px;object-fit:cover;">
                  @endif
                </div>

                {{-- DATA PROFILE --}}
                <h6 class="fw-bold mb-3">Profile Details</h6>

                @php
                $rows = [
                'Nama Lengkap' => $assessor->nama,
                'Jurusan' => $assessor->jurusan->nama_jurusan ?? '-',
                'Email' => $user->email,
                'No. HP' => $assessor->no_hp,
                'Jenis Kelamin' => $assessor->kelamin,
                'Pangkat' => $assessor->pangkat,
                'Jabatan' => $assessor->jabatan,
                'NIP / NIDN' => $assessor->nip_nidn,
                'Tempat, Tanggal Lahir' => $assessor->ttl,
                'Tempat Kerja' => $assessor->nama_pt,
                'Alamat PT' => $assessor->alamat_pt,
                'No. Telp Kantor' => $assessor->no_telp,
                'Pendidikan Terakhir' => $assessor->pendidikan_terakhir,
                'Keanggotaan' => $assessor->keanggotaan,
                'Alamat' => $assessor->alamat,
                ];
                @endphp

                @foreach($rows as $label => $value)
                <div class="row mb-2">
                  <div class="col-md-4 fw-bold">{{ $label }}</div>
                  <div class="col-md-8">{{ $value ?? '-' }}</div>
                </div>
                @endforeach

              </div>

              {{-- =======================
                  KOLOM KANAN
                  UPLOAD + CONTOH TTD
              ======================= --}}
              <div class="col-md-4">

                {{-- TOMBOL UPLOAD --}}
                <button class="btn btn-primary btn-block w-100 mb-3"
                  data-bs-toggle="modal"
                  data-bs-target="#uploadTTDModal">
                  <i class="bi bi-upload"></i> Upload Tanda Tangan
                </button>

                {{-- TANDA TANGAN AKTIF --}}
                @php
                $ttdFile = \App\Models\File_user::where('user_id', $user->id)
                ->where('jenis_file', 'gambar')
                ->latest()
                ->first();
                @endphp

                @if($ttdFile)
                <div class="card border-success mb-3">
                  <div class="card-body text-center p-3">
                    <img src="{{ route('preview-file-user', $ttdFile->id) }}"
                      class="img-fluid img-thumbnail"
                      style="max-height:100px;">
                    <small class="text-muted d-block mt-2">✓ Tanda tangan aktif</small>
                  </div>
                </div>
                @else
                <div class="alert alert-warning mb-3">
                  <small><em>Belum ada tanda tangan yang diupload</em></small>
                </div>
                @endif

                {{-- CONTOH TANDA TANGAN --}}
                <div class="alert alert-info">
                  <strong>📝 Contoh Tanda Tangan yang Benar & Salah</strong>
                  <p class="mb-2 small">
                    Pastikan tanda tangan jelas, asli, dan sesuai identitas Anda.
                  </p>

                  <div class="row text-center mt-3">
                    {{-- TTD BENAR --}}
                    <div class="col-md-6 mb-3">
                      <div class="card h-100">
                        <div class="card-body p-2">
                          <h6 class="text-success mb-2" style="font-size: 0.9rem;">
                            <i class="bi bi-check-circle"></i> Benar
                          </h6>
                          <img
                            src="{{ route('preview-ttd.assessor', 'ttd_benar.jpeg') }}"
                            alt="Contoh TTD Benar"
                            class="img-fluid border rounded"
                            style="max-height: 120px; background: #f9f9f9;">
                          <small class="d-block mt-2 text-muted">
                            Jelas & proporsional
                          </small>
                        </div>
                      </div>
                    </div>

                    {{-- TTD SALAH --}}
                    <div class="col-md-6 mb-3">
                      <div class="card h-100">
                        <div class="card-body p-2">
                          <h6 class="text-danger mb-2" style="font-size: 0.9rem;">
                            <i class="bi bi-x-circle"></i> Salah
                          </h6>
                          <img
                            src="{{ route('preview-ttd.assessor', 'ttd_salah.jpeg') }}"
                            alt="Contoh TTD Salah"
                            class="img-fluid border rounded"
                            style="max-height: 120px; background: #f9f9f9;">
                          <small class="d-block mt-2 text-muted">
                            Terlalu kecil/keruh
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>

              </div>

            </div>

          </div>
        </div>

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

</main>

{{-- MODAL UPLOAD TTD --}}
<div class="modal fade" id="uploadTTDModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Upload Tanda Tangan</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <form method="POST"
        action="{{ route('upload-file-user.assessor') }}"
        enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="jenis_file" value="gambar">

        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Pilih File</label>
            <input type="file"
              class="form-control"
              name="signature_file"
              accept="image/*"
              required>
            <small class="text-muted">JPEG / PNG / JPG | Max 1 MB</small>
          </div>

          <div id="ttdPreview"
            class="border rounded p-3 text-center">
            <small class="text-muted">Belum ada file dipilih</small>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button class="btn btn-primary" type="submit">Upload</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  document.querySelector('input[name="signature_file"]')?.addEventListener('change', e => {
    const preview = document.getElementById('ttdPreview');
    if (e.target.files[0]) {
      const reader = new FileReader();
      reader.onload = ev => {
        preview.innerHTML = `<img src="${ev.target.result}" class="img-fluid" style="max-height:200px">`;
      };
      reader.readAsDataURL(e.target.files[0]);
    }
  });
</script>

@endsection