@extends('backend.layouts.app')
@section('content')
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-lg-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Agenda Kegiatan</h4>

                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a href="{{route('kegiatan.index')}}" class="nav-link" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Tampilan List </a>
                            <a href="{{route('kegiatan.index', ['view' => 'kalender'])}}" class="nav-link active" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Tampilan Kalender</a>
                        </div>
                        <div class="mt-3">
                            <a href="{{ url('kegiatan/create') }}" class="btn btn-outline-primary btn-fw">Add Data</a>
                            <div id='calendar'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal starts -->
    <!-- <div class="text-center">
        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal">Click for
            demo<i class="ti-arrow-circle-right ms-1"></i></button>
    </div> -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body print-container">
                    <div class="row">
                        <div class="col text-center">
                            <h5 id="exampleModalLabel2"></h5>
                            <h5 id="exampleModalLabel"></h5>
                            <h5 id="exampleModalLabel3"></h5>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <div id="qrcode"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="window.print()" class="btn btn-success">Print</button>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Ends -->
    <!-- content-wrapper ends -->


{{--    modal untuk peserta--}}

    <div class="modal fade" id="modalPeserta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body print-container">
                    <h4 class="card-title" style="text-align: center;">Tambah Undangan</h4>
                    <div class="row">
                        <div class="col-md-10">
                            <select name="" class="form-control" id="cari-user">
                                <option value="">Pilih User</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary btn-block" id="simpan">Tambahkan</button>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="table-responsive">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="window.print()" class="btn btn-success">Print</button>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

{{--    end modal peserta--}}
    @endsection
    @push('after-style')
        <link rel="stylesheet" href="{{asset('master-templates/skydash/vendors/fullcalender/lib/main.css')}}">
        <style>
            .fc-event-title {
                color: #ffffff;
            }
            .fc-event-time {
                color: #ffffff;
            }
            .fc-daygrid-event {
                background-color: #000000;
            }
            .fc-button-primary {
                color: #ff0000 !important;
            }
        </style>

    @endpush
    @push('after-script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

        <script src="{{asset('master-templates/skydash/vendors/fullcalender/lib/main.js')}}"></script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {

    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: { start: 'dayGridMonth,timeGridWeek,timeGridDay' }, // buttons for switching between views
        initialView: 'dayGridMonth',
        events: {
            url: '{{route('get-kegiatan')}}',
            method: 'get',
            failure: function() {
                alert('there was an error while fetching events!');
            },
        },
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            meridiem: true
        },
        dateClick: function(info) {
            calendar.changeView('timeGridDay', info.dateStr);
        }





    });
    calendar.render();
        });

    </script>

    @endpush