@extends('layouts.master')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('css/rescalendar.css') }}">
    <link rel="stylesheet" href="{{asset('assets/styles/vendor/quill.snow.css')}}">
    <link rel="stylesheet" href="{{asset('assets/styles/vendor/sweetalert2.min.css')}}">
@endsection
@section('main-content')

    <div class="main-content checklist-page-wrapper">
        <div class="breadcrumb">
            <h1>{{ $staffName }}</h1>
        </div>
        <div class="separator-breadcrumb border-top"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="header-cover" style="background-image: url(https://gull-html-laravel.ui-lib.com/assets/images/photo-wide-5.jpeg"></div>
                <div class="card-body p-0" id="sticky">
                    @if(is_object($staffChecklists) && count($staffChecklists)>0)
                        @php($colorPool= ['#e0d6eb','#dbefdc','#ccd6e3','#fff3cd','#fff3cd'])
                        <ul class="nav-custom nav nav-pills mb-2" id="pills-tab" role="tablist">
                            @php($len = 1)
                            @foreach($staffChecklists as $checklist)
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link {{ (($len==1)?'active show':'') }} " {{--style="background-color: {{$colorPool[$len-1]}}; color: #49494d;"--}} id="pills-profile-tab" data-toggle="pill" role="tab" aria-controls="pills-profile" aria-selected="false" href="#{{preg_replace('/[& \']+/','',$checklist->title)}}">{{$checklist->title}}</a>
                                </li>
                                @php($len++)
                            @endforeach
                        </ul>
                        <div class="tab-content p-0 mb-0" id="pills-tabContent">
                            @php($len=1)
                            @foreach($staffChecklists as $checklist)
                                @php($arrData = [])
                                <div class="tab-pane {{ (($len==1)?'active show':'') }} " id="{{preg_replace('/[& \']+/','',$checklist->title)}}" role="tabpanel" aria-labelledby="pills-{{preg_replace('/[& \']+/','',$checklist->title)}}-tab">
                                    @if(is_object($checklist->headers) && count($checklist->headers)>0)
                                        @foreach($checklist->headers as $heads)
                                            @php($arrItems = [])
                                            @php($itemActuals = [])
                                            @foreach($heads->items as $item)
                                                @php($aData = \App\Models\checklistData::where('staffs_id',[$staffToShow])->where('item_id',[$item->id])->where('actual','>',0)->get(DB::raw('dated,actual')))
                                                @if(is_object($aData) && count($aData)>0)
                                                    @foreach($aData as $dats)
                                                        @php($itemActuals[$dats->dated][] = $dats->actual)
                                                    @endforeach
                                                @endif
                                                @php($itemVar = \App\Models\checklistData::where('staffs_id',[$staffToShow])->where('item_id',[$item->id])->get(DB::raw('group_concat(dated) as dated')))
                                                @php($arrItems[] = ['id'=>$item->id,'name'=>$item->item_name,'frequency'=>$item->frequency,'targetValue'=>$item->target_value,'checklist_id'=>$checklist->id,'actual'=>$itemActuals,'selected'=>(($itemVar && $itemVar[0]->dated!='')?explode(',',$itemVar[0]->dated):[])])
                                            @endforeach
                                            @php($arrData[] = ['id'=>$heads->id,'name'=>$heads->header_title,'items'=>$arrItems])
                                        @endforeach

                                        <div class="rescalendar" data-config="{{json_encode([
                                            'id'=> $checklist->id, // ID Must ne unique
                                            'startDate'=> (($checklist->startDate < date('Y-m-d',strtotime('-14 days')))?date('Y-m-d',strtotime('-14 days')):$checklist->startDate),
                                            'currentDate'=> date('Y-m-d'),
                                            'endDate'=> date('Y-m-d', strtotime('+30 days')),
                                            'canChecked'=> $canChecked,
                                            'data'=> $arrData
                                        ])}}"></div>


                                    @endif
                                </div>
                                @php($len++)
                            @endforeach
                        </div>
                    @else
                        <div class="" id="">
                            <div class="alert alert-card alert-danger" role="alert">
                                <strong class="text-capitalize">There are currently no checklists assigned.</strong>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="staff_id" id="staff_id" value="{{loggedin_userSession()->id}}">
    <input type="hidden" name="company_id" id="company_id" value="{{loggedin_userCompany()}}">
    </section>
    <!-- Gooey-->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="goo">
                <fegaussianblur in="SourceGraphic" stddeviation="4" result="blur"></fegaussianblur>
                <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0 -7" result="goo"></fecolormatrix>
                <feblend in="SourceGraphic" in2="goo"></feblend>
            </filter>
        </defs>
    </svg>
    <form id="checklistForm" method="POST" style="display:none"></form>
    <!-- Button trigger modal -->

    <!-- Modal -->
    <div class="modal fade" id="calendarModal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true"></div>
