@extends('front/layouts/m_plus/main')
@section('title')
Fill Up Task
@endsection

@section('content')
<main class="task-detail-page pt-0">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-8">
                <div class="main-content bg-white pt-5 px-4">
                    <div class="title-wrapper">
                        @if($taskData->mpClientBranch && $taskData->mpClientBranch->company && $taskData->mpClientBranch->company->name)
                        <a href="{{ url()->previous() }}" class="h3 h3-title mt-0 font-orange"><i class="material-icons">chevron_left</i> {{ $taskData->mpClientBranch->company->name }}</a>
                        @endif
                        <div class="chips chips-track">
                            <span class="em-chip yellow small">New</span>
                        </div>
                    </div>
                    <div class="title-wrapper">
                        <h3 class="h3 h3-title mt-2">Visiting Details</h3>
                    </div>
                    <form method="post" action="{{ route('front.m-plus-dashboard.storeTaskResult') }}" id="storeTaskResult" name="storeTaskResult">
                        <input type="hidden" name="id" id="id" value="{{ $taskData->id }}">
                        <div class="row">
                            <div class="col-sm-6 col-lg-3">
                                <label class="control-label">Visiting Date</label>
                                <div class="form-group date">
                                    <input type="text" class="form-control bg-white" placeholder="Select Date" name="visiting_date" id="visiting_date"
                                        readonly>
                                    <div class="input-group-addon">
                                        <span class="material-icons">date_range</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <label class="control-label">Visiting Start Time</label>
                                <div class="form-group time">
                                    <input type="text" id="visiting_start_time" name="visiting_start_time" class="form-control timepicker" placeholder="Select Time"
                                        onkeydown="return false;">
                                    <div class="input-group-addon">
                                        <span class="material-icons">access_time</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <label class="control-label">Visiting End Time</label>
                                <div class="form-group time">
                                    <input type="text" id="visiting_end_time" name="visiting_end_time" class="form-control timepicker"  placeholder="Select Time"
                                        onkeydown="return false;">
                                    <div class="input-group-addon">
                                        <span class="material-icons">access_time</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">Who Served You?</label>
                                    <input type="text" class="form-control" name="served_person" id="served_person" placeholder="Enter">
                                </div>
                            </div>
                        </div>
                        @if(count($assessmentList))
                        <div class="row">
                            <div class="col-12">
                                <div class="title-wrapper">
                                    <h3 class="h3 h3-title mt-2">Assessment Details</h3>
                                </div>
                                <div class="assessment-box">
                                    @foreach($assessmentList as $assessment)
                                    <div class="info mt-3 pl-3">
                                        <div class="row">
                                            <div class="col-lg-3 col-sm-6">
                                                <div class="form-group">
                                                    <label class="control-label">Pillar</label>
                                                    <p class="display-info">{{ $assessment->pillar->name }}</p>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-sm-6">
                                                <div class="form-group">
                                                    <label class="control-label">Focus Area</label>
                                                    <p class="display-info">{{ $assessment->focusArea->title }}</p>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-sm-6">
                                                <div class="form-group">
                                                    <label class="control-label">Focus Detail</label>
                                                    <p class="display-info">{{ $assessment->focusDetail->title }}</p>
                                                </div>
                                            </div>
                                            @isset($assessment->description)
                                            <div class="col-lg-9">
                                                <div class="form-group">
                                                    <label class="control-label">Description</label>
                                                    <p class="m-0 p-0">{!! $assessment->description !!}</p>
                                                </div>
                                            </div>
                                            @endisset
                                            <div class="col-lg-9">
                                                <div class="form-group">
                                                    <label class="control-label">Enter Feedback for '{{ $assessment->focusDetail->title }}'</label>
                                                    <textarea class="form-control" placeholder="Enter your feedback" name="asse_feedback[{{ $assessment->id }}]"></textarea>
                                                    <span class="invalid-feedback"></span>

                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label" for="rate_{{ $assessment->id }}">Rate '{{ $assessment->focusDetail->title }}'</label>
                                                    <select class="form-control" id="rate_{{ $assessment->id }}" name="asse_rate[{{ $assessment->id }}]">
                                                        <option value="" hidden="">Select</option>
                                                        @for($i = 1; $i <= 10; $i++)
                                                        <option value = "{{ $i }}">{{ $i }}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @endif
                        @if(count($customQuestionList))
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="title-wrapper">
                                    <h3 class="h3 h3-title mt-2">Custom Questions</h3>
                                </div>
                                <div class="assessment-box">
                                @foreach($customQuestionList as $key => $question)
                                    <div class="info mt-3 pl-3">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label class="control-label">Question</label>
                                                    <p class="display-info">{{ $question->question }}</p>
                                                </div>
                                            </div>
                                            @if($question->question_type == 'date')
                                            <div class="col-lg-4">
                                                <label class="control-label">Answer</label>
                                                <div class="form-group date" data-provide = "datepicker">
                                                    <input type="text" class="form-control datepicker bg-white" placeholder="Select Date" name="custom_question[{{ $question->id }}]"
                                                        readonly id="custom_question[{{ $question->id }}]">
                                                    <div class="input-group-addon">
                                                        <span class="material-icons">date_range</span>
                                                    </div>
                                                </div>
                                            </div>
                                            @elseif($question->question_type == 'date_time')
                                            <div class="col-lg-4">
                                                <label class="control-label">Answer</label>
                                                <div class="form-group date" data-provide = "datepicker">
                                                    <input type="text" class="form-control datepicker bg-white" placeholder="Select Date" name="custom_question[{{ $question->id }}][date]" id="custom_question[{{ $question->id }}]"
                                                        readonly>
                                                    <div class="input-group-addon">
                                                        <span class="material-icons">date_range</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group time">
                                                    <label class="control-label"></label>
                                                    <div class="input-group time" data-provide="datepicker">
                                                        <input type="text" id="custom_question[{{ $question->id }}]" name="custom_question[{{ $question->id }}][time]" class="form-control timepicker" placeholder="Select Time"
                                                            onkeydown="return false;">
                                                        <div class="input-group-addon">
                                                            <span class="material-icons">access_time</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @elseif($question->question_type == 'freehand')
                                            <div class="col-lg-4">
                                                <label class="control-label">Answer</label>
                                                <div class="form-group date">
                                                    <input type="text" class="form-control" placeholder="Enter" name="custom_question[{{ $question->id }}]" id="custom_question[{{ $question->id }}]">
                                                </div>
                                            </div>
                                            @elseif($question->question_type == 'number')
                                            <div class="col-lg-4">
                                                <label class="control-label">Answer</label>
                                                <div class="form-group date">
                                                    <input type="text" class="form-control numberQuestion" placeholder="Enter" name="custom_question[{{ $question->id }}]" id="custom_question[{{ $question->id }}]">
                                                </div>
                                            </div>
                                            @elseif($question->question_type == 'radio')
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="control-label d-block">Answer</label>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="radio_{{ $question->id}}[0]" name="custom_question[{{ $question->id }}]" value="1">
                                                        <label class="custom-control-label" for="radio_{{ $question->id }}[0]">Yes</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="radio_{{ $question->id }}[1]" name="custom_question[{{ $question->id }}]" value="0">
                                                        <label class="custom-control-label" for="radio_{{ $question->id }}[1]">No</label>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                        </div>
                        @endif
                        @if(count($redFlagQuestionList))
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="title-wrapper">
                                    <h3 class="h3 h3-title mt-2">Red Flag Question</h3>
                                </div>
                                <div class="assessment-box">
                                @foreach($redFlagQuestionList as $question)
                                    <div class="info mt-3 pl-3">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label class="control-label">Question</label>
                                                    <p class="display-info">{{ $question->question }}</p>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="control-label d-block">Answer</label>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="red_flag_question[{{ $question->id }}][0]" name="red_flag_question[{{ $question->id }}]" value="1">
                                                        <label class="custom-control-label" for="red_flag_question[{{ $question->id }}][0]">Yes</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="red_flag_question[{{ $question->id }}][1]" name="red_flag_question[{{ $question->id }}]" value="0">
                                                        <label class="custom-control-label" for="red_flag_question[{{ $question->id }}][1]">No</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                        </div>
                        @endif
                        @if(count($starRatedQuestionList))
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="title-wrapper">
                                    <h3 class="h3 h3-title mt-2">Service Star Questions</h3>
                                </div>
                                <div class="assessment-box">
                                @foreach($starRatedQuestionList as $question)
                                    <div class="info mt-3 pl-3">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label class="control-label">Question</label>
                                                    <p class="display-info">{{ $question->question }}</p>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="control-label d-block">Answer</label>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="star_rated_question[{{ $question->id }}][0]" name="star_rated_question[{{ $question->id }}]" value="1">
                                                        <label class="custom-control-label" for="star_rated_question[{{ $question->id }}][0]">Yes</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="star_rated_question[{{ $question->id }}][1]" name="star_rated_question[{{ $question->id }}]" value="0">
                                                        <label class="custom-control-label" for="star_rated_question[{{ $question->id }}][1]">No</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                        </div>
                        @endif
                    </form>
                    <div class="row mt-3">
                        <div class="col-12">
                            <form id="mPlusDocument">
                                <div class="title-wrapper mb-3 flex-nowrap custom-file">
                                    <h3 class="h3 h3-title mt-2">Reference Documents</h3>
                                    <div class="browse-btn transparent">
                                        <input type="file" class="custom-file-input" id="mp_document_proof" name="mp_document_proof[]" multiple>
                                        <label for="customFile" class="custom-file-label font-orange pr-0 text-right"><img src="{{ asset('/img/admin/file-upload-primary.svg')}}" alt="upload" class="mr-2">Browse</label>
                                    </div>
                                </div>

                                <div id="loader"></div>
                                    @if($errors->has('mp_document_proof'))
                                    <span class="invalid-feedback">{{$errors->first('mp_document_proof')}}</span>
                                    <div class="mpdocumentError"></div>
                                    @endif
                                    <div class="clearfix"></div>
                                    <div class="row documentListRow">
                                        <div class="col-md-12">
                                            <span class="invalid-feedback doc-error"></span>
                                        </div>
                                        @if($documents)
                                            @foreach($documents as $doc)
                                                <div class="col-md-12 documentList">
                                                    <div class="form-group file-upload">
                                                        <label class="control-label">{{ $doc->orig_file_name }}</label>
                                                        <div class="file-act">
                                                            <a href="javascript:void(0)" class="removeDocument" data-id="{{ $doc->id }}" title="remove">
                                                                <i class="material-icons">close</i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                            </form>
                        </div>
                    </div>
                    <div class="row mt-3 ml-3">
                        <button type="submit" class="btn btn-em submitBtn" name="submit" id="submit" form="storeTaskResult">Submit Feedback</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="sidebar right mt-5 px-3" style="top: 105px;">
                    <div class="stats">
                        <div class="title-wrapper">
                            <h3 class="h3 h3-title mt-0">Tasks Details</h3>
                        </div>
                        <div class="form-group">
                            <label class="control-label xs-font-size gray">Start Date</label>
                            <p class="display-info">{{ date(config('custom.formats.date'),strtotime($taskData->start_date)) }}</p>
                        </div>
                        <div class="form-group">
                            <label class="control-label xs-font-size gray">Deadline</label>
                            <p class="display-info">{{ date(config('custom.formats.date'),strtotime($taskData->end_date)) }}</p>
                        </div>
                        <div class="form-group">
                            <label class="control-label xs-font-size gray">Visit Charge</label>
                            <p class="display-info">{{ $currency_code }} {{ number_format($taskData->visit_charge, 2) }}</p>
                        </div>
                        <div class="form-group">
                            <label class="control-label xs-font-size gray">Language</label>
                            <p class="display-info" style="word-break: break-word;">{{ $taskData->languages_list }}</p>
                        </div>
                        <div class="form-group">
                            <label class="control-label xs-font-size gray">Branch Name</label>
                            @if($taskData->mpClientBranch && $taskData->mpClientBranch->clientBranch && $taskData->mpClientBranch->clientBranch->google_map_location && $taskData->mpClientBranch->clientBranch->name)
                                <p class="display-info"><a href="{{ $taskData->mpClientBranch->clientBranch->google_map_location }}" target="_blank" style="text-decoration: underline;">{{ $taskData->mpClientBranch->clientBranch->name }}</a></p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection('content')

