@extends('layouts.app')

@section('title', 'Data Program Studi')

@section('content')

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

<style>
.table>:not(caption)>*>*{
    padding:.75rem 1rem;
}

.table tbody tr:hover{
    background:rgba(105,108,255,.04);
}

.search-input-wrapper{
    position:relative;
}

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

.search-input-wrapper input{
    padding-left:38px;
}

.kode-badge{
    font-family:monospace;
    font-size:.82rem;
    color:#696cff;
    font-weight:600;
    background:rgba(105,108,255,.1);
    border-radius:4px;
    padding:2px 8px;
}

.avatar-initial-sm{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
    font-weight:600;
}
</style>

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

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

<div>

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

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

Akademik /

</span>

Data Program Studi

</h4>

<nav>

<ol class="breadcrumb breadcrumb-style1 mb-0">

<li class="breadcrumb-item">

<a href="{{ route('dashboard') }}">

Dashboard

</a>

</li>

<li class="breadcrumb-item active">

Program Studi

</li>

</ol>

</nav>

</div>

<button
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#tambahProgramStudiModal">

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

Tambah Program Studi

</button>

</div>

@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

@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

@if($errors->any())

<div class="alert alert-danger">

<ul class="mb-0">

@foreach($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

<div class="row">

<div class="col-lg-4 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 Program Studi

</span>

<h3>{{ $total }}</h3>

<small class="text-success">

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

Terdaftar

</small>

</div>

<div class="avatar">

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

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

</span>

</div>

</div>

</div>

</div>

</div>

<div class="col-lg-4 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">

Jenjang S1

</span>

<h3>

{{ $programStudi->where('jenjang','S1')->count() }}

</h3>

<small class="text-primary">

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

Program

</small>

</div>

<div class="avatar">

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

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

</span>

</div>

</div>

</div>

</div>

</div>

<div class="col-lg-4 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">

Jenjang D3

</span>

<h3>

{{ $programStudi->where('jenjang','D3')->count() }}

</h3>

<small class="text-warning">

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

Program

</small>

</div>

<div class="avatar">

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

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

</span>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="card">

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

<div>

<h5 class="card-title m-0">

Daftar Program Studi

</h5>

<small class="text-muted">

Total keseluruhan program studi

</small>

</div>

<div class="d-flex gap-2">

<div class="search-input-wrapper">

<i class="bx bx-search-alt"></i>

<input
id="searchInput"
class="form-control form-control-sm"
style="width:220px"
placeholder="Cari Program Studi...">

</div>

<div class="dropdown">

<button
class="btn btn-outline-secondary btn-sm dropdown-toggle"
data-bs-toggle="dropdown">

<i class="bx bx-export me-1"></i>

Export

</button>

<ul class="dropdown-menu">

<li><a class="dropdown-item" href="#">CSV</a></li>

<li><a class="dropdown-item" href="#">Print</a></li>

</ul>

</div>

</div>

</div>

<div class="card-body px-0">

<div class="table-responsive">

<table class="table table-hover" id="programStudiTable">

<thead class="table-light">

<tr>

<th class="ps-4">#</th>

<th>Program Studi</th>

<th>Kode</th>

<th>Jenjang</th>

<th>Mahasiswa</th>

<th class="text-center">Aksi</th>

</tr>

</thead>

<tbody>

@forelse($programStudi as $index => $ps)
<tr>

    <!-- Nomor -->
    <td class="ps-4">
        <span class="text-muted fw-semibold">
            {{ $index + 1 }}
        </span>
    </td>

    <!-- Program Studi -->
    <td>

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

            <div class="avatar-initial-sm bg-label-primary text-primary">

                {{ strtoupper(substr($ps->nama_prodi,0,1)) }}

            </div>

            <div>

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

                    {{ $ps->nama_prodi }}

                </span>

                <small class="text-muted">

                    Program Studi

                </small>

            </div>

        </div>

    </td>

    <!-- Kode -->

    <td>

        <span class="kode-badge">

            {{ $ps->kode_prodi }}

        </span>

    </td>

    <!-- Jenjang -->

    <td>

        @if($ps->jenjang=='S1')

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

            S1

        </span>

        @elseif($ps->jenjang=='S2')

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

            S2

        </span>

        @elseif($ps->jenjang=='S3')

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

            S3

        </span>

        @else

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

            D3

        </span>

        @endif

    </td>

    <!-- Jumlah Mahasiswa -->

    <td>

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

            {{ $ps->jumlah_mahasiswa ?? 0 }}

            Mahasiswa

        </span>

    </td>

    <!-- Aksi -->

    <td class="text-center">

        <div class="d-flex justify-content-center gap-1">

            <button

                class="btn btn-sm btn-info"

                onclick="detailProgramStudi({{ $ps->id }})"

                data-bs-toggle="modal"

                data-bs-target="#detailProgramStudiModal">

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

                Detail

            </button>

            <button

                class="btn btn-sm btn-warning"

                onclick="editProgramStudi({{ $ps->id }})"

                data-bs-toggle="modal"

                data-bs-target="#editProgramStudiModal">

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

                Edit

            </button>

            <form

                method="POST"

                action="{{ route('program-studi.destroy',$ps->id) }}"

                class="d-inline"

                onsubmit="return confirm('Yakin ingin menghapus {{ $ps->nama_prodi }} ?')">

                @csrf

                @method('DELETE')

                <button class="btn btn-sm btn-danger">

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

                    Hapus

                </button>

            </form>

        </div>

    </td>

</tr>

@empty

<tr>

<td colspan="6" class="text-center py-5">

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

<i class="bx bx-folder-open"
style="font-size:3rem;color:#a1acb8;"></i>

<p class="text-muted mb-1">

Belum ada data Program Studi.

</p>

<button

class="btn btn-primary btn-sm"

data-bs-toggle="modal"

data-bs-target="#tambahProgramStudiModal">

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

Tambah Sekarang

</button>

</div>

</td>

</tr>

@endforelse

</tbody>

</table>

</div>

</div>

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

<small class="text-muted">

Menampilkan

<strong>{{ $programStudi->count() }}</strong>

Program Studi

</small>

</div>

</div>

</div>

<!-- ===================== -->
<!-- MODAL TAMBAH -->
<!-- ===================== -->

<div class="modal fade" id="tambahProgramStudiModal" 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 Program Studi

</h5>

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

</div>

<form method="POST" action="{{ route('program-studi.store') }}">

@csrf

<div class="modal-body">
    <div class="mb-3">

    <label class="form-label">
        Kode Program Studi
    </label>

    <input
        type="text"
        name="kode_prodi"
        class="form-control"
        placeholder="Contoh : TI"
        required>

</div>

<div class="mb-3">

    <label class="form-label">
        Nama Program Studi
    </label>

    <input
        type="text"
        name="nama_prodi"
        class="form-control"
        placeholder="Teknik Informatika"
        required>

</div>

<div class="mb-3">

    <label class="form-label">
        Jenjang
    </label>

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

        <option value="">Pilih Jenjang</option>
        <option value="D3">D3</option>
        <option value="S1">S1</option>
        <option value="S2">S2</option>
        <option value="S3">S3</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 me-1"></i>

        Simpan

    </button>

</div>

</form>

</div>

</div>

</div>

<!-- ================= DETAIL ================= -->

<div class="modal fade" id="detailProgramStudiModal" tabindex="-1">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">

                    Detail Program Studi

                </h5>

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

            </div>

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

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

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

                </div>

            </div>

        </div>

    </div>

</div>

<!-- ================= EDIT ================= -->

<div class="modal fade" id="editProgramStudiModal" tabindex="-1">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">

                    Edit Program Studi

                </h5>

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

            </div>

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

                <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="updateProgramStudi()">

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

                    Update

                </button>

            </div>

        </div>

    </div>

</div>

<script>

const programStudiData = @json($programStudi);

function detailProgramStudi(id){

    const ps = programStudiData.find(x => x.id === id);

    if(!ps) return;

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

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

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

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

                    ${ps.nama_prodi.charAt(0)}

                </span>

            </div>

            <h5>${ps.nama_prodi}</h5>

        </div>

        <table class="table table-borderless">

            <tr>

                <th width="150">Kode</th>

                <td>${ps.kode_prodi}</td>

            </tr>

            <tr>

                <th>Jenjang</th>

                <td>${ps.jenjang}</td>

            </tr>

            <tr>

                <th>Jumlah Mahasiswa</th>

                <td>${ps.jumlah_mahasiswa ?? 0}</td>

            </tr>

        </table>

    `;

}

function editProgramStudi(id){

const ps = programStudiData.find(x=>x.id===id);

if(!ps) return;

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

<form id="formEditProgramStudi"
method="POST"
action="/program-studi/${ps.id}">

@csrf

@method('PUT')

<div class="mb-3">

<label class="form-label">

Kode Program Studi

</label>

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

</div>

<div class="mb-3">

<label class="form-label">

Nama Program Studi

</label>

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

</div>

<div class="mb-3">

<label class="form-label">

Jenjang

</label>

<select
name="jenjang"
class="form-select">

<option value="D3" ${ps.jenjang=="D3"?"selected":""}>D3</option>

<option value="S1" ${ps.jenjang=="S1"?"selected":""}>S1</option>

<option value="S2" ${ps.jenjang=="S2"?"selected":""}>S2</option>

<option value="S3" ${ps.jenjang=="S3"?"selected":""}>S3</option>

</select>

</div>

</form>

`;

}

function updateProgramStudi(){

document.getElementById('formEditProgramStudi').submit();

}

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

let value=this.value.toLowerCase();

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

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

});

});

</script>

@endsection