@extends('layout.admin')
@section('content')

<style>
  /* Memberikan ruang agar dropdown tidak terpotong saat data sedikit */
  .table-responsive {
    min-height: 350px;
    padding-bottom: 100px;
    /* Memberi ruang tambahan di bawah tabel */
    overflow: visible !important;
    /* Memaksa menu terlihat keluar batas */
  }
</style>

<main id="main" class="main">

  <div class="pagetitle">
    <h1>Data Mahasiswa RPL</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
        <li class="breadcrumb-item active">Data Mahasiswa RPL</li>
      </ol>
  </div><!-- End Page Title -->

  <!-- Flash Message -->
  @if($message = Session::get('success'))
  <div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="bi bi-check-circle me-1"></i>
    {{ $message }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  @endif

  <section class="section">
    <div class="row">

      <div class="col-lg-12">


        <div class="card">
          <div class="card-body">
            <h5 class="card-title center" align="center">Data Mahasiswa RPL</h5>
            <!-- Default Table -->

            <div class="table-container">
              <form action="{{ route('export.ajuan.rpl') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-success mb-3">
                  <i class="bi bi-file-earmark-word"></i>
                  Export Rekap RPL
                </button>
                <table class="table-admin table-bordered">
                  <thead>
                    <tr>
                      <th class="admin-tabb"><input type="checkbox" id="checkAll"></th>
                      <th class="admin-tabb" scope="col">No</th>
                      <th class="admin-tabb" scope="col">Nama</th>
                      <th class="admin-tabb" scope="col">Jurusan</th>
                      <th class="admin-tabb" scope="col">Periode</th>
                      <th class="admin-tabb" scope="col">Jenjang</th>
                      <th class="admin-tabb" scope="col">Status</th>
                      <th class="admin-tabb" scope="col">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($users_camaba as $index => $user)
                    <tr>
                      <td class="admin-tabb">
                        @if($user->calon_mahasiswa)
                        <input type="checkbox"
                          class="camaba-checkbox"
                          name="camaba_ids[]"
                          value="{{ $user->calon_mahasiswa->id }}">
                        @endif
                      </td>
                      <td class="admin-tabb">{{ $index + 1 }}</td>
                      <td class="admin-tabb">
                        @if($user->calon_mahasiswa)
                        {{ $user->calon_mahasiswa->nama }}
                        @else
                        Data tidak tersedia
                        @endif
                      </td>
                      <td class="admin-tabb">
                        @if($user->calon_mahasiswa && $user->calon_mahasiswa->jurusan)
                        {{ $user->calon_mahasiswa->jurusan->nama_jurusan }}
                        @else

                        @endif
                      </td>
                      <td class="admin-tabb">
                        @if($user->calon_mahasiswa && $user->calon_mahasiswa->periode)
                        {{ $user->calon_mahasiswa->periode->tahun_ajaran }}
                        @else
                        Data tidak tersedia
                        @endif
                      </td>

                      <td class="admin-tabb">
                        @if($user->calon_mahasiswa && $user->calon_mahasiswa->jurusan)
                        {{ $user->calon_mahasiswa->jurusan->jenjang }}
                        @else
                        Data tidak tersedia
                        @endif
                      </td>
                      <td class="admin-tabb">
                        @php
                        $status = $user->calon_mahasiswa->assessment->rpl_status ?? null;
                        @endphp

                        @if($status)
                        <span class="badge 
                        @if($status === 'self-assessment') bg-warning
                        @elseif($status === 'penilaian assessor') bg-info
                        @elseif($status === 'selesai') bg-success
                        @else bg-secondary
                        @endif
                      ">
                          {{ ucfirst($status) }}
                        </span>
                        @else
                        <span class="badge bg-secondary">Belum Ada</span>
                        @endif
                      </td>

                      <td class="admin-tabb">
                        <div class="btn-group" role="group">

                          <!-- Edit -->
                          <button type="button"
                            class="btn btn-warning btn-sm btn-edit"
                            data-id="{{ $user->calon_mahasiswa->id ?? '' }}"
                            data-nama="{{ $user->calon_mahasiswa->nama ?? '' }}"
                            data-agama="{{ $user->calon_mahasiswa->agama ?? '' }}"
                            data-kantor="{{ $user->calon_mahasiswa->kantor ?? '' }}"
                            data-jabatan="{{ $user->calon_mahasiswa->jabatan ?? '' }}"
                            data-status-kerja="{{ $user->calon_mahasiswa->status_kerja ?? '' }}"
                            data-alamat-kantor="{{ $user->calon_mahasiswa->alamat_kantor ?? '' }}"
                            data-bs-toggle="modal"
                            data-bs-target="#editModal">
                            Edit
                          </button>

                          <!-- Delete -->
                          <button type="button"
                            class="btn btn-danger btn-sm btn-delete"
                            data-id="{{ $user->id }}"
                            data-name="{{ $user->calon_mahasiswa->nama ?? 'User' }}"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteModal">
                            Delete
                          </button>

                          <!-- Detail Progress -->
                          <a href="{{ route('admin.detail-mahasiswa', $user->calon_mahasiswa->id) }}"
                            class="btn btn-info btn-sm">
                            Detail Progress
                          </a>

                          <!-- Dropdown Export -->
                          <div class="btn-group">
                            <button type="button"
                              class="btn btn-primary btn-sm dropdown-toggle"
                              data-bs-boundary="viewport"
                              data-bs-toggle="dropdown">
                              Export
                            </button>
                            @php
                            $assessment = $user->calon_mahasiswa->assessment ?? null;
                            @endphp
                            <ul class="dropdown-menu dropdown-menu-end">
                              @if($user->calon_mahasiswa)
                              <li>
                                <a class="dropdown-item"
                                  href="{{ route('export.f02.admin', $user->calon_mahasiswa->id) }}">
                                  <i class="bi bi-file-word me-1"></i> Export Word F02
                                </a>
                              </li>
                              <li>
                                <a href="#"
                                  class="dropdown-item btn-export-f03"
                                  data-id="{{ $user->calon_mahasiswa->id }}" data-nama="{{ $user->calon_mahasiswa->nama }}">
                                  <i class="bi bi-file-word me-1"></i> Export Word F03
                                </a>
                              </li>
                              <li>
                                <a class="dropdown-item"
                                  href="{{ route('export.f07.admin', $user->calon_mahasiswa->id) }}">
                                  <i class="bi bi-file-word me-1"></i> Export Word F07
                                </a>
                              </li>
                              @endif
                              @if($assessment)

                              @php
                              $assessors = collect([
                              $assessment->assessor_id_1,
                              $assessment->assessor_id_2,
                              $assessment->assessor_id_3,
                              ])->filter(); // buang null
                              @endphp

                              @foreach($assessors as $index => $assessorId)
                              <li>
                                <a class="dropdown-item"
                                  href="{{ route('export.f04.admin', $assessorId) }}">
                                  <i class="bi bi-file-word me-1"></i>
                                  Export Word F04 (Assessor {{ $index + 1 }})
                                </a>
                              </li>
                              @endforeach

                              @endif

                              {{-- fallback --}}
                              @if(!$user->calon_mahasiswa && !$assessment)
                              <li>
                                <span class="dropdown-item text-muted">
                                  Data Mahasiswa Tidak Tersedia
                                </span>
                              </li>
                              @endif
                            </ul>
                          </div>

                        </div>
                      </td>
                    </tr>

                    @endforeach

                  </tbody>
                </table>
              </form>
            </div>
            <!-- End Default Table Example -->

          </div>
        </div>


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

  <!-- Modal Delete -->
  <div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

        <form id="deleteForm" method="POST">
          @csrf
          @method('DELETE')

          <div class="modal-header">
            <h5 class="modal-title">Konfirmasi Hapus</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>

          <div class="modal-body">
            <p>
              Apakah Anda yakin ingin menghapus
              <strong id="deleteUserName"></strong>?
            </p>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
              Batal
            </button>
            <button type="submit" class="btn btn-danger">
              Ya, Hapus
            </button>
          </div>

        </form>

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

  <!-- Modal Edit Data Mahasiswa -->
  <div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">

        <form id="editForm" method="POST">
          @csrf
          @method('PUT')

          <div class="modal-header">
            <h5 class="modal-title">Edit Data Mahasiswa</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>

          <div class="modal-body">
            <div class="row">
              <!-- Agama -->
              <div class="col-md-6 mb-3">
                <label for="agama" class="form-label">Agama</label>
                <input type="text" class="form-control" id="agama" name="agama" placeholder="Masukkan agama">
              </div>

              <!-- Kantor -->
              <div class="col-md-6 mb-3">
                <label for="kantor" class="form-label">Nama Kantor</label>
                <input type="text" class="form-control" id="kantor" name="kantor" placeholder="Masukkan nama kantor">
              </div>

              <!-- Jabatan -->
              <div class="col-md-6 mb-3">
                <label for="jabatan" class="form-label">Jabatan</label>
                <input type="text" class="form-control" id="jabatan" name="jabatan" placeholder="Masukkan jabatan">
              </div>

              <!-- Status Kerja -->
              <div class="col-md-6 mb-3">
                <label for="statusKerja" class="form-label">Status Kerja</label>
                <select class="form-select" id="statusKerja" name="status_kerja">
                  <option value="">-- Pilih Status Kerja --</option>
                  <option value="pegawai negri sipil">Pegawai Negri Sipil</option>
                  <option value="pegawai tetap">Pegawai Tetap</option>
                  <option value="pegawai honorer">Pegawai Honorer</option>
                  <option value="paruh waktu">Paruh Waktu</option>
                  <option value="lainnya">Lainnya</option>
                </select>
              </div>

              <!-- Input Lainnya (hidden by default) -->
              <div class="col-md-12 mb-3" id="statusKerjaLainnyaGroup" style="display: none;">
                <label for="statusKerjaLainnya" class="form-label">Sebutkan Status Kerja Lainnya</label>
                <input type="text" class="form-control" id="statusKerjaLainnya" name="status_kerja_lainnya" placeholder="Masukkan status kerja lainnya">
              </div>

              <!-- Alamat Kantor -->
              <div class="col-md-12 mb-3">
                <label for="alamatKantor" class="form-label">Alamat Kantor</label>
                <textarea class="form-control" id="alamatKantor" name="alamat_kantor" rows="3" placeholder="Masukkan alamat kantor"></textarea>
              </div>
            </div>
          </div>

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

        </form>

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



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

<div class="modal fade" id="loadingModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content text-center p-4">
      <h5>Sedang memproses F03</h5>
      <div class="spinner-border text-primary mt-3"></div>
      <p class="mt-2">Mohon tunggu, jangan tutup halaman</p>
    </div>
  </div>
</div>

<script>
  document.getElementById('checkAll').addEventListener('change', function() {
    document.querySelectorAll('.camaba-checkbox')
      .forEach(cb => cb.checked = this.checked);
  });

  // Handle Delete Modal
  document.querySelectorAll('.btn-delete').forEach(btn => {
    btn.addEventListener('click', function() {
      const userId = this.dataset.id;
      const userName = this.dataset.name;

      const form = document.getElementById('deleteForm');
      form.action = `/admin/delete-user/${userId}`;

      document.getElementById('deleteUserName').innerText = userName;
    });
  });

  // Handle Edit Modal
  document.querySelectorAll('.btn-edit').forEach(btn => {
    btn.addEventListener('click', function() {
      const calonMahasiswaId = this.dataset.id;
      const nama = this.dataset.nama;
      const agama = this.dataset.agama;
      const kantor = this.dataset.kantor;
      const jabatan = this.dataset.jabatan;
      const statusKerja = this.dataset.statusKerja;
      const alamatKantor = this.dataset.alamatKantor;

      // Set form values
      document.getElementById('agama').value = agama || '';
      document.getElementById('kantor').value = kantor || '';
      document.getElementById('jabatan').value = jabatan || '';
      document.getElementById('alamatKantor').value = alamatKantor || '';

      // Handle status kerja dropdown
      const statusKerjaSelect = document.getElementById('statusKerja');
      const predefinedOptions = ['pegawai negri sipil', 'pegawai tetap', 'pegawai honorer', 'paruh waktu'];

      if (predefinedOptions.includes(statusKerja)) {
        statusKerjaSelect.value = statusKerja;
        document.getElementById('statusKerjaLainnyaGroup').style.display = 'none';
      } else if (statusKerja) {
        statusKerjaSelect.value = 'lainnya';
        document.getElementById('statusKerjaLainnya').value = statusKerja;
        document.getElementById('statusKerjaLainnyaGroup').style.display = 'block';
      } else {
        statusKerjaSelect.value = '';
        document.getElementById('statusKerjaLainnyaGroup').style.display = 'none';
      }

      // Set form action
      const form = document.getElementById('editForm');
      form.action = `/admin/update-mahasiswa/${calonMahasiswaId}`;
    });
  });

  // Handle Status Kerja dropdown change
  document.getElementById('statusKerja').addEventListener('change', function() {
    const lainnyaGroup = document.getElementById('statusKerjaLainnyaGroup');
    if (this.value === 'lainnya') {
      lainnyaGroup.style.display = 'block';
    } else {
      lainnyaGroup.style.display = 'none';
    }
  });

  document.querySelectorAll('.btn-export-f03').forEach(btn => {

    btn.addEventListener('click', async function(e) {

      e.preventDefault();

      const camabaId = this.dataset.id;
      const namaCamaba = this.dataset.nama;

      const modal = new bootstrap.Modal(
        document.getElementById('loadingModal')
      );

      modal.show();

      try {

        const res = await fetch(`/admin/export-f03/generate/${camabaId}`, {
          method: 'POST',
          headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
          }
        });

        const data = await res.json();

        modal.hide();

        if (data.status === 'ready') {

          const token = data.token;

          window.location.href =
            `/download-f03/${token}?nama=${encodeURIComponent(namaCamaba)}`;

        }

      } catch (err) {

        modal.hide();
        alert('Gagal generate F03');

      }

    });

  });
</script>

@endsection