@push('pageJs')
<script type="text/javascript" src="{{ asset('js/vendor/axios.min.js') }}"></script>
<script>
    var unsaved = false

    $("input").on('change', function () {
        unsaved = true;
    });
    $("textarea").on('change', function () {
        unsaved = true;
    });

    window.onbeforeunload = function(){
        if(unsaved) {
            return 'There is unsaved data on this page and it will be lost if you leave this page without Submitting the form! Are you sure you want to leave this page?';
        }
    };

    $(document).ready(function() {

        $formValues = $('#storeTaskResult').serializeArray();

        if($formValues) {
            $.each($formValues, function(key, value){
                if(value.value != "" && value.name != '_token' && value.name != 'id'){
                    unsaved = true
                }
            });
        }
    });
</script>
<script>
    jQuery(document).ready(function() {


        $('#submit').click(function()
        {

            if($('#storeTaskResult').valid())
            {
                unsaved = false
                $(".submitBtn").addClass("disabled");
                $(".submitBtn").html("Please Wait...");
            }
        });

        $('#visiting_start_time').on('change', function() {
            $('#visiting_end_time').valid()
        });

        $("#storeTaskResult").each(function() {
            $(this).validate({
                errorElement: 'span',
                errorClass: 'invalid-feedback',
                ignore: false,

                errorPlacement: function(error, element) {

                    if (element.hasClass('dateselect')) {
                        error.insertAfter(element.parent('.date'))
                    } else if (element.hasClass('time_picker')) {
                        error.insertAfter(element.parent('.time'))
                    } else if (element.parent('.rating').length) {
                        error.insertAfter(element.parents('td'));
                    } else if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                        error.insertAfter(element.parents('.form-group'));
                    } else if (element.hasClass('custom-file-input')) {
                        error.insertAfter(element.parents('.custom-file').next('.filename'));
                    } else if (element.prop('type') == 'file') {
                        error.insertAfter(element.parents('.browse-btn'));
                    } else if (element.is("textarea")) {
                        error.insertAfter(element.next());
                    } else if (element.hasClass('select-two')) {
                        error.insertAfter(element.next());
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element) {
                    $(element).closest('.form-control').removeClass('is-valid').addClass('is-invalid'); // add the Bootstrap error class to the control group
                },

                unhighlight: function(element) {
                    $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
                },

                success: function(element) {
                    $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid'); // remove the Boostrap error class from the control group
                },

                focusInvalid: false, // do not focus the last invalid input

                invalidHandler: function(form, validator) {

                    if (!validator.numberOfInvalids())
                        return;

                    $('html, body').animate({
                        scrollTop: $(validator.errorList[0].element).offset().top - 80
                    }, '100');
                },

                rules: {
                    "visiting_date":{
                        "laravelValidation":[
                            ["Required",[],"Visiting Date is required.",true]]},
                        "visiting_start_time":{"laravelValidation":[["Required",[],"Visiting Start Time is required.",true]]},
                        "visiting_end_time":{"laravelValidation":[["Required",[],"Visiting End Time is required.",true]]},
                        "visiting_end_time":{timeGreaterThanCurrent: '#visiting_start_time'},
                        "asse_feedback":{"laravelValidation":[["Sometimes",[],"validation.sometimes",false],["Required",[],"Feedback is required.",true]]},
                        "asse_rate":{"laravelValidation":[["Sometimes",[],"validation.sometimes",false],["Required",[],"Rate is required.",true]]},
                        "custom_question":{"laravelValidation":[["Sometimes",[],"validation.sometimes",false],["Required",[],"Answer is required.",true]]},
                        "red_flag_question":{"laravelValidation":[["Sometimes",[],"validation.sometimes",false],["Required",[],"Answer is required.",true]]},
                        "star_rated_question":{"laravelValidation":[["Sometimes",[],"validation.sometimes",false],["Required",[],"Answer is required.",true]]}
                        }
            });
            $.validator.addClassRules("numberQuestion", {
                required: true,
                number: true
            });

            $.validator.addMethod("timeGreaterThanCurrent", function(value, element) {
                var d = new Date();
                var d = d.getDate();
                var t = new Date();
                var m = t.getMonth()+1;
                var s = new Date();
                var Y = s.getFullYear();
                var dateYmd = Y + '/' + m + '/' + d;
                var start =  new Date(dateYmd+ ' ' + $('#visiting_start_time').val());
                var end = new Date(dateYmd+ ' ' +value);
                return start < end;
            }, 'End Time must be greater than of Start Time.');
        });
    });
