{% extends "base-producers.html.twig" %}
{% block title %}Producers | Documents
{% endblock %}
{% block stylesheet %}
	{{encore_entry_link_tags('jqueryFilerCSS')}}
	{{encore_entry_link_tags('jqueryFilerDragboxCSS')}}
	{{encore_entry_link_tags('producersDocumentsCSS')}}
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300&display=swap" rel="stylesheet">
{% endblock %}
{% block body %}
	<main>
		<div class="content-header">
			<picture>
				<source media="image/webp" srcset="{{ asset('images/producers-navbar.webp') }}">
				<img src="{{ asset('images/producers-navbar.webp') }}" alt="background nav">
			</picture>
			<div class="content-logo">
				<img src="{{ asset('images/Novamar-Insurance-Header-Logo.webp') }}" alt="logo Novamar">
			</div>
		</div>
		{% if errorMessage != '' %}
			{{ include('components/alertErrorMessage.html.twig', {requestErrorMessage: errorMessage, withReload: true}) }}
		{% endif %}
		<div class="content-information mt-4">
			<div class="section-title">
				<div class="content-title">
					<h1 class="text-center">Upload your documents</h1>
					<div class="orange-line"></div>
				</div>
			</div>
		</div>
		{% if producerInfo != '' %}
			<div class="container section-information">
				<div class="content-info-items">
					<div class="information-item">
						<div class="content-text">
							<span class="info-label">Contact name:</span>
							<span class="item-info">{{producerInfo.contact_name}}</span>
						</div>
						<div class="orange-line-sm"></div>
					</div>
					<div class="information-item">
						<div class="content-text">
							<span class="info-label">Agency:</span>
							<span class="item-info">{{producerInfo.agency_name}}</span>
						</div>
						<div class="orange-line-sm"></div>
					</div>
					<div class="information-item">
						<div class="content-text">
							<span class="info-label">Contact email:</span>
							<span class="item-info">{{producerInfo.email}}</span>
						</div>
						<div class="orange-line-sm"></div>
					</div>
				</div>
			</div>
		{% endif %}
		{% if producerInfo != '' and producerInfo.status != 'Documents Requested' %}
			<div class="section-lock-view">
				<div class="novamar-logo"><img src="{{ asset('images/novasun.png') }}" alt="logo novasun"></div>
				<div class="content-message">
					<div class="message-title">
						You uploaded your files previously!
					</div>
					<div class="message-text">
						If you didn't, please contact us to help you in your process:
						<a href="mailto:ed@novamar.net">ed@novamar.net</a>.
					</div>
				</div>
			</div>
		{% else %}
			<div class="section-upload-documents">
				<div class="row container-fluid content-formats-alert justify-content-center">
					<span class="content-alert-info">
						<i class="fa fa-info-circle" aria-hidden="true"></i>
						<span class="alert-text">Available document formats: PDF / DOCX(Microsoft word document)</span>
					</span>
					<div class="divider"></div>
				</div>
				<div class="row justify-content-center content-upload-documents container-fluid mt-4">
					<div class="col-12 col-md-6 col-lg-4 card-upload-document">
						<h4 class="blue-text">W9 Form</h4>
						<div class="divider"></div><br>
						<input type="file" name="files[]" id="filer_input0">
					</div>
					<div class="col-12 col-md-6 col-lg-4 card-upload-document">
						<h4 class="blue-text">Agent / Company licenses</h4>
						<div class="divider"></div><br>
						<div class="content-licences-fields"></div>
						<input type="file" name="files[]" id="filer_input1" multiple="multiple">
					</div>
					<div class="col-12 col-md-6 col-lg-4 card-upload-document">
						<h4 class="blue-text">E&O Policy</h4>
						<div class="divider"></div><br>
						<input type="file" name="files[]" id="filer_input2" multiple="multiple">
					</div>
				</div>
				<div class="row mb-4">
					<div class="col-12 content-finish-button mt-4">
						<button id="finishBTN">
							<span>Finish</span>
						</button>
						<div class="preloader-wrapper active d-none" id="loadingRequest">
							<div class="spinner-layer spinner-blue-only">
								<div class="circle-clipper left">
									<div class="circle"></div>
								</div>
								<div class="gap-patch">
									<div class="circle"></div>
								</div>
								<div class="circle-clipper right">
									<div class="circle"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="section-thank-you d-none">
				<div class="novamar-logo"><img src="{{ asset('images/novasun.png') }}" alt="logo novasun"></div>
				<div class="content-message">
					<div class="message-title">
						Your documents were saved successfully!
					</div>
					<div class="message-text">
						Thank you for completing the process, a Novamar agent will review your documents.
					</div>
				</div>
			</div>
		{% endif %}
	</main>
{% endblock %}
{% block javascripts %}
	<script type="text/javascript">
		var idProducerApplications = "{{ idProducerApplications }}";
var uniqid = "{{ uniqid }}";
	</script>
	<script src="{{ asset('js/jquery.filer.js') }}"></script>
	<script src="{{ asset('js/libraries/jquery-mask.js') }}"></script>
	<script src="{{ asset('js/libraries/sweet-alert.js') }}"></script>
	<script src="{{ asset('js/pages/producer/producers-uploads.js') }}"></script>
{% endblock %}