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

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

  <div class="pagetitle">
    <h1>Kelola Sub-CPMK</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('super.dashboard') }}">Home</a></li>
        <li class="breadcrumb-item"><a href="{{ route('super.kelola-matkul-table') }}">List Mata Kuliah</a></li>
        <li class="breadcrumb-item"><a href="{{ route('super.kelola-cpmk-table', $cpmk->matkul_id) }}">Kelola CPMK</a></li>
        <li class="breadcrumb-item active">Kelola Sub-CPMK</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->

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

        <div class="card">
          <div class="card-body">
            <h5 class="card-title text-center">Kelola Sub-CPMK</h5>
            
            <div class="alert alert-info">
              <strong>Mata Kuliah:</strong> {{ $cpmk->matkul->nama_matkul }} ({{ $cpmk->matkul->kode_matkul }})<br>
              <strong>Induk CPMK:</strong> {{ $cpmk->kode_cpmk }} - {{ $cpmk->penjelasan }}
            </div>

            @if(session('success'))
                <div class="alert alert-success mt-2">
                    {{ session('success') }}
                </div>
            @endif

            <button class="btn btn-primary mb-3 float-end" data-bs-toggle="modal" data-bs-target="#tambahModal" data-toggle="modal" data-target="#tambahModal">
                <i class="bi bi-plus-circle"></i> Tambah Sub-CPMK
            </button>

            <!-- Default Table -->
            <table class="table table-bordered align-middle">
              <thead>
                <tr>
                  <th width="50">No</th>
                  <th width="150">Kode Sub-CPMK</th>
                  <th>Penjelasan Sub-CPMK</th>
                  <th width="80" class="text-center">Aksi</th>
                </tr>
              </thead>
              <tbody>
                @forelse($subCpmks as $index => $subCpmk)
                <tr>
                  <td>{{ $index + 1 }}</td>
                  <td>{{ $subCpmk->kode_sub_cpmk }}</td>
                  <td>{{ $subCpmk->penjelasan }}</td>
                  <td class="text-center">
                      <!-- Edit Sub-CPMK Button -->
                      <a type="button" class="bi-pencil-square fs-2 text-warning me-2" data-bs-toggle="modal" data-bs-target="#editModal{{ $subCpmk->id }}" data-toggle="modal" data-target="#editModal{{ $subCpmk->id }}" title="Edit Sub-CPMK"></a>

                      <!-- Trigger Delete Modal -->
                      <a type="button" class="bi-trash fs-2 text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $subCpmk->id }}" data-toggle="modal" data-target="#deleteModal{{ $subCpmk->id }}"></a>

                      <!-- Edit Modal -->
                      <div class="modal fade" id="editModal{{ $subCpmk->id }}" tabindex="-1" role="dialog" aria-labelledby="editModalLabel{{ $subCpmk->id }}" 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="editModalLabel{{ $subCpmk->id }}">Edit Sub-CPMK</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <form method="POST" action="{{ route('super.update-sub-cpmk', $subCpmk->id) }}">
                              @csrf
                              @method('PUT')
                              <input type="hidden" name="current_cpmk_id" value="{{ $cpmk->id }}">
                              <div class="modal-body text-start">
                                <div class="col-12 mb-3">
                                  <label for="kode_sub_cpmk{{ $subCpmk->id }}" class="form-label">Kode Sub-CPMK</label>
                                  <input type="text" name="kode_sub_cpmk" class="form-control" id="kode_sub_cpmk{{ $subCpmk->id }}" value="{{ $subCpmk->kode_sub_cpmk }}" required>
                                </div>
                                <div class="col-12 mb-3">
                                  <label for="penjelasan{{ $subCpmk->id }}" class="form-label">Penjelasan Sub-CPMK</label>
                                  <textarea name="penjelasan" class="form-control" id="penjelasan{{ $subCpmk->id }}" rows="4" required>{{ $subCpmk->penjelasan }}</textarea>
                                </div>
                                <div class="col-12 mb-3">
                                  <label class="form-label font-weight-bold">Hubungkan ke CPMK (Mata Kuliah Ini)</label>
                                  <div class="border rounded p-3" style="max-height: 180px; overflow-y: auto; background-color: #f8f9fa;">
                                    @foreach($allCpmk as $mCpmk)
                                      <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="cpmk_ids[]" value="{{ $mCpmk->id }}" id="editSubCpmk_{{ $subCpmk->id }}_cpmk_{{ $mCpmk->id }}"
                                          {{ $subCpmk->cpmk->contains($mCpmk->id) ? 'checked' : '' }}>
                                        <label class="form-check-label text-wrap" for="editSubCpmk_{{ $subCpmk->id }}_cpmk_{{ $mCpmk->id }}">
                                          <strong class="text-primary">{{ $mCpmk->kode_cpmk }}</strong>: {{ $mCpmk->penjelasan }}
                                        </label>
                                      </div>
                                    @endforeach
                                  </div>
                                  <small class="text-muted">Centang untuk menghubungkan Sub-CPMK ini ke CPMK lain.</small>
                                </div>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>

                      <!-- Delete Modal -->
                      <div class="modal fade" id="deleteModal{{ $subCpmk->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">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 text-start">
                                Apakah Anda yakin ingin menghapus Sub-CPMK <strong>{{ $subCpmk->kode_sub_cpmk }}</strong> ini?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <form action="{{ route('super.delete-sub-cpmk', $subCpmk->id) }}" method="POST" style="display: inline;">
                                  @csrf
                                  @method('DELETE')
                                  <button type="submit" class="btn btn-danger">Hapus</button>
                                </form>
                            </div>
                            </div>
                        </div>
                      </div>
                  </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="text-center">Belum ada data Sub-CPMK untuk CPMK ini.</td>
                </tr>
                @endforelse
              </tbody>
            </table>

            <!-- Add Sub-CPMK Modal -->
            <div class="modal fade" id="tambahModal" tabindex="-1" aria-labelledby="tambahModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="tambahModalLabel">Tambah Sub-CPMK</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body text-start">
                    <form id="tambahForm" method="POST" action="{{ route('super.add-data-sub-cpmk') }}">
                      @csrf
                      <input type="hidden" name="cpmk_id" value="{{ $cpmk->id }}">
                      <div class="col-12 mb-3">
                        <label for="kode_sub_cpmk" class="form-label">Kode Sub-CPMK</label>
                        <input type="text" name="kode_sub_cpmk" class="form-control" id="kode_sub_cpmk" required placeholder="Contoh: Sub-CPMK 1.1">
                      </div>
                      <div class="col-12 mb-3">
                        <label for="penjelasan" class="form-label">Penjelasan Sub-CPMK</label>
                        <textarea name="penjelasan" class="form-control" id="penjelasan" rows="4" required placeholder="Tulis rincian kemampuan akhir yang diharapkan..."></textarea>
                      </div>
                      <div class="col-12 mb-3">
                        <label class="form-label font-weight-bold">Hubungkan juga ke CPMK lain (Opsional)</label>
                        <div class="border rounded p-3" style="max-height: 180px; overflow-y: auto; background-color: #f8f9fa;">
                          @foreach($allCpmk as $mCpmk)
                            <div class="form-check mb-2">
                              <input class="form-check-input" type="checkbox" name="cpmk_ids[]" value="{{ $mCpmk->id }}" id="addSubCpmk_{{ $cpmk->id }}_cpmk_{{ $mCpmk->id }}"
                                {{ $mCpmk->id == $cpmk->id ? 'checked' : '' }}>
                              <label class="form-check-label text-wrap" for="addSubCpmk_{{ $cpmk->id }}_cpmk_{{ $mCpmk->id }}">
                                <strong class="text-primary">{{ $mCpmk->kode_cpmk }}</strong>: {{ $mCpmk->penjelasan }}
                              </label>
                            </div>
                          @endforeach
                        </div>
                        <small class="text-muted">Secara default akan terhubung ke CPMK saat ini.</small>
                      </div>
                      <button type="submit" class="btn btn-primary float-end me-3">Submit</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

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

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