</script>
<script>
        $('.datepicker').datepicker({
            autoHide: true,
            format: '{{ config('custom.formats.date_js') }}'
        });

        $('#visiting_date').datepicker({
            autoHide: true,
            format: '{{ config('custom.formats.date_js') }}',
            startDate : '{{ date(config("custom.formats.date"),strtotime($taskData->start_date)) }}',
            endDate: new Date()
        });

    $('.timepicker').timepicker({
        'timeFormat': 'H:i:s',
        'scrollDefault': 'now'
    });

    $('#visiting_end_time').timepicker({
        'timeFormat': 'H:i:s',
        'scrollDefault': 'now'
    });

    $(document).on('click', '.removeDocument', function() {

        let id = $(this).attr('data-id');
        let url = "{{ route('front.m-plus-dashboard.removeDocument') }}";
        let el = this;

        axios.post(url, {
                id: id
            })
            .then(function(response) {
                $(el).parents('.documentList').remove();
            })
            .catch(function(error) {
                console.log(error);
            });


    });

    $("#mp_document_proof").liteUploader({
        url: "{{ route('front.m-plus-dashboard.uploadDocument') }}",
        params: {
            id: "{{ $taskData->id }}"
        },
        headers: {
            // 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            'Accept': 'application/json'
        }
        })
        .on("lu:success", function(e, {
            response
        }) {
            $('#loader').html('');
            var res = JSON.parse(response);
            $.each(res, function(key, value) {
                var html = '';
                html += '<div class="col-md-12 documentList">';
                html += '<div class="form-group file-upload">';
                html += '<label class="control-label">' + value.orig_file_name + '</label>';
                html += '<div class="file-act">';
                html += '<a href="javascript:void(0)" class="removeDocument" data-id="' + value.id + '" title="remove">';
                html += '<i class="material-icons">close</i>';
                html += '</a>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                $('.documentListRow').append(html);
            });
        })
        .on("lu:fail", function(e, {
            xhr
        }) {
        $('#loader').html('');
        var error = JSON.parse(xhr.responseText);
        $('.doc-error').text(error.errors.mp_document_proof[0]);
    });

    $("#mp_document_proof").change(function() {
        if($(this).get(0).files.length != 0) {
            if($('#mPlusDocument').valid()){
                $('.doc-error').text('');
                $('#loader').html('<div id="cover-spin" style="display:block"></div>');
                $(this).data("liteUploader").startUpload();
            }
        }
    });
