{% extends "layout-distributors.html.twig" %}
{% block title %}Novamar Insurance System
{% endblock %}
{% block stylesheets %}
	{{encore_entry_link_tags('dynaTableCSS')}}
	<style type="text/css">
		#customers_filter label {
			font-size: 0;
		}
		#customers_filter input {
			border: 0 solid #aaa;
			border-bottom: 1px solid #aaa;
			border-radius: 0;
			height: 2rem;
		}
		.dynatable-per-page {
			float: left;
		}

		.dataTables_wrapper .dataTables_filter {
			float: left;
			text-align: left !important;
		}

		#customers_length {
			display: none;
		}
		a.weatherwidget-io {
			display: none !important;
		}
		a {
			text-decoration: none;
			color: #000 !important;
		}
		nav {
			height: 0 !important;
			margin-bottom: -34px !important;
		}
		.btn-floating {
			display: inline-block;
			color: #fff;
			position: relative;
			overflow: hidden;
			z-index: 1;
			width: 40px;
			height: 40px;
			line-height: 40px;
			padding: 0;
			background-color: #26a69a;
			border-radius: 50%;
			-webkit-transition: 0.3s;
			transition: 0.3s;
			cursor: pointer;
			vertical-align: middle;
		}
		#main {
			background-color: #fff;
		}

		/* Landscape    IPAD 768 x 1024 resolution */
		@media only screen and(min-device-height : 1024px) and(max-device-width : 768px) {
			.row {
				margin: 19 pxauto 20px !important;
			}
		}
	</style>
{% endblock %}
{% block body %}
	{{ include("distributors/nav_menu.twig",{option:'dist_myclients'}) }}
	<main>
		<div class="row mt-3 mx-3" id="main">
			<div class="col-12">
				<div class="row white z-depth-1 ">
					<div class="col-12">
						<h5 class="center-align">My Clients</h5>
						<div class="line orange"></div>
					</div>
					<template v-if="isFetchingCustomers">
							{{ include('./components/component-loader.html.twig') }}
					</template>
					<div v-else class="col-12 table-responsive" style="padding:25px;">
						<table class="table bordered table-striped">
							<thead>
								<tr>
									<th>Insured Name</th>
									<th>Status</th>
									<th>Phone</th>
									<th>E-mail</th>
									<th>City</th>
									<th>Go to Profile</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(entry, key) in entries">
									<td>
										[[ entry.client_first_name ]] [[ entry.client_father_last_name ]]
									</td>
									<td>
										[[ entry.client_status_mx ]]
									</td>
									<td>
										[[ entry.client_phone1 ]]
									</td>
									<td>
										[[ entry.client_email ]]
									</td>
									<td>
										[[ entry.client_city ]]
									</td>
									<td>
										<a :href="`/distributors/customer-profile/${entry.id_client}`" class="btn-floating text-center">
											<i class="fa-solid fa-fingerprint"></i>
										</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</main>
{% 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="{{asset('/js/pages/customers.js')}}" defer></script>
	{{ encore_entry_script_tags('dynaTableJS')}}

	<script type="text/javascript">
		$(document).ready(function () {
$("#customers_filter input").attr("placeholder", "Search client");
});
	</script>
{% endblock %}