@extends('Layouts.app')

@section('content')

  <!-- Main Content -->
  @if(session('error'))
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
        <span class="block sm:inline">{{ session('error') }}</span>
    </div>
  @endif

{{-- Konten Dashboard di sini --}}
  <div class="flex-1 flex flex-col">
    

    <!-- Content -->
    <main class="flex-1 p-6 space-y-6">
      <!-- Statistik -->
      @if(auth()->user()->level === 'superadmin' || auth()->user()->level === 'Akademik')
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
          <h2 class="text-sm text-slate-500">Total Course</h2>
          <p class="text-2xl font-bold text-slate-800">{{ $courses->count() }}</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
          <h2 class="text-sm text-slate-500">Absensi Hari Ini</h2>
          <p class="text-2xl font-bold text-slate-800">{{ $absensiHariIni }}</p>
        </div>
        <div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
          <h2 class="text-sm text-slate-500">Mahasiswa Aktif</h2>
          <p class="text-2xl font-bold text-slate-800">{{ $mahasiswaAktif }}</p>
        </div>
      </div>
      @endif

{{-- Calendar Section --}}

    <div class="bg-white p-6 rounded-xl shadow">
        <div class="flex justify-center">
        <h1 class="text-lg font-semibold mb-4">Course Calender</h1>
        </div>
        <div id="calendar"></div>
    </div>
    
<div class="bg-white p-6 rounded-xl shadow mt-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold">Daftar Tugas</h2>
    </div>

<ul class="space-y-3">
    @foreach($assignments as $task)
        @if(now()->between(\Carbon\Carbon::parse($task->start_date), \Carbon\Carbon::parse($task->end_date)))
            <li class="flex items-center justify-between p-3 rounded-lg shadow-sm border"
                style="border-left: 6px solid {{ $colorMap[$task->title] ?? '#ff2b2b' }}">
                <div>
                    <p class="font-semibold text-gray-800">
                        Pertemuan-{{ $task->meeting_number }} | {{ $task->title }} | {{ $task->lecturer_name }}
                    </p>
                    <p class="text-sm text-gray-600">
                        {{ $task->lecturer_name }}
                        ({{ \Carbon\Carbon::parse($task->start_date)->format('d M Y') }}
                         - {{ \Carbon\Carbon::parse($task->end_date)->format('d M Y') }})
                    </p>
                </div>
<a href="/courses/{{ $task->code }}"
   class="bg-indigo-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-600">
   Detail
</a>
            </li>
        @endif
    @endforeach
</ul>

</div>


      <!-- Tabel Data -->
<div class="bg-white p-6 rounded-xl shadow">
    <h2 class="text-lg font-semibold mb-4">Course Terbaru Hari Ini</h2>

    @if($courseslates->isEmpty())
        <p class="text-gray-500 text-sm">Belum ada course yang di-enrol hari ini.</p>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
            @foreach ($courseslates as $course)
                <a href="{{ route('courses.show', ['code' => $course->code]) }}" class="bg-white rounded-xl shadow overflow-hidden hover:shadow-lg transition">
                    <img src="{{ $course->image_path }}" alt="Course banner" class="w-full h-28 object-cover">
                    <div class="p-3">
                        <h3 class="text-sm font-semibold text-gray-800 truncate">{{ $course->title }}</h3>
                        <p class="text-xs text-gray-600 truncate">{{ $course->code }} | {{ $course->lecturer_name }}</p>
                    </div>
                </a>
                
            @endforeach
            
        </div>
    @endif
</div>




      
              <!-- Bagian Daftar Course (Grid Dinamis)  -->
        <div class="bg-white p-6 rounded-xl shadow">
            <div class="flex items-center justify-between mb-4">
    <h2 class="text-lg font-semibold">Daftar Course</h2>
    <a href="/enrolment" 
       class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg shadow hover:bg-blue-700 transition">
       Enrolment
    </a>
  </div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
    {{-- Loop melalui data courses --}}
    @foreach ($courses as $course)
        <div class="bg-white rounded-xl shadow overflow-hidden hover:shadow-lg transition relative">
            <a href="{{ route('courses.show', ['code' => $course->code]) }}">
                <img src="{{ $course->image_path }}" alt="Course banner" class="w-full h-28 object-cover">
                <div class="p-3">
                    <h3 class="text-sm font-semibold text-gray-800 truncate">{{ $course->title }}</h3>
                    <p class="text-xs text-gray-600 truncate">{{ $course->code }} | {{ $course->lecturer_name }}</p>
                </div>
            </a>

            {{-- Tombol hapus di pojok kanan atas --}}
            <form action="{{ route('enrol.delete', $course->id) }}" method="POST" 
                  class="absolute bottom-2 right-2"
                  onsubmit="return confirm('Yakin ingin menghapus enrol ini?');">
                @csrf
                @method('DELETE')
                <button type="submit">
                    <i class="fa fa-trash text-red-600 hover:text-red-800"></i>
                </button>
            </form>
        </div>
        
    @endforeach
</div>
        </div>
    </main>
  </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    height: 500,
@php
    $colors = ['#60a5fa', '#f5d142', '#e342f5', '#42f554', '#f5426f'];
    $usedColors = []; // mapping title => color
@endphp

 events: [
     
        @foreach($assignments as $task)
        @php
            if (!isset($usedColors[$task->title])) {
                // assign warna dari array secara berurutan
                $usedColors[$task->title] = $colors[count($usedColors) % count($colors)];
            }
            $color = $usedColors[$task->title];
        @endphp
        {
            title: 'Pertemuan-{{ $task->meeting_number }} | {{ $task->title }} | {{ $task->lecturer_name }} ',
            start: '{{ \Carbon\Carbon::parse($task->start_date)->format('Y-m-d') }}',
            end: '{{ \Carbon\Carbon::parse($task->end_date)->addDay()->format('Y-m-d') }}',
            color: '{{ $color }}',
            url :'/courses/{{ $task->code }}'
        },
        @endforeach
    ],
        eventClick: function(info) {
        info.jsEvent.preventDefault();
        if (info.event.url) {
            window.location.href = info.event.url;
        }
    }
  });
  calendar.render();
});
</script>
@endpush