{{-- resources/views/admin/akademik/kurikulum/kelola_tp.blade.php --}}

<div class="card border-0 shadow-sm rounded-4">
    <div class="card-header d-flex justify-content-between align-items-center py-3 bg-white">
        <div>
            <h5 class="fw-bold text-dark m-0"><i class="fas fa-list-ol text-primary me-2"></i> B. TUJUAN PEMBELAJARAN (TP)</h5>
            <small class="text-muted">Rincian Tujuan Pembelajaran dari masing-masing Elemen CP.</small>
        </div>
        <button class="btn btn-primary btn-round shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahTP">
            <i class="fa fa-plus me-1"></i> Tambah Tujuan
        </button>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-striped table-hover mb-0 align-middle">
                <thead class="table-dark text-center align-middle">
                    <tr>
                        <th rowspan="2" width="5%" class="border-secondary border-end">No</th>
                        <th rowspan="2" width="20%" class="border-secondary border-end text-start">Elemen CP</th>
                        <th colspan="2" width="60%" class="border-secondary border-end">Rincian Tujuan Pembelajaran</th>
                        <th rowspan="2" width="15%" class="border-secondary">Aksi</th>
                    </tr>
                    <tr>
                        <th width="5%" class="bg-secondary text-white border-secondary border-end">No</th>
                        <th class="bg-secondary text-white border-secondary border-end text-start">Teks Tujuan Pembelajaran</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($cps as $index => $cp)
                        @php 
                            $tps = $cp->tps; 
                            $rowspan = $tps->count() > 0 ? $tps->count() : 1; 
                        @endphp
                        
                        @if($tps->count() > 0)
                            @foreach($tps as $tp)
                            <tr>
                                @if($loop->first)
                                    <td rowspan="{{ $rowspan }}" class="text-center align-middle border-secondary border-end fw-bold">{{ $index + 1 }}</td>
                                    <td rowspan="{{ $rowspan }}" class="fw-bold text-dark align-top border-secondary border-end p-3">{{ $cp->elemen }}</td>
                                @endif
                                
                                <td class="text-center align-top border-secondary border-end fw-bold text-secondary">{{ $loop->iteration }}</td>
                                <td class="align-top border-secondary border-end p-3">{!! nl2br(e($tp->tujuan_teks)) !!}</td>
                                <td class="text-center align-middle border-secondary">
                                    <div class="btn-group" role="group">
                                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalEditTP-{{ $tp->id }}" title="Edit TP">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <form action="{{ route('admin.kurikulum.tp.destroy', $tp->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus Tujuan Pembelajaran ini?');">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm" title="Hapus TP">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        @else
                            <tr>
                                <td class="text-center align-middle border-secondary border-end fw-bold">{{ $index + 1 }}</td>
                                <td class="fw-bold text-dark align-top border-secondary border-end p-3">{{ $cp->elemen }}</td>
                                <td colspan="3" class="text-muted text-center py-4 border-secondary fst-italic">Belum ada Tujuan Pembelajaran yang diinput untuk Elemen ini.</td>
                            </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted border-secondary">
                                <i class="fa fa-folder-open fa-3x mb-3 opacity-25"></i><br>
                                Belum ada data Capaian Pembelajaran (CP). Silakan isi CP terlebih dahulu.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTambahTP" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content card-round">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title fw-bold">Tambah Tujuan Pembelajaran (Multi Input)</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form action="{{ route('admin.kurikulum.tp.store') }}" method="POST">
          @csrf
          <input type="hidden" name="kurikulum_id" value="{{ $kurikulum->id }}">
          <div class="modal-body p-4">
              <div class="mb-4">
                  <label class="form-label fw-bold">Pilih Elemen CP <span class="text-danger">*</span></label>
                  <select name="kurikulum_cp_id" class="form-select border-primary fw-bold text-dark" required>
                      <option value="">-- Pilih Elemen --</option>
                      @foreach($cps as $cp)
                          <option value="{{ $cp->id }}">{{ $cp->elemen }}</option>
                      @endforeach
                  </select>
              </div>
              
              <div class="d-flex justify-content-between align-items-center mb-2">
                  <label class="form-label fw-bold m-0">Tujuan Pembelajaran <span class="text-danger">*</span></label>
                  <button type="button" class="btn btn-sm btn-success btn-round shadow-sm" id="btnTambahBarisTP">
                      <i class="fa fa-plus me-1"></i> Tambah Form
                  </button>
              </div>
              
              <div id="tp-container">
                  <div class="input-group mb-3 tp-row shadow-sm">
                      <textarea name="tujuan_teks[]" class="form-control border-primary" rows="2" placeholder="Contoh: Siswa mampu menggunakan aplikasi atau website surel untuk berkomunikasi..." required></textarea>
                      <button class="btn btn-danger btn-hapus-tp" type="button" disabled title="Baris pertama tidak bisa dihapus"><i class="fa fa-trash"></i></button>
                  </div>
              </div>
          </div>
          <div class="modal-footer border-0 bg-light">
            <button type="button" class="btn btn-secondary btn-round" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary btn-round px-4"><i class="fa fa-save me-1"></i> Simpan Semua Tujuan</button>
          </div>
      </form>
    </div>
  </div>
</div>

@foreach($cps as $cp)
    @foreach($cp->tps as $tp)
    <div class="modal fade" id="modalEditTP-{{ $tp->id }}" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content card-round">
          <div class="modal-header bg-warning text-dark">
            <h5 class="modal-title fw-bold"><i class="fa fa-edit me-2"></i>Edit Tujuan Pembelajaran</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <form action="{{ route('admin.kurikulum.tp.update', $tp->id) }}" method="POST">
              @csrf @method('PUT')
              <input type="hidden" name="kurikulum_id" value="{{ $kurikulum->id }}">
              <div class="modal-body p-4">
                  <div class="mb-3">
                      <label class="form-label fw-bold">Pilih Elemen CP <span class="text-danger">*</span></label>
                      <select name="kurikulum_cp_id" class="form-select border-warning fw-bold text-dark" required>
                          @foreach($cps as $cp_opt)
                              <option value="{{ $cp_opt->id }}" {{ $tp->kurikulum_cp_id == $cp_opt->id ? 'selected' : '' }}>{{ $cp_opt->elemen }}</option>
                          @endforeach
                      </select>
                  </div>
                  <div class="mb-3">
                      <label class="form-label fw-bold">Tujuan Pembelajaran <span class="text-danger">*</span></label>
                      <textarea name="tujuan_teks" class="form-control border-warning" rows="4" required>{{ $tp->tujuan_teks }}</textarea>
                  </div>
              </div>
              <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary btn-round" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-warning btn-round"><i class="fa fa-save me-1"></i> Simpan Perubahan</button>
              </div>
          </form>
        </div>
      </div>
    </div>
    @endforeach
@endforeach

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#btnTambahBarisTP').click(function() {
            let barisBaru = `
                <div class="input-group mb-3 tp-row shadow-sm">
                    <textarea name="tujuan_teks[]" class="form-control border-primary" rows="2" placeholder="Ketik tujuan pembelajaran lainnya di sini..." required></textarea>
                    <button class="btn btn-danger btn-hapus-tp" type="button" title="Hapus Baris"><i class="fa fa-trash"></i></button>
                </div>
            `;
            $('#tp-container').append(barisBaru);
        });

        $(document).on('click', '.btn-hapus-tp', function() {
            if(!$(this).is(':disabled')){
                $(this).closest('.tp-row').remove();
            }
        });
    });
</script>
@endpush