@endsection
@section('page-js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
    <script src="{{asset('assets/js/vendor/quill.min.js')}}"></script>
    <script src="{{asset('assets/js/vendor/sweetalert2.min.js')}}"></script>
    <script src="{{asset('js/rescalendar.js')}}"></script>

    <script>
        var allowEmailing = false;      //global veriable
        var arrEmailData = {'company_id':$('#company_id').val()}
        $(document).on('click', '.js__modal', function() {
            let _form_data = $(this).attr('data-form_data') || {};
            if(!_form_data) {
                return;
            }else{
                call_modal(_form_data);
            }
        });

        function call_modal(_form_data)
        {
            queryParams = $.param(JSON.parse(_form_data));
            $.ajax({
                type: 'GET',
                url: "{{ route('journals.modal', $staffToShow) }}?" + queryParams,
                success: function(resp) {
                    $('#calendarModal').html(resp);
                    $('#calendarModal').modal({
                        show: true,
                        backdrop: 'static',
                        keyboard: false,
                    }).off('hidden.bs.modal').on('hidden.bs.modal', function () {
                        if(allowEmailing)   // only allow emailing when something has changed. See function saveToDB()
                        {
                            swal({
                                title: 'Email to your manager?',
                                text: "We'll email this journal entry to your manager.",
                                type: 'info',
                                showCancelButton: true,
                                confirmButtonColor: '#0CC27E',
                                cancelButtonColor: '#FF586B',
                                confirmButtonText: 'Yes, email it!',
                                cancelButtonText: 'No, cancel!',
                                confirmButtonClass: 'btn btn-success me-5',
                                cancelButtonClass: 'btn btn-danger',
                                buttonsStyling: false
                            }).then(function () {
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                                });

                                $.ajax({
                                    type:'post',
                                    url:'{{ route('journals.notify') }}',
                                    data:$.parseJSON(arrEmailData),
                                    success:function(data){
                                        var onyx = $.parseJSON(data)
                                        swal(
                                            onyx.heading,
                                            onyx.message,
                                            onyx.response
                                        )
                                    }
                                });
                                /**/
                            }, function (dismiss) {
                                // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
                                /*if (dismiss === 'cancel') {
                                    swal(
                                        'Cancelled',
                                        'No email will be sent for this journal entry',
                                        'error'
                                    )
                                }*/
                            })
                        }
                    });

                    function getJournalFormData()
                    {
                        var arrFormData = {'company_id':$('#jcompany_id').val(),'journal_id':$('#journal_id').val(),'staffs_id':$('#staffs_id').val(),'daydate':$('#daydate').val(),'enddate':$('#enddate').val(),'weekNumber':$('#weekNumber').val(),'prevWeekNumber':$('#prevWeekNumber').val(),'review_date':$('#review_date').val(),'type':$('#j_type').val(),'manager_email':$('#manager_email').val(),'manager_id':$('#manager_id').val()};
                        $('.form-control.for_journal').each(function (i,v){
                            if(v.readOnly!=true && v.disabled!=true){
                                arrFormData['tabular_'+v.id] = v.value
                            }
                        });

                        $('.editor.d-none').each(function (i,v){
                            if(v.readOnly!=true && v.disabled!=true){
                                if(v.id == 'manager_comment')
                                {
                                    arrFormData['manager_comment'] = v.value
                                }else{
                                    arrFormData['inline_' + v.id] = v.value
                                }
                            }
                        });
                        //console.log(arrFormData)
                        return JSON.stringify(arrFormData);
                    }

                    //On Journal Modal Popup Open
                    $('#calendarModal').off("shown.bs.modal").on("shown.bs.modal", function(e) {
                        $('.editor').each(function(i, el) {
                            var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 100;
                            var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
                            el.addClass('d-none');
                            el.parent().append(div);

                            var quill = new Quill('#' + id, {
                                modules: { syntax: !0, },
                                theme: 'snow',
                                readOnly: ((el.hasClass('disabled'))?true:false),   //disable if other seeing the checklist
                            });

                            quill.on('text-change', function() {
                                el.val((quill.getText()));
                                var ArrInfo = getJournalFormData()
                                clearTimeout(timeoutId);
                                timeoutId = setTimeout(function() {
                                    // Runs 1 second (1000 ms) after the last change
                                    saveToDB(ArrInfo);
                                }, 1000);
                            });
                        });

                        var timeoutId;
                        $('.form-control.for_journal').off('input propertychange change').on('input propertychange change', function() {
                            var ArrInfo = getJournalFormData()
                            clearTimeout(timeoutId);
                            timeoutId = setTimeout(function() {
                                // Runs 1 second (1000 ms) after the last change
                                saveToDB(ArrInfo);
                            }, 1000);
                        });



                        function saveToDB(arrInfo)
                        {
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });

                            $.ajax({
                                type:'post',
                                url:'{{ route('journals.save',$staffToShow) }}',
                                data:$.parseJSON(arrInfo),
                                success:function(data){
                                    var objx = $.parseJSON(data);
                                    if(objx.allowEmailing == true)
                                    {
                                        allowEmailing = true;
                                        arrEmailData = data
                                    }
                                },beforeSend: function() {
                                    $('#spinner').removeClass('d-none');
                                },complete: function() {
                                    $('#spinner').addClass('d-none');
                                },
                            });
                        }

                        $('.addMoreRows').off('click').click(function(){
                            var elem = $(this).attr('id');
                            var len = $('#field_len_'+elem).val();
                            var obj_field_vals = $.parseJSON($('#field_val_'+elem).val());
                            var html = '<div class="d-flex align-items-end gap-3 item-row"><div class="row-number"><span>'+(parseInt(len)+1)+'</span></div>'
                            if(obj_field_vals.length > 0)
                            {
                                for(var x=0;x<obj_field_vals.length;x++)
                                {
                                    html+= '<div class="row-in-put"><div class="form-row"><div class="form-group col-lg-4 mb-3 mb-lg-0" style="min-width: 300px"><label for="">'+obj_field_vals[x].question+'</label><textarea  class="form-control for_journal" id="field_'+obj_field_vals[x].id+'_'+(parseInt(len)+1)+'" name="field_'+obj_field_vals[x].id+'_'+(parseInt(len)+1)+'" ></textarea></div></div></div>';
                                }
                            }
                            html+= '</div>';
                            $('#field_len_'+elem).val((parseInt(len)+1));
                            $('.tab_'+elem).append(html);
                            var timeoutId;
                            $('.form-control.for_journal').off('input propertychange change').on('input propertychange change', function() {
                                var ArrInfo = getJournalFormData()
                                clearTimeout(timeoutId);
                                timeoutId = setTimeout(function() {
                                    // Runs 1 second (1000 ms) after the last change
                                    saveToDB(ArrInfo);
                                }, 1000);
                            });
                        })
                    });
                }
            });
        }
        $(document).ready(function() {
            //this is to auto open journal weekly popup for managers when coming from email
            var managerCommentFlag = ((window.location.href.indexOf("#review_date=") != -1)?window.location.href.split('#review_date=')[1]:false);
            if(managerCommentFlag)
            {
                var dater = managerCommentFlag.split('&week=');
                if(Date.parse(dater[0]))
                {
                    var weekNumber = dater[1];
                    var datre = dater[0].split('-');
                    var sequence = (weekNumber==0?"daily":"weekly")
                    var json = '{"month":"'+datre[1]+'","year":"'+datre[0]+'","week":'+weekNumber+',"day":"'+datre[2]+'","secquence":"'+sequence+'"}';
                    call_modal(json);
                }
            }

            $('#pills-tab a').click(function(e) {
                e.preventDefault();
                $(this).tab('show');
            });

            $("ul.nav-pills > li > a").on("shown.bs.tab", function(e) {
                var id = $(e.target).attr("href").substr(1);
                window.location.hash = id;
            });

            var hash = window.location.hash;
            $('#pills-tab a[href="' + hash + '"]').tab('show');



            $(document).on('change', ".clap input", function() {
                var checkboxes = $(this).closest('tr').find(".clap input");
                var checkedCheckboxes = checkboxes.filter(":checked");
                var fillPercentage = (checkedCheckboxes.length / checkboxes.length) * 100;
                $(this).closest('tr').find(".box-fill").css("height", fillPercentage + "%");
                let rowRef = $(this).closest('tr').attr('data-rowref');
                $('tr[data-rowref="'+rowRef+'"]').find('.box-fill').css("height", fillPercentage + "%");

                //callback
                var item = $(this).attr('data-item');
                var check = $(this).attr('data-check');
                var target = $(this).attr('data-target');
                var clicked = ($(this).hasClass('clap-target-input'))?$(this).attr('data-date'):$(this).val();
                var staff   = $('#staff_id').val();
                var actual  = ($(this).hasClass('clap-target-input'))?$(this).val():0;

                if(target > 0 && actual > 0)
                {
                    toastr.success('Achieved target saved.')
                }
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    type:'post',
                    url:'{{ route('checklist.save') }}',
                    data:{item_id:item,dated:clicked,staffs_id:staff,checked:$(this).is(':checked'),company_id:$('#company_id').val(),checklist_id:check,actual:actual,target:target},
                    success:function(data){
                        //silence
                    }
                });
            });
        });
        $(document).ready(function() {
            const minDeg = 1;
            const maxDeg = 72;
            const particlesClasses = [
                { class: "pop-top" },
                { class: "pop-top-left" },
                { class: "pop-top-right" },
                { class: "pop-bottom-right" },
                { class: "pop-bottom-left" },
            ];
            $(document).on('click', '.clap', function() {
                const clap = $(this);
                const particles = clap.siblings('.particles');
                const particles2 = clap.siblings('.particles-2');
                clap.addClass('clicked');
                runAnimationCycle(clap, 'scale');
                if (!particles.hasClass('animating')) {
                    animateParticles(particles, 700);
                } else if(!particles2.hasClass('animating')) {
                    animateParticles(particles2, 700);
                }
            });
            function runAnimationCycle(el, className) {
                if (el && !el.hasClass(className)) {
                    el.addClass(className);
                } else {
                    el.removeClass(className).addClass(className);
                }
            }
            function runParticleAnimationCycle(el, className, duration) {
                if (el && !el.hasClass(className)) {
                    el.addClass(className);
                    setTimeout(function() {
                        el.removeClass(className);
                    }, duration);
                }
            }
            function animateParticles(particles, dur) {
                addRandomParticlesRotation(particles.attr('class'), minDeg, maxDeg);
                for(let i = 0; i < particlesClasses.length; i++) {
                    runParticleAnimationCycle(particles.children().eq(i), particlesClasses[i].class, dur);
                }
                particles.addClass('animating');
                setTimeout(function() {
                    particles.removeClass('animating');
                }, dur);
            }
            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min  + 1)) + min;
            }
            function addRandomParticlesRotation(particlesName, minDeg, maxDeg) {
                const particles = $('.' + particlesName);
                const randomRotationAngle = getRandomInt(minDeg, maxDeg) + 'deg';
                particles.css('transform', 'rotate(' + randomRotationAngle + ')');
            }
        });

        $('.rescalendar').each(function (){
            $this = $(this);
            let config = JSON.parse( $this.attr('data-config') || "" );
            $this.rescalendar(config);
        });

        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('#sticky').addClass('scrolled');
            } else {
                $('#sticky').removeClass('scrolled');
            }
        });

        @if(Request::is('checklist/update'))
        $(document.body).addClass('checklist-page');
        @endif





    </script>
@endsection