@extends('admin/layouts.master')
@section('title', 'Edit Course - Admin')
@section('body')

<style>
  <style>

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 14px;
    }

    #top {
      background: #eee;
      border-bottom: 1px solid #ddd;
      padding: 0 10px;
      line-height: 40px;
      font-size: 12px;
    }
    .left { float: left }
    .right { float: right }
    .clear { clear: both }

    #script-warning, #loading { display: none }
    #script-warning { font-weight: bold; color: red }

    #calendar {
      max-width: 1100px;
      margin: 40px auto;
      padding: 0 10px;
    }

    .tzo {
      color: #000;
    }
   

  </style>
<section class="content">

<div class="row">
    <div class="col-sm-12">
      <div id='calendar'></div>
    </div>
</div>

<script>

 document.addEventListener('DOMContentLoaded', function() {
    var initialTimeZone = 'local';
    var timeZoneSelectorEl = document.getElementById('time-zone-selector');
    var calendarEl = document.getElementById('calendar');

    var test_schedules = JSON.parse('');
    var initial_date =   '2026-05-05';  

    console.log(test_schedules);

    var calendar = new FullCalendar.Calendar(calendarEl, {
      timeZone: initialTimeZone,
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      initialDate: initial_date,
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      selectable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events:[test_schedules],

      eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },

      dateClick: function(arg) {
        console.log('dateClick', calendar.formatIso(arg.date));
      },
      select: function(arg) {
        console.log('select', calendar.formatIso(arg.start), calendar.formatIso(arg.end));
      }
    });

    calendar.render();

    // load the list of available timezones, build the <select> options
    // it's HIGHLY recommended to use a different library for network requests, not this internal util func
    FullCalendar.requestJson('GET', 'php/get-time-zones.php', {}, function(timeZones) {

      timeZones.forEach(function(timeZone) {
        var optionEl;

        if (timeZone !== 'UTC') { // UTC is already in the list
          optionEl = document.createElement('option');
          optionEl.value = timeZone;
          optionEl.innerText = timeZone;
          timeZoneSelectorEl.appendChild(optionEl);
        }
      });
    }, function() {
      // TODO: handle error
    });

    // when the timezone selector changes, dynamically change the calendar option
    // timeZoneSelectorEl.addEventListener('change', function() {
    //   calendar.setOption('timeZone', this.value);
    // });
  });

</script>

</section> 


@endsection