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

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

  <div class="pagetitle">
    <h1>Kelola Data Akademik</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ auth()->user()->isSuperAdmin() ? route('super.dashboard') : route('dashboard') }}">Home</a></li>
        <li class="breadcrumb-item active">Kurikulum (Matkul > Sub-CPMK)</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->

  <!-- Custom CSS for Premium Split View -->
  <style>
    .split-view-container {
      display: flex;
      gap: 20px;
      height: calc(100vh - 200px);
      min-height: 550px;
    }

    .master-panel {
      flex: 0 0 380px;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    .detail-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.08);
      overflow: hidden;
      min-width: 0; /* Prevents flex items from breaking layout */
    }

    .panel-header {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      background: #f8f9fa;
    }

    .panel-body-scrollable {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    /* Mata Kuliah List Items */
    .matkul-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .matkul-item {
      padding: 14px 16px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      position: relative;
    }

    .matkul-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border-color: #4154f1;
    }

    .matkul-item.active {
      background: linear-gradient(135deg, #f0f2ff 0%, #e5e8ff 100%);
      border-color: #4154f1;
      border-left: 5px solid #4154f1;
    }

    .matkul-item-title {
      font-weight: 600;
      color: #012970;
      font-size: 0.95rem;
      margin-bottom: 4px;
      line-height: 1.3;
    }

    .matkul-item-meta {
      font-size: 0.8rem;
      color: #899bbd;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .matkul-badge {
      background: rgba(65, 84, 241, 0.1);
      color: #4154f1;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .search-wrapper {
      position: relative;
    }

    .search-wrapper i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #899bbd;
    }

    .search-input {
      padding-left: 36px !important;
      border-radius: 8px;
    }

    /* Premium Empty State */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
      padding: 40px;
      color: #899bbd;
    }

    .empty-state i {
      font-size: 4rem;
      background: linear-gradient(45deg, #4154f1, #717ff5);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 20px;
    }

    /* CPMK & Sub-CPMK Cards */
    .cpmk-card {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      margin-bottom: 16px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .cpmk-card-header {
      padding: 14px 20px;
      background: #f8f9fa;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }

    .cpmk-card-header:hover {
      background: #f1f3f5;
    }

    .cpmk-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: #012970;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sub-cpmk-list {
      padding: 20px;
      background: #ffffff;
    }

    .sub-cpmk-table th {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: #f8f9fa;
      color: #444444;
    }

    .sub-cpmk-table td {
      font-size: 0.88rem;
      color: #2c3e50;
      padding: 12px 10px;
    }

    /* Custom Toast / Notification Alert */
    #ajaxAlert {
      position: fixed;
      top: 80px;
      right: 20px;
      z-index: 9999;
      min-width: 300px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border-radius: 8px;
      display: none;
    }

    /* Responsive */
    @media (max-width: 991px) {
      .split-view-container {
        flex-direction: column;
        height: auto;
      }
      .master-panel {
        flex: none;
        width: 100%;
        max-height: 400px;
      }
      .detail-panel {
        height: 600px;
      }
    }
  </style>

  <!-- Notification Toast -->
  <div id="ajaxAlert" class="alert alert-dismissible fade show" role="alert">
    <span class="alert-message"></span>
    <button type="button" class="btn-close" onclick="document.getElementById('ajaxAlert').style.display='none'"></button>
  </div>

  <section class="section">
    <div class="split-view-container">

      <!-- MASTER PANEL (Mata Kuliah List) -->
      <div class="master-panel">
        <div class="panel-header">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="m-0 font-weight-bold text-primary" style="font-size: 1.1rem;">Daftar Mata Kuliah</h5>
            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#tambahMatkulModal">
              <i class="bi bi-plus-lg"></i> Tambah
            </button>
          </div>

          <!-- Dropdown Jurusan -->
          <form id="filterForm" action="{{ route(($routePrefix ?? 'super.') . 'kelola-matkul-direct') }}" method="GET" class="mb-2">
            <select name="jurusan_id" id="jurusan_filter" class="form-select form-select-sm" onchange="this.form.submit()">
              @if(auth()->user()->isSuperAdmin())
                <option value="">-- Semua Program Studi --</option>
              @endif
              @foreach($jurusans as $jurusan)
                <option value="{{ $jurusan->id }}" {{ $jurusan_id == $jurusan->id ? 'selected' : '' }}>
                  {{ $jurusan->nama_jurusan }}
                </option>
              @endforeach
            </select>
          </form>

          <!-- Search Input -->
          <div class="search-wrapper">
            <i class="bi bi-search"></i>
            <input type="text" id="matkul_search" class="form-control form-control-sm search-input" placeholder="Cari Kode atau Mata Kuliah...">
          </div>
        </div>

        <div class="panel-body-scrollable" style="padding: 15px;">
          <div class="matkul-list" id="matkul_list_container">
            @forelse($matkuls as $matkul)
              <div class="matkul-item" data-id="{{ $matkul->id }}" data-kode="{{ strtolower($matkul->kode_matkul) }}" data-nama="{{ strtolower($matkul->nama_matkul) }}" onclick="selectMatkul({{ $matkul->id }})">
                <div class="matkul-item-title">{{ $matkul->nama_matkul }}</div>
                <div class="matkul-item-meta">
                  <span class="matkul-badge">{{ $matkul->kode_matkul ?? 'TNP' }}</span>
                  <span><i class="bi bi-mortarboard"></i> {{ $matkul->sks ?? 0 }} SKS</span>
                  @if($matkul->jurusan)
                    <span class="text-truncate" style="max-width: 150px;" title="{{ $matkul->jurusan->nama_jurusan }}"><i class="bi bi-building"></i> {{ $matkul->jurusan->nama_jurusan }}</span>
                  @endif
                </div>
              </div>
            @empty
              <div class="text-center py-4 text-muted">
                <i class="bi bi-info-circle fs-3 d-block mb-2"></i>
                Belum ada data mata kuliah.
              </div>
            @endforelse
          </div>
        </div>
      </div>

      <!-- DETAIL PANEL (Sub-CPMK Info) -->
      <div class="detail-panel">
        <div id="detail-panel-container" style="height: 100%; display: flex; flex-direction: column;">
          <!-- Empty State -->
          <div class="empty-state" style="flex: 1;">
            <i class="bi bi-diagram-3"></i>
            <h4>Kelola Sub-CPMK</h4>
            <p class="text-muted max-width-350">Silakan pilih Mata Kuliah di panel kiri untuk melihat dan mengelola rincian Sub-CPMK.</p>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- MODAL ADD MATA KULIAH -->
  <div class="modal fade" id="tambahMatkulModal" tabindex="-1" role="dialog" aria-labelledby="tambahMatkulModalTitle" 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="tambahMatkulModalTitle"><i class="bi bi-journal-plus text-primary"></i> Tambah Mata Kuliah</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{ route(($routePrefix ?? 'super.') . 'kelola-matkul-add-data') }}" method="POST">
          @csrf
          <div class="modal-body">
            <div class="form-group mb-3">
              <label for="nama_matkul" class="form-label font-weight-bold">Nama Mata Kuliah <span class="text-danger">*</span></label>
              <input type="text" name="nama_matkul" class="form-control" placeholder="Contoh: Pemrograman Web" required value="{{ old('nama_matkul') }}">
            </div>
            <div class="form-group mb-3">
              <label for="kode_matkul" class="form-label font-weight-bold">Kode Mata Kuliah</label>
              <input type="text" name="kode_matkul" class="form-control" placeholder="Contoh: INF302" value="{{ old('kode_matkul') }}">
            </div>
            <div class="form-group mb-3">
              <label for="sks" class="form-label font-weight-bold">SKS</label>
              <input type="number" name="sks" class="form-control" min="1" max="6" placeholder="Contoh: 3" value="{{ old('sks') ?? 3 }}">
            </div>
            <div class="form-group mb-3">
              <label for="jurusan_id" class="form-label font-weight-bold">Program Studi / Jurusan <span class="text-danger">*</span></label>
              <select name="jurusan_id" class="form-select" required>
                @if(auth()->user()->isSuperAdmin())
                  <option value="">-- Pilih Program Studi --</option>
                @endif
                @foreach($jurusans as $jurusan)
                  <option value="{{ $jurusan->id }}" {{ $jurusan_id == $jurusan->id ? 'selected' : '' }}>
                    {{ $jurusan->nama_jurusan }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary">Simpan</button>
          </div>
        </form>
      </div>
    </div>
  </div>

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

@endsection

@push('scripts')
<script>
  let activeMatkulId = null;

  // On page load, read active matkul from local storage or URL query
  document.addEventListener('DOMContentLoaded', function() {
    // 1. Search filter functionality
    const searchInput = document.getElementById('matkul_search');
    searchInput.addEventListener('input', function() {
      const query = this.value.toLowerCase().trim();
      const items = document.querySelectorAll('.matkul-item');
      
      items.forEach(item => {
        const name = item.getAttribute('data-nama');
        const code = item.getAttribute('data-kode');
        if (name.includes(query) || code.includes(query)) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      });
    });

    // 2. Select initial Mata Kuliah
    const urlParams = new URLSearchParams(window.location.search);
    const matkulFromUrl = urlParams.get('matkul_id');
    const matkulFromStorage = localStorage.getItem('active_matkul_direct_id');
    
    let targetId = matkulFromUrl || matkulFromStorage;
    if (targetId) {
      const itemToSelect = document.querySelector(`.matkul-item[data-id="${targetId}"]`);
      if (itemToSelect) {
        itemToSelect.click();
      }
    }
  });

  // Highlight selected and fetch details
  function selectMatkul(matkulId) {
    activeMatkulId = matkulId;
    localStorage.setItem('active_matkul_direct_id', matkulId);

    // Update URL query parameter without refreshing the page
    const url = new URL(window.location);
    url.searchParams.set('matkul_id', matkulId);
    window.history.pushState({}, '', url);

    // Highlight active list item
    document.querySelectorAll('.matkul-item').forEach(item => {
      item.classList.remove('active');
    });
    const selectedItem = document.querySelector(`.matkul-item[data-id="${matkulId}"]`);
    if (selectedItem) {
      selectedItem.classList.add('active');
    }

    // Load Detail Panel via AJAX
    const container = document.getElementById('detail-panel-container');
    container.innerHTML = `
      <div class="text-center py-5 my-5">
        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
        <p class="mt-3 text-muted fw-semibold">Memuat rincian Sub-CPMK...</p>
      </div>
    `;

    fetch("{{ $routePrefix === 'super.' ? '/super' : '' }}/kelola-matkul-direct/" + matkulId + "/detail")
      .then(response => {
        if (!response.ok) {
          throw new Error('Terjadi kesalahan saat memuat data detail.');
        }
        return response.text();
      })
      .then(html => {
        container.innerHTML = html;
        
        // Re-execute scripts injected via innerHTML
        const scripts = container.querySelectorAll('script');
        scripts.forEach(oldScript => {
          const newScript = document.createElement('script');
          Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
          newScript.appendChild(document.createTextNode(oldScript.innerHTML));
          oldScript.parentNode.replaceChild(newScript, oldScript);
        });
        
        // Re-initialize Bootstrap 4 Tooltips/Modals if needed
        $('[data-toggle="tooltip"]').tooltip();
      })
      .catch(error => {
        console.error(error);
        container.innerHTML = `
          <div class="empty-state text-danger">
            <i class="bi bi-exclamation-triangle-fill text-danger"></i>
            <h4>Gagal Memuat Data</h4>
            <p class="text-muted">Gagal menghubungkan ke server. Silakan coba lagi.</p>
            <button class="btn btn-outline-danger btn-sm mt-2" onclick="selectMatkul(${matkulId})">Muat Ulang</button>
          </div>
        `;
      });
  }

  // Reload the detail panel only after performing sub-actions (keeps active state!)
  function reloadDetailPanel() {
    if (activeMatkulId) {
      selectMatkul(activeMatkulId);
    }
  }

  // Show Toast Alert Notification
  function showAlert(message, type = 'success') {
    const alertEl = document.getElementById('ajaxAlert');
    alertEl.className = `alert alert-${type} alert-dismissible fade show`;
    alertEl.querySelector('.alert-message').innerText = message;
    alertEl.style.display = 'block';

    // Auto hide after 4 seconds
    setTimeout(() => {
      alertEl.style.display = 'none';
    }, 4000);
  }

  // Handle Sub-CPMK CRUD Form Submissions via AJAX
  function submitAjaxForm(formId, modalId, successMessage) {
    const form = document.getElementById(formId);
    if (!form) return;

    form.addEventListener('submit', function(e) {
      e.preventDefault();

      const url = form.getAttribute('action');
      const method = form.getAttribute('method') || 'POST';
      const formData = new FormData(form);

      // Add CSRF Token
      const token = document.querySelector('meta[name="csrf-token"]');
      let headers = {};
      if (token) {
        headers['X-CSRF-TOKEN'] = token.getAttribute('content');
      }

      fetch(url, {
        method: method === 'GET' ? 'GET' : 'POST', // POST handles Method spoofing like PUT/DELETE
        body: formData,
        headers: headers
      })
      .then(response => {
        if (!response.ok) {
          return response.json().then(err => { throw err; });
        }
        return response.json();
      })
      .then(data => {
        if (data.success) {
          // Hide modal using jQuery (Bootstrap 4 modal compatible)
          $(`#${modalId}`).modal('hide');
          
          // Show Alert immediately
          showAlert(successMessage || data.message || 'Operasi berhasil!', 'success');
          
          // Wait for modal animation to complete before cleaning up backdrop and reloading panel
          setTimeout(() => {
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open').css('padding-right', '');
            reloadDetailPanel();
          }, 350);
        } else {
          showAlert(data.message || 'Terjadi kesalahan.', 'danger');
        }
      })
      .catch(error => {
        console.error('AJAX Error:', error);
        let errorMsg = 'Terjadi kesalahan sistem.';
        if (error.errors) {
          errorMsg = Object.values(error.errors).flat().join('\n');
        } else if (error.message) {
          errorMsg = error.message;
        }
        alert(errorMsg);
      });
    });
  }

  // Handle AJAX deletes (for Sub-CPMK)
  function submitAjaxDelete(formId, modalId, successMessage) {
    const form = document.getElementById(formId);
    if (!form) return;

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const url = form.getAttribute('action');
      const formData = new FormData(form);

      fetch(url, {
        method: 'POST', // Form handles PUT/DELETE via POST with _method field in Laravel
        body: formData
      })
      .then(response => {
        if (!response.ok) {
          return response.json().then(err => { throw err; });
        }
        return response.json();
      })
      .then(data => {
        if (data.success) {
          $(`#${modalId}`).modal('hide');
          
          showAlert(successMessage || 'Data berhasil dihapus.', 'success');
          
          // Wait for modal animation to complete before cleaning up backdrop and reloading panel
          setTimeout(() => {
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open').css('padding-right', '');
            reloadDetailPanel();
          }, 350);
        } else {
          showAlert(data.message || 'Gagal menghapus data.', 'danger');
        }
      })
      .catch(error => {
        console.error('AJAX Delete Error:', error);
        showAlert(error.message || 'Gagal menghapus data.', 'danger');
      });
    });
  }
</script>
@endpush