@extends('layouts.admin')
@section('content')
    <div class="page-header text-uppercase">
        <ul class="list-unstyled space-list m-0">
            <li>
                <p>{{ __('calendar.title') }}</p>

            </li>
            <li>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('common.home') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('calendar.title') }}</li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="round-white-bg box-shadow">
                    <div class="header-calendar d-flex justify-content-between align-items-center mb-3">
                    <div class="event_label">
                        @foreach($eventsLabel as $key => $lb)
                            {{--<div class="labels d-flex align-items-center"> <span class="box" style="background-color:{!! scheduledColor($key) !!};"></span>{!! $lb !!}</div>--}}
                            <div class="labels d-flex align-items-center">
                                <label for="event_label_{!! $key !!}">
                                     <input type="checkbox" value="{!! $key !!}" class="mr-2 filter" id ="event_label_{!! $key !!}" checked>{!! $lb !!}
                                </label>
                            </div>
                        @endforeach

                    </div>
                    <a href="javascript:void(0);" class="refresh-calendar btn btn-primary float-right mb-2">Refresh</a>
                   </div>
                    <div id="calendar"></div>
                </div>
            </div>

        </div>
    </div>
    <!-- Edit Modal -->
    <div class="modal fade" id="schedule-edit">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">{{ __('calendar.add_comment')}}</h4>
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                {!! Form::open([
                      'route' => 'comment.store',
                      'method' => 'POST',
                      'id' => 'ajaxSave',
                      'files' => true,
                  ]) !!}
                        <!-- Modal body -->
                <div class="modal-body">
                    <div class="error-msg font-14 mt-2"></div>
                    <div class="form-group">
                        <label>{!! __('calendar.comment')!!}</label>
                        <textarea type="text" name ="comment" class="form-control __itm_title"></textarea>
                    </div>
                    <div class="row">
                        <div class="form-group col-6 __st_d">
                            <label>{!! __('calendar.start_date')!!}</label>
                            <input type="text" value ="" name="start_date" class="form-control __itm_start_date">
                        </div>
                        <div class="form-group col-6 __end_d">
                            <label>{!! __('calendar.end_date')!!}</label>
                            <input type="text" value="" name ="end_date" class="form-control __itm_end_date">
                        </div>
                    </div>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">{{__('common.cancel')}}</button>
                    <button type="submit" class="btn btn-success">{{__('common.save')}}</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
    </div>
    <div id="contextMenu" class="dropdown clearfix"></div>

