@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 contractos" data-table="#contracts">
						<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>
			<h6 class="">Legenda: </h6>
			<div class="d-flex align-items-center justify-content-left pb-4 pt-2">
				<div class="rounded-x border d-flex py-2 px-3 align-items-center mr-2">
					<i class="fa fa-circle mr-2 sm-font text-danger"></i>
				<p class="sm-font font-weight-bold mb-0 mr-2">Cancelado</p>

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

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

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

				</div>
			</div>
			<table class="table table-hover" id="contracts">
				<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">Cliente</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>
				@foreach($contracts as $contract)
					<tr class="sm-font">
						<td class="text-center text-std-2 sm-font">
							<i class="contract-warmmer float-left fa fa-circle mr-2
										{{
											$contract->contract_status == 1 ? 'text-warning' :
											(
											$contract->contract_status == 2 ? 'text-success' :

											(
											$contract->contract_status == 3 ? 'text-primary' :

											'text-danger'

											)
											)
										}}
									"></i>
						</td>
						<td class="text-center text-std-2 sm-font">{{$contract->contract_request_date}}</td>
						<td class="text-center text-std-2 sm-font">{{$contract->contract_ref}}</td>
						<td class="text-center text-std-2 sm-font">{{$contract->client_name}}</td>
						<td class="text-center text-std-2 sm-font">{{$contract->id_connection_type != 0 ?
						$contract->connection_type_name :
						'---'
						}}</td>
						<td class="text-center text-std-2 sm-font">{{$contract->plan_name}}</td>
						<td class="text-center text-std-2 product-price">
							@if($contract->id_technician == 0)
								<button class="btn btn-outline-secondary sm-font text-std-2" data-toggle="modal"
										data-target="#send-technician">
									Encaminhar
									<i class="float-right ml-2 sm-font fa fa-wrench mt-1"></i>
								</button>
								@else
							{{$contract->username}}
								@endif

						</td>
						<td class="text-center text-std-2 product-price">
							<a class="btn btn-info sm-font text-std-2" href="{{ URL("admin/contracto/".$contract->id_contract) }}">
								Info
								<i class="float-right ml-2 sm-font fa fa-info-circle mt-1"></i>
							</a>
						</td>
					</tr>
                @endforeach
				</tbody>
			</table>

		</div>
	</section>
	<div class="modal fade pt-5" id="see-client-contracts-modal">
		<div class="modal-dialog modal-dialog-centered modal-lg">
			<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 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>
					<div class="col-12 col-lg-12 py-3">
						<div class="grid-container shadow-sm border rounded pb-3 bg-white">
							<div class="py-3 border-bottom ">
								<div class="grid-container">
									<div class="row">
										<div class="col-12 col-lg-6 border-right">
											<h6 class="text-std-2 sm-font text-left">
												<i class="sm-font-1 float-left fa fa-circle mr-2 text-success mt-1"></i>Referência: 789REF90</h6>
										</div>
										<div class="col-12 col-lg-6 ">
											<h6 class="text-std-2 sm-font text-right">
												</i>Tipo de ligação: GPON</h6>
										</div>
									</div>
								</div>
							</div>

							<div class="">
								<p class="text-std-3 font-weight-bold pt-3">Moradia de instalação</p>

								<div class="d-flex justify-content-between  border-x-bottom">
									<div class="py-2 border-x-right pr-2">
										<p class="text-std-3 sm-font mb-1 text-center">Número da casa: </p>
										<p class="text-std-2 mb-0">34 </p>
									</div>

									<div class="py-3">
										<p class="text-std-3 sm-font mb-1 text-center">Rua: </p>
										<p class="text-std-2 mb-0">Visconde de Ovar </p>
									</div>
								</div>
								<div class="d-flex justify-content-between  border-x-bottom">
									<div class="py-2 border-right pr-2">
										<p class="text-std-3 sm-font mb-1 text-center">Bairro: </p>
										<p class="text-std-2 mb-0">Ovar </p>
									</div>

									<div class="py-2 border-right pr-2">
										<p class="text-std-3 sm-font mb-1 text-center">Municipio: </p>
										<p class="text-std-2 mb-0">Visconde de Ovar </p>
									</div>

									<div class="py-2">
										<p class="text-std-3 sm-font mb-1 text-center">Província: </p>
										<p class="text-std-2 mb-0">Visconde de Ovar </p>
									</div>

								</div>

								<div class="grid-container">
									<div class="row justify-content-between">
										<div class="col-12 col-lg-6 border-right">
											<p class="text-left text-std-3 font-weight-bold pt-3">Contacto - instalação</p>
											<p class="text-left text-std-3 sm-font mb-1 ">Nome: </p>
											<p class="text-left text-std-2 mb-2">Visconde de Ovar </p>
											<p class="text-left text-std-3 sm-font mb-1 ">Contacto: </p>
											<p class="text-left text-std-2 mb-0">903 443 212 </p>
										</div>

										<div class="col-12 col-lg-6">
											<p class="text-right text-std-3 font-weight-bold pt-3">Cliente</p>
											<p class="text-right text-std-3 sm-font mb-1 ">Nome: </p>
											<p class="text-right text-std-2 mb-2">Visconde de Ovar </p>
											<p class="text-right text-std-3 sm-font mb-1 ">Email: </p>
											<p class="text-right text-std-2 mb-2">Visconde de Ovar </p>
											<p class="text-right text-std-3 sm-font mb-1 ">Contacto: </p>
											<p class="text-right text-std-2 mb-0">903 443 212 </p>
										</div>
									</div>
								</div>

							</div>
							<p class="text-std-3 font-weight-bold pt-3">Mensalidade contractada</p>
							<div class="d-flex justify-content-between align-items-center bg-light border container-fluid py-2 my-3 rounded">
								<div>
									<p class=" text-justify text-std-2 text-violet big-font-2 mb-0">
										Tá Fácil
									</p>
									<p class=" text-justify text-std-2 mb-0">
										3 000,00 AOA
									</p>
								</div>
								<div class="px-3 py-2 border-x rounded d-flex">
									<div class="border-x-light-right mr-2 pr-2">
										<p class=" text-center text-std-2 mb-0 sm-font-1 font-weight-bold">
											Download
										</p>
										<p class=" text-center text-std-2 mb-0 ">
											12
										</p>
										<p class=" text-center text-std-2 mb-0 ">
											Mbps
										</p>
									</div>
									<div class=" mr-2 ">
										<p class=" text-center text-std-2 mb-0 sm-font-1 font-weight-bold">
											Upload
										</p>
										<p class=" text-center text-std-2 mb-0 ">
											12
										</p>
										<p class=" text-center text-std-2 mb-0 ">
											Mbps
										</p>
									</div>
								</div>
							</div>
							<p class="text-std-3 font-weight-bold pt-3">Equipamentos</p>
							<table class="table table-hover" id="see-products-table">
								<thead>
								<tr>
									<th class="sm-font-1 text-center text-std-2 text-uppercase">Descrição</th>
									<th class="sm-font-1 text-center text-std-2 text-uppercase">Qtde</th>
									<th class="sm-font-1 text-center text-std-2 text-uppercase">Preço unit</th>
									<th class="sm-font-1 text-center text-std-2 text-uppercase">Total</th>
								</thead>
								<tbody>
								<tr class="sm-font">
									<td class="text-center text-std-2">CPE</td>
									<td class="text-center text-std-2">2</td>
									<td class="text-center text-std-2">200,00</td>
									<td class="text-center text-std-2 product-price">
										400,00
									</td>
								</tr>
								</tbody>
							</table>
							<p class="text-std-3 font-weight-bold pt-3 border-top">Fecho</p>
							<p class="text-std-3 sm-font mb-1 ">Vendedor: </p>
							<p class="text-std-2 mb-2">Visconde de Ovar - 903234</p>
							<p class="text-std-3 sm-font mb-1 ">Total pago: </p>
							<p class="text-std-2 mb-2">903 443,212 AOA </p>
							<p class="text-std-3 sm-font mb-1 ">Factura electronica: </p>
							<p class="text-std-2 mb-0">Sim </p>
							<p class="text-std-2 sm-font mt-3 font-weight-bold ">Data: 12/09/2019 </p>
						</div>

					</div>

				</div>

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

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

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

@endsection