{% extends 'base.html.twig' %}
{% block title %}Distributors Commision report{% endblock %}
{% block stylesheets %}
	<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% endblock %}
{% block body %}
	{{ include("mx/nav_menu.twig", {option:'reports'}) }}
	{% set email = userData.email %}
	{% set onlyUS = ['ed@novamar.net'] %}
	<main>
		<div class="row justify-content-center mt-4">
			<div class="col-12 col-lg-8">
				<div class="container-form card z-depth-1">
					<div class="row">
						<form id="form" class="col-12 row">
							<h5 class="text-center">Distributors Commision Report</h5>
							<div class="line orange"></div>
							<div class="clearfix"></div>
							<div class="col-lg-6">
								<label>Type of producer:</label>
								<select id="producerType" name="producerType">
                                    <option value="">Select</option>
                                    <option value="Producer US">Producer US</option>
									{% if email in onlyUS == false %}
                                    	<option value="Producer MX">Producer MX</option>
									{% endif %}
                                </select>
							</div>
							<div class="clearfix"></div>
							<div class="col-lg-6">
								<label>Issuing Start Date</label>
								<input type="text" id="startDate" name="startDate" class="datepicker" value="">
							</div>
							<div class="col-lg-6">
								<label>Issuing End Date</label>
								<input type="text" id="endDate" name="endDate" class="datepicker" value="">
							</div>
							<div class="col-12 d-none">
								<div class="d-flex justify-content-center align-items-center flex-wrap" style="gap: 10px">
                                    <label style="height: auto">Download Report</label>
                                    <button type="button" class="p-0 btn btn-large rounded-circle teal d-flex align-items-center justify-content-center add-circle" id="linkToOpenReport">
                                        <i class="fa fa-cloud-download text-white fs-4" aria-hidden="true"></i>
                                    </button>
                                </div>
							</div>
							<input type="hidden" id="form_action" name="action" value="printInformation">
						</form>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="col-12">
				<div id='html-result' class="text-left"></div>
				<div id="html-container"></div>
			</div>
		</div>
	</main>
	
{% endblock %}
{% block javascripts %}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="{{ asset('js/main.js') }}" defer></script>
	<script  type="text/javascript" src="{{asset('js/libraries/jquery-validate.js')}}" defer></script>
	<script type="text/javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" defer></script>
	<script type="text/javascript" src="{{ asset('js/pages/reports/distributor-commission-report.js') }}" defer></script>
{% endblock %}