{% extends 'base.html.twig' %}
{% block title %}Settlement Policies{% 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">

    <style>
		label{
			font-weight : 700;
		}
    </style>
{% endblock %}
{% block body %}
	{{ include("mx/nav_menu.twig", {option:'reports'}) }}

	<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">Settlement Policies</h5>
							<div class="line orange"></div>
							<div class="clearfix"></div>
							<div class="col-lg-4">
								<label>Product</label>
								<select name="product" id="product">
									<option value="">Select</option>
									<option value="BL">Boat Liability</option>
									<option value="HO">Homeowners</option>
									<option disabled value="MT">Medical Tourism</option>
									<option value="TA-QUALITAS-WS">Tourist Auto By Companies</option>
									<option value="RA">Resident Auto</option>
									<option value="Travel">Travel</option>
								</select>
							</div>
							<div class="col-lg-4">
								<label>Issuing Start Date</label>
								<input type="text" id="startDate" name="startDate" class="datepicker" readonly>
							</div>
							<div class="col-lg-4">
								<label>Issuing End Date</label>
								<input type="text" id="endDate" name="endDate" class="datepicker" readonly>
							</div>
							<div class="clearfix"></div>
							<div class="col-lg-6 d-none" id="insuranceCompanyContainer">
								<label>Insurance company</label>
								<select name="insuranceCompany" id="insuranceCompany"></select><br>
							</div>
							<div class="col-lg-6 d-none" id="reportFormatContainer">
								<label>Format for:</label>
								<select name="reportFormatFor" id="reportFormatFor"></select><br>
							</div>
							<div class="clearfix"></div>
							<div class="col-12 text-center">
								<button type="button" id="generateReport" class="btn btn-teal">
									Generate Report
								</button>
							</div>
							<input type="hidden" id="form_action" name="action" value="printInformation">
						</form>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="col-12 p-4">
				<div id='html-result' class="text-left"></div>
				<div id="html-container"></div>
			</div>
		</div>
	</main>
	
{% endblock %}
{% block javascripts %}
    <script type="text/javascript" src="{{ asset('js/libraries/jquery-validate.js') }}"></script>
    <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="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" defer></script>
	<script src="{{ asset('js/pages/reports/settlement-policies.js') }}" defer></script>
{% endblock %}