{% extends 'baseCardenal.html.twig' %}


{% block title %} GRAN CARDENAL | Bienvenido {% endblock %}


{% block stylesheets %}

    {{ encore_entry_link_tags('app') }}

{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
    <script src="{{ asset('js/misJs/Agenda/agenda.js') }}"></script>
    <script src="{{ asset('js/misJs/Inventario/inventario.js') }}"></script>
{% endblock %}




{% block menu %}

    <!--begin:Menu item-->
    <div data-kt-menu-placement="right-start" class="menu-item show here py-2 active" title="Agenda"
         data-boundary="window" data-placement="right" data-toggle="tooltip"
         onclick="recargarPag();">
        <span class="menu-link menu-center">
            <span class="menu-icon me-0">
                <i class="ki-outline ki-home fs-2x"></i>
            </span>
        </span>
    </div>
    <!--end:Menu item-->
    <!--begin:Menu item-->
    <div data-kt-menu-placement="right-start" class="menu-item show here py-2 active" title="Inventario"
         onclick="contenedorInventario();">
        <!--begin:Menu link-->
        <span class="menu-link menu-center">
            <span class="menu-icon me-0">
                <i class="ki-outline ki-abstract-26 fs-2x"></i>
            </span>
        </span>
        <!--end:Menu link-->
    </div>
    <!--end:Menu item-->

{% endblock %}


{% block body %}

    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-fluid">
        <!--begin::Row-->
        <div class="row g-12 g-xl-12 mb-12 mb-xl-12">
            <!--begin::Col-->
            <div class="col-xxl-12 mb-lg-12 mb-xl-12">

                <div class="card shadow-sm">

                    <div class="card-body" id="contenedor-body">
                        <script>


                            document.addEventListener("DOMContentLoaded", function () {
                                var todayDate = moment().startOf('day');
                                var TODAY = todayDate.format('YYYY-MM-DD');

                                var calendarEl = document.getElementById('contenedor-body');
                                var calendar = new FullCalendar.Calendar(calendarEl, {
                                    headerToolbar: {
                                        left: 'prev,next today',
                                        center: 'title',
                                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
                                    },
                                    initialDate: TODAY,
                                    navLinks: true,
                                    selectable: true,
                                    selectMirror: true,
                                    editable: true,
                                    dayMaxEvents: true,
                                });

                                var color = ['#c7e1f7', '#f7c7c7', '#c7f7c7', '#f7d9c7'];
                                var colorIndex = 0;

                                // Agregar eventos
                                {% for e in eventos %}
                                var colores = color[colorIndex % color.length];
                                {% if e.horaEvento is not null %}
                                calendar.addEvent({
                                    title: '{{ e.cveEvento.descripcion }}',
                                    start: '{{ e.fechaEvento | date('Y-m-d') }}' + 'T' + '{{ e.horaEvento | date('H:i:s') }}',
                                    backgroundColor: colores,
                                    borderColor: colores,
                                    className: 'fc-event-solid'
                                });
                                {% else %}
                                calendar.addEvent({
                                    title: '{{ e.cveEvento.descripcion }}',
                                    start: '{{ e.fechaEvento | date('Y-m-d') }}',
                                    backgroundColor: colores,
                                    borderColor: colores,
                                    className: 'fc-event-solid'
                                });
                                {% endif %}
                                colorIndex++;
                                {% endfor %}
                                calendar.render();
                            });


                        </script>
                        <button type="button" class="btn btn-primary" id="showDetailsButton" style="display: none;">Leer
                            más
                        </button>

                    </div>

                    <div class="card-footer">

                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="modal" tabindex="-1" id="eventoModal">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light-danger text-danger">
                    <h3 class="modal-title text-danger text-center" id="modalTitle">Agendar cita</h3>
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                         aria-label="Close">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </div>
                </div>
                <div class="modal-body" id="modalDescriptionContainer">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" id="closeModalButton">Close
                    </button>
                </div>
            </div>
        </div>
    </div>



{% endblock %}


{% block sub_menu %}

    <div class="col-sm-12">

        <div id="contenedor-submenu">
            <button type="button" class="btn btn-primary col-lg-12" data-bs-toggle="modal"
                    data-bs-target="#exampleModalCenter"
                    onclick="formularioEvento();">
                Agendar cita
            </button>

            <div class="modal " tabindex="-1" id="exampleModalCenter">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header bg-light-danger text-danger">
                            <h3 class="modal-title text-danger text-center">Agendar cita</h3>

                            <!--begin::Close-->
                            <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                                 aria-label="Close">
                                <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span
                                            class="path2"></span></i>
                            </div>
                            <!--end::Close-->
                        </div>

                        <div class="modal-body" id="contenedor-agregar-evento">

                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!--end::Content-->




{% endblock %}