@extends('app-new')
@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
    <!-- CALENDER  -->
    
    <link rel="stylesheet" href="/assets/plugins/bower_components/calendar/dist/fullcalendar.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/morrisjs/morris.css">
    <!--Owl carousel CSS -->
    <link rel="stylesheet" href="/assets/plugins/bower_components/owl.carousel/owl.carousel.min.css">
    <!--Owl carousel CSS -->
    <link rel="stylesheet" href="/assets/plugins/bower_components/owl.carousel/owl.theme.default.css">
    <!--Owl carousel CSS -->

    <!-- CALENDER  -->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('master/master.rota_plan')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item active">{{trans('master/master.dashboard')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
<section class="vertical-wizard">
    <div class="row match-height">
        <!-- Statistics Card -->
        <div class="col-xl-12 col-md-12 col-12">
            <div class="card card-statistics">
                <div class="card-body statistics-body">
                    <div class="row">
                        <div class="col-md-4 mb-2 card-header pb-0 d-block">
                            <h4 class="card-title">{{trans('master/master.organization')}}</h4>
                            <span class="card-subtitle text-muted">{{$organization->name}}</span>
                        </div>
                        <div class="col-md-12 col-12">
                            <div class="mb-2">
                                <h4 class="p-1" style="color: #565360; background: #f5f5f5;" id="team_member_name">{{$user->name}}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-12 mt-0 mt-sm-2">
                            <div class="app-calendar overflow-hidden border">
                                <div class="row g-0">
                                    <!-- Calendar -->
                                    <div class="col position-relative">
                                        <div class="card shadow-none border-0 mb-0 rounded-0">
                                            <div class="card-body pb-0">
                                                <div id="calendar"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /Calendar -->
                                    <div class="body-content-overlay"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--/ Statistics Card -->
    </div>
</section>





@endsection
@push('footer-script')
<script src="/assets/plugins/bower_components/jquery/dist/jquery.min.js"></script>
<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/extensions/moment.min.js"></script>
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->
<!-- END: Page Vendor JS-->
<!-- BEGIN: Page JS-->
<script src="/assets/plugins/bower_components/calendar/jquery-ui.min.js"></script>
<script src="/assets/plugins/bower_components/moment/moment.js"></script>
<script src="/assets/plugins/bower_components/calendar/dist/fullcalendar.min.js"></script>
<script src="/assets/plugins/bower_components/calendar/dist/jquery.fullcalendar.js"></script>
<script src="/assets/plugins/bower_components/calendar/dist/locale-all.js"></script>

<!-- END: Page JS-->

<script>
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        slotDuration: '00:15:00',
        defaultView: 'month',
        firstDay: '1',
        handleWindowResize: true,
        events: {!!$calender!!},
        eventRender: function(event, element) { 
            element.find('.fc-title').append("<br/>" + event.description); 
        },
        editable: true,
        droppable: false,
        eventLimit: true,
        selectable: true,
        eventStartEditable: false,
        locale: '2n',
        displayEventTime: false,
    });

    $('.fc-button').click(function(){
        var date = new Date($('.fc-center').text());
        var month = date.getMonth() + 1;
        var year = date.getFullYear();
        $.ajax({
            url: "/member/{!! $alias !!}/rota-management/dashboard",
            type: "POST",
            data: {
                _token:'{{ csrf_token() }}',
                'month' : month,
                'year' : year,
            },
            success:function(data) {
                $('#calendar').fullCalendar('removeEvents');
                $("#calendar").fullCalendar('addEventSource', JSON.parse(data));
                $('#calendar').fullCalendar('rerenderEvents');
                $('#calendar').fullCalendar( 'refetchEvents' );
            }
        });
    });
</script>
<style>
    .fc-button {
        text-transform: capitalize;
    }
</style>
<!-- END: Page JS-->
@endpush