<script> 
    var events = @json($events);
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendarielmeucompte');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'timeGridWeek',
            headerToolbar: {
                left: 'prev,next',
                center: 'title',
                right: 'timeGridWeek' // user can switch between the two
            },
            slotMinTime: '09:00:00',
            slotMaxTime: '15:00:00',
            slotDuration: '01:00:00',
            businessHours: [ // specify an array instead
              {
                daysOfWeek:  [ 1, 2, 3, 4, 5 ] , // Monday, Tuesday, Wednesday
                startTime: '09:00', // 8am
                endTime: '15:00' // 6pm
              }/*,
              {
                daysOfWeek:  [ 1, 2, 3, 4, 5 ] , // Thursday, Friday
                startTime: '15:00', // 10am
                endTime: '18:00' // 4pm
              }*/
            ],
            selectConstraint: "businessHours",
            locale: 'ca',
            expandRows: true,
            nowIndicator: true,
            firstDay: 1,
            selectable: true,
            //allDay: false,
            allDaySlot: false,

            

            hiddenDays: [ 0, 6 ],
            
                /*events: [
                    // ... tus eventos normales
                    {
                        title: 'No disponible',
                        start: '2025-11-06T10:00:00',
                        end: '2025-11-06T12:00:00',
                        display: 'background',
                        backgroundColor: '#ff2e00',
                        color: "#000",
                    }
                ],
                selectOverlap: false, // Evita que la selección se superponga con eventos (de fondo incluidos)
                // ...*/

            events: @json($events),
            


            /*displayEventTime: true,*/
            /*eventContent: function( info ) {
                  return {html: info.event.title};
            },*/
            slotEventOverlap: false,
            /*eventClick: function(event) {
                if (event.event.url) {
                  event.jsEvent.preventDefault();
                  window.open(event.event.url, "_blank");
                }
            },*/
            

            //filtros tipo de evento

            eventClassNames: function(info) {
      
              var result = true;
              var kinds = [];
              
              // Find all checkbox that are event filters and enabled and save the values.
              $("input[name='event_filter_sel']:checked").each(function () {
                // Saving each type separately
                if ($(this).data('type') == 'groupId') {
                  kinds.push($(this).val());
                  //console.log($(this).val())
                }
              });
              // If there are specific types of events
              if (kinds.length) {
                result = result && kinds.indexOf(info.event.groupId) >= 0;
              }
              if (!result) {
                result = "hidden";
              }
              return result;
            },

            /*windowResize: function(view) {
              var current_view = view.type;
              var expected_view = $(window).width() > 800 ? 'dayGridMonth' : 'listWeek';
              if (current_view !== expected_view) {
                calendar.changeView(expected_view);
              }
            },*/
          });

          calendar.render();

          if ($(window).width() < 800) {
            calendar.changeView('dayGrid');
          }

          $('input[class=event_filter]').change(function() {
            calendar.render();
          });
        });

        //console.log(events);
</script>