{% extends "base.html.twig" %}
{% block title %}Producers | View producers
{% endblock %}
{% block stylesheets %}
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
	{{ encore_entry_link_tags('producersViewsCSS') }}
	{{encore_entry_link_tags('jqueryFilerCSS')}}
	{{encore_entry_link_tags('jqueryFilerDragboxCSS')}}
{% endblock %}
{% block body %}
	{{ include("mx/nav_menu.twig", {option:'producers'}) }}
	<div id="fullLoading" class="d-none" style="color: #fff; font-size:40px; text-shadow: 1px 2px #444;">
		Updating<br>
		<img class="activator" src="{{ asset('images/load75x75.gif') }}">
	</div>
	<main>
		{% if errorRequest is defined %}
			{{ include("components/alertErrorMessage.html.twig", {requestErrorMessage: errorRequest, withReload: true}) }}
		{% endif %}
		<div class="row">
			<div class="col-12">
				<div class="content-table-controls">
					<div class="content-title">
						<span>Producers Applications</span>
					</div>
					<div class="tables-navigation">
						<div class="tb-navigation-item">
							<button type="button" class="btn-applications-view btn-app-active" id="active">Active applications</button>
						</div>
						<div class="tb-navigation-item">
							<button type="button" class="btn-applications-view" id="finished">100% On-boarded Producers</button>
						</div>
						<div class="tb-navigation-item">
							<button type="button" class="btn-applications-view" id="inactive">Inactive applications</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row" id="tableProducersContainer">
			<div class="col-12">
				<div class="content-table-producers d-none" id="active-table">
					<table data-order='[[ 0, "desc" ]]' class="tableProducers" id="tableProducers_active">
						<thead>
							<tr>
								<td>ID</td>
								<td width="25%">Agency name</td>
								<td width="15%">Contact name</td>
								<td width="10%">Email</td>
								<td width="10%">Phone</td>
								<td width="5%">Request date</td>
								<td width="15%">Status</td>
								<td width="10%">Actions</td>
								<td width="10%">Documents</td>
							</tr>
						</thead>
						<tbody>
							{% for producerApplication in producerApplications %}
								{% if producerApplication['status'] != 'Inactive' and progress[producerApplication['status']] != 100 %}
									<tr data-producer="{{producerApplication|json_encode}}" id="producerRecord{{producerApplication['id']}}">
										<td>{{progress[producerApplication['status']]}}</td>
										<td>{{ producerApplication['agency_name'] }}</td>
										<td>{{ producerApplication['contact_name'] }}</td>
										<td>{{ producerApplication['email'] }}</td>
										<td>{{ producerApplication['phone'] }}</td>
										<td>{{ producerApplication['request_date'] }}</td>
										<td>
											{{producerApplication['status']}}
											<div class="progressBarMain">
												<div class="progressBar" style="width: {{ progress[producerApplication['status']] }}%;">
													{{ progress[producerApplication['status']] }}%
												</div>
											</div>
										</td>
										<td class="content-actions">
											<select class="browser-default select-normal" id="status{{producerApplication['id']}}" onchange="statusHandleChange({{producerApplication['id']}});">
												{% for key,status in producerApplication['list'] %}
													<option value="{{key}}">{{status}}</option>
												{% endfor %}
											</select>
											<i class="fa fa-trash" onclick="statusHandleChange({{producerApplication['id']}},'Inactive')" aria-hidden="true" style="cursor:pointer; color: #FF474C; padding-left: 5px"></i>
										</td>
										<td>
											{% if progress[producerApplication['status']] >= progress['Documents Uploaded'] and producerApplication['status'] != 'Invalid Documents' %}
												<a href="javascript:void();" onclick='window.location = "/producers/viewDocuments/{{producerApplication.id}}"' title="See the upload documents - {{ producerApplication['agency_name'] }}">
													View documents uploaded
												</a>
											{% endif %}
										</td>
									</tr>
								{% endif %}
							{% endfor %}
						</tbody>
					</table>
				</div>
				<div class="content-table-producers d-none" id="inactive-table">
					<table data-order='[[ 0, "desc" ]]' class="tableProducers" id="tableProducers_inactive">
						<thead>
							<tr>
								<td>ID</td>
								<td width="25%">Agency name</td>
								<td width="15%">Contact name</td>
								<td width="10%">Email</td>
								<td width="10%">Phone</td>
								<td width="5%">Request date</td>
								<td width="15%">Status</td>
								<td width="10%">Actions</td>
								<td width="10%">Documents</td>
							</tr>
						</thead>
						<tbody>
							{% for producerApplication in producerApplications %}
								{% if producerApplication['status'] == 'Inactive' %}
									<tr data-producer="{{producerApplication|json_encode}}" id="producerRecord{{producerApplication['id']}}">
										<td>{{progress[producerApplication['status']]}}</td>
										<td>{{ producerApplication['agency_name'] }}</td>
										<td>{{ producerApplication['contact_name'] }}</td>
										<td>{{ producerApplication['email'] }}</td>
										<td>{{ producerApplication['phone'] }}</td>
										<td>{{ producerApplication['request_date'] }}</td>
										<td>
											{{producerApplication['status']}}
										</td>
										<td class="content-actions">
											<select class="browser-default select-normal" id="status{{producerApplication['id']}}" onchange="statusHandleChange({{producerApplication['id']}});">
												{% for key,status in producerApplication['list'] %}
													<option value="{{key}}">{{status}}</option>
												{% endfor %}
											</select>
										</td>
										<td>
											{% if progress[producerApplication['status']] >= progress['Documents Uploaded'] and producerApplication['status'] != 'Invalid Documents' %}
												<a href="javascript:void();" onclick='window.location = "/producers/viewDocuments/{{producerApplication.id}}"' title="See the upload documents - {{ producerApplication['agency_name'] }}">
													View documents uploaded
												</a>
											{% endif %}
										</td>
									</tr>
								{% endif %}
							{% endfor %}
						</tbody>
					</table>
				</div>
				<div class="content-table-producers d-none" id="finished-table">
					<table data-order='[[ 0, "desc" ]]' class="tableProducers" id="tableProducers_finished">
						<thead>
							<tr>
								<td>ID</td>
								<td width="25%">Agency name</td>
								<td width="15%">Contact name</td>
								<td width="10%">Email</td>
								<td width="10%">Phone</td>
								<td width="5%">Request date</td>
								<td width="15%">Status</td>
								<td width="10%">Documents</td>
							</tr>
						</thead>
						<tbody>
							{% for producerApplication in producerApplications %}
								{% if progress[producerApplication['status']] == 100 %}
									<tr data-producer="{{producerApplication|json_encode}}" id="producerRecord{{producerApplication['id']}}">
										<td>{{progress[producerApplication['status']]}}</td>
										<td>{{ producerApplication['agency_name'] }}</td>
										<td>{{ producerApplication['contact_name'] }}</td>
										<td>{{ producerApplication['email'] }}</td>
										<td>{{ producerApplication['phone'] }}</td>
										<td>{{ producerApplication['request_date'] }}</td>
										<td>
											{{producerApplication['status']}}
											<div class="progressBarMain">
												<div class="progressBar" style="width: {{ progress[producerApplication['status']] }}%;">
													{{ progress[producerApplication['status']] }}%
												</div>
											</div>
										</td>
										<td>
											{% if progress[producerApplication['status']] >= progress['Documents Uploaded'] and producerApplication['status'] != 'Invalid Documents' %}
												<a href="javascript:void();" onclick='window.location = "/producers/viewDocuments/{{producerApplication.id}}"' title="See the upload documents - {{ producerApplication['agency_name'] }}">
													View documents uploaded
												</a>
											{% endif %}
										</td>
									</tr>
								{% endif %}
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="row d-none contractContainer justify-content-center">
			<div class="col-12 col-md-4">
				<div id="uploadContractTitle"></div>
			</div>
		</div>
		<div class="row d-none contractContainer justify-content-center">
			<div class="col-12 col-md-6 col-lg-4 containerFile">
				<strong>Upload the Contract</strong>
				<div class="divider"></div>
				<input type="file" name="files[]" id="filer_input0">
			</div>
			<div class="col-12 col-md-6 col-lg-4 containerFile">
				<strong>Upload DDAuth</strong>
				<div class="divider"></div>
				<input type="file" name="files[]" id="filer_input1">
			</div>
		</div>
		<div class="row d-none contractContainer">
			<div class="col-12">
				<i>Available document formats: PDF / DOCX(Microsoft word document)</i>
				<br><br>
				<button href="javascript:void();" class="actionButton actionButtonGreen" onclick="finishUploadContractAndDDAuth();">
					Confirm upload
				</button>
			</div>
		</div>
		<div class="row d-none" style="margin-top:5px;" id="userInfoContainer">
			<form id="userInfoForm" class="row mb-4">
				<input type="hidden" name="idProducerApplications" id="idProducerApplications">
				<input type="hidden" name="distLogoLocation" id="distLogoLocation">
				<div class="col-12 col-lg-3">
					<ul class="collection card">
						<li class="collection-item">
							<b>Application information</b>
						</li>
					</ul>
					<ul class="collection card" id="currentApplicationInformation">
						<li class="collection-item">Agency name<br></li>
						<li class="collection-item">Email<br></li>
						<li class="collection-item">Phone<br></li>
						<li class="collection-item">Contact name<br></li>
					</ul>
				</div>
				<div class="col-12 col-lg-6">
					<ul class="collection card">
						<li class="collection-item">
							<b>User information</b>
						</li>
					</ul>
					<div class="card">
						<div class="input-field">
							<input type="text" class="validate" id="link" name="link" placeholder="commercial-name-to-use-on-links">
							<label>Link</label>
						</div>
						<table class="striped">
							<thead>
								<tr>
									<td>Product</td>
									<td>Commision percent</td>
									<td>Payment type mode</td>
								</tr>
							</thead>
							<tbody>
								{% for product in products %}
									<tr>
										<td>
											<div class="form-check" style="margin-bottom: 20px;">
												<input class="form-check-input" type="checkbox" checked="checked" class="filled-in" value="{{product}}" id="product{{product|replace({" ":" "})}}" name="product{{product|replace({" ":" "})}}">
												<label class="form-check-label" for="product{{product|replace({" ":" "})}}">{{product}}</label>
											</div>
										</td>
										<td>
											<div class="input-field" style="margin-bottom: 20px !important;">
												<input type="text" class="validate" value="{{productsCommision[product]}}" id="commisionPercent{{product|replace({" ":" "})}}" name="commisionPercent{{product|replace({" ":" "})}}" placeholder="%">
											</div>
										</td>
										<td>
											<div class="input-field col s12">
												<select class="select-normal" id="paymentTypeMode{{product|replace({" ":" "})}}" name="paymentTypeMode{{product|replace({" ":" "})}}">
													<option value="CreditCard">Credit Card Payment</option>
													<option value="WithoutOutCharge">Bank transfer</option>
													<option value="All">Both</option>
												</select>
											</div>
										</td>
									</tr>
								{% endfor %}
							</tbody>
						</table>
						<div>
							<textarea class="material-textarea" id="comments" name="comments" placeholder="Comments, Notes, Extra information Etc."></textarea>
						</div>
						<div class="row">
							<div class="col-12 mb-2 d-none">
								<div id="createUserMessage"></div>
							</div>
							<button href="javascript:void();" class="col-12 actionButton actionButtonGreen" onclick="finishCreateUser();" type="button">
								Create User and Producer
							</button>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-3">
					<ul class="collection card">
						<li class="collection-item">
							<b>Producer logo</b>
						</li>
					</ul>
					<div class="card" style="text-align: center;">
						<input type="file" name="files[]" id="filer_input2">
						<span style="text-align: center;">Required dimensions:
							<b>400 x 200</b>
							pixels</span>
					</div>
				</div>
			</form>
		</div>
	</main>
{% endblock %}
{% block javascripts %}
	<script>
		var uploadedFiles = [];
var contractIdProducerApplications = "";
var filesUniqID = "";
	</script>
	<script src="{{ asset('js/main.js') }}" defer></script>
	<script src="{{ asset('js/jquery.filer.js') }}" defer></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
	<script src="{{ asset('js/pages/producer/baseConfigContract.js') }}" defer></script>
	<script src="{{ asset('js/pages/producer/baseConfigLogoDistributor.js') }}" defer></script>
	<script src="{{ asset('js/pages/producer/records.js') }}" defer></script>
{% endblock %}