{{-- Because she competes with no one, no one can compete with her. --}}
<div class="row g-xl-4 g-lg-3 g-2 row-deck">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <x-student.card-title title="Kalender Akademik" subtitle="" />
                <div class="row">
                    <div class="col-md-12 mt-2">
                        <h6 style="font-weight:600">Periode Akademik</h6>
                        <select name="period_id" id="period_id" class="form-control"
                            wire:model.debounce.500ms="period_id">
                            @foreach ($periods as $item)
                                <option value="{{ $item->id }}" @if ($activePeriod?->id == $item->id) selected @endif>
                                    {{ $item->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12 mt-lg-5 mt-4 activities">
                        <h6 style="font-weight:600" class="mb-3">Kegiatan Akademik</h6>
                        @forelse ($academicActivities as $item)
                            <ul class="ul-element">
                                <li>
                                    <span class="mt-2">
                                        {{ $item->title }} <br> ({{ $item->period_time }})
                                    </span>
                                </li>
                            </ul>
                        @empty
                            <span class="mt-2 noact">Tidak ada kegiatan</span>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-body" id="my_calendar"></div>
            <script data-cfasync="false"
                src="https://wrraptheme.com/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
            <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js'></script>
            <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/locales-all.min.js'></script>
            <script>
                document.addEventListener('livewire:load', function() {
                    setCalendar();
                });

                document.addEventListener('contentChanged', function(e) {
                    setCalendar(e);
                });

                function setCalendar(e = null) {
                    var data = e ? e.detail : @this.event;
                    var calendarEl = $('#my_calendar')[0];
                    var calendar = new FullCalendar.Calendar(calendarEl, {
                        timeZone: "UTC",
                        locale: 'id',
                        initialView: "dayGridMonth",
                        events: JSON.parse(data),
                        editable: true,
                        selectable: true,
                        eventDisplay: 'auto',
                        eventClick: function(info) {
                            // inisiasi variabel
                            var _data = JSON.parse(data);
                            var item = null;

                            // check data yang ada berdasar id dari event yang diklik
                            _data.map((v, k) => {
                                if (v.id == info.event.id) {
                                    item = v;
                                }
                            })

                            // inisiasi konfigurasi sweetalert
                            var swalConf = {
                                text: item?.title,
                                // title: info.event.title,
                                // showConfirmButton: false,
                            }

                            // check file di variabel item
                            if (item?.file) {
                                swalConf.imageUrl = item?.file;
                                swalConf.imageWidth = 400;
                                swalConf.imageHeight = 200;
                                swalConf.imageAlt = 'Custom image';
                            }

                            // hit sweetalert
                            Swal.fire(swalConf)
                        }
                    });

                    return calendar.render();
                }
            </script>
        </div>
    </div>
    @livewireScripts
</div>