@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