99 lines
2.3 KiB
PHP
99 lines
2.3 KiB
PHP
@extends('guru.layouts.app')
|
|
|
|
@section('title', 'Dashboard Guru')
|
|
|
|
@section('content')
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Dashboard Guru</h1>
|
|
</div>
|
|
|
|
{{-- Daftar Mapel --}}
|
|
<div class="row">
|
|
@forelse($mapelYangDiampu as $mapel)
|
|
<div class="col-lg-3 col-md-6 col-sm-6 col-12 mb-3">
|
|
<div class="card card-statistic-1">
|
|
<div class="card-icon bg-primary">
|
|
<i class="fas fa-book"></i>
|
|
</div>
|
|
<div class="card-wrap">
|
|
<div class="card-header">
|
|
<h4>Mapel</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>{{ $mapel->nama_mapel }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12">
|
|
<p class="text-muted">Tidak ada mapel yang diampu.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Kalender Jadwal Mengajar --}}
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h4>Jadwal Mengajar</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="calendar"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css' rel='stylesheet' />
|
|
<style>
|
|
#calendar {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Ukuran teks judul kalender */
|
|
.fc .fc-toolbar-title {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Ukuran teks tombol navigasi kalender */
|
|
.fc .fc-button {
|
|
font-size: 0.75rem !important;
|
|
padding: 0.3rem 0.6rem !important;
|
|
}
|
|
|
|
/* Warna tombol sesuai tema */
|
|
.fc .fc-button-primary {
|
|
background-color: #6f42c1;
|
|
border: none;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var calendarEl = document.getElementById('calendar');
|
|
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'timeGridWeek',
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'timeGridWeek,timeGridDay,listWeek'
|
|
},
|
|
events: @json($events),
|
|
slotMinTime: "06:00:00",
|
|
slotMaxTime: "18:00:00",
|
|
allDaySlot: false,
|
|
eventColor: '#6f42c1',
|
|
});
|
|
|
|
calendar.render();
|
|
});
|
|
</script>
|
|
@endpush
|