@extends('layouts.master')
@section('page_title', $website_request->website_request_name)

@section('content')

    {{ Form::open(['url' => action('ProductionChecklistController@post_edit', compact('website_request', 'qa_checklist_section')),
        'onsubmit_function'=>"on_production_checklist_edit_submit"]) }}
    <div class="container">
        {{ Form::page_header($website_request->website_request_name, "hours") }}

        <div class="row">
            <div class="grey-bg curve_container">
                <div class="row">
                    @include('website._website_sidebar', compact('website_request'))
                    <div class="col-md-9 col-xs-9 detail-right-side">
                        <div class="white-bg">
                            <div class="row prod-check-row">
                                {{ Form::label_ex('Production Checklist', \App\Helpers\FormComponentHelper::SIZE_EXLARGE, null, 6) }}
                                @include('website._production_checklist_form_filter')
                            </div>
                            <div class="row">
                                {{ Form::label_ex($qa_checklist_section->section_name, \App\Helpers\FormComponentHelper::SIZE_LARGE, null, 10) }}
                            </div>
                            {{ Form::separator_row('grey-divider grid-header-divider') }}
                            @if ($allow_complete)
                            {{ Form::hidden('allow_complete', $allow_complete) }}
                            @endif
                            @foreach($website_request->_qa_checklist_question()->where('qa_checklist_question.qa_checklist_section', '=', $qa_checklist_section->qa_checklist_section)->get() as $question)
                                <div class="{{ $question->confirmed ? 'confirmed' : '' }}">
                                    <div class="row" id="parent_{{ $question->qa_checklist }}">
                                        {{ Form::hidden("question[".$question->qa_checklist."][qa_checklist]", $question->qa_checklist) }}
                                        @if ($allow_complete)
                                            {{ Form::hidden("question[".$question->qa_checklist."][confirmed]", $question->confirmed, ['id' => "question_".$question->qa_checklist."_confirmed"]) }}
                                            {{ Form::checkbox_ex('question['.$question->qa_checklist.'][confirmed]', $question->confirmed, $question->question,
                                                "confirm_question(this.checked, '".$question->qa_checklist."');", null, 7) }}
                                        @else
                                            {{ Form::label_styled($question->question, 'label-grey label-question', \App\Helpers\FormComponentHelper::SIZE_SMALL, 7) }}
                                        @endif
                                        <div class="col-md-5 col-xs-5 text-right no-right-pad feedback-btns">
                                            {{ Form::hidden("question[".$question->qa_checklist."][question_status]", $question->question_status, ['id' => "question[".$question->qa_checklist."][question_status]"]) }}
                                            {{ Form::select_ex("question_status_".$question->qa_checklist, $question->question_status, \App\Models\QA_Checklist::$question_status_map,
                                                null, null, null, null, null, 'question-status') }}
                                            {{ Form::button_tiny('Feedback', "feedback_list_manager.add_one(
                                                    '". \App\Models\QA_Checklist::find($question->qa_checklist)->create_feedback_url."',
                                                    feedback_selector.calc_new_handle_id('".$question->qa_checklist."') );", 'feedback_btn_'.$question->qa_checklist ) }}
                                        </div>
                                    </div>
                                    <div class="error-container-question_status_{{$question->qa_checklist}}"> </div>
                                    @foreach($feedbacks->filter(function ($item) use($question) { return $item->qa_checklist == $question->qa_checklist; }) as $feedback)
                                        @include('website._feedback', ['feedback' => $feedback])
                                    @endforeach
                                    <div class="row feedback-div new-feedback-div" id="parent_{{ $question->qa_checklist }}_feedback_handle_"></div>
                                    {{ Form::separator_row('grey-divider grid-divider') }}
                                </div>
                            @endforeach
                        </div>
                        <div class="row bt-button-row text-right">
                            {{ Form::button_save() }}
                            {{ Form::button_link('Cancel', action('ProductionChecklistController@view', compact('website_request', 'qa_checklist_section'))) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ Form::close() }}
@endsection

@section('page_script')
    @include('shared_script._website_sidebar_script')
    @include('shared_script._form_filter_script')
    @include('shared_script._list_manager')

    <script >

        var feedback_list_manager = null;
        var feedback_selector = null;

        $(document).ready(function() {
            feedback_list_manager = new list_manager('feedback', 'Feedback');
            feedback_list_manager.set_do_delete_function('do_delete_feedback');
            feedback_list_manager.set_after_load_function('do_after_load_feedback');
            feedback_list_manager.set_after_edit_function('do_after_load');
            feedback_list_manager.set_after_create_function('do_after_load');
            feedback_selector = new secondary_level_selector('feedback', 'parent');

            // change the color of the status based on the value
            var $select = $('.question-status');
            $select.each(function() {
                $(this).addClass('value'+$(this).children(':selected').val());
            }).on('change', function(ev) {
                var value = $(this).children(':selected').val();
                var id = $(this)[0].id.replace('question_status_', '');
                document.getElementById('question['+id+'][question_status]').value = value;
                $(this).removeClass('value0')
                    .removeClass('value1')
                    .removeClass('value2')
                    .removeClass('value3')
                    .addClass('value'+value);
                if (value == '{{ \App\Models\QA_Checklist::QUESTION_STATUS_REVIEW }}') {
                    $('#feedback_btn_'+id).click();
                }
            });
            // change the color of the status based on the value
            var $checkboxes = $('.bt-checkbox');
            $checkboxes.each(function() {
                var pk = $(this)[0].id.replace('question[', '').replace('][confirmed]', '');
                confirm_question($(this)[0].checked, pk);
            });
            feedback_autoheight();

        });

        function show_all()
        {
            $('.confirmed').show();
        }

        function show_active()
        {
            $('.confirmed').hide();
        }

        function do_after_load_feedback(handle_id) {
            scroll_to_div_top(handle_id);
        }

        function do_after_load()
        {
            feedback_autoheight();
        }

        function confirm_question(value, pk) {
            $('#question_'+pk+'_confirmed').val(value ? 1 : 0);
            if (value) {
                $('#parent_'+pk).parent().addClass('confirmed');
                $('#parent_'+pk+' .bt-checkbox-label').addClass('strike-through');
                $('#parent_'+pk+' .bt-select').attr('disabled', 'disabled');
                $('#parent_'+pk+' .bt-button').attr('disabled', 'disabled');
            } else {
                $('#parent_'+pk).parent().removeClass('confirmed');
                $('#parent_'+pk+' .bt-checkbox-label').removeClass('strike-through');
                $('#parent_'+pk+' .bt-select').removeAttr('disabled');
                $('#parent_'+pk+' .bt-button').removeAttr('disabled');
            }
        }

        function on_production_checklist_edit_submit() {
            // save all the feedback before we exit
            $('.new-feedback-div input[type="button"][value="Save"]').each(function( ) {
                $(this).click();
            });
            return true;
        }

    </script>
@endsection

@section('page_style')
    <style>
        select, option { background: #fff; }
        select.value0, option[value="{{ \App\Models\QA_Checklist::QUESTION_STATUS_NO }}"],
        select.value3, option[value="{{ \App\Models\QA_Checklist::QUESTION_STATUS_REVIEW }}"]
        {
            color: #CC0000;
        }

        select.value1, option[value="{{ \App\Models\QA_Checklist::QUESTION_STATUS_YES }}"] { color: #479641; }
        select.value2, option[value="{{ \App\Models\QA_Checklist::QUESTION_STATUS_NA }}"] { color: black; }

        .prod-check-row {
            margin-bottom: 30px;
        }
        .grid-header-divider,
        .grid-divider {
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .white-bg .separator-row {
            height: auto;
        }
        .label-question {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .question-status{
            width: 120px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        select[id^=question_status_]{
            padding: 4px 0;
            height: auto;
        }
        
        .feedback-btns input {
            height: 31px;
            padding-top: 12px !important;
        }
        .child-div {
            margin-bottom: 20px;
        }
        .button-row {
            margin-bottom: 10px;
        }
    </style>
@endsection