{% extends '@App/base.html.twig' %}
{% block title %}
    Advisors
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row">
                    <div class="col-xs-12">
                        <form method="get">
                            <div class="row">
                                <div class="col-md-6">
                                    <div id="forms-start-date" data-controller="forms" data-view="date-picker">
                                        <input type="text" id="start_date" class="form-control" name="start_date"
                                               placeholder="Start Date"
                                               data-dtp="dtp_YTeJh"
                                               value="{% if start_date %}{{ start_date|date('Y-m-d') }}{% endif %}"
                                               required/>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div id="forms-end-date" data-controller="forms" data-view="date-picker">
                                        <input type="text" id="end_date" class="form-control" name="end_date"
                                               placeholder="End Date"
                                               data-dtp="dtp_YTeJh"
                                               value="{% if end_date %}{{ end_date|date('Y-m-d') }}{% endif %}"
                                               required/>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <select name="advisor_id" class="form-control">
                                        <option value="">Select an Advisor</option>
                                        {% for advisor in advisors %}
                                            <option value="{{ advisor.id }}"
                                                    {% if advisor_filter == advisor.id %}selected{% endif %}>{{ advisor.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <select name="technician_id" class="form-control">
                                        <option value="">Select a Technician</option>
                                        {% for technician in technicians %}
                                            <option value="{{ technician.id }}"
                                                    {% if technician_filter == technician.id %}selected{% endif %}>{{ technician.firstName }} {{ technician.lastName }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <select name="template" id="mpi_template" class="form-control">
                                        <option value="">Select a Template</option>
                                        {% for template in templates %}
                                            <option {% if template_filter == template.name %}selected{% endif %}
                                                    data-template_id="{{ template.id }}">
                                                {{ template.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <select name="mpi_item" id="mpi_item" class="form-control">
                                        <option value="">Select an Inspection Point</option>
                                        {% for mpi_item in unique_mpi_items %}
                                            <option {% if mpi_item_filter == mpi_item.name %}selected{% endif %}>{{ mpi_item.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <select name="mpi_status" class="form-control">
                                        <option value="">Select a Status</option>
                                        <option {% if status_filter == 'Green' %}selected{% endif %}>Green</option>
                                        <option {% if status_filter == 'Yellow' %}selected{% endif %}>Yellow</option>
                                        <option {% if status_filter == 'Red' %}selected{% endif %}>Red</option>
                                        <option {% if status_filter == 'Grey' %}selected{% endif %}>Grey</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary btn-block">Submit
                                        <div class="ripple-container"></div>
                                    </button>
                                </div>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-xs-12">
                                <b>Showing results for {{ start_date|date('Y-m-d') }} - {{ end_date|date('Y-m-d') }}</b>
                            </div>
                        </div>
                        <table id="mpi_report_table" class="table table-hover table-striped table-bordered text-center">
                            <thead>
                            <tr>
                                <th>RO#</th>
                                <th>Customer</th>
                                <th>Phone</th>
                                <th>Advisor</th>
                                <th>Technician</th>
                                <th>Template</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            </tfoot>
                            <tbody id="">
                            {% for result in results %}
                                <tr>
                                    <td>{{ result.number }}</td>
                                    <td>{{ result.customer_name }}</td>
                                    <td>{{ result.customer_phone }}</td>
                                    <td>{{ result.advisor }}</td>
                                    <td>{{ result.technician }}</td>
                                    <td>{{ result.template }}</td>
                                    <td>
                                        {% if result.template != 'N/A' %}
                                            <a href="javascript:" class="btn btn-primary btn-block btn-raised"
                                               data-toggle="modal" data-target="#mpi_details_modal"
                                               data-ro_id="{{ result.ro_id }}" data-ro_hash="{{ result.ro_hash }}"
                                               data-ro_number="{{ result.number }}"
                                               data-customer_name="{{ result.customer_name }}">
                                                MPI Details
                                            </a>
                                        {% else %}
                                            N/A
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ include('@App/Default/mpiDetails.html.twig') }}
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $(function () {
            $('#mpi_report_table').DataTable();
            $('#start_date').bootstrapMaterialDatePicker({time: false});
            $('#end_date').bootstrapMaterialDatePicker({time: false});
        });

        $('body').on('change', '#mpi_template', function () {
            var templateId = $('#mpi_template option:selected').data('template_id');
            var endpoint   = '/api/mpi/template/' + templateId + '/items';

            if (!templateId) {
                endpoint = '/api/mpi/items/all';
            }

            $.get(endpoint, function (resp) {
                $('#mpi_item').html('<option value="">Select an Inspection Point</option>')
                $.each(resp, function (k, v) {
                    $('#mpi_item').append('<option>' + v.name + '</option>');
                });
            }).fail(function (e) {
                console.log(e);
            });
        });
    </script>
{% endblock %}