@extends('layouts.app')

@section('content')
  <div class="page-content">
    <div class="container-fluid">

      <!-- start page title -->
      @include('layouts.partials.breadcrumb', ['title' => $title])

      <!-- end page title -->

      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-xl-3">
              {{-- <div class="card card-h-100">
                <div class="card-body">
                  <button class="btn btn-primary w-100" id="btn-new-event"><i class="mdi mdi-plus"></i>
                    Create New Event</button>

                  <div id="external-events">
                    <br>
                    <p class="text-muted">Drag and drop your event or ctdck in the calendar</p>
                    <div class="external-event fc-event bg-success-subtle text-success" data-class="bg-success-subtle">
                      <i class="mdi mdi-checkbox-blank-circle me-2"></i>New Event Planning
                    </div>
                    <div class="external-event fc-event bg-info-subtle text-info" data-class="bg-info-subtle">
                      <i class="mdi mdi-checkbox-blank-circle me-2"></i>Meeting
                    </div>
                    <div class="external-event fc-event bg-warning-subtle text-warning" data-class="bg-warning-subtle">
                      <i class="mdi mdi-checkbox-blank-circle me-2"></i>Generating Reports
                    </div>
                    <div class="external-event fc-event bg-danger-subtle text-danger" data-class="bg-danger-subtle">
                      <i class="mdi mdi-checkbox-blank-circle me-2"></i>Create New theme
                    </div>
                  </div>

                </div>
              </div> --}}
              <div>
                <h5 class="mb-1">Upcoming Events</h5>
                <p class="text-muted">Don't miss scheduled events</p>
                <div class="me-n1 mb-3 pe-2" data-simplebar style="height: 400px">
                  <div id="upcoming-event-list">
                    @foreach ($events as $event)
                      <div class="card mb-3">
                        <div class="card-body">
                          <div class="d-flex">
                            <div class="flex-grow-1">
                              <h6 class="lh-base mb-1"><a href="#" class="text-reset">{{ $event->title }}</a></h6>
                              <p class="text-muted fs-12 mb-0"><i
                                  class="mdi mdi-checkbox-blank-circle text-info me-2"></i>{{ $event->start_date->format('d M Y | H:i') }}
                              </p>
                            </div>
                            <div class="align-content-end text-danger flex-grow-0">
                              <p class="text-muted fs-12 mb-0"><i
                                  class="mdi mdi-checkbox-blank-circle text-danger me-2"></i>{{ $event->end_date->format('d M Y | H:i') }}
                              </p>
                            </div>
                          </div>

                          {{-- <div class="d-flex mb-3">
                            <div class="flex-grow-1"><i class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                class="fw-medium">{{ $event->start_date->format('d M Y') }} </span></div>
                            <div class="flex-shrink-0"><small
                                class="badge bg-primary-subtle text-primary ms-auto">{{ $event->end_date->format('d M Y') }}</small>
                            </div>
                          </div>
                          <h6 class="card-title fs-16"> {{ $event->title }}</h6>
                          <p class="text-muted text-truncate-two-lines mb-0"> </p> --}}
                        </div>
                      </div>
                    @endforeach

                  </div>
                </div>
              </div>
            </div>
            <!-- end col-->

            <div class="col-xl-9">
              <div class="card card-h-100">
                <div class="card-body">
                  <div id="calendar"></div>
                </div>
              </div>
            </div><!-- end col -->
          </div>
          <!--end row-->
        </div>
      </div> <!-- end row-->
    </div>
  </div>

  <div id="viewModal" class="modal fade" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true"
    style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="viewModalLabel">Detail</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
@endsection

@push('js')
  {{-- <script src="{{ asset('assets/js/plugins.js') }}"></script> --}}
  {{-- <script src="{{ asset('assets/libs/fullcalendar/index.global.min.js') }}"></script> --}}
  {{-- <script src="{{ asset('assets/js/pages/calendar.init.js') }}"></script> --}}
  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });


      var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        initialDate: '2024-05-09',
        navLinks: true, // can click day/week names to navigate views
        businessHours: true, // display business hours
        editable: false,
        selectable: false,
        dayMaxEvents: true,
        events: '/calendarByAjax',
        selectMirror: true,
        select: function(arg) {
          var title = prompt('Event Title:');
          if (title) {
            calendar.addEvent({
              title: title,
              start: arg.start,
              end: arg.end,
              allDay: arg.allDay
            })
          }
          calendar.unselect()
        },
        eventClick: function(arg) {
          console.log(arg.event.title, arg);
          // if (confirm('Are you sure you want to delete this event?')) {
          //   arg.event.remove()
          // }
          html = `<tr>`;
          html += `<td class="text-bold">Title: </td>`;
          html += `<td>${arg.event.title}</td>`;
          html += `</tr>`;

          html += `<tr>`;
          html += `<td class="text-bold">Type: </td>`;
          html += `<td>${arg.event.extendedProps.type}</td>`;
          html += `</tr>`;

          html += `<tr>`;
          html += `<td class="text-bold">Location: </td>`;
          html += `<td>${arg.event.extendedProps.location}</td>`;
          html += `</tr>`;

          html += `<tr>`;
          html += `<td class="text-bold">Description: </td>`;
          html += `<td>${arg.event.extendedProps.desc}</td>`;
          html += `</tr>`;

          modal = $('#viewModal')
          modal.find('.modal-body').html(html)
          $('#viewModal').modal('show')
        },
      });

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