{{-- 
    Lokasi File: resources/views/guru/kalender/index.blade.php 
    Status: ENTERPRISE EDITION (FullCalendar + Activity Feed UI)
--}}

@extends('adminlte::page')

@section('title', 'Smart Kalender | Smart Cendekia')

@section('content_header')
@stop

@section('css')
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<style>
    :root {
        --app-bg: #f8fafc;
        --brand-primary: #4f46e5;
        --brand-secondary: #6366f1;
        --brand-success: #10b981;
        --brand-warning: #f59e0b;
        --brand-danger: #ef4444;
        --text-dark: #0f172a;
        --text-slate: #475569;
        --glass-bg: rgba(255, 255, 255, 0.9);
    }

    body { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: var(--app-bg); color: var(--text-dark); }
    .content-wrapper { background-color: var(--app-bg) !important; border: none !important; }
    .safe-container { padding: 0 15px; max-width: 1100px; margin: 0 auto; padding-bottom: 120px; }

    /* --- ENTERPRISE HEADER BAR --- */
    .page-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 30px 5px 20px;
    }
    .page-header h3 { font-weight: 800; letter-spacing: -1px; margin: 0; font-size: 1.75rem; }

    /* --- CALENDAR PREMIUM WRAPPER --- */
    .calendar-card {
        background: white; border-radius: 30px; padding: 25px;
        border: 1px solid rgba(226, 232, 240, 0.8);
        box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.05);
    }

    /* FIX NAVIGATOR SEJAJAR & MODERN */
    .fc-header-toolbar {
        display: flex !important; flex-direction: row !important;
        justify-content: space-between !important; align-items: center !important;
        margin-bottom: 25px !important; flex-wrap: nowrap !important;
    }
    .fc-toolbar-title { font-weight: 800 !important; font-size: 1.1rem !important; color: var(--text-dark); text-transform: capitalize; }
    
    .fc-button {
        background: #f1f5f9 !important; border: none !important; color: var(--text-slate) !important;
        font-weight: 700 !important; border-radius: 12px !important; padding: 8px 16px !important;
        transition: all 0.3s ease !important;
    }
    .fc-button:hover { background: #e2e8f0 !important; transform: translateY(-1px); }
    .fc-button-active { background: var(--brand-primary) !important; color: white !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important; }
    .fc-today-button { background: white !important; border: 1px solid #e2e8f0 !important; }

    /* DAY STYLING */
    .fc-daygrid-day-number { font-weight: 700; color: var(--text-slate); font-size: 0.85rem; padding: 10px !important; }
    .fc-col-header-cell { background: #f8fafc; padding: 12px 0 !important; border: none !important; }
    .fc-col-header-cell-cushion { text-transform: uppercase; font-size: 0.65rem; font-weight: 800; color: #94a3b8; letter-spacing: 1px; }
    .fc-day-today { background: rgba(79, 70, 229, 0.03) !important; }

    /* EVENT STYLING */
    .fc-event { border: none !important; padding: 3px 6px !important; border-radius: 8px !important; margin-bottom: 2px !important; }
    .ev-jadwal { background: #e0e7ff !important; border-left: 4px solid var(--brand-primary) !important; color: #3730a3 !important; font-weight: 700; font-size: 0.7rem; }
    .ev-memo { background: #fef3c7 !important; border-left: 4px solid var(--brand-warning) !important; color: #92400e !important; font-weight: 700; font-size: 0.7rem; }

    /* --- ACTIVITY FEED (MEMO LIST) --- */
    .memo-activity-container { margin-top: 40px; position: relative; }
    .memo-item-pro {
        background: white; border-radius: 20px; padding: 20px;
        border: 1px solid #f1f5f9; display: flex; align-items: center;
        gap: 20px; margin-bottom: 15px; transition: 0.3s;
    }
    .memo-item-pro:hover { transform: translateX(5px); box-shadow: 0 10px 20px rgba(0,0,0,0.02); }
    
    .status-dot {
        width: 12px; height: 12px; border-radius: 50%; 
        background: var(--brand-warning); position: relative;
    }
    .status-dot::after {
        content: ''; position: absolute; width: 100%; height: 100%;
        border-radius: 50%; background: inherit; animation: pulse 2s infinite; opacity: 0.5;
    }

    .memo-content-box { flex: 1; }
    .memo-title { font-weight: 800; font-size: 0.95rem; color: var(--text-dark); margin: 0; }
    .memo-meta { font-size: 0.75rem; color: #94a3b8; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-top: 4px; }

    /* --- FLOATING ACTION --- */
    .btn-fab {
        position: fixed; bottom: 100px; right: 25px; z-index: 1000;
        width: 60px; height: 60px; border-radius: 20px;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: white; border: none; font-size: 1.5rem;
        box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
        display: flex; align-items: center; justify-content: center; transition: 0.3s;
    }
    .btn-fab:hover { transform: scale(1.1) rotate(90deg); }

    /* --- LEGEND --- */
    .calendar-legend { display: flex; gap: 20px; margin-bottom: 15px; padding: 0 5px; }
    .legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 800; color: #64748b; text-transform: uppercase; }
    .dot { width: 8px; height: 8px; border-radius: 2px; }

    @keyframes pulse {
        0% { transform: scale(1); opacity: 0.5; }
        100% { transform: scale(2.5); opacity: 0; }
    }

    @media (max-width: 768px) {
        .fc-header-toolbar { padding: 0 !important; }
        .fc-toolbar-title { font-size: 0.95rem !important; }
        .fc-button { padding: 6px 10px !important; font-size: 0.75rem !important; }
    }

    @media (min-width: 992px) {
        .mobile-header-wrapper { display: none !important; }
    }
</style>
@stop

@section('content')

{{-- 1. HEADER MOBILE --}}
<div class="mobile-header-wrapper">
    @include('partials.header_mobile')
</div>

<div class="safe-container animate__animated animate__fadeIn">

    {{-- 2. PAGE TITLE & HEADER --}}
    <div class="page-header">
        <div>
            <h3>Smart Kalender</h3>
            <div class="d-flex align-items-center gap-2">
                <span class="badge badge-soft-primary py-1 px-3" style="background: var(--brand-primary); color: white; border-radius: 50px; font-size: 0.65rem; font-weight: 800;">Enterprise Mode</span>
            </div>
        </div>
        <div class="d-none d-lg-block">
             <button onclick="openMemoModal()" class="btn btn-primary rounded-pill font-weight-bold px-4 shadow-sm" style="background: var(--brand-primary); border: none;">
                <i class="fas fa-plus-circle mr-2"></i> Tambah Memo
            </button>
        </div>
    </div>

    {{-- 3. CALENDAR LEGEND --}}
    <div class="calendar-legend">
        <div class="legend-item"><span class="dot" style="background: var(--brand-primary);"></span> Jadwal Mengajar</div>
        <div class="legend-item"><span class="dot" style="background: var(--brand-warning);"></span> Memo Pribadi</div>
    </div>

    {{-- 4. CALENDAR CONTAINER --}}
    <div class="calendar-card">
        <div id='calendar'></div>
    </div>

    {{-- 5. ACTIVITY FEED (MEMO LIST) --}}
    <div class="memo-activity-container">
        <div class="d-flex justify-content-between align-items-center mb-4 px-2">
            <h5 class="font-weight-800 m-0">Agenda & Catatan</h5>
            <span class="text-muted small font-weight-bold">{{ count($memos) }} Catatan Aktif</span>
        </div>

        @forelse($memos as $memo)
            <div class="memo-item-pro animate__animated animate__fadeInUp">
                <div class="status-dot"></div>
                <div class="memo-content-box">
                    <p class="memo-title">{{ $memo->isi }}</p>
                    <div class="memo-meta">
                        <span><i class="far fa-calendar-alt"></i> {{ \Carbon\Carbon::parse($memo->tanggal)->translatedFormat('d M Y') }}</span>
                        <span style="color: #e2e8f0;">|</span>
                        <span><i class="fas fa-university"></i> {{ $user->sekolah->nama_sekolah ?? 'Lembaga' }}</span>
                    </div>
                </div>
                <form action="{{ route('kalender.memo.delete', $memo->id) }}" method="POST">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-link p-0 text-danger opacity-50" onclick="return confirm('Hapus memo ini?')">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </form>
            </div>
        @empty
            <div class="text-center py-5 bg-white rounded-30 border" style="border-style: dashed !important; border-width: 2px !important;">
                <img src="https://cdn-icons-png.flaticon.com/512/6598/6598519.png" width="80" class="opacity-25 mb-3">
                <p class="text-muted font-weight-bold mb-0">Belum ada agenda tambahan untuk Anda.</p>
            </div>
        @endforelse
    </div>
</div>

{{-- 6. MOBILE FAB --}}
<button onclick="openMemoModal()" class="btn-fab d-lg-none shadow-lg">
    <i class="fas fa-plus"></i>
</button>

{{-- 7. MODERN MODAL --}}
<div class="modal fade" id="modalMemo" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 35px; overflow: hidden;">
            <form action="{{ route('kalender.memo.store') }}" method="POST">
                @csrf
                <div class="modal-body p-5">
                    <div class="text-center mb-5">
                        <div style="width: 70px; height: 70px; background: #f1f5f9; color: var(--brand-primary); border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 15px;">
                            <i class="fas fa-calendar-plus"></i>
                        </div>
                        <h4 class="font-weight-900 text-dark">Agenda Baru</h4>
                        <p class="text-muted small font-weight-600">Jadwalkan aktivitas penting Anda.</p>
                    </div>

                    <div class="form-group mb-4">
                        <label class="small font-weight-800 text-slate ml-1">TANGGAL AGENDA</label>
                        <input type="date" name="tanggal" id="memo_date" class="form-control border-0 bg-light px-4" required style="height: 55px; border-radius: 16px; font-weight: 700;">
                    </div>

                    <div class="form-group mb-5">
                        <label class="small font-weight-800 text-slate ml-1">DESKRIPSI SINGKAT</label>
                        <textarea name="isi" class="form-control border-0 bg-light px-4 pt-3" rows="3" placeholder="Apa yang ingin dicatat?" required style="border-radius: 16px;"></textarea>
                    </div>

                    <div class="d-flex gap-3" style="gap: 12px;">
                        <button type="button" class="btn btn-light flex-fill rounded-pill font-weight-bold py-3" data-dismiss="modal">BATAL</button>
                        <button type="submit" class="btn btn-primary flex-fill rounded-pill font-weight-bold py-3 shadow-sm" style="background: var(--brand-primary); border: none;">SIMPAN AGENDA</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@include('partials.guru_mobile_nav')

@stop

@section('js')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/id.js'></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'id',
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev',
                center: 'title',
                right: 'next,today'
            },
            height: 'auto',
            dayMaxEvents: 2,
            editable: false,
            selectable: true,
            
            events: [
                // DATA JADWAL
                @foreach($jadwalSemua as $j)
                {
                    title: '📖 {{ $j->kelas->nama_kelas }}',
                    daysOfWeek: [ '{{ $j->hari_id }}' ], 
                    className: 'ev-jadwal',
                    extendedProps: { type: 'Jadwal', detail: 'Mapel: {{ $j->mataPelajaran->nama_mapel }}' }
                },
                @endforeach

                // DATA MEMO
                @foreach($memos as $m)
                {
                    title: '📌 {{ $m->isi }}',
                    start: '{{ $m->tanggal }}',
                    className: 'ev-memo',
                    extendedProps: { type: 'Memo', detail: '{{ $m->isi }}' }
                }
                @endforeach
            ],

            dateClick: function(info) {
                openMemoModal(info.dateStr);
            },

            eventClick: function(info) {
                Swal.fire({
                    title: info.event.extendedProps.type,
                    html: `<div class="py-2"><p class="font-weight-bold">${info.event.title}</p><p class="small text-muted">${info.event.extendedProps.detail}</p></div>`,
                    icon: info.event.extendedProps.type == 'Jadwal' ? 'info' : 'warning',
                    confirmButtonColor: '#4f46e5',
                    customClass: { popup: 'rounded-30' }
                });
            }
        });

        calendar.render();
    });

    function openMemoModal(date = '') {
        if(date) document.getElementById('memo_date').value = date;
        $('#modalMemo').modal('show');
    }
</script>
@stop