{% extends '@App/base.html.twig' %}
{% block body %}

    {% include 'AppBundle:iService//Reporting:dateForm.html.twig' %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row">
                    <table id="dashboard_table" class="table table-hover table-striped table-bordered text-center dataTable"
                           role="grid" aria-describedby="datatable-example-2_info">
                        <thead>
                        <tr role="row">
                            <th width="10%" class="text-center sorting" tabindex="0" rowspan="1"
                                colspan="1" role="columnheader"
                                style="width: 107px;">
                                ADVISOR
                            </th>
                            <th width="10%" class="text-center sorting" tabindex="0" rowspan="1"
                                colspan="1" role="columnheader"
                                style="width: 107px;">
                                GREAT
                            </th>
                            <th width="10%" class="text-center sorting" tabindex="0" rowspan="1"
                                colspan="1" role="columnheader" style="width: 107px;">
                                AVERAGE
                            </th>
                            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" style="width: 216px;">
                                POOR
                            </th>
                            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" style="width: 216px;">
                                GOOGLE
                            </th>
                            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" style="width: 181px;">
                                FACEBOOK
                            </th>
                            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" style="width: 181px;">
                                TOTAL CUSTOMER REVIEWS
                            </th>
                        </tr>
                        </thead>
                        <tfoot class="hidden">
                        <tr>
                            <th width="10%" class="text-center" rowspan="1" colspan="1">ADVISOR</th>
                            <th width="10%" class="text-center" rowspan="1" colspan="1">GREAT</th>
                            <th width="10%" class="text-center" rowspan="1" colspan="1">AVERAGE</th>
                            <th class="text-center" rowspan="1" colspan="1">POOR</th>
                            <th class="text-center" rowspan="1" colspan="1">GOOGLE</th>
                            <th class="text-center" rowspan="1" colspan="1">FACEBOOK</th>
                            <th class="text-center" rowspan="1" colspan="1">TOTAL CUSTOMER REVIEWS</th>
                        </tr>
                        </tfoot>
                        <tbody>
                        {% for key, advisor in advisors %}
                            <tr role="row">
                                <td class="nopad">{{ advisor.advisor }}</td>
                                <td class="nopad">{% if advisor.great %}<a href="javascript:" class="btn btn-primary" id="interation" data-advisor="{{ key }}" data-type="greatRepairOrders" data-toggle="modal" data-target="#modal-reviews">{{ advisor.great }}</a> {% endif %}</td>
                                <td class="nopad">{% if advisor.average %}<a href="javascript:" class="btn btn-primary" id="interation" data-advisor="{{ key }}" data-type="averageRepairOrders" data-toggle="modal" data-target="#modal-reviews">{{ advisor.average }}</a>{% endif %}</td>
                                <td class="nopad">{% if advisor.poor %}<a href="javascript:" class="btn btn-primary" id="interation" data-advisor="{{ key }}" data-type="poorRepairOrders" data-toggle="modal" data-target="#modal-reviews">{{ advisor.poor }}</a>{% endif %}</td>
                                <td class="nopad">{% if advisor.google %}<a href="#javascript:" class="btn btn-primary" id="interation" data-advisor="{{ key }}" data-type="googleRepairOrders" data-toggle="modal" data-target="#modal-reviews">{{ advisor.google }}</a>{% endif %}</td>
                                <td class="nopad">{% if advisor.facebook %}<a href="javascript:" class="btn btn-primary" id="interation" data-advisor="{{ key }}" data-type="facebookRepairOrders" data-toggle="modal" data-target="#modal-reviews">{{ advisor.facebook }}</a>{% endif %}</td>
                                <td class="nopad">{% if advisor.total %}{{ advisor.total }}{% endif %}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block modal %}
    <div class="modal modal-primary fade scale" id="modal-reviews" tabindex="-1" role="dialog"
         aria-labelledby="modal-reviews" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modal-default-primary-label">Reviews</span></h4>
                </div>
                <div class="modal-body" id="reviews_loaded">
                    <table id="review-details-full" class="table table-hover table-striped table-bordered text-center dataTable"></table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-raised btn-primary btn-flat" data-dismiss="modal">CLOSE</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#modal-reviews').on('show.bs.modal', function (e) {
                var advisor = $(e.relatedTarget).data('advisor');
                var type = $(e.relatedTarget).data('type');
                var reviewDetails = {{ advisors|json_encode|raw }};
                var html = '<table id="review-details-full" class="table table-hover table-striped table-bordered text-center dataTable"><tr><td>RO #</td><td>PHONE #</td><td>TIME STAMP</td><td>MESSAGE</td></tr>';
                $.each( reviewDetails[advisor][type], function( key, value ) {
                    html += '<tr>';
                    html += '<td>' + value.repair_order_number + '</td>';
                    html += '<td>' + value.customer_phone + '</td>';
                    html += '<td>' + value.time_stamp + '</td>';
                    html += '<td>';
                    if(value.message){
                        html += value.message;
                    }
                    html += '</td>';
                    html += '</tr>';
                });
                html += '</table>';
                $('#review-details-full').html(html);
            });
        });
    </script>

{% endblock %}