@extends('guru.layouts.app')

@section('title', 'Daftar Mata Pelajaran')

@section('content')

<style>
.page-title {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 10px;
    margin-top: -20px;
}

.custom-card {
    background: white;
    border-radius: 20px;
    border: 2px solid #e5e5e5;
    padding: 25px;
}

.table-header {
    background: #a5e6ba;
}

.action-btn {
    padding: 6px 14px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
}

.btn-materi {
    background: #2b8ef3;
    color: white;
}

.btn-tugas {
    background: #f97316;
    color: white;
}
</style>

<h3 class="page-title">MATA PELAJARAN YANG ANDA AJAR</h3>

<div class="custom-card">

    <table class="table text-center align-middle">
        <thead class="table-header">
            <tr>
                <th>No</th>
                <th>ID Mapel</th>
                <th>Nama Mata Pelajaran</th>
                <th>Aksi</th>
            </tr>
        </thead>

        <tbody>
            @forelse($mapels as $index => $mapel)
            <tr>
                <td>{{ $mapels->firstItem() + $index }}</td>
                <td>{{ $mapel->id_mapel }}</td>
                <td>{{ $mapel->nama_mapel }}</td>

                <td>
                    <a href="{{ route('guru.materi.create', $mapel->id_mapel) }}" 
                       class="action-btn btn-materi">
                        Upload Materi
                    </a>

                    <a href="{{ route('guru.tugas.create', $mapel->id_mapel) }}" 
                       class="action-btn btn-tugas">
                        Buat Tugas
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4">Anda belum mengajar mata pelajaran apapun.</td>
            </tr>
            @endforelse
        </tbody>
    </table>

    <div class="d-flex justify-content-end">
        {{ $mapels->links() }}
    </div>

</div>

@endsection