@extends('layouts.app2')

@section('content')




<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                    {{$pageTitle}}
                </h2>

            </div>
            <div class="body">

                <div class="col-md-12">
                    <div class="form-line">
                        <select class="form-control select2_new" id="user_id">
                            <option value="">-- Pilih Pegawai --</option>
                            @forelse ($member as $item)

                            <option value="{{$item['id']}}">
                                {{$item['name']}}</option>

                            @empty
                            @endforelse
                        </select>
                    </div>
                </div>
                <div id='calendar'></div>
            </div>
        </div>
    </div>


</div>






@endsection
@section('customjs')

<script>
var calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    // editable: true,
    // events: "{!! route('partner.indexAjax') !!}",
    // events: {
    //     url: "{!! route('partner.indexAjax') !!}",
    //     type: 'POST',
    //     data: {
    //         "_token": "{!! csrf_token() !!}",
    //         "start": "",
    //         "end": "",
    //         "user_id": $('#user_id').val(),
    //         // "xxx": "vvv",
    //     },
    //     error: function() {
    //         alert('there was an error while fetching events!');
    //     },
    //     success: function(data) {
    //         console.log(data)
    //     }
    // },

    events: function(start, end, timezone, callback) {
        jQuery.ajax({
            url: "{!! route('dashboard.indexAjax') !!}",
            type: 'POST',
            dataType: 'json',
            data: {
                start: start.format(),
                end: end.format(),
                _token: "{!! csrf_token() !!}",
                user_id: $('#user_id').val(),
            },
            success: function(doc) {
                // console.log(doc.result);
                var events = [];
                // if (!!doc.result) {
                $.map(doc, function(r) {
                    events.push({
                        id: r.id,
                        title: r.user.name + ' (' + r.title + ')',
                        start: r.start,
                        end: r.end,
                        description: r.start_plot,
                        end_time: r.end_plot
                    });
                });
                // }

                // $(doc).find('event').each(function() {
                //     events.push({
                //         title: $(this).attr('title'),
                //         start: $(this).attr('start'),
                //         end: $(this).attr('end')
                //     });
                // });

                callback(events);
            }
        });
    },
    displayEventTime: false,
    editable: false,
    // eventRender: function(event, element, view) {
    //     if (event.allDay === 'true') {
    //         event.allDay = true;
    //     } else {
    //         event.allDay = false;
    //     }
    // },
    selectable: true,
    selectHelper: true,

    // eventDrop: function(event, delta) {
    //     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD");
    //     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD");

    //     $.ajax({
    //         url: "{!! route('partner.ajax') !!}",
    //         data: {
    //             title: event.title,
    //             start: start,
    //             end: end,
    //             id: event.id,
    //             type: 'update',
    //             "_token": "{!! csrf_token() !!}",
    //         },
    //         type: "POST",
    //         success: function(response) {
    //             displayMessage("Event Updated Successfully");
    //         }
    //     });
    // },

    eventRender: function(event, element) {
        // console.log(event);
        element.find('.fc-title').append("<br/>" + new Date(event.description).getHours() +
            ':' + new Date(event.description).getMinutes() +
            '-' + new Date(event.end_time).getHours() + ':' + new Date(event.end_time)
            .getMinutes());
        element.find('.fc-title').attr('data-toggle', 'tooltip');

        element.find('.fc-title').attr('title', event.title);

    }

});

$('#user_id').on('change', function(events) {

    calendar.fullCalendar('refetchEvents');

});
</script>

@endsection