{% extends "layout-distributors.html.twig" %}
{% block title %}Policy report{% endblock %}
{% block stylesheets %}
	{{ parent() }}
	{# <link href="{{ app.asset_path }}/assets/css/main.css" rel="stylesheet" media="all" /> #}
	<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">

	<style type="text/css">
		.container-form{
			padding-bottom: 1% !important;
			margin: 0px !important;
			margin-top: 3% !important;
			background-color:white;
		}.striped tr td, .striped tr th{
			text-align: center;
		}#html-container{
			padding: 10px !important;
		}.message{
			width: 50%;
			font-size: 17px;
			color: #8d7f71;
			border: 1px solid #ffdf42;
			padding: 10px;
			background: #fff8e7;
			border-radius: 10px;
			text-align: center;
			margin: 0 auto;
		}
	
	</style>
{% endblock %}
{% block body %}
	{{ include("distributors/nav_menu.twig",{option:'reports'}) }}
	<main>
		<div class="row">
			<div class="offset-lg-2 col-lg-8 col-12">
				<div class="container-form z-depth-1">
					<div class="row">
						<form id="form" class="col-12 row">
                            <input type="hidden" id="issuingMode" name="issuingMode" value="">
                            <input type="hidden" id="origin" name="origin" value="{{origin}}">
							<h5 class="center-align">Reports</h5>
							<div class="line orange"></div>
							<div class="clearfix"></div>
							{% if origin == 'SICAS' %}
							<div class="col-6">
								<label>Type of report</label>
								<select name="type" id="type">
									<option value="settlementDistributors" selected>Production</option>
									<option value="commissionDistributorsSicas">Commission</option>
									{% if distributorType == 'Producer US' %}
									<option value="brokerFee">Broker Fee</option>
									{% endif %}
								</select>
							</div>
							{% endif %}
							<div class="clearfix"></div>
							<div class="col-6">
								<label>Product</label>
								<select name="product" id="product">
									{% if origin == 'NIS' %}
										<option value="all">All Products & Companies</option>
										{% for item in distProducts %}
											<option value="{{item.code}}">{{item.dist_product}}</option>
	                                    {% endfor %}
									{% else %}
										<option value="all">All Products</option>
										{% for item in distProducts %}
											<option value={{item.code}}>{{item.dist_product}}</option>
	                                    {% endfor %}
									{% endif %}
								</select>
							</div>	
							<div class="col-6">
								<label>Filter based on</label>
								<select name="typeDate" id="typeDate">
									<option value="issuingDate">Issuing date</option>
									<option value="startDate">Start date</option>	
								</select>
							</div>
							<div class="clearfix"></div>							
							<div class="col-6">
								<label>Start date</label>
								<input type="text" id="startDate" name="startDate" class="datepicker">
							</div>
							<div class="col-6">
								<label>End date</label>
								<input type="text" id="endDate" name="endDate" class="datepicker">
							</div>
							<div class="clearfix"></div>
							<div class="col-6 d-none">
								<label>Insurance company</label>
								<select name="insuranceCompany" id="insuranceCompany"></select>
							</div>
							<div class="clearfix"></div>
							<div class="col-l2 center-align ">
								{# {% if origin == 'NIS' %} #}
									{# <button type="button" id="generateReport" class="btn">
										Generate Report
									</button> #}
								<div class="col-12" id="download">
									<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>
						
								<div id='html-result' class="text-left"></div>
							</div>
							<input type="hidden" id="form_action" name="action" value="">
						</form>
					</div>
					<div class="row" id="html-container">
					</div>
				</div>
			</div>
		</div>
	</main>
	
{% endblock %}
{% block javascripts %}
	<script>
		 const distProducts ={{  distProducts | json_encode | raw }};
	</script>

	 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script 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 src="{{ asset('js/distributors/reports.js') }}" defer></script>
	
{% endblock %}