<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
    <template id="survey_page_statistics" name="Survey: result statistics page">
        <t t-set="no_livechat" t-value="True"/>
        <t t-set="no_survey_navigation" t-value="True"/>
        <t t-call="survey.layout">
            <t t-call="survey.survey_button_form_view" />
            <t t-set="page_record_limit" t-value="10"/><!-- Change this record_limit to change number of record  per page-->
            <div class="o_container_small o_survey_result">
                <t t-call="survey.survey_page_statistics_header" />
                <t t-call="survey.survey_page_statistics_inner" />
            </div>
        </t>
    </template>

    <template id="survey_page_statistics_header" name="Survey: result statistics header">
        <div class="o_survey_statistics_header mt32">
            <h2 t-field="survey.title"/>
            <div class="d-flex align-items-start">
                <div t-if="question_and_page_data" class="o_survey_results_topbar d-print-none"><t t-call="survey.survey_results_filters"/></div>
                <h3 t-else="">
                    Sorry, no one answered this survey yet.
                </h3>
                <button class="btn btn-primary d-print-none o_survey_results_print mt-1 ms-auto" aria-label="Print" title="Print">
                    <i class="fa fa-print"/>
                </button>
            </div>
        </div>
    </template>

    <template id="survey_page_statistics_inner" name="Survey: result statistics content">
        <t t-set="already_filtered_questions" t-value="{filter['question_id'] for filter in search_filters}"/>
        <div t-if="survey.session_show_leaderboard and leaderboard" class="o_survey_session_leaderboard mb-5 mt-1">
            <h2 class="mt16 text-uppercase text-muted">Leaderboard</h2>
            <t t-call="survey.user_input_session_leaderboard"/>
        </div>
        <div t-if="survey.scoring_type in ['scoring_with_answers', 'scoring_without_answers']">
            <hr class="my-2"/>
            <div class="row mt-2">
                <div class="col">
                    <h4 class="text-primary" t-out="survey.question_count"/>
                    <h6>Questions</h6>
                </div>
                <div class="col">
                    <h4 class="text-primary" t-out="survey.answer_count"/>
                    <h6>Registered</h6>
                </div>
                <div class="col">
                    <h4 class="text-primary" t-out="survey.answer_done_count"/>
                    <h6>Completed</h6>
                </div>
                <div class="d-sm-none w-100"/>
                <div class="col">
                    <h4 class="text-primary"><t t-call="survey.survey_remove_unnecessary_decimals">
                        <t t-set="value_to_format" t-value="survey_data['global_success_rate']"/></t>%</h4>
                    <h6>Success rate</h6>
                </div>
                <div t-if="survey.answer_duration_avg" class="col">
                    <h4 class="text-primary" t-out="survey.answer_duration_avg" t-options="{'widget': 'float_time'}"/>
                    <h6>Average Duration</h6>
                </div>
                <div t-if="survey.answer_score_avg" class="col">
                    <h4 class="text-primary"><t t-out="round(survey.answer_score_avg, 2)"/>%</h4>
                    <h6>Average Score</h6>
                </div>
           </div>
            <hr/>
        </div>

        <div t-foreach="question_and_page_data" t-as='question_data'>
            <t t-set="question" t-value="question_data['question']"/>
            <div t-if="question_data['is_page']" class="o_survey_question_page">
                <h3 class="mt16 text-uppercase" t-field="question.title"/>
                <hr class="mt-2 mb-4"/>
            </div>
            <div t-else="" class="mt-2 o_survey_results_question_wrapper"><t t-call="survey.survey_page_statistics_question"/></div>
        </div>
    </template>

    <template id="survey_page_statistics_question" name="Question: result statistics">
        <t t-set="comment_lines" t-value="question_data['comment_line_ids']"/>
        <t t-set="graph_data" t-value="question_data['graph_data']"/>
        <t t-set="table_data" t-value="question_data['table_data']"/>
        <t t-set="question_has_image_answers" t-value="any(answer.value_image_filename for answer in question.suggested_answer_ids)"/>

        <div class="o_survey_results_question pb-3">
            <t t-set="question_answered" t-value="question_data['answer_input_done_ids']"/>
            <div class="o_survey_results_question_header">
                <div class="d-inline-flex flex-nowrap align-items-center cursor-pointer user-select-none" aria-expanded="true"
                    data-bs-toggle="collapse" t-attf-data-bs-target=".o_survey_results_question_#{question.id}">
                    <i class="fa fa-caret-right d-print-none me-3" role="img"/>
                    <i class="fa fa-caret-down d-print-none me-3" role="img"/>
                    <h5 t-field="question.title" class="mb-1"/>
                </div>
                <div t-attf-class="d-flex flex-wrap align-items-center mb-1 collapse show o_survey_results_question_#{question.id}">
                    <!-- Question info -->
                    <div class="d-flex align-items-center my-1 me-2">
                        <!-- Scoring info -->
                        <t t-if="survey.scoring_type != 'no_scoring' and (question.answer_numerical_box or question.answer_date or
                            question.answer_datetime or any([a.is_correct for a in question.suggested_answer_ids]))">
                            <span t-if="question.question_type in ['numerical_box', 'date', 'datetime', 'simple_choice', 'multiple_choice']"
                                class="badge d-flex gap-1 ms-0 me-1 text-info text-start border rounded">
                                <span t-out="question_data['right_inputs_count']"/>
                                <span class="text-success">Correct</span>
                            </span>
                            <span t-if="question.question_type == 'multiple_choice'" class="badge d-flex gap-1 ms-0 me-1 text-info text-start border rounded">
                                <span t-esc="question_data['partial_inputs_count']"/>
                                <span class="text-warning">Partial</span>
                            </span>
                        </t>
                        <!-- Inputs info -->
                        <span class="badge d-flex gap-1 ms-0 me-1 text-info text-start border rounded">
                            <span t-out="len(question_data['answer_input_done_ids'])"/>/
                            <span t-out="len(question_data['answer_input_ids'])"/>
                            <span class="text-muted">Responded</span>
                        </span>
                    </div>
                    <!-- Numerical KPIs -->
                    <span t-if="question.question_type in ['numerical_box', 'scale']" class="d-flex gap-1 my-1 me-2">
                        <div class="btn-group o_survey_results_question_pill" role="group" aria-label="Maximum">
                            <span class="badge text-bg-secondary only_left_radius px-2 pt-1">Max</span>
                            <span class="badge text-bg-success only_right_radius px-2 pt-1" t-esc="question_data['numerical_max']"></span>
                        </div>
                        <div class="btn-group o_survey_results_question_pill" role="group" aria-label="Minimum">
                            <span class="badge text-bg-secondary only_left_radius px-2 pt-1">Min</span>
                            <span class="badge text-bg-danger only_right_radius px-2 pt-1" t-esc="question_data['numerical_min']"></span>
                        </div>
                        <div class="btn-group o_survey_results_question_pill" role="group" aria-label="Average">
                            <span class="badge text-bg-secondary only_left_radius px-2 pt-1">Avg</span>
                            <span class="badge text-bg-warning only_right_radius px-2 pt-1" t-esc="question_data['numerical_average']"></span>
                        </div>
                    </span>
                    <!-- Data buttons -->
                    <ul t-if="question.question_type not in ['text_box', 'char_box'] and question_answered"
                        class="nav btn-group flex-nowrap d-print-none ms-auto" role="tablist">
                        <li t-if="question.question_type in ['simple_choice', 'multiple_choice', 'matrix', 'scale']" class="nav-item btn-group">
                            <a t-att-href="'#survey_graph_question_%d' % question.id" t-att-aria-controls="'survey_graph_question_%d' % question.id"
                                data-bs-toggle="tab" role="tab" class="o_survey_results_data_tab nav-link btn btn-light py-1 px-2 active">
                                <i t-if="question.question_type == 'simple_choice'" class="fa fa-pie-chart"/>
                                <i t-else="" class="fa fa-bar-chart-o"/>
                            </a>
                        </li>
                        <li t-elif="question.question_type in ['numerical_box', 'date', 'datetime']" class="nav-item btn-group">
                            <a t-att-href="'#survey_stats_question_%d' % question.id" t-att-aria-controls="'survey_stats_question_%d' % question.id"
                                data-bs-toggle="tab" role="tab" class="o_survey_results_data_tab nav-link btn btn-light py-1 px-2 active">
                                <i class="fa fa-trophy"/>
                            </a>
                        </li>
                        <li class="nav-item btn-group">
                            <a t-att-href="'#survey_data_question_%d' % question.id" t-att-aria-controls="'survey_data_question_%d' % question.id"
                                data-bs-toggle="tab" role="tab" class="o_survey_results_data_tab nav-link btn btn-light py-1 px-2">
                                <i class="fa fa-bars"/>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div t-attf-class="collapse show o_survey_results_question_#{question.id}">
                <!-- Question Description -->
                <div class="o_survey_question_description ms-3 text-muted d-none" t-field="question.description"/>
    
                <!-- Answers -->
                <div t-if="not question_answered" class="o_survey_no_answers text-center fw-bold">
                    <p>No answers yet!</p>
                </div>
                <t t-elif="question.question_type in ['text_box', 'char_box']"
                    t-call="survey.question_result_text"/>
                <t t-elif="question.question_type in ['numerical_box', 'date', 'datetime']"
                    t-call="survey.question_result_number_or_date_or_datetime"/>
                <t t-elif="question.question_type in ['simple_choice', 'multiple_choice', 'scale']"
                    t-call="survey.question_result_choice"/>
                <t t-elif="question.question_type in ['matrix']"
                    t-call="survey.question_result_matrix"/>
            </div>
        </div>
    </template>

    <template id="survey_results_filters" name="Survey: Filter results">
        <t t-set="search_passed_or_failed" t-value="search_failed or search_passed"/>
        <div class="question_and_page_data o_survey_result p-0">
            <nav class="navbar navbar-light rounded p-0">
                <div t-if="question_and_page_data" class="justify-content-between w-100">
                    <ul class="nav o_survey_results_topbar_dropdown_filters align-items-center">
                        <t t-set="dropdown_item_classes" t-translation="off">dropdown-item d-flex align-items-center justify-content-between</t>
                        <li class="nav-item dropdown me-2 my-1">
                            <a href="#" role="button" data-bs-toggle="dropdown"
                               t-attf-class="btn btn-outline-primary dropdown-toggle #{'active' if search_finished else ''}">
                                <span t-if="search_finished">Completed surveys</span>
                                <span t-else="">All surveys</span>
                            </a>
                            <div class="dropdown-menu">
                                <a t-attf-class="#{dropdown_item_classes} filter-finished-or-not #{'active' if not search_finished else ''}">
                                    <span>All surveys</span>
                                    <span t-if="not search_finished" t-esc="survey_data['count_all']" class="badge rounded-pill text-bg-primary ms-3"/>
                                </a>
                                <a t-attf-class="#{dropdown_item_classes} filter-finished #{'active' if search_finished else ''}">
                                    <span>Completed surveys</span>
                                    <span t-if="not search_finished" t-esc="survey_data['count_finished']" class="badge rounded-pill text-bg-primary ms-3"/>
                                </a>
                            </div>
                        </li>
                        <li t-if="survey.scoring_type != 'no_scoring'" class="nav-item dropdown me-2 my-1">
                            <a href="#" role="button" data-bs-toggle="dropdown"
                               t-attf-class="btn btn-outline-primary dropdown-toggle #{'active' if search_passed_or_failed else ''}">
                                <span t-if="search_failed">Failed only</span>
                                <span t-elif="search_passed">Passed only</span>
                                <span t-else="">Passed and Failed</span>
                            </a>
                            <div class="dropdown-menu">
                                <a t-attf-class="#{dropdown_item_classes} filter-passed-and-failed #{'active' if not search_passed_or_failed else ''}">
                                    <span>Passed and Failed</span>
                                    <span t-if="not search_passed_or_failed" t-esc="survey_data['count_all']" class="badge rounded-pill text-bg-primary ms-3"/>
                                </a>
                                <a t-attf-class="#{dropdown_item_classes} filter-passed #{'active' if search_passed else ''}">
                                    <span>Passed only</span>
                                    <span t-if="not search_passed_or_failed" t-esc="survey_data['count_passed']" class="badge rounded-pill text-bg-primary ms-3"/>
                                </a>
                                <a t-attf-class="#{dropdown_item_classes} filter-failed #{'active' if search_failed else ''}">
                                    <span>Failed only</span>
                                    <span t-if="not search_passed_or_failed" t-esc="survey_data['count_failed']" class="badge rounded-pill text-bg-primary ms-3"/>
                                </a>
                            </div>
                        </li>
                        <li t-if="search_filters or search_finished or search_passed_or_failed" class="my-2">
                            <span class="o_survey_results_topbar_clear_filters text-primary">
                                <i class="fa fa-trash me-1"/>Remove all filters
                            </span>
                        </li>
                    </ul>
                    <ul class="nav o_survey_results_topbar_answer_filters">
                        <t t-if="search_filters">
                            <li t-foreach="search_filters" t-as="filter_data" class="nav-item me-2 my-1">
                                <span t-attf-class="btn btn-light filter-remove-answer cursor-default">
                                    <span t-esc="filter_data['question']"/> | <span t-esc="filter_data['answer']"></span>
                                    <i class="fa fa-times filter-remove-answer text-primary"
                                        t-att-data-model-short-key="filter_data['model_short_key']"
                                        t-att-data-row-id="filter_data['row_id']"
                                        t-att-data-record-id="filter_data['record_id']"></i>
                                </span>
                            </li>
                        </t>
                    </ul>
                </div>
            </nav>
        </div>
    </template>

    <template id="question_result_text" name="Question: text result (text_box, char_box)">
        <t t-set="answers_json" t-value="question_data['answers_data']"/>
        <t t-set="hide_filter" t-value="question.id in already_filtered_questions or len(table_data) == 1"/>
        <div class="survey_table_with_pagination" t-att-data-answers-json="answers_json" t-att-data-hide-filter="hide_filter" t-att-data-record_limit="page_record_limit">   
            <div class="o_survey_results_table_wrapper overflow-auto">
                <table class="table table-hover table-sm o_survey_results_table_indexed" t-att-id="'survey_table_question_%d' % question.id">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>User Responses</th>
                        </tr>
                    </thead>
                    <!-- The following tbody tag is populated by the interaction survey_result_pagination
                    (see also the template survey.paginated_results_rows) -->
                    <tbody/>
                </table>
            </div>
            <t t-call="survey.question_table_pagination"/>
        </div>
    </template>

    <template id="question_result_number_or_date_or_datetime" name="Question: number or date (and time) result (numerical_box or date or datetime)">
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active with-3d-shadow with-transitions" t-att-id="'survey_stats_question_%d' % question.id">
                <table class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th>Top User Responses</th>
                            <th>Occurrence</th>
                            <th t-if="question.is_scored_question">Score</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr t-foreach="question_data['common_lines']" t-as="common_line">
                            <td>
                                <t t-if="question.question_type == 'numerical_box'">
                                    <t t-set="right_answer" t-value="common_line[0] == question.answer_numerical_box"/>
                                    <span><t t-call="survey.survey_remove_unnecessary_decimals" value_to_format="common_line[0]"/></span>
                                    <i t-if="right_answer" class="fa fa-check"/>
                                </t>
                                <t t-elif="question.question_type == 'date'">
                                    <t t-set="right_answer" t-value="common_line[0] == question.answer_date"/>
                                    <span t-esc="common_line[0]" t-options='{"widget": "date"}'/>
                                    <i t-if="right_answer" class="fa fa-check"/>
                                </t>
                                <t t-elif="question.question_type == 'datetime'">
                                    <t t-set="right_answer" t-value="common_line[0] == question.answer_datetime"/>
                                    <span t-esc="common_line[0]" t-options='{"widget": "datetime"}'/>
                                    <i t-if="right_answer" class="fa fa-check"/>
                                </t>
                            </td>
                            <td><span t-esc="common_line[1]"></span></td>
                            <td t-if="question.is_scored_question">
                                <span t-if="right_answer">
                                    <t t-call="survey.survey_remove_unnecessary_decimals" value_to_format="question.answer_score"/>
                                </span>
                                <span t-else="">0</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div role="tabpanel" class="tab-pane" t-att-id="'survey_data_question_%d' % question.id">
                <t t-set="answers_json" t-value="question_data['answers_data']"/>
                <t t-set="hide_filter" t-value="question.id in already_filtered_questions or len(table_data) == 1"/>
                <div class="survey_table_with_pagination" t-att-data-answers-json="answers_json" t-att-data-hide-filter="hide_filter" t-att-data-record_limit="page_record_limit">   
                    <div class="o_survey_results_table_wrapper overflow-auto">
                        <table class="table table-hover table-sm o_survey_results_table_indexed" t-att-id="'survey_table_question_%d' % question.id">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>User Responses</th>
                                </tr>
                            </thead>
                            <!-- The following tbody tag is populated by the interaction survey_result_pagination
                            (see also the template survey.paginated_results_rows) -->
                            <tbody/>
                        </table>
                    </div>
                    <t t-call="survey.question_table_pagination"/>
                </div>
            </div>
        </div>
    </template>

    <template id="question_result_choice" name="Question: choice result (simple_choice, multiple_choice, scale)">
        <div class="tab-content">
            <div t-if="question_answered" role="tabpanel" class="tab-pane active survey_graph"
                t-att-id="'survey_graph_question_%d' % question.id"
                t-att-data-question-id="question.id"
                t-att-data-graph-type="'pie' if question.question_type == 'simple_choice' else 'bar'"
                t-att-data-graph-data="graph_data"
                t-att-data-right-answers="list(question_data['answer_line_done_ids'].mapped('value_scale')) if question.question_type in ['scale'] else list(question_data['right_answers'].mapped('value'))">
                <!-- canvas element for drawing bar chart -->
                <canvas class="mx-auto w-100 h-auto"/>
            </div>
            <div role="tabpanel" t-att-id="'survey_data_question_%d' % question.id"
                t-attf-class="tab-pane #{'active' if not question_answered else ''} table-responsive">
                <table class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th>Answer</th>
                            <th t-if="question_has_image_answers">Image</th>
                            <th>User Choice</th>
                            <th t-if="question.is_scored_question">Score</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr t-foreach="table_data" t-as="choice_data">
                            <td>
                                <p class="text-nowrap my-0">
                                    <span t-if="question.question_type == 'numerical_box'">
                                        <t t-call="survey.survey_remove_unnecessary_decimals" value_to_format="choice_data['value']"/>
                                    </span>
                                    <span t-else="" t-esc="choice_data['value']"/>
                                    <i t-if="question.is_scored_question and choice_data['suggested_answer'].is_correct" class="fa fa-check"/>
                                </p>
                            </td>
                            <td t-if="question_has_image_answers">
                               <div t-if="choice_data['suggested_answer'].value_image"
                                    t-field="choice_data['suggested_answer'].value_image"
                                    t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_64_max o_survey_answer_image", "alt-field": "name", "itemprop": "image"}'/>
                            </td>
                            <td class="o_survey_answer d-flex align-items-center gap-1">
                                <span t-esc="round(choice_data['count'] * 100.0/ (len(question_data['answer_line_done_ids']) or 1), 2)"></span> %
                                <span t-out="choice_data['count_text']" class="badge text-bg-primary"/>
                                <i t-if="choice_data['suggested_answer'].id and choice_data['count']"
                                    class="fa fa-filter text-primary filter-add-answer d-print-none"
                                    data-model-short-key="A" t-att-data-record-id="choice_data['suggested_answer'].id"
                                    role="img" aria-label="Filter surveys" title="Only show survey results having selected this answer"/>
                            </td>
                            <td t-if="question.is_scored_question">
                                <t t-call="survey.survey_remove_unnecessary_decimals" value_to_format="choice_data['suggested_answer'].answer_score"/>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div t-if="comment_lines"><t t-call="survey.question_result_comments"/></div>
    </template>

    <template id="question_result_matrix" name="Question: matrix result (matrix)">
        <t t-set="graph_data" t-value="question_data['graph_data']"/>
        <t t-set="table_data" t-value="question_data['table_data']"/>
        <div class="tab-content">
            <div t-if="question_answered" role="tabpanel" class="tab-pane active with-3d-shadow with-transitions survey_graph"
                t-att-id="'survey_graph_question_%d' % question.id"
                t-att-data-question-id= "question.id"
                data-graph-type= "multi_bar"
                t-att-data-graph-data="graph_data">
                <!-- canvas element for drawing Multibar chart -->
                <canvas class="mx-auto w-100 h-auto"/>
            </div>
            <div role="tabpanel" t-attf-class="tab-pane #{'active' if not question_answered else ''} table-responsive" t-att-id="'survey_data_question_%d' % question.id">
                <table class="table table-hover table-sm text-end">
                    <thead t-if="table_data">
                        <tr>
                            <th></th>
                            <th class="text-end" t-foreach="table_data[0]['columns']" t-as="column_data">
                                <span t-esc="column_data['suggested_answer'].value"></span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr t-foreach="table_data" t-as="choice_data">
                            <td>
                                <span t-esc="choice_data['row'].value"></span>
                            </td>
                            <td class="o_survey_answer" t-foreach="choice_data['columns']" t-as="column_data">
                                <div class="d-flex align-items-center gap-1 justify-content-end">
                                    <span t-esc="round(column_data['count'] * 100.0/ (len(question_data['answer_input_done_ids']) or 1), 2)"></span> %
                                    <span class="badge text-bg-primary" t-esc="column_data['count']"></span>
                                    <i t-if="column_data['count']" class="fa fa-filter text-primary filter-add-answer d-print-none"
                                        data-model-short-key="A"
                                        t-att-data-row-id="choice_data['row'].id"
                                        t-att-data-record-id="column_data['suggested_answer'].id" role="img" aria-label="Filter surveys"
                                        title="Only show survey results having selected this answer"/>
                                    <i t-else="" class="o_survey_answer_matrix_whitespace d-print-none"/>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        <div t-if="comment_lines"><t t-call="survey.question_result_comments"/></div>
        </div>
    </template>

    <template id="question_result_comments" name="Question: comments">
        <table class="table table-hover table-sm o_survey_results_table_indexed" t-att-id="'survey_table_question_%d' % question.id">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Comment</th>
                </tr>
            </thead>
            <tbody>
                <tr t-foreach="comment_lines" t-as="input_line">
                    <td>
                        <a t-att-href="input_line.user_input_id.get_print_url()">
                            <t t-esc="input_line_index + 1"></t>
                        </a>
                    </td>
                    <td>
                        <span t-field="input_line.value_char_box"></span><br/>
                    </td>
                </tr>
            </tbody>
        </table>
    </template>

    <template id="question_table_pagination" name="Survey: statistics table pagination">
        <t t-set="non_skipped_answers_count" t-value="len(question_data['answer_input_done_ids'])"/>
        <t t-if="non_skipped_answers_count > page_record_limit">
            <div class="d-flex justify-content-between d-print-none pagination_wrapper"
                t-att-id="'pagination_%d' % question.id" t-att-data-question_id="question.id">
                <ul class="pagination mt-2">
                    <t t-set="total" t-value="ceil(non_skipped_answers_count / page_record_limit) + 1"/>
                    <li t-foreach="range(1, total)" t-as="num"
                        t-att-class="'page-item o_survey_js_results_pagination %s' % ('active' if num == 1 else '')">
                        <a href="#" class="page-link" t-esc="num"></a>
                    </li>
                </ul>
                <button class="btn btn-sm btn-primary mx-0 my-3 o_survey_question_answers_show_btn">Show All</button>
            </div>
        </t>
    </template>

    <template id="survey_remove_unnecessary_decimals"  name="Survey: remove .0">
        <t t-esc="value_to_format if value_to_format % 1 else int(value_to_format)"/>
    </template>

</data>
</odoo>
