@extends('layouts.app')

@section('title','Data Mata Kuliah')

@section('content')

  <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../assets/img/favicon/favicon.ico" />

<div class="container-xxl flex-grow-1 container-p-y">

    <!-- Header -->

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h4 class="fw-bold mb-1">

                <span class="text-muted fw-light">

                    Master Data /

                </span>

                Mata Kuliah

            </h4>

            <small class="text-muted">

                Kelola seluruh data mata kuliah pada sistem akademik.

            </small>

        </div>

        <button

            class="btn btn-primary"

            data-bs-toggle="modal"

            data-bs-target="#tambahMataKuliahModal">

            <i class="bx bx-plus"></i>

            Tambah Mata Kuliah

        </button>

    </div>

    {{-- Alert Success --}}

    @if(session('success'))

    <div class="alert alert-success alert-dismissible fade show">

        <i class="bx bx-check-circle me-2"></i>

        {{ session('success') }}

        <button

            class="btn-close"

            data-bs-dismiss="alert">

        </button>

    </div>

    @endif

    {{-- Alert Error --}}

    @if(session('error'))

    <div class="alert alert-danger alert-dismissible fade show">

        <i class="bx bx-error-circle me-2"></i>

        {{ session('error') }}

        <button

            class="btn-close"

            data-bs-dismiss="alert">

        </button>

    </div>

    @endif

    <!-- Statistik -->

    <div class="row">

        <div class="col-lg-6 col-md-6 mb-4">

            <div class="card">

                <div class="card-body">

                    <div class="d-flex justify-content-between">

                        <div>

                            <span class="fw-semibold d-block mb-1">

                                Total Mata Kuliah

                            </span>

                            <h3 class="card-title mb-2">

                                {{ $total }}

                            </h3>

                            <small class="text-success fw-semibold">

                                <i class="bx bx-book"></i>

                                Mata Kuliah Aktif

                            </small>

                        </div>

                        <div class="avatar">

                            <span class="avatar-initial rounded bg-label-primary">

                                <i class="bx bx-book-open bx-md"></i>

                            </span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-lg-6 col-md-6 mb-4">

            <div class="card">

                <div class="card-body">

                    <div class="d-flex justify-content-between">

                        <div>

                            <span class="fw-semibold d-block mb-1">

                                Total SKS

                            </span>

                            <h3 class="card-title mb-2">

                                {{ $totalSks }}

                            </h3>

                            <small class="text-info fw-semibold">

                                <i class="bx bx-award"></i>

                                Seluruh SKS

                            </small>

                        </div>

                        <div class="avatar">

                            <span class="avatar-initial rounded bg-label-success">

                                <i class="bx bx-award bx-md"></i>

                            </span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- Table -->

    <div class="card">

        <div class="card-header d-flex justify-content-between align-items-center">

            <h5 class="mb-0">

                <i class="bx bx-table me-2"></i>

                Daftar Mata Kuliah

            </h5>

            <input

                type="text"

                id="searchInput"

                class="form-control"

                style="width:250px"

                placeholder="Cari Mata Kuliah...">

        </div>

        <div class="table-responsive">

            <table

                class="table table-hover align-middle"

                id="mataKuliahTable">

                <thead class="table-light">

                    <tr>

                        <th>No</th>

                        <th>Kode</th>

                        <th>Nama Mata Kuliah</th>

                        <th>SKS</th>

                        <th width="160">

                            Aksi

                        </th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($mataKuliah as $index => $mk)
                    <tr>

    <td>{{ $index + 1 }}</td>

    <td>

        <span class="fw-semibold">

            {{ $mk->kode_matkul }}

        </span>

    </td>

    <td>

        <div class="d-flex align-items-center">

            <div class="avatar avatar-sm me-3">

                <span class="avatar-initial rounded-circle bg-label-primary">

                    {{ strtoupper(substr($mk->nama_matkul,0,1)) }}

                </span>

            </div>

            <div>

                <h6 class="mb-0">

                    {{ $mk->nama_matkul }}

                </h6>

                <small class="text-muted">

                    Mata Kuliah

                </small>

            </div>

        </div>

    </td>

    <td>

        <span class="badge bg-label-success">

            {{ $mk->sks }} SKS

        </span>

    </td>

    <td>

        <div class="dropdown">

            <button

                class="btn btn-sm btn-icon"

                data-bs-toggle="dropdown">

                <i class="bx bx-dots-vertical-rounded"></i>

            </button>

            <ul class="dropdown-menu">

                <li>

                    <button

                        class="dropdown-item"

                        onclick="detailMataKuliah({{ $mk->id }})"

                        data-bs-toggle="modal"

                        data-bs-target="#detailMataKuliahModal">

                        <i class="bx bx-show me-2"></i>

                        Detail

                    </button>

                </li>

                <li>

                    <button

                        class="dropdown-item"

                        onclick="editMataKuliah({{ $mk->id }})"

                        data-bs-toggle="modal"

                        data-bs-target="#editMataKuliahModal">

                        <i class="bx bx-edit-alt me-2"></i>

                        Edit

                    </button>

                </li>

                <li>

                    <form

                        method="POST"

                        action="{{ route('mata-kuliah.destroy',$mk->id) }}"

                        onsubmit="return confirm('Yakin ingin menghapus mata kuliah ini?')">

                        @csrf

                        @method('DELETE')

                        <button

                            type="submit"

                            class="dropdown-item text-danger">

                            <i class="bx bx-trash me-2"></i>

                            Hapus

                        </button>

                    </form>

                </li>

            </ul>

        </div>

    </td>