</script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
    $.validator.addMethod('filesize', function (value, element, param) {
        var files    =   $('#'+element.id)[0].files;
        for(var i=0;i<files.length;i++){
            var fname = files[i].size;
            if(fname >= param) { return false; }
        }
        return true;
    }, 'Maximum size should be less than 8MB.');

    $.validator.addMethod('filelimit', function (value, element, param) {
        var files    =   $('#'+element.id)[0].files;
        if(files.length > param) { return false; }
        return true;
    }, 'You can upload up to 20 files at a time.');


    $.validator.addMethod("validate_file_type",function(val,elem) {
        var files    =   $('#'+elem.id)[0].files;
        for(var i=0;i<files.length;i++){
            var fname = files[i].name.toLowerCase();
            var re = /(\.pdf|\.docx|\.doc|\.xlsx|\.xls|\.jpeg|\.jpg|\.png|\.tiff)$/i;
            if(!re.exec(fname)) { return false; }
        }
        return true;
    },"Valid file formats are PDF, Word, Excel, Images (png/jpg).");

    $('#mPlusDocument').validate({
        rules: {
            'mp_document_proof[]': {
                validate_file_type: true,
                filesize: 8000000,
                filelimit: 20
            }
        },
        ignore: [],
        errorElement: 'span',
        errorClass: 'invalid-feedback',
        errorPlacement: function(error, element) {
            error.css({'font-size': '16px', 'font-weight': 'bold', 'margin-bottom': '10px'})
            if (element.prop('type') === 'file') {
                error.insertAfter(element.parents('.custom-file').next());
            } else {
                error.insertAfter(element.sibling(a));
            }
        }
    });
</script>
@endpush