{% extends 'base.html.twig' %}

{% block body %}
	<!-- BEGIN: Subheader -->
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title">
                    Popapp Comparison Report
                </h3>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        <!--Begin::Section-->
        <div class="row">
            <div class="col-xl-6">
            	<div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <span class="m-portlet__head-icon">
                                    <i class="fa fa-upload"></i>
                                </span>
                                <h3 class="m-portlet__head-text">
                                   Upload Popapp CSV File 
                                </h3>
                            </div>
                        </div>
                    </div>
                    <form id="upload_form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="post" action="{{ url('rep_popapp_comp_submit') }}" enctype="multipart/form-data">
                        <div class="m-portlet__body">	
                            <div class="form-group m-form__group row">
                                <input type="file" id="csv_file" name="csv_file" >
                            </div>
                            <div class="m-portlet__foot m-portlet__foot--fit">
                                <div class="m-form__actions m-form__actions--solid m-form__actions--right">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <button type="submit" class="btn btn-success">Submit</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% if mode == 'results' %}
            <!-- report details -->
            <div class="row">
                <div class="col-12">
                    <div class="m-portlet m-portlet--mobile">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        Report Details
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            {% if data is empty %}
                                <div class="m-alert m-alert--icon m-alert--icon-solid m-alert--outline alert alert-brand" role="alert">
                                    <div class="m-alert__icon">
                                        <i class="flaticon-exclamation-2"></i>
                                        <span></span>
                                    </div>
                                    <div class="m-alert__text">
                                        No records found.
                                    </div>
                                </div>
                            {% else %}
                                <table class="table table-striped m-table">
                                    <thead>
                                        <tr class="m-table__row--brand">
                                            <th>Customer ID</th>
                                            <th>Last Name</th>
                                            <th>First Name</th>
                                            <th>Plate Number</th>
                                            <th>Serial</th>
                                            <th>Warranty Create Date</th>
                                            <th>Has Mobile App? </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for key, result in data %}
                                            <tr>
                                                <td>{{ result.cust_id|default("") }}</td>
                                                <td>{{ result.cust_lastname|default('') }}</td>
                                                <td>{{ result.cust_firstname|default('') }}</td>
                                                <td>{{ result.plate_num|default('') }}</td>
                                                <td>{{ result.serial|default('') }}</td>
                                                <td>{{ result.warr_date_create|default('') }}</td>
                                                <td>{{ result.has_mobile ? Yes : 'No' }} </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}