@extends('layouts.surat')

@section('title')
    Kalender Agenda -
@endsection

@push('styles')
    <link href="{{ asset('assets/libs/jquery-scrollbar/jquery.scrollbar.css') }}" rel="stylesheet" type="text/css" media="screen" />
    <link href="{{ asset('assets/css/calendar.css') }}" rel="stylesheet" type="text/css" media="screen" />
    <style>
        .calendar .calendar-container .view.month-view .tble .trow .tcell {
            height: 100px;
        }
    </style>
@endpush

@section('content_surat')
    <div class="card">
        <div class="card-body">
            <div id="calendar" class="full-height mb-5"></div>
        </div>
    </div>

    <div class="modal fade slide-up disable-scroll" id="modal_agenda" role="dialog" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content-wrapper">
                <div class="modal-content">
                    <div class="modal-header clearfix text-left">
                        <h5 id="modal_agenda_judul">Detail Agenda</h5>
                    </div>
                    <div class="modal-body" id="info_agenda" style="height: 500px;overflow-y: scroll;">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/libs/jquery-scrollbar/jquery.scrollbar.min.js') }}"></script>
    <script src="{{ asset('assets/libs/interactjs/interact.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/libs/moment/moment-with-locales.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages.calendar.js') }}"></script>
    <script>
        init_form_element();

        let $modal_agenda = $('#modal_agenda'),
            $info_agenda = $('#info_agenda');

        $('#calendar').html('Loading ...');
        $.post("{{ route('surat.kalender_agenda.search') }}", {
            _token: '{{ csrf_token() }}'
        }, (result) => {
            let data = [];
            $.each(result, (i, value) => {
                data.push({
                    title: value.perihal,
                    class: 'bg-success text-white',
                    start: value.tanggal_undangan + 'T00:00:00',
                    end: value.tanggal_undangan + 'T23:59:59',
                    other: {
                        original: value
                    }
                });
            });
            $('#calendar').pagescalendar({
                events: data,
                view:"month",
                onViewRenderComplete: function() {

                },
                onEventClick: function(event) {
                    detail_event(event);
                },
                onEventDragComplete: function(event) {

                },
                onEventResizeComplete: function(event) {

                },
            });
        }).fail((xhr) => {
            console.log(xhr.responseText);
        });

        let detail_event = (event) => {
            $.post("{{ route('surat.kalender_agenda.info') }}", {
                _token: '{{ csrf_token() }}', id: event.other.original.id
            }, (result) => {
                $modal_agenda.modal('show');
                $info_agenda.html(result);
            }).fail((xhr) => {
                $modal_agenda.modal('show');
                $info_agenda.html(xhr.responseText);
            });
        }
    </script>
@endpush