@extends('admin.layouts.adminApp', ["title" => "Telbanda admin"])

@section('content')
	<section class="container-fluid pt-3 mt-4">
		<div class="">
			<div class="row pb-3">
				<div class="col-12 col-lg-12">
					<div class="input-group ">

						<input type="text" class="form-control  border-right-0 rounded-left text-std-2 search-bar-input"
							   placeholder="Pesquisar por clientes" data-table="#clients">
						<div class="input-group-prepend">
                                    <span class="input-group-text rounded-right bg-white border-left-0 rounded-right "><i
												class="fa fa-search text-palid-2"></i></span>
						</div>
					</div>
				</div>

			</div>

			@if(count($clients) > 0 )
				<table class="table table-hover" id="clients">
					<thead>
					<tr>
						<th class="sm-font text-center text-std-2 text-uppercase">Nome</th>
						<th class="sm-font text-center text-std-2 text-uppercase">Nº de telefone</th>
						<th class="sm-font text-center text-std-2 text-uppercase">Email</th>
						<th class="sm-font text-center text-std-2 text-uppercase">Tipo de cliente</th>
						<th class="sm-font text-center text-std-2 text-uppercase" colspan="2" rowspan="2"><i
									class="fa fa-cogs"></i></th>
					</tr>
					</thead>
					<tbody>
					@foreach($clients as $client)
						<tr class="sm-font">
							<td class="text-center text-std-2 sm-font">{{$client->client_name}}</td>
							<td class="text-center text-std-2 sm-font">{{$client->client_phone}}</td>
							<td class="text-center text-std-2 sm-font">{{$client->client_email}}</td>
							<td class="text-center text-std-2 sm-font">{{$client->client_type == 0 ? 'Empresa' : 'Individual'}}</td>
							<td class="text-center text-std-2 product-price">
								<button class="btn btn-secondary btn-get-client-contracts rounded-x sm-font text-std-2" data-toggle="modal"
										data-target="#see-client-contracts-modal" data-id="{{$client->id_client}}">
									Ver contractos
									<i class="float-right ml-2 sm-font fa fa-file"></i>
								</button>
							</td>
						</tr>
					@endforeach
					</tbody>
				</table>
			@else
				<h4 class="text-center text-std-2">Não Possui Clientes</h4>
			@endif

		</div>
	</section>

	<div class="modal fade" id="see-client-contracts-modal">
		<div class="modal-dialog modal-dialog-centered modal-xl">
			<div class="modal-content">

				<!-- Modal Header -->
				<div class="modal-header "><h6 class="text-std-2 sm-font text-violet mb-0 modal-title">Contractos</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<!-- Modal body -->
				<div class="modal-body px-0 pt-0 bg-light">
					<div class="container py-3 d-flex align-items-center justify-content-between bg-white border-bottom">
						<div class="rounded-x align-items-center py-2 px-3 border d-flex">
							<i class="sm-font-1 fa fa-circle mr-2 text-warning">
							</i>
							<p class="mb-0 sm-font-1 text-palid-1 font-weight-bold text-std-2">Em espera</p>
						</div>

						<div class="rounded-x align-items-center py-2 px-3 border d-flex">
							<i class="sm-font-1 fa fa-circle mr-2 text-danger">
							</i>
							<p class="mb-0 sm-font-1 text-palid-1 font-weight-bold text-std-2">Cancelado</p>
						</div>

						<div class="rounded-x align-items-center py-2 px-3 border d-flex">
							<i class="sm-font-1 fa fa-circle mr-2 text-success">
							</i>
							<p class="mb-0 sm-font-1 text-palid-1 font-weight-bold text-std-2">Efectuado</p>
						</div>

						<div class="rounded-x align-items-center py-2 px-3 border d-flex">
							<i class="sm-font-1 fa fa-circle mr-2 text-primary">
							</i>
							<p class="mb-0 sm-font-1 text-palid-1 font-weight-bold text-std-2">Terminado</p>
						</div>

					</div>
					<table class="table table-hover" id="see-products-table">
						<thead>
						<tr>
							<th class="sm-font text-center text-std-2 text-uppercase">*</th>
							<th class="sm-font text-center text-std-2 text-uppercase">Data</th>
							<th class="sm-font text-center text-std-2 text-uppercase">Ref</th>
							<th class="sm-font text-center text-std-2 text-uppercase">Contacto de instalação</th>
							<th class="sm-font text-center text-std-2 text-uppercase">Tipo de ligação</th>
							<th class="sm-font text-center text-std-2 text-uppercase">Plano</th>
							<th class="sm-font text-center text-std-2 text-uppercase">Tecnico</th>
							<th class="sm-font text-center text-std-2 text-uppercase" ><i
										class="fa fa-cogs"></i></th>
						</tr>
						</thead>
						<tbody class="client-contracts-holder">
						</tbody>
					</table>

				</div>

				<!-- Modal footer -->
				<div class="modal-footer bg-light border-top-0">
				</div>

			</div>
		</div>
	</div>

	@push("scripts")
		<script src="assets/js/main.js"></script>
		<script src="views/admin/assets/js/clients.js"></script>
		<!--<script src="views/admin/assets/js/main.js"></script>-->
	@endpush

@endsection