@endsection
@section('script')
    <script>
        var calendarEl = document.getElementById('calendar');
        let calendar;
        function renderCalendar(){
            var calendar = new FullCalendar.Calendar(calendarEl, {
                aspectRatio: 2.67,
                initialView: 'dayGridMonth',
                initialDate: new Date(),
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                weekNumbers: true,
                firstDay :1,
                buttonText :{today:'Today',month:'Month', week:'Week', day:'Day'},
                events: function(info, successCallback, failureCallback ) {
                    $.ajax({
                                url: "{!! route('admin.calendar.get-events') !!}",
                                type: 'GET',
                                dataType: 'json',
                                data: {
                                    start: info.startStr,
                                    end: info.endStr
                                },
                                beforeSend: function () {
                                    $('.back-drop').fadeIn(100, 'linear');
                                    $('.loader').fadeIn(100, 'linear');
                                },
                                success: function (response) {
                                    var events = [] ;
                                    var result = response;
                                    $.each(result, function (i, item) {
                                        var dayOfWeek = [];
                                        var skipDates = "";
                                        if(item.schedule_weekdays != undefined && item.schedule_weekdays != ''){
                                             dayOfWeek = item.schedule_weekdays.split(",");
                                        }
                                        if(item.skip_dates != undefined && item.skip_dates != ''){
                                            skipDates = item.skip_dates.split(",");
                                        }
                                        if(dayOfWeek.length > 0){
                                            events.push({
                                                id: item.id,
                                                title: item.title,
                                                startRecur: moment(item.start).format(),
                                                endRecur: moment(item.end).format(),
                                                color:item.color,
                                                position : item.position,
                                                type : item.type,
                                                is_sent : item.is_sent,
                                                daysOfWeek: dayOfWeek,
                                                skip_dates: skipDates
                                                // these recurrent events move separately
                                            });
                                        }else{
                                            events.push({
                                                id: item.id,
                                                title: item.title,
                                                start: moment(item.start).format(),
                                                end: moment(item.end).format(),
                                                color:item.color,
                                                position : item.position,
                                                type : item.type,
                                                is_sent : item.is_sent,
                                                skip_dates: skipDates
                                            });
                                        }


                                    });
                                    successCallback(events);

                                    $('.back-drop').fadeOut(100, 'linear');
                                    $('.loader').fadeOut(100, 'linear');
                                },

                            }
                    );

                },
                eventClassNames: function(info,element) {

                    var result = true;
                    var username = $('.filter:checked').map(function() {
                        return  parseInt($(this).val());
                    }).get();
                    result = username.indexOf(info.event.extendedProps.type) >= 0;
                    //console.log(show_username);
                    if (!result) {
                        result = "hidden";
                    }
                    var startDate = info.event.start; // Format the start date as needed
                    var givenEventDate = moment(startDate).format('DD-MM-YYYY');
                    if (info.event.extendedProps.type == 7 ) {
                        var skipDates = info.event.extendedProps.skip_dates;

                        if(skipDates != "" && skipDates.includes(givenEventDate)){
                            result = "hidden";
                        }
                       // element.addClass('display-none'); // Add class based on event title or any condition
                    }
                    return result;
                },
                eventClick: function(eventInfo)
                {
                    editEvent(eventInfo);
                },
                selectable: true,
                longPressDelay: 1,
                select: function(selectionInfo)
                {
                     // console.log(selectionInfo);
                    // Get click position
                    var clickX = selectionInfo.jsEvent.pageX;
                    var clickY = selectionInfo.jsEvent.pageY;
                    let currentDate = moment(). format('YYYY-MM-DD');
                    let cDate =  moment(selectionInfo.start).format('YYYY-MM-DD');
                    let startDate = moment(selectionInfo.start).format('DD-MM-YYYY HH:mm');
                    let endDate = moment(selectionInfo.end).format('DD-MM-YYYY HH:mm');
                    let params = "?start_date="+startDate+"&end_date="+endDate+"&is_schedule=1";
                    var $contextMenu = $("#contextMenu");
                    var HTMLContent =
                            '<ul class="dropdown-menu dropNewEvent" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">' +
                            '<li> <a href="{!! route('global-items.create') !!}'+params+'" target="_blank">{!! __("calendar.add_g_item") !!}</a></li>' +
                            '<li> <a href="{!! route('global-items.create') !!}'+params+'&is_offer=1" target="_blank">{!! __("calendar.add_d_item") !!}</a></li>' +
                            '<li> <a href="{!! route('admin.global-slider.create') !!}'+params+'" target="_blank">{!! __("calendar.add_g_slider") !!}</a></li>' +
                            '<li> <a href="{!! route('admin.small-banner.create') !!}'+params+'" target="_blank">{!! __("calendar.add_s_banner") !!}</a></li>' +
                            '<li> <a href="{!! route('notifications.create') !!}'+params+'" target="_blank">{!! __("calendar.add_notification") !!}</a></li>' +
                            '<li> <a href="{!! route('website-setting.index') !!}'+params+'" target="_blank">{!! __("website_setting.add_reward_point_multiplier") !!}</a></li>' +
                            '<li> <a tabindex="-1" href="#" onclick=\'newComment("'+ startDate +'","'+ endDate +'")\'>{!! __("calendar.add_comment") !!}</a></li> '+
                            '<a tabindex="-1" class="__close" style="position: absolute; top:-5px; right: 5px; font-size: 30px;transform: rotate(45deg);" href="#">+</a>' +
                            '</ul>';

                   // $(".fc-scrollgrid").unbind('click');
                   /* $(".fc-scrollgrid").on('click', 'td', function (e)
                    {*/
                        if(new Date(cDate) < new Date(currentDate))
                        {
                            return false;
                        }
                        $contextMenu.html(HTMLContent);
                        $contextMenu.addClass("contextOpened");
                        $contextMenu.css({
                            display: "block",
                            left: clickX,
                            top: clickY
                        });
                       // return false;
                    //});

                    $contextMenu.on("click", ".__close", function(e) {
                        e.preventDefault();
                        $contextMenu.removeClass("contextOpened");
                        $contextMenu.hide();
                    });
                }

            });
            calendar.render();
        }
        renderCalendar();
        function newComment(startDate,endDate){
            $('.__itm_start_date').val(startDate);
            $('.__itm_end_date').val(endDate);
              $('.__itm_start_date,.__itm_end_date').daterangepicker({
                            timePicker: true,
                            timePicker24Hour: true,
                            singleDatePicker: true,
                            showDropdowns: true,
                            autoApply: true,
                            autoUpdateInput: true,
                            showISOWeekNumbers: true,
                            locale: {
                                format: 'DD-MM-YYYY HH:mm',
                                firstDay: 1
                            }
                        });
            $("#schedule-edit").modal('show');

        }
        function editEvent(eventInfo){
            var data = eventInfo.event;
            var id = data.id;
            var itemId = id.split("-")[1];
            var type = data.extendedProps.type;
            var isSent = data.extendedProps.is_sent;
            if(isSent != undefined && isSent == 1){
                return false;
            }
            $.ajax({
                    url: "{!! route('admin.calendar.edit') !!}",
                    type: 'GET',
                    dataType: 'html',
                    data: {
                        type: type,
                        id: itemId
                    },
                    success: function (response) {
                        var result = response;
                        var modal = $("#dynamicLoad");
                        modal.html(response);
                        $('.__itm_start_date,.__itm_end_date').daterangepicker({
                            timePicker: true,
                            timePicker24Hour: true,
                            singleDatePicker: true,
                            showDropdowns: true,
                            autoApply: true,
                            autoUpdateInput: false,
                           // showISOWeekNumbers: true,
                            locale: {
                                format: 'DD-MM-YYYY HH:mm',
                                firstDay: 1,
                            }
                        });
                        modal.modal('show');
                    }
            });
        }
        $('.filter').on('change', function() {
            //calendar.render();
            renderCalendar();
        });


        $('.refresh-calendar').on('click', function() {
            $(".event_label").find("input[type=checkbox]").prop( "checked", true);
            renderCalendar();
        });
        $(document).on('click','.multiplicator_schedule_weekdays',function(){
            $(this).parent().find('.green-check').toggle($(this).is(':checked'));
        });
        $(document).on('keypress','.__itm_start_date,.__itm_end_date',function(e){
            var char = String.fromCharCode(e.which);
            if (!(/[\/\s\-]/.test(char))) {
                e.preventDefault();
            }
        });
        // Hide modal when clicking outside of it
        document.addEventListener('click', function(event) {
            let modal = $("#contextMenu");
            if (!event.target.closest('#contextMenu') && !event.target.closest('#calendar')) {
                modal.hide();
            }
        });
    </script>
@endsection