{% extends 'base.html.twig' %}
{% block title %}Customers - NIS{% endblock %}
{% block stylesheets %} 
	{{ parent() }}
	{{encore_entry_link_tags('dynaTableCSS')}}
    <style>
        .dynatable-per-page{float:left;}
        .dynatable-record-count{font-weight: bold;}
		th a {color:black;}
		th a:hover {color: #2196F3;text-decoration: underline;}
        .notice-container{padding: 20px;border-left: 5px solid #ff9800; font-size: 18px;margin-top: 30px;}
		.add-circle{
			width: 64px;
			height: 64px;
		}
    </style>
{% endblock %}
{% block body %}
	{{ include('./components/full-loader-container.html.twig') }}
	{{ include("mx/nav_menu.twig", {option:'customers'}) }}
	<main>
		<div id="main" class="row justify-content-center">

			<div class="col-12 col-lg-10">
				<div class="row justify-content-center">
					<div class="col-12 col-md-4">
						<div class="white z-depth-1 text-center notice-container">
							<b>[[ entries.length ]]</b><br>
							<b class="grey-text">Total Customers</b>
						</div>
					</div>
					<div class="col-12 col-md-4">
						<div class="white z-depth-1 text-center notice-container">
							<b>[[ newCustomers ]]</b><br>
							<b class="grey-text">New Customers</b>
						</div>
					</div>
					<div class="col-12 col-md-4">
						<div class="white z-depth-1 text-center notice-container">
							<b>[[ prospects ]]</b><br>
							<a href="{#{ path('mx_prospects') }#}" class="grey-text text-decoration-none"><b>Total Prospects</b></a>
						</div>
					</div>
				</div>
			</div>

			<div class="clearfix"></div>
			<br><br>
			<div class="col-12 col-lg-10 card z-depth-1">
				<div class="container-form">
					<h4 class="text-center">Customers</h4>
					<div class="line orange"></div>
					<br>
					<div class="table-responsive">
						<table class="table bordered table-striped responsive-table">
							<thead>
								<tr>
									<th class="text-decoration-none">#</th>
									<th class="text-decoration-none">Name</th>
									<th class="text-decoration-none">Company</th>
									<th class="text-decoration-none">Phone</th>
									<th class="text-decoration-none">Email</th>
									<th class="text-decoration-none">Status</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(entry, key) in entries">
									<td>
										<b>[[  key + 1 ]]</b>
									</td>
									<td>
										[[ entry.client_first_name ]] [[ entry.client_father_last_name ]]
									</td>
									<td>
										[[ entry.client_company ]]
									</td>
									<td>
										[[ entry.client_phone1 ]]
									</td>
									<td>
										[[ entry.client_email ]]
									</td>
									<td>
										[[ entry.client_status_mx ]]
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		{# {% set agentCode = app.user.agentCode %}
		<input type="hidden" id="userCode" name="userCode" value="{{ agentCode }}"> #}

		<div class="position-fixed bottom-0 end-0 m-3 m-md-4">
		    <a class="p-0 btn btn-large rounded-circle teal d-flex align-items-center justify-content-center add-circle" href="{{ path('mx_customer_form') }}">
		      <i class="fa fa-plus text-white" aria-hidden="true"></i>
		    </a>
  		</div>
	</main>
{% endblock %}
 {% block javascripts %}
	<script src="{{asset('/js/main.js')}}" defer></script> 
	
	 {% 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')}}
{% endblock %}