@extends('layouts.app')

@section('title', 'Kalender Akademik - SIAKAD')
@section('page-title', 'Kalender Akademik')

@section('content')
<div class="row mb-4">
    <div class="col-md-8">
        <div class="d-flex align-items-center gap-3">
            <div>
                <h5 class="mb-0">Daftar Event Kalender Akademik</h5>
                <small class="text-muted">Kelola event akademik dalam sistem</small>
            </div>
        </div>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ route('admin.academic-calendar.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-2"></i>Tambah Event
        </a>
    </div>
</div>

<!-- Calendar Preview Card -->
<div class="card mb-4 border-0 shadow-sm">
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h6 class="mb-2"><i class="bi bi-calendar3 me-2"></i>Preview Kalender Akademik</h6>
                <p class="text-muted small mb-0">Lihat preview kalender akademik sebelum menyimpan</p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ route('admin.academic-calendar.preview') }}" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-arrows-fullscreen me-2"></i>Buka Full Calendar
                </a>
            </div>
        </div>
        <div id="miniCalendar" class="mt-3"></div>
    </div>
</div>

<!-- Filter & List -->
<div class="card">
    <div class="card-header">
        <form method="GET" class="row g-3">
            <div class="col-md-4">
                <input type="text" name="search" class="form-control" placeholder="Cari event..." value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <select name="event_type" class="form-select">
                    <option value="">Semua Tipe</option>
                    @foreach($eventTypes as $key => $type)
                    <option value="{{ $key }}" {{ request('event_type') == $key ? 'selected' : '' }}>{{ $type }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search me-2"></i>Filter
                </button>
            </div>
        </form>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th style="width: 50px;">#</th>
                    <th style="width: 120px;">Warna</th>
                    <th>Event</th>
                    <th style="width: 120px;">Tipe</th>
                    <th style="width: 180px;">Tanggal</th>
                    <th style="width: 150px;">Tampilan</th>
                    <th style="width: 80px;">Status</th>
                    <th style="width: 120px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($events as $index => $event)
                <tr>
                    <td class="text-muted">{{ $events->firstItem() + $index }}</td>
                    <td>
                        <span class="badge {{ $event->color_class }}" style="padding: 8px 12px;">
                            <i class="bi bi-circle-fill" style="font-size: 8px;"></i>
                        </span>
                    </td>
                    <td>
                        <strong>{{ $event->title }}</strong>
                        @if($event->description)
                        <p class="text-muted mb-0 small">{{ Str::limit($event->description, 50) }}</p>
                        @endif
                        @if($event->is_annual)
                        <span class="badge bg-secondary mt-1"><i class="bi bi-repeat"></i> Tahunan</span>
                        @endif
                    </td>
                    <td>
                        <span class="badge bg-light text-dark">{{ $event->event_type_label }}</span>
                    </td>
                    <td>
                        <small>{{ $event->start_date->format('d M Y') }}</small>
                        @if($event->start_date->format('Y-m-d') != $event->end_date->format('Y-m-d'))
                        <br><small class="text-muted">s/d {{ $event->end_date->format('d M Y') }}</small>
                        @endif
                    </td>
                    <td>
                        <div class="d-flex gap-1">
                            @if($event->show_to_dosen)
                            <span class="badge bg-primary"><i class="bi bi-mortarboard"></i> Dosen</span>
                            @endif
                            @if($event->show_to_mahasiswa)
                            <span class="badge bg-success"><i class="bi bi-person"></i> Mhs</span>
                            @endif
                        </div>
                    </td>
                    <td>
                        @if($event->is_active)
                        <span class="badge bg-success">Aktif</span>
                        @else
                        <span class="badge bg-secondary">Nonaktif</span>
                        @endif
                    </td>
                    <td>
                        <div class="d-flex gap-1">
                            <a href="{{ route('admin.academic-calendar.edit', $event) }}" class="action-btn edit" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form action="{{ route('admin.academic-calendar.toggle-status', $event) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="action-btn {{ $event->is_active ? 'view' : 'delete' }}" title="{{ $event->is_active ? 'Nonaktifkan' : 'Aktifkan' }}">
                                    <i class="bi {{ $event->is_active ? 'bi-eye-slash' : 'bi-eye' }}"></i>
                                </button>
                            </form>
                            <form action="{{ route('admin.academic-calendar.destroy', $event) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="action-btn delete" title="Hapus" onclick="return confirm('Yakin hapus event ini?')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-5">
                        <div class="text-muted">
                            <i class="bi bi-calendar-x fs-1 d-block mb-2"></i>
                            <span>Belum ada event kalender akademik</span>
                            <br>
                            <a href="{{ route('admin.academic-calendar.create') }}" class="btn btn-primary btn-sm mt-2">
                                Tambah Event Pertama
                            </a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($events->hasPages())
    <div class="card-footer bg-white">
        {{ $events->withQueryString()->links('pagination::bootstrap-4') }}
    </div>
    @endif
</div>

<style>
    .badge.bg-primary { background-color: #696cff !important; }
    .badge.bg-success { background-color: #02c39a !important; }
    .badge.bg-danger { background-color: #ff4b4b !important; }
    .badge.bg-warning { background-color: #fcb02c !important; }
    .badge.bg-info { background-color: #03c3ff !important; }
    .badge.bg-purple { background-color: #9c27b0 !important; }
    .badge.bg-pink { background-color: #e91e63 !important; }
    .badge.bg-orange { background-color: #ff9800 !important; }
</style>
@endsection