@extends('layouts.app')
@section('title','Mata Kuliah')
@section('content')
<div class="page-header">
    <div class="page-title">Daftar Mata Kuliah</div>
    <div class="page-sub">Seluruh mata kuliah aktif maupun nonaktif yang tersedia.</div>
</div>

<div class="content-card mb-4 border-0 shadow-sm">
    <div class="content-card-body p-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-4">
                <label class="form-label small fw-bold text-muted mb-1">Cari Mata Kuliah</label>
                <input type="text" name="search" class="form-control form-control-sm"
                       placeholder="Kode atau nama..." value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-bold text-muted mb-1">Semester</label>
                <select name="semester" class="form-select form-select-sm">
                    <option value="">Semua</option>
                    @for($i = 1; $i <= 8; $i++)
                        <option value="{{ $i }}" {{ request('semester') == $i ? 'selected' : '' }}>
                            Semester {{ $i }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-bold text-muted mb-1">Status</label>
                <select name="status" class="form-select form-select-sm">
                    <option value="semua"    {{ ($filterStatus ?? 'semua') === 'semua'    ? 'selected' : '' }}>Semua Status</option>
                    <option value="aktif"    {{ ($filterStatus ?? '') === 'aktif'         ? 'selected' : '' }}>Aktif</option>
                    <option value="nonaktif" {{ ($filterStatus ?? '') === 'nonaktif'      ? 'selected' : '' }}>Non-Aktif</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-bold text-muted mb-1">&nbsp;</label>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-arn btn-sm flex-fill">
                        <i class="bi bi-search me-1"></i>Cari
                    </button>
                    <a href="{{ route('mahasiswa.matkul.index') }}" class="btn btn-outline-secondary btn-sm flex-fill">
                        <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Badge ringkasan --}}
@php
    $totalAktif    = $matkulList->where('is_aktif', true)->count();
    $totalNonaktif = $matkulList->where('is_aktif', false)->count();
@endphp
<div class="d-flex gap-2 mb-3 flex-wrap">
    <span class="badge rounded-pill px-3 py-2" style="background:#d1fae5;color:#065f46;font-size:0.82rem;">
        <i class="bi bi-check-circle me-1"></i>Aktif: {{ $totalAktif }}
    </span>
    <span class="badge rounded-pill px-3 py-2" style="background:#fee2e2;color:#991b1b;font-size:0.82rem;">
        <i class="bi bi-x-circle me-1"></i>Non-Aktif: {{ $totalNonaktif }}
    </span>
</div>

<div class="content-card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-arn mb-0">
            <thead>
                <tr>
                    <th style="width:50px;text-align:center;">No</th>
                    <th style="width:110px;">Kode</th>
                    <th>Nama Mata Kuliah</th>
                    <th style="width:70px;text-align:center;">SKS</th>
                    <th style="width:80px;text-align:center;">Semester</th>
                    <th>Dosen Pengampu</th>
                    <th style="width:100px;text-align:center;">Status</th>
                    <th style="width:90px;text-align:center;">Jadwal</th>
                </tr>
            </thead>
            <tbody>
                @forelse($matkulList as $m)
                <tr style="{{ !$m->is_aktif ? 'opacity:0.65;' : '' }}">
                    <td style="text-align:center;color:var(--muted);">{{ $loop->iteration }}</td>
                    <td class="fw-bold text-teal">{{ $m->kode }}</td>
                    <td class="fw-bold">{{ $m->nama }}</td>
                    <td style="text-align:center;">{{ $m->sks }}</td>
                    <td style="text-align:center;">
                        <span class="badge bg-light text-dark border px-2">{{ $m->semester }}</span>
                    </td>
                    <td>{{ $m->dosen->nama ?? '-' }}</td>
                    <td style="text-align:center;">
                        @if($m->is_aktif)
                            <span class="badge rounded-pill px-2 py-1"
                                  style="background:#d1fae5;color:#065f46;font-size:0.75rem;">
                                <i class="bi bi-check-circle me-1"></i>Aktif
                            </span>
                        @else
                            <span class="badge rounded-pill px-2 py-1"
                                  style="background:#fee2e2;color:#991b1b;font-size:0.75rem;">
                                <i class="bi bi-x-circle me-1"></i>Non-Aktif
                            </span>
                        @endif
                    </td>
                    <td style="text-align:center;">
                        <a href="{{ route('mahasiswa.jadwal.index', ['search' => $m->nama]) }}"
                           class="btn btn-sm btn-outline-primary py-0 px-2" title="Lihat Jadwal">
                            <i class="bi bi-calendar-event"></i>
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-5 text-muted">
                        <i class="bi bi-book fs-1 d-block mb-2 opacity-25"></i>
                        Mata kuliah tidak ditemukan.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection