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

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

  <div class="pagetitle">
    <h1>Kelola Bukti & Kurikulum</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
        <li class="breadcrumb-item active">Bukti</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->

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

        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body pt-4">
            
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
              <h5 class="card-title m-0">Daftar Mata Kuliah</h5>
              <button class="btn btn-primary btn-pill shadow-sm align-self-start align-self-md-center" data-bs-toggle="modal" data-bs-target="#tambahModal">
                <i class="bi bi-plus-lg me-1"></i> Tambah Matkul
              </button>
            </div>

            <!-- Dropdown for selecting Jurusan -->
            <form class="row g-3 mb-4" action="{{ route('kelola-matkul-table') }}" method="GET">
              <div class="col-md-6 col-lg-4">
                  <label for="jurusan" class="form-label-premium">Pilih Jurusan / Program Studi</label>
                  <select name="jurusan_id" id="jurusan" class="form-select form-select-premium w-100" required onchange="this.form.submit()">
                      <option value="">Semua Jurusan</option>
                      @foreach($jurusans as $jurusan)
                          <option value="{{ $jurusan->id }}" {{ $jurusan_id == $jurusan->id ? 'selected' : '' }}>{{ $jurusan->nama_jurusan }}</option>
                      @endforeach
                  </select>
              </div>
            </form>

            <style>
                .transition-hover {
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }
                .transition-hover:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
                    border-left: 4px solid #6366f1 !important;
                }
                .custom-card-row {
                    border: 1px solid rgba(0,0,0,0.06) !important;
                    border-left: 4px solid transparent !important;
                    border-radius: 16px;
                }
                .btn-pill {
                    border-radius: 50px;
                    font-weight: 600;
                    font-size: 12px;
                    padding: 8px 20px;
                }
                .form-label-premium {
                    font-weight: 600;
                    font-size: 12px;
                    color: #344054;
                    margin-bottom: 6px;
                    display: block;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }
                .form-control-premium {
                    border: 1px solid #d0d5dd;
                    border-radius: 10px;
                    padding: 10px 16px;
                    font-size: 14px;
                    color: #1d2939;
                    background-color: #ffffff;
                    transition: border-color 0.2s, box-shadow 0.2s;
                }
                .form-control-premium:focus {
                    outline: none;
                    border-color: #6366f1;
                    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
                }
                .form-select-premium {
                    border: 1px solid #d0d5dd;
                    border-radius: 10px;
                    padding: 10px 16px;
                    font-size: 14px;
                    color: #1d2939;
                    background-color: #ffffff;
                    transition: border-color 0.2s, box-shadow 0.2s;
                }
                .form-select-premium:focus {
                    outline: none;
                    border-color: #6366f1;
                    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
                }
            </style>
            
            <div class="custom-card-list mt-3">
              @forelse($matkuls as $index => $matkul)
                <div class="custom-card-row bg-white p-4 mb-3 shadow-sm transition-hover border rounded-3" data-jurusan-id="{{ $matkul->jurusan_id ?? '' }}">
                  <div class="row align-items-center">
                    <!-- Number and Course Name -->
                    <div class="col-md-8 d-flex align-items-center mb-3 mb-md-0">
                      <div class="me-3 fs-5 font-weight-bold text-secondary" style="width: 30px;">
                        {{ $index + 1 }}
                      </div>
                      <div>
                        <h6 class="mb-0 font-weight-bold text-dark">
                          {{ $matkul->nama_matkul ?? 'Data tidak tersedia' }}
                        </h6>
                        <small class="text-muted">Mata Kuliah Kurikulum</small>
                      </div>
                    </div>

                    <!-- Actions -->
                    <div class="col-md-4 d-flex justify-content-md-end align-items-center gap-2">
                      <a href="{{ route('kelola-cpmk-table', $matkul->id) }}" class="btn btn-sm btn-pill btn-outline-primary shadow-sm">
                        <i class="bi bi-box-arrow-in-right me-1"></i> Kelola CPMK
                      </a>
                      <button type="button" class="btn btn-sm btn-pill btn-outline-danger shadow-sm" data-bs-toggle="modal" data-bs-target="#deleteMatkulModal{{ $matkul->id }}">
                        <i class="bi bi-trash me-1"></i> Hapus
                      </button>
                    </div>
                  </div>
                </div>

                <!-- Modal Hapus -->
                <div class="modal fade" id="deleteMatkulModal{{ $matkul->id }}" tabindex="-1" aria-labelledby="deleteMatkulModalTitle{{ $matkul->id }}" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content border-0 shadow">
                            <div class="modal-header bg-danger text-white">
                                <h5 class="modal-title font-weight-bold" id="deleteMatkulModalTitle{{ $matkul->id }}"><i class="bi bi-exclamation-triangle me-2"></i>Peringatan!</h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-4 text-dark">
                                Apakah kamu yakin ingin menghapus mata kuliah <strong>{{ $matkul->nama_matkul }}</strong>? Tindakan ini tidak dapat dibatalkan.
                            </div>
                            <div class="modal-footer bg-light border-0 d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">Batal</button>
                                <form action="{{ route('delete-matkul', $matkul->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-pill shadow-sm">Hapus</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
              @empty
                <div class="text-center py-5">
                  <i class="bi bi-journal-x text-muted fs-1"></i>
                  <p class="text-muted mt-2 mb-0">Belum ada mata kuliah terdaftar untuk jurusan ini.</p>
                </div>
              @endforelse
            </div>

            <!-- Modal Tambah -->
            <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 border-0 shadow">
                  <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title font-weight-bold" id="tambahModalLabel"><i class="bi bi-plus-circle me-2"></i>Tambah Mata Kuliah</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body p-4 text-dark">
                    <form id="tambahForm" action="{{ 'kelola-matkul-add-data' }}" method="POST">
                      @csrf
                      <div class="mb-3">
                        <label for="nama_matkul" class="form-label-premium">Nama Mata Kuliah <span class="text-danger">*</span></label>
                        <input type="text" name="nama_matkul" class="form-control form-control-premium w-100" id="nama_matkul" required placeholder="Masukkan nama mata kuliah">
                      </div>
                      <div class="mb-4">
                        <label for="modal_jurusan" class="form-label-premium">Jurusan / Program Studi <span class="text-danger">*</span></label>
                        <select name="jurusan_id" id="modal_jurusan" class="form-select form-select-premium w-100" required>
                          @foreach($jurusans as $jurusan)
                              <option value="{{ $jurusan->id }}">{{ $jurusan->nama_jurusan }}</option>
                          @endforeach
                        </select>
                      </div>
                      <div class="modal-footer bg-light px-0 pb-0 pt-3 border-0 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary btn-pill shadow-sm">Submit</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

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

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