@extends('layouts.main')

@section('title', 'Agenda')

@section('container')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-12 mb-2 mt-1">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb p-0 mb-0">
                                    <li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}"><i
                                                class="bx bx-home-alt"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#">Agenda</a></li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <div class="pb-1">
                    <a class="btn btn-primary btn-sm" id="tambah-agenda" href="{{ route('user.tambah-agenda') }}">Tambah
                        Agenda</a>
                </div>
                <!-- Basic Tables start -->
                <div class="row" id="basic-table">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-content">
                                <div class="card-body">

                                    <div id="calendar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Basic Tables end -->
            </div>
        </div>
    </div>

    <div id="calendarModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 id="modalTitle" class="modal-title text-center"></h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span
                            class="sr-only">close</span></button>
                </div>
                <div id="modalBody" class="modal-body">
                    <br>
                    <h6 id="title"></h6>
                    <hr>
                    <p id="date"></p>
                    <p id="time"></p>
                    <div class="row">
                        <a href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=NzU2NTQ4YzZqcGg1Z2N0Y2Rkc2o4cTVrdWMgZmVicnlzYW4xOTk1QG0&tmsrc=febrysan1995%40gmail.com" class="btn btn-block btn-primary">Tambahkan ke Google Calendar</a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom-js')
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
    <script>
        $(document).ready(function() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var calendar = $('#calendar').fullCalendar({
                timeZone: 'Asia/Jakarta',
                // editable: true,
                eventColor: '#378006',
                eventTextColor: '#ffffff',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },

                events: '/agenda',
                timeFormat: 'H(:mm)', // uppercase H for 24-hour clock
                selectable: true,
                // selectHelper: true,
                select: function(start, end, allDay) {
                    // var title = prompt('Event Title:');
                },
                eventClick: function(event, jsEvent, view) {
                    // cari jam mulai
                    var startTime = event.start._i;
                    var dateTime = new Date(startTime);                
                    var startHours = dateTime.getHours();
                    var startMinutes = dateTime.getMinutes();
                    var startSeconds = dateTime.getSeconds();
                    var startTime = startHours + ':' + startMinutes + ':' + startSeconds;

                    // cari tanggal kegiatan
                    var day = dateTime.getDate();
                    var month = dateTime.getMonth() + 1; // Month is zero-based, so we add 1
                    var year = dateTime.getFullYear();
                    var formattedDate = day.toString().padStart(2, '0') + '-' +month.toString().padStart(2, '0') + '-' + year;

                    // cari jam selesai
                    var endTime = event.end._i;
                    var dateTime = new Date(endTime);
                    var endHours = dateTime.getHours();
                    var endMinutes = dateTime.getMinutes();
                    var endSeconds = dateTime.getSeconds();
                    var endTime = endHours + ':' + endMinutes + ':' + endSeconds;

                    $('#modalTitle').html(event.title);
                    $('#modalBody').html(event.description);
                    // console.log(event.start);
                    $('#title').html("Nama Kegiatan : " + event.title);
                    $('#date').html("Tanggal Kegiatan : "+formattedDate);
                    $('#time').html("Pukul Mulai : " + startTime + " - " + endTime + " WIB");
                   
                    $('#calendarModal').modal();
                },
                eventDidMount: function(info) {
                    var tooltip = new Tooltip(info.el, {
                        title: info.event.extendedProps.description,
                        placement: 'top',
                        trigger: 'hover',
                        container: 'body'
                    });
                },
            });

        });
    </script>
@endpush
