@extends('layouts.landing')

@section('title', 'Mi portal')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/home-teacher.css') }}">
@endpush
@section('content')
    <div class="wrapper">
        @include('layouts._partials.header')
        <!-- sidebard -->
        @include('layouts._partials.menuTeacher', ['activeItem' => 'inicio'])

        <div class="content-wrapper p-2">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header d-flex justify-content-center position-relative m-2">
                        <h4 class="m-0"><i class="fas fa-calendar-week"></i> Horario Semanal</h4>
                        <a href="{{ route('profesor') }}" class="btn btn-info position-absolute end-0">
                            <i class="fas fa-calendar-day"></i> Hoy
                        </a>
                    </div>

                    <div class="card-body">
                        {{-- <pre>{{ json_encode($schedules, JSON_PRETTY_PRINT) }}</pre> --}}
                        <div id="calendarAll"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <x-alert-request :errors="$errors" />
    @include('layouts._partials.footer')
    </div>

@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const dayMapping = {
                "Lunes": 1,
                "Martes": 2,
                "Miércoles": 3,
                "Jueves": 4,
                "Viernes": 5
            };
            // Obtener los horarios desde Blade (convertir JSON de Laravel a JavaScript)
            var schedules = {!! json_encode($schedules) !!};
            console.log(schedules); // Verificación en consola

            // Convertir los datos a formato de eventos de FullCalendar
            var scheduleEvents = schedules.map(schedule => {
                let today = new Date();
                let dayOffset = dayMapping[schedule.day_week] - today
                    .getDay(); // Diferencia con el día actual
                let eventDate = new Date(today.setDate(today.getDate() +
                    dayOffset)); // Calcula la fecha del evento

                let formattedDate = eventDate.toISOString().split("T")[0]; // Convierte a "YYYY-MM-DD"

                return {
                    title: `${schedule.course} - ${schedule.section}`,
                    start: formattedDate + "T" + schedule.start_time,
                    end: formattedDate + "T" + schedule.end_time,
                    color: "#17a2b8",
                    extendedProps: {
                        course: schedule.course,
                        section: schedule.section,
                        teacher: schedule.teacher,
                        time: `${schedule.start_time} a ${schedule.end_time}`
                    }
                };
            });


            console.log(scheduleEvents); // ✅ Verificación en consola

            var calendarEl = document.getElementById('calendarAll');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'timeGridWeek', // Vista semanal
                locale: 'es',
                slotMinTime: "08:00:00",
                slotMaxTime: "16:00:00",
                allDaySlot: false,
                headerToolbar: false,
                selectable: true,
                selectMirror: true,
                height: "auto",
                hiddenDays: [0, 6], // Ocultar domingo y sábado
                businessHours: [{
                    daysOfWeek: [1, 2, 3, 4, 5], // Lunes a viernes
                    startTime: "08:00",
                    endTime: "15:40"
                }],
                events: scheduleEvents,

                // Personalización del contenido del evento
                eventContent: function(arg) {
                    let eventTitle = document.createElement("div");
                    eventTitle.innerHTML = `<strong>${arg.event.title}</strong>`;

                    let eventDetails = document.createElement("div");
                    eventDetails.innerHTML =
                        `${arg.event.extendedProps.time}`;

                    let eventContainer = document.createElement("div");
                    eventContainer.appendChild(eventTitle);
                    eventContainer.appendChild(eventDetails);

                    return {
                        domNodes: [eventContainer]
                    };
                },
                eventMouseEnter: function(info) {
                    var event = info.event;
                    var tooltip = new bootstrap.Tooltip(info.el, {
                        title: `<strong>${event.extendedProps.course}</strong><br>
                            Sección: ${event.extendedProps.section}<br>
                            Hora: ${event.extendedProps.time}`,
                        placement: "top",
                        trigger: "hover",
                        container: "body",
                        html: true
                    });
                    tooltip.show();
                },

                eventMouseLeave: function(info) {
                    var tooltip = bootstrap.Tooltip.getInstance(info.el);
                    if (tooltip) {
                        tooltip.dispose();
                    }
                },
            });
            // Mostrar información emergente al pasar el mouse
            calendar.render();
        });
    </script>
@endpush