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

@section('content')
	<section class="container-fluid pt-3 mt-4">
		<div class="px-2 pb-3 bg-white rounded  border ">
			<div class="d-flex py-3 mb-4 justify-content-between align-items-center bg-gray-1 border-bottom px-2 grid-container border-right border-left rounded-bottom">
				<h6 class="text-std-2 mb-0"><i class="float-left mr-2 fa fa-info-circle"></i>Equipamentos</h6>
				<div class="d-flex align-items-center">
					<button class="btn btn-outline-secondary btn-set-new-equipment" data-target="#add-equipment-modal" data-toggle="modal">
						<i class="material-icons float-left mr-2">add</i>
						Equipamento
					</button>
				</div>
			</div>

			<table class="table table-hover pt-4" id="see-products-table">
				<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">Preço Unitário</th>
					<th class="sm-font text-right text-std-2 text-uppercase" colspan="2" rowspan="2"><i
								class="fa fa-cogs"></i></th>
				</tr>
				</thead>
				<tbody class="equipments-holder">
				@foreach($equipments as $equipment)
					<tr class="sm-font">
						<td class="text-center text-std-2 sm-font font-weight-bold equipment-name">{{$equipment->equipment_name}}</td>
						<td class="text-center text-std-2 sm-font">
							<span class="equipment-price" data-non-formated-price = "{{$equipment->unit_price}}">
								{{number_format($equipment->unit_price,2,', ',' ')}}
							</span>
							AOA
						</td>
						<td class="text-center text-std-2 product-price">
							<div class="d-flex justify-content-end ">
								<button class="btn btn-outline-secondary mr-2 btn-edit-equipment-data border rounded-x sm-font text-std-2" data-toggle="modal"
										data-target="#add-equipment-modal" data-id="{{$equipment->id_equipment}}">
									Editar
									<i class="float-right ml-2 sm-font fa fa-edit mt-1"></i>
								</button>
								<button class="btn btn-outline-danger btn-cancel-equipment-data border rounded-x sm-font text-std-2" data-toggle="modal"
										data-target="#remove-equipment-modal" data-id="{{$equipment->id_equipment}}">
									Remover
									<i class="float-right ml-2 sm-font fa fa-trash mt-1"></i>
								</button>
							</div>
						</td>
					</tr>
				@endforeach
				</tbody>
			</table>

		</div>
	</section>

	<div class="modal fade" id="add-equipment-modal">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">

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

				<!-- Modal body -->
				<div class="modal-body px-0 bg-light">
					<form class="container-fluid py-3">
						<div class="form-group">
							<label class="sm-font text-std-2" for="usr">Nome:</label>
							<input type="text" class="form-control border-x text-std-2" placeholder="Nome" id="e_name">
						</div>
						<div class="form-group">
							<label class="sm-font text-std-2" for="pwd">Preço unitário:</label>
							<input type="text" class="form-control border-x text-std-2" placeholder="Preço" id="e_price">
						</div>
					</form>
				</div>

				<!-- Modal footer -->
				<div class="modal-footer bg-light border-top-0">
					<button class="btn btn-outline-dark text-std submit-equipment-data py-2 rounded-x px-4 text-violet "
							style="border:2px solid rgba(209,196,233 ,1); background: transparent;">
						<i class="material-icons float-left mr-2">add</i>
						Equipamento
					</button>
				</div>

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

	<div class="modal fade" id="remove-equipment-modal">
		<div class="modal-dialog modal-dialog-centered rounded">
			<div class="modal-content">

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

				<!-- Modal body -->
				<div class="modal-body  bg-light">
					<p class="text-std-2">
						Tem a certeza que deseja remover este equipamento ?
					</p>
				</div>

				<!-- Modal footer -->
				<div class="modal-footer bg-light border-top-0">
					<button class="btn btn-success text-std-2 font-weight-normal btn-remove-equipment  py-2 rounded-x px-4 sm-font ">
						Sim
					</button>
					<button class="btn btn-outline-danger text-std-2 font-weight-normal  py-2 rounded-x px-4 sm-font ">
						Não
					</button>
				</div>

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

@endsection