<meta charset='utf-8' />
<link href='%relativeSiteAssetPath%/sc_lib/main.css' rel='stylesheet' />
<script src='%relativeSiteAssetPath%/sc_lib/main.js'></script>
<script src='%relativeSiteAssetPath%/offset/offset.js'></script>
<script src='%siteAssetPath%/sc_lib/locales-all.min.js'></script>


%%[[if publish]]%%
<script src='%siteAssetPath%/sc_lib/viewEvent.js'></script>
<div id='script-warning'>
    <!--  <code>php/get-events.php</code> must be running. -->
  </div>
  <div id='loading'></div>

  
  <!-- modal code -->
  <!-- for cal view page to use a modal -->
<div class="cv_modal-overlay" id="modal-overlay"></div>

<div class="cv_modal-container" id="modal-container">
  <div class="cv_modal-content">
    <div class="cv_modal-header">
      <h5 class="cv_modal-title" id="show_event_label"></h5>
      <button class="cv_modal-close" id="cv_modal-close">×</button>
    </div>
    <div class="cv_modal-body">
      <iframe id="show_event_iframe" style="border:0;width:100%;height:100%;"></iframe>
    </div>
  </div>
</div>



%%[[endif]]%%

%%[[if preview]]%%
<div id='script-warning'>
    <!--  <code>php/get-events.php</code> must be running. -->
  </div>

  <div id='loading'>loading...</div>

%%[[endif]]%%


 <div id='calendar'>
  <div id='loading'></div>
</div>

<script>
    // Get UI setting for hours
    var hours = <?php echo isset($_SESSION['hours']) && !empty($_SESSION['hours']) ? "'".$_SESSION['hours']."'" : "'1'"; ?>; // If not in session default to 1
    var usemodal = 1; // Set usemodal to 1 or 0

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var tz = '%id=tzoiveride%';

        // Build the configuration object for FullCalendar
        var calendarConfig = {
            initialView: window.innerWidth >= '%id=breakpoint%' ? 'dayGridMonth' : 'listWeek',
            height: 'auto',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: '%[if %(%id=viewmonth% == 1)% ]%dayGridMonth,%[endif]%%[if %(%id=viewweek% == 1)% ]%timeGridWeek,%[endif]%%[if %(%id=viewday% == 1)% ]%timeGridDay,%[endif]%%[if %(%id=viewlist% == 1)% ]%listWeek%[endif]%'
            },
            editable: true,
            navLinks: true,
            dayMaxEvents: true,
            events: {
                url: '%relativeSiteAssetPath%/sc_php/get-events.php?cid=events',
                failure: function() {
                    document.getElementById('script-warning').style.display = 'block'
                }
            }
        };

        // Conditionally set the timeZone property
        if (tz === '') {
            calendarConfig.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        } else {
            calendarConfig.timeZone = tz;
        }

        %%[[if publish]]%%
        calendarConfig.eventClick = function(info) {
            info.jsEvent.preventDefault(); // don't let the browser navigate

            if (info.event.url) {
                if (%id=usemodal% == 1) {
                    // Load the detail page in the view event modal using an iframe
                    document.getElementById("show_event_label").innerHTML = info.event.title;
                    document.getElementById("modal-container").style.display = "block";

                    // Add a delay to ensure that the modal is fully displayed before loading the content
                    setTimeout(function() {
                        document.getElementById("show_event_iframe").src = info.event.url + '?cid=' + info.event.id;
                    }, 500);
                } else {
                    // Load the detail page in a new tab
                    window.open(info.event.url +'?cid=' + info.event.id,"_parent");
                }
            }
        };
        %%[[endif]]%%

        // Initialize the calendar with the configuration
        var calendar = new FullCalendar.Calendar(calendarEl, calendarConfig);

        // ... Your other FullCalendar configurations and logic

        calendar.setOption('locale', '%id=locale%');
        calendar.setOption('firstDay', %id=mondayfirst%);
        
        if (hours !== '1') {
            calendar.setOption('eventTimeFormat', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: true
            });

            calendar.setOption('slotLabelFormat', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: true
            });
        } else {
            calendar.setOption('eventTimeFormat', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            });

            calendar.setOption('slotLabelFormat', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            });
        }

        calendar.render();
    });
</script>

