{% extends "layout-distributors.html.twig" %}
{% block title %}Customer Profile
{% endblock %}
{% block stylesheets %}
	{{encore_entry_link_tags('sicasManualPCSS')}}

	<style>
		span.badge {
			position: relative !important;
			right: 0 !important;
		}
		.active-status {
			color: #009688;
		}
		.expired-status {
			color: #EF6C00;
		}
		.reissued-status {
			color: #EF6C00;
		}
		.cancelled-status {
			color: #F44336;
		}
		thead {
			cursor: pointer;
		}
		.collapsible-body {
			padding: 0;
		}
		.collection-item {
			text-align: center;
		}
		.collapsible-header {
			color: #084a7a;
		}
		.issue-with-quote-btn {
			padding: 3px;
			background: #084a7a;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.complete-quote-btn {
			padding: 3px;
			background: #ff9800;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff !important;
		}
		.quote-completed {
			padding: 3px;
			background: #26a69a;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: not-allowed;
			color: #fff !important;
		}
		.view-quote-btn {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.content-quote-options {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.issue-with-quote-btn > span,
		.quote-completed > span,
		.complete-quote-btn > span {
			color: #fff !important;
		}
		.issue-with-quote-btn > i {
			color: #fff !important;
			font-size: 18px !important;
			margin-right: 5px;
		}
		.view-quote-btn > i {
			margin-right: 5px;
		}
		#quotes-table > tbody > tr {
			border-bottom: 1px solid #e1e1e1;
		}
		.mainQuote {
			background: #fafafa;
			cursor: pointer;
		}
		.mainQuote:hover {
			background: #f0f0f0;
		}
		.mainQuoteSelected {
			font-size: 17px;
			border-left: 3px solid #97c1ed !important;
			border-right: 3px solid #97c1ed !important;
			border-top: 3px solid #97c1ed !important;
		}
		.quoteGroup {
			font-size: 17px;
			border-left: 3px solid #97c1ed !important;
			border-right: 3px solid #97c1ed !important;
		}
		.quoteGroup td {
			padding: 3px 1px !important;
		}
		.last {
			border-bottom: 3px solid #97c1ed !important;
		}
		.quoteGroup:hover {
			background: #f0f0f0;
		}
		table td {
			vertical-align: middle;
			padding: 18px 7px !important;
		}
		@media (max-width: 1100px){
			.qualitasSpan {
					display:block;
				}
		}
		
	</style>
{% endblock %}
{% block body %}
	{{ include('./components/full-loader-container.html.twig') }}
	{{ include("distributors/nav_menu.twig",{option:'distributor_home'}) }}
	<main>
		{% if app.flashes is defined %}
		{% for message in app.flashes('requestApiError') %}
			<div class="alert alert-danger">
				{{ message }},  if persist, contact <a href="mailto:support@novamar.net">support@novamar.net</a>
			</div>
		{% endfor %}
	{% endif %}
		<div style="overflow:hidden">
			{% if errorRequest is defined and errorRequest != '' %}
				{{include("components/alertErrorMessage.html.twig", {requestErrorMessage: errorRequest, withReload: true})}}
			{% endif %}
			<div class="row  mb-2 p-2">
				<div class="col-sm-12 col-md-5">
					<div class="white box-information card">
						<h5 class="blue-text text-darken-1 text-center" style="margin-top: 10px;">Client Information</h5>
						<hr>
						<div id="client-information"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-7">
					<div class="white box-information card">
						<h5 class="blue-text text-darken-1 text-center" style="margin-top: 10px;">Add policy</h5>
						<hr>
						<div class="row">
							{% for product in products %}
								<div class="col-xl-3 col-lg-4 col-6 mb-4">
									<div class="accordion" id="accordion{{ loop.index }}">
										<div class="accordion-item">
											<h2 class="accordion-header" id="heading{{ loop.index }}">
												<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="true" aria-controls="collapse{{ loop.index }}">
													<i class="fa-solid {{ product.icon }} p-2"></i>
													{{ product.productName }}
												</button>
											</h2>
											<div id="collapse{{ loop.index }}" class="accordion-collapse show" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#accordion{{ loop.index }}">
												<div class="accordion-body">
													<ul class="list-group">
														{% for company in product.companies %}
															<li class="list-group-item">
																<a href="{{ company.route }}?v{{ noCache }}" class="text-decoration-none">
																	{{ company.companyName }}
																</a>
															</li>
														{% endfor %}
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
								{# {% if loop.index0 == 3 %}
									<div class="clearfix"></div>
								{% endif %} #}
							{% endfor %}
						</div>
					</div>
				</div>
			</div>

			<div class="row p-2" id="polizas" style="margin-bottom:0px;">
				<div
					class="col-12">
					<!-- Tabs navigation -->
					<ul class="nav nav-tabs" id="policyTabs" role="tablist">
						<li class="nav-item" role="presentation">
							<a class="nav-link active" id="policies-tab" data-bs-toggle="tab" href="#policies" role="tab" aria-controls="policies" aria-selected="true">
								Policies
								<span id="number_of_policies" class="badge bg-secondary">0</span>
							</a>
						</li>
						<li class="nav-item" role="presentation">
							<a class="nav-link" id="manualPolicies-tab" data-bs-toggle="tab" href="#manualPolicies" role="tab" aria-controls="manualPolicies" aria-selected="false">
								Manual Policies
							</a>
						</li>
						<li class="nav-item" role="presentation">
							<a class="nav-link" id="quotes-tab" data-bs-toggle="tab" href="#quotes" role="tab" aria-controls="quotes" aria-selected="false">
								Quotes
								<span id="total-quotes" class="badge bg-secondary">0</span>
							</a>
						</li>
					</ul>

					<!-- Tabs content -->
					<div
						class="tab-content" id="policyTabsContent">
						<!-- Policies Tab -->
						<div class="tab-pane fade show active" id="policies" role="tabpanel" aria-labelledby="policies-tab">
							<div class="white box-information ">
								<div id="policy-section" class="table-responsive"></div>
							</div>
						</div>

						<!-- Manual Policies Tab -->
						<div class="tab-pane fade" id="manualPolicies" role="tabpanel" aria-labelledby="manualPolicies-tab">
							<div class="white box-information ">
								{{ include('components/sicas-manual-policies-component.html.twig') }}
							</div>
						</div>

						<!-- Quotes Tab -->
						<div class="tab-pane fade" id="quotes" role="tabpanel" aria-labelledby="quotes-tab">
							<div class="white box-information">
								<table id="quotes-table" class="table table-striped">
									<thead>
										<tr>
											<th style="width: 16.6%; text-align: center;">Quote Number</th>
											<th style="width: 16.6%; text-align: center;">Product</th>
											<th style="width: 16.6%; text-align: center;">Closed by</th>
											<th style="width: 16.6%; text-align: center;">Origin</th>
											<th style="width: 16.6%; text-align: center;">Action</th>
											<th style="width: 16.6%; text-align: center;">Date</th>
										</tr>
									</thead>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			{% set agentCode = userData.agentCode %}
			<input type="hidden" id="agent_code" name="Form[agentCode]" value="{{ agentCode }}">
			<input type="hidden" id="form_id_client" value="{{ idClient }}">
		</div>
	</main>
	{# modal para la verificacion de los datos del cliente #}
	{{ include('mx/modals/validate-client-info-modal.html.twig') }}
{% endblock %}
{% block javascripts %}
	 {% if app.environment != 'dev' %}    
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% else %}
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
    {% endif %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/jquery.tablesorter.min.js"></script>
    <script src="{{asset('/js/complements/validInformationService.js')}}" defer></script>
    <script src="{{asset('/js/complements/verifyClientStatus.js')}}" defer></script>
    <script src="{{asset('/js/complements/getManualPoliciesService.js')}}" defer></script>
    <script src="{{asset('/js/pages/customer-profile.js')}}" defer></script>
    <script></script>
{% endblock %}