@extends("profesor.layout.layout")
@section("styles")
    @php
        $titulo = "Calendario Eventos";
        $modulo = "Calendario Eventos";
        $vista="Calendario Eventos";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>

    <link href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />

    <style>
        .fc-title {
            color: white !important;
        }
        .fc-time {
            color: white !important;
        }
    </style>
@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        <div class="alert alert-primary shadow-sm border-0 rounded-3">
            <h4 class="alert-heading mb-2">¡Hola, <strong>{{ auth()->user()->nombre_completo }}</strong>!</h4>
            <p class="mb-2">Bienvenido al panel de control del profesor.</p>
            <p class="mb-3">
                Hemos actualizado nuestra plataforma para ofrecerte una mejor experiencia.
                Para que estés al tanto de todos los cambios, por favor revisa todos los videos tutoriales que hemos preparado para ti.
                Así podrás aprovechar al máximo todas las nuevas funcionalidades.
            </p>
            <a href="{{ route('profesor::tutoriales') }}" class="btn btn-primary btn-sm fw-bold">
                📹 Ver videos tutoriales
            </a>
        </div>
        <div class="col-md-6">
            @if($cumpleanios->isEmpty())
                <div class="col-md-6 col-sm-12">
                    <div class="card border-light shadow-sm">
                        <div class="card-body">
                            <p class="mb-0 text-muted">
                                <i class="fas fa-info-circle me-2 text-secondary"></i>
                                Hoy no hay estudiantes de cumpleaños.
                            </p>
                        </div>
                    </div>
                </div>
            @else
                @foreach($cumpleanios as $estudiante)
                    <div class="card border-start border-4 border-primary shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title mb-2">
                                Hoy es el cumpleaños de <strong>{{ $estudiante['nombre_completo'] }}</strong> 🎉 <small class="mb-1 text-muted">Fecha: {{ \Carbon\Carbon::parse($estudiante['nacimiento'])->format('Y-m-d') }}</small>
                            </h5>
                            <p class="mb-0 text-muted">
                                <b>Grupo</b>: {{ $estudiante['grupo'] }}
                                <b>Cumple</b>: {{ $estudiante['edad_actual'] }}
                            </p>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>


        <div class="col-md-6">
            @if($bitacoraRecordatorio->isEmpty())
                <div class="card border-light shadow-sm">
                    <div class="card-body">
                        <p class="mb-0 text-muted">
                            <i class="fas fa-bell-slash me-2 text-secondary"></i>
                            Hoy no tienes recordatorios de bitácoras pendientes.
                        </p>
                    </div>
                </div>
            @else
                @foreach($bitacoraRecordatorio as $bitacora)
                    @php
                        $hoy = now()->startOfDay();
                        $fecha = \Carbon\Carbon::parse($bitacora->recordatorio)->startOfDay();
                        $dias = $hoy->diffInDays($fecha);

                        $mensaje = match(true) {
                            $hoy->equalTo($fecha) => 'Hoy',
                            $hoy->copy()->addDay()->equalTo($fecha) => 'Mañana',
                            default => "En {$dias} días",
                        };
                    @endphp

                    <a href="{{ route('profesor::bitacora.ver', $bitacora->id) }}" class="text-decoration-none text-dark">

                        <div class="card border-start border-4 border-warning shadow-sm mb-4">
                            <div class="card-body">
                                <h5 class="card-title mb-2">
                                    <i class="fas fa-bell text-warning me-1"></i>
                                    Recordatorio de bitácora 📒  <span class="text-muted">{{ $mensaje }}</span>
                                </h5>
                                <p class="mb-1 text-muted">
                                    <strong>Fecha de bitácora:</strong> {{ \Carbon\Carbon::parse($bitacora->fecha)->format('Y-m-d') }}
                                </p>
                                <p class="mb-1 text-muted">
                                    <strong>Modulo:</strong> {{ $bitacora->modulo->modulo }}
                                    <strong>Grupo:</strong> {{ $bitacora->grupo->grupo }}
                                </p>
                                <p class="mb-1 text-muted">
                                    <strong>Contenido:</strong> {{ Str::limit($bitacora->bitacora, 100, '...') }}
                                </p>
                            </div>
                        </div>
                    </a>
                @endforeach
            @endif
        </div>




    </div>

    <div class="card card-custom">
        <div class="card-body">
            <div id="kt_calendar"></div>
        </div>
    </div>
@endsection

@section("scripts")

    <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
    <script src="assets/plugins/custom/fullcalendar/es.js"></script>
    <script>
        "use strict";
        var calendar;
        let tipo_calendario=2;

        let KTCalendarBasic = {
            init: function() {
                let e = moment().startOf("day"),
                    t = e.format("YYYY-MM"),
                    i = e.clone().subtract(1, "day").format("YYYY-MM-DD"),
                    n = e.format("YYYY-MM-DD"),
                    r = e.clone().add(1, "day").format("YYYY-MM-DD"),
                    o = document.getElementById("kt_calendar");
                calendar = new FullCalendar.Calendar(o, {
                    plugins: [ "dayGrid", "timeGrid"],
                    isRTL: KTUtil.isRTL(),
                    header: {
                        left: "prev,next today",
                        center: "title",
                        right: "dayGridMonth,timeGridWeek,timeGridDay"
                    },
                    height: 800,
                    contentHeight: 780,
                    aspectRatio: 3,
                    nowIndicator: !0,
                    now: n + "T09:25:00",
                    views: {
                        dayGridMonth: {buttonText: "Mes"},
                        timeGridWeek: {buttonText: "Semana"},
                        timeGridDay: {buttonText: "Día  "}
                    },
                    defaultView: "dayGridMonth",
                    defaultDate: n,
                    disableDragging: true,
                    editable: false,
                    eventLimit: 10,
                    navLinks: !0,
                    events: "{{ route('profesor::calendario.getEventos') }}",
                    locale: "es",

                });
                calendar.render();
            }
        };

        let nuevoEvento;

        $(document).ready((function() {
                KTCalendarBasic.init();
            })
        );

    </script>
@endsection