</tr>

@empty

<tr>

    <td colspan="5">

        <div class="text-center py-5">

            <i class="bx bx-book-open bx-lg text-secondary"></i>

            <br><br>

            <h6 class="mb-1">

                Belum Ada Data Mata Kuliah

            </h6>

            <small class="text-muted">

                Silakan tambahkan data mata kuliah terlebih dahulu.

            </small>

        </div>

    </td>

</tr>

@endforelse

</tbody>

</table>

</div>

</div>

</div>

{{-- ========================= --}}
{{-- MODAL TAMBAH --}}
{{-- ========================= --}}

<div

class="modal fade"

id="tambahMataKuliahModal"

tabindex="-1">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title">

<i class="bx bx-plus-circle me-2"></i>

Tambah Mata Kuliah

</h5>

<button

class="btn-close"

data-bs-dismiss="modal">

</button>

</div>

<form

method="POST"

action="{{ route('mata-kuliah.store') }}">

@csrf

<div class="modal-body">

<div class="mb-3">

<label class="form-label">

Kode Mata Kuliah

</label>

<input

type="text"

name="kode_matkul"

class="form-control"

placeholder="Contoh : IF101"

required>

</div>

<div class="mb-3">

<label class="form-label">

Nama Mata Kuliah

</label>

<input

type="text"

name="nama_matkul"

class="form-control"

placeholder="Pemrograman Web"

required>

</div>

<div class="mb-3">

<label class="form-label">

Jumlah SKS

</label>

<select

name="sks"

class="form-select"

required>

<option value="">Pilih SKS</option>

<option value="1">1 SKS</option>

<option value="2">2 SKS</option>

<option value="3">3 SKS</option>

<option value="4">4 SKS</option>

<option value="6">6 SKS</option>

</select>

</div>

</div>

<div class="modal-footer">

<button

type="button"

class="btn btn-outline-secondary"

data-bs-dismiss="modal">

Batal

</button>

<button

type="submit"

class="btn btn-primary">

<i class="bx bx-save"></i>

Simpan

</button>

</div>

</form>

</div>

</div>

</div>
{{-- ========================= --}}
{{-- MODAL DETAIL --}}
{{-- ========================= --}}

<div class="modal fade" id="detailMataKuliahModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    <i class="bx bx-book me-2"></i>
                    Detail Mata Kuliah
                </h5>

                <button class="btn-close" data-bs-dismiss="modal"></button>

            </div>

            <div class="modal-body" id="detailMataKuliahBody">

                <div class="text-center py-5">
                    <div class="spinner-border text-primary"></div>
                </div>

            </div>

            <div class="modal-footer">

                <button
                    class="btn btn-secondary"
                    data-bs-dismiss="modal">

                    Tutup

                </button>

            </div>

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

