@extends($layout)
@section('content')
<div class="row">
    <div class="col s12">
        <div class="container"> <br><br>
            <div id='calendar'></div>
        </div>
    </div>
    <div class="content-overlay"></div>
</div>
@stop

@section('css')

<link href='/assets/components/scheduler/lib/fullcalendar.min.css' rel='stylesheet' />
<link href='/assets/components/scheduler/lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='/assets/components/scheduler/scheduler.min.css' rel='stylesheet' />

<style>

    body {
        margin: 0;
        padding: 0; 
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    .fc button, .fc table, body .fc {
    font-size: 13px!important;
}

.fc .fc-button {
    height: auto;
    padding: 10px;
    color: #fff!important;
    border-color: {{$skin->color_sidebar ?? '#0887c9'}} !important;
    border-radius: 2px;
    background: {{$skin->color_sidebar ?? '#0887c9'}} !important;
}

.fc-icon {
    line-height: 0em;
}

    .fc-license-message{
        display: none;
    }

    .fc-resource-area {
        width: 20%;
    }

    #calendar {
        zoom: 120%;
        max-width: 97%;
        margin: 30px auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .fc-content {
 
    cursor: pointer !important;
}

</style> 

@stop

@section('js')
<script src='/assets/components/scheduler/lib/moment.min.js'></script>
<script src='/assets/components/scheduler/lib/fullcalendar.min.js'></script>
<script src='/assets/components/scheduler/scheduler.min.js'></script>
<script src='/assets/components/scheduler/locale-all.js'></script>


<script>

    $(function() { // document ready

        $('#calendar').fullCalendar({
            editable: true, // enable draggable events
            aspectRatio: 1.8,
            editable: false,
            scrollTime: '10:00', // undo default 6am scrollTime
            header: {
                left: 'today prev,next',
                center: 'month,agendaWeek,listWeek',
                right: 'title'
            },
            defaultView: 'month',
            views: {
                timelineThreeDays: {
                    type: 'timeline',
                    duration: { days: 3 }
                }
            },
            resourceLabelText: 'Ressources',
            resources: [
                
                
                
                
            ],


        eventMouseover: function (data, event, view) {
            
            //tooltip = '<div class="tooltiptopicevent" style="width:auto;height:auto;background:#e9e7e7;cursor: pointer;border-radius: 6px;position:absolute;z-index:10001;padding:10px 10px 10px 10px ;  line-height: 200%;">#' +  data.id + '</br>' + data.client  + '</br>' + data.projet + '</div>';


            $("body").append(tooltip);
            $(this).mouseover(function (e) {
                $(this).css('z-index', 10000);
                $('.tooltiptopicevent').fadeIn('500');
                $('.tooltiptopicevent').fadeTo('10', 1.9);
            }).mousemove(function (e) {
                $('.tooltiptopicevent').css('top', e.pageY + 10);
                $('.tooltiptopicevent').css('left', e.pageX + 20);
            });


        },
        eventMouseout: function (data, event, view) {
            $(this).css('z-index', 8);

            $('.tooltiptopicevent').remove();

        },
        dayClick: function () {
            tooltip.hide()
        },
        eventResizeStart: function () {
            tooltip.hide()
        },
        eventDragStart: function () {
            tooltip.hide()
        },
        viewDisplay: function () {
            tooltip.hide()
        },


            events: [
                @foreach($rdvs as $rdv)
                {!!  "{ id: '".$rdv->id."',  patient: '".addslashes($rdv->patient)."', color :'".$rdv->color."' , client :'Client' , projet :'P1' , site :'' ,  icon :'".$rdv->pcolor."' ,  resourceId: '2', start: '".$rdv->_date."T".$rdv->heure."', end: '".$rdv->_date."T".$rdv->heure."', title: '".$rdv->civility_label." ".addslashes($rdv->last_name)." ".addslashes($rdv->first_name)."' }," !!}
                @endforeach
            ]
 
                ,
            eventClick: function(event) {
                load();
                window.location.href = '/patient/update/'+event.patient;
            },
            dayClick: function(date, jsEvent, view, resource) {
                //load();
                //window.top.location.href = '/intervention/create/?empid='+resource.id+'&date='+ date.format();

              //alert('clicked ' + date.format() + ' on resource ' + resource.id);
            },
            eventRender: function(event, element) {
                 if(event.icon){          
                    element.find(".fc-title").prepend("<i class='material-icons' style='font-size: 16px;color: "+event.icon+";'>flag</i>");
                 }


            } 
        });

    
                        $('#calendar').fullCalendar('option', 'locale', "fr" );
                        $('#calendar').fullCalendar('option', 'height', 600);
                        $('.fc-clear').remove(); 

    });

</script>
@stop