@extends("myViews.backOffice.layout.backOfficeLayout")

@section("page")
    Calendrier
@endsection

@section("pageIcon")
    <span class="fa fa-calendar"></span>
@endsection



@section("firstLevelLayoutBodyContent") 


    <div class="row">

        <div class="col-12">
            <div class="card card-box">

                <div class="card-head">
                    <header class="small">
                        {{--<span class="fa fa-calendar small"></span>--}}
                        Légende
                    </header>
                    {{--<div class="tools">
                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                        <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                        <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                    </div>--}}

                </div>

                <div class="card-body ">

                    <div class="row">
                        @foreach($c_types as $c_type)
                            <div class="col-md-3">
                                <span class="etiquette" style="background-color : {{ $c_type["bg-color"]}}" ></span>
                                {{ $c_type["front"] }}
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </div>

    </div>


    <div class="row">

        <div class="col-12">
            <div class="card card-box">

                <div class="card-head">
                    <header>
                        <span class="fa fa-calendar small"></span>
                        Calendrier
                    </header>
                    {{--<div class="tools">
                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                        <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                        <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                    </div>--}}

                </div>

                <div class="card-body ">

                    <div class="panel-body">
                        <input type="hidden" id="calendar-events" value="{{ json_encode($calendarDatas) }}" >
                        <div id="calendar" class="has-toolbar"> </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

{{--

    <div class="row">
        <div class="col-md-3 col-sm-12">
            <div class="card-box">
                <div class="card-head">
                    <header>Draggable Events</header>
                </div>
                <div class="card-body ">
                    <div id="external-events">
                        <form class="inline-form">
                            <input type="text" value="" class="form-control"
                                   placeholder="Event Title..." id="event_title" />
                            <br />
                            <a href="javascript:;" id="event_add" class="btn deepPink-bgcolor"> Add
                                Event </a>
                        </form>
                        <hr />
                        <div id="event_box" class="mg-bottom-10"></div>
                        <label class="rt-chkbox rt-chkbox-single rt-chkbox-outline" for="drop-remove">
                            remove after drop
                            <input type="checkbox" class="group-checkable" id="drop-remove" />
                            <span></span>
                        </label>
                        <hr class="visible-xs" />
                    </div>
                </div>
            </div>
        </div>
    </div>

--}}

@endsection

@section("pageJs")
    <script type="text/javascript">
        var AppCalendar = function() {
            return {
                init: function() {
                    this.initCalendar()
                },
                initCalendar: function() {
                    if (jQuery().fullCalendar) {
                        var e = new Date,
                            t = e.getDate(),
                            a = e.getMonth(),
                            n = e.getFullYear(),
                            r = {};

                        let ev = [];
                        let calendarEvents = JSON.parse($("#calendar-events").val());
                        console.log("calendarEvents");
                        // console.log(calendarEvents);
                        for(let i=0; i<calendarEvents.length; i++)
                        {
                            /*console.log("i : "+i);
                            console.log(calendarEvents[i])*/
                            var pl_id = calendarEvents[i].pl_id;
                            var updatePlanningRoute = @json(route('updatePlanning', ['pl_id' => ':planningId']));
                            // Remplacez ":planningId" par la valeur de la variable planningId
                                updatePlanningRoute = updatePlanningRoute.replace(':planningId', pl_id);
                            ev.push({
                                title : calendarEvents[i].title,
                                start :new Date(calendarEvents[i].start.year, calendarEvents[i].start.month, calendarEvents[i].start.day, calendarEvents[i].start.hour, calendarEvents[i].start.min), //new Date(n, a, t, 10, 30),
                                //end: new Date(calendarEvents[i].start),
                                allDay:calendarEvents[i].allDay,
                                backgroundColor : calendarEvents[i].backgroundColor,
                                url: updatePlanningRoute
                                
                            })
                        }

                        /*console.log("ev");
                        console.log(ev);*/


                        $("#calendar").removeClass("mobile"), r = {
                            left: "prev,next,today",
                            center: "title",
                           // right: "month,agendaWeek,agendaDay"
                            right: "month,agendaWeek"
                        };
                        var l = function(e) {
                                var t = {
                                    title: $.trim(e.text())
                                };
                                e.data("eventObject", t), e.draggable({
                                    zIndex: 999,
                                    revert: !0,
                                    revertDuration: 0
                                })
                            },
                            o = function(e) {
                                e = 0 === e.length ? "Untitled Event" : e;
                                /* var t = $('<div class="external-event label label-event">' + e + "</div>");*/
                                var t = $('<div class="external-event label label-event-' +e+'">' + e + "</div>");
                                jQuery("#event_box").append(t), l(t)
                            };
                        $("#external-events div.external-event").each(function() {
                            l($(this))
                        }), $("#event_add").unbind("click").click(function() {
                            var e = $("#event_title").val();
                            o(e)
                        }), $("#event_box").html(""), o("holiday"), o("birthday"), o("meeting"), o("competition"), o("dinner"), o("party"), $("#calendar").fullCalendar("destroy"), $("#calendar").fullCalendar({
                            header: r,
                            defaultView: "month",
                            slotMinutes: 15,
                            editable: !0,
                            droppable: !0,
                            drop: function(e, t) {
                                var a = $(this).data("eventObject"), 
                                    n = $.extend({}, a);
                                n.start = e, n.allDay = t, n.className = $(this).attr("data-class"), $("#calendar").fullCalendar("renderEvent", n, !0), $("#drop-remove").is(":checked") && $(this).remove()
                            },

                            /***** events ********/
                          /*  events: [
                                {
                                title: "John on leave ",
                                start: new Date(n, a, t-5, 0, 0),
                                end: new Date(n, a, t-2, 0, 0),
                                backgroundColor: "#00FFFF"
                            }, {
                                title: "Ac Maintenance",
                                start: new Date(n, a, t-10, 9, 0),
                                end: new Date(n, a, t-8, 0, 0),
                                backgroundColor: "#F3565D"
                            }, {
                                title: "Repeating Event",
                                start: new Date(n, a, t +5, 16, 0),
                                allDay: !1,
                                backgroundColor: "#1bbc9b"
                            }, {
                                title: "Meeting",
                                start: new Date(n, a, t, 10, 30),
                                allDay: !1
                            }, {
                                title: "Result Day",
                                start: new Date(n, a, t + 7, 19, 0),
                                end: new Date(n, a, t + 1, 22, 30),
                                backgroundColor: "#DC35A9",
                                allDay: !1
                            }, {
                                title: "Click for Google",
                                start: new Date(n, a, 29),
                                end: new Date(n, a, 30),
                                backgroundColor: "#9b59b6",
                                url: "http://google.com/"
                            }]*/
                          events : ev
                        })
                    }
                }
            }
        }();
        jQuery(document).ready(function() {
            'use strict';
            AppCalendar.init()
        });
    </script>
@endsection