{{-- ========================= --}}
{{-- MODAL EDIT --}}
{{-- ========================= --}}

<div class="modal fade" id="editMataKuliahModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    <i class="bx bx-edit-alt me-2"></i>
                    Edit Mata Kuliah
                </h5>

                <button class="btn-close" data-bs-dismiss="modal"></button>

            </div>

            <div class="modal-body" id="editMataKuliahBody">

                <div class="text-center py-5">
                    <div class="spinner-border text-primary"></div>
                </div>

            </div>

            <div class="modal-footer">

                <button
                    class="btn btn-outline-secondary"
                    data-bs-dismiss="modal">

                    Batal

                </button>

                <button
                    class="btn btn-primary"
                    onclick="updateMataKuliah()">

                    <i class="bx bx-save"></i>

                    Update

                </button>

            </div>

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

<script>

const mataKuliahData=@json($mataKuliah);

function detailMataKuliah(id){

const mk=mataKuliahData.find(item=>item.id===id);

if(!mk){

document.getElementById('detailMataKuliahBody').innerHTML=
'<div class="alert alert-danger">Data tidak ditemukan</div>';

return;

}

document.getElementById('detailMataKuliahBody').innerHTML=`

<div class="text-center mb-4">

<div class="avatar avatar-xl mx-auto">

<span class="avatar-initial rounded-circle bg-label-primary">

${mk.nama_matkul.charAt(0).toUpperCase()}

</span>

</div>

<h5 class="mt-3">

${mk.nama_matkul}

</h5>

</div>

<table class="table table-borderless">

<tr>

<th width="150">

Kode

</th>

<td>${mk.kode_matkul}</td>

</tr>

<tr>

<th>Nama</th>

<td>${mk.nama_matkul}</td>

</tr>

<tr>

<th>SKS</th>

<td>

<span class="badge bg-label-success">

${mk.sks} SKS

</span>

</td>

</tr>

</table>

`;

}

function editMataKuliah(id){

const mk=mataKuliahData.find(item=>item.id===id);

if(!mk){

document.getElementById('editMataKuliahBody').innerHTML=
'<div class="alert alert-danger">Data tidak ditemukan</div>';

return;

}

document.getElementById('editMataKuliahBody').innerHTML=`

<form
id="formEditMataKuliah"
method="POST"
action="/mata-kuliah/${mk.id}">

@csrf

@method('PUT')

<div class="mb-3">

<label class="form-label">

Kode Mata Kuliah

</label>

<input
type="text"
name="kode_matkul"
class="form-control"
value="${mk.kode_matkul}"
required>

</div>

<div class="mb-3">

<label class="form-label">

Nama Mata Kuliah

</label>

<input
type="text"
name="nama_matkul"
class="form-control"
value="${mk.nama_matkul}"
required>

</div>

<div class="mb-3">

<label class="form-label">

SKS

</label>

<select
name="sks"
class="form-select"
required>

<option value="1" ${mk.sks==1?'selected':''}>1 SKS</option>

<option value="2" ${mk.sks==2?'selected':''}>2 SKS</option>

<option value="3" ${mk.sks==3?'selected':''}>3 SKS</option>

<option value="4" ${mk.sks==4?'selected':''}>4 SKS</option>

<option value="6" ${mk.sks==6?'selected':''}>6 SKS</option>

</select>

</div>

</form>

`;

}

function updateMataKuliah(){

const form=document.getElementById('formEditMataKuliah');

if(form){

form.submit();

}

}

document.getElementById('searchInput').addEventListener('keyup',function(){

const value=this.value.toLowerCase();

document.querySelectorAll('#mataKuliahTable tbody tr').forEach(function(row){

row.style.display=row.innerText.toLowerCase().includes(value)
?
''
:
'none';

});

});

</script>

@endsection