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

@section('content')
	<section class="container-fluid pt-4 mt-5">
		<div class="container-fluid bg-white shadow-sm rounded py-4">
			<h6 class="text-std-2 text-uppercase mb-0 text-x-light">
				Produtos
			</h6>

			<div class="row pt-3">
				<div class="col-12 col-lg-4">
					<div class="input-group mb-3">
						<div class="input-group-prepend border-right-0">
							<span class="bg-white input-group-text"><i class="material-icons">search</i></span>
						</div>
						<input datat-table="#products" type="text" class="text-std-2 search-bar-input border-left-0 form-control" placeholder="Pesquisar por produtos">
					</div>
				</div>

				<div class="col-12 col-lg-3 ml-auto">
					<a 		href="{{URL("admin/adicionar-produto")}}"
							class="btn btn-secondary text-std-2 w-100 d-flex align-items-center justify-content-center">
						<i class="material-icons mr-2">add</i>Adicionar Produto
					</a>
				</div>

				<div class="col-12 col-lg-12">
					<table class="table">
						<thead>
						<tr>
							<th class="text-uppercase font-weight-normal text-std-2 text-center bg-light-x-blue">*</th>
							<th class="text-uppercase font-weight-normal text-std-2 text-center bg-light-x-blue">Nome</th>
							<th class="text-uppercase font-weight-normal text-std-2 text-center bg-light-x-blue">Preço</th>
							<th class="text-uppercase font-weight-normal text-std-2 text-center bg-light-x-blue">Categoria</th>
							<th class="text-uppercase font-weight-normal text-std-2 text-center bg-light-x-blue" colspan="2">
								<i class="fa fa-cogs"></i>
							</th>
						</tr>
						</thead>
						<tbody id="products">
							@foreach($products as $product)
								<tr>
									<td class="text-std-2 text-center ">{{$loop->index}}</td>
									<td class="text-std-2 text-center ">{{$product->name}}</td>
									<td class="text-std-2 text-center ">{{number_format($product->price, 2, ",", ".")}} AKZ</td>
									<td class="text-std-2 text-center ">
										{{$product->category_name}}
									</td>
									<td class="text-center ">
										<a href="{{URL("admin/produto/".$product->slug)}}" class="btn text-std-2 btn-outline-secondary">
											<i class="fa fa-info"></i>
										</a>
									</td>
									<td class="text-center ">
										<button class="btn text-std-2 btn-remove-product btn-danger" data-id="{{$product->id_product}}">
											<i class="fa fa-trash"></i>
										</button>
									</td>
								</tr>
							@endforeach
						</tbody>
					</table>
				</div>
			</div>

		</div>
	</section>
	@push("scripts")
		<script src="assets/js/main.js"></script>
		<script src="views/admin/assets/js/physicalStore.js?v={{ time() }}"></script>
		<script src="views/admin/assets/js/forwardTechnician.js?v={{ time() }}"></script>
		<script>
			$('.btn-remove-product').on('click', function () {
				var $parent = $(this).parent().parent();
				$.ajax(
						{
							url: "../api/product/remove/"+$(this).attr('data-id'),
							type: "POST",
							data: {
								"action": "/api/product/remove/"+$(this).attr('data-id'),
								obj: {}
							},
							headers: {
								"Api-Access-Token": "$2y$10$Tc4g9Lu1IZBek357GodSkuiAjUgDUxkR4YVJLhxLyIh7Swrz5SMSS"
							},
							dataType: 'json',
							success: function (data) {
								console.log("Sucesso3",data);
								if(data.status == "success"){

									showSuccess("Produto removido com sucesso");
									$($parent).remove();
								}else{
									showError("Ocorreu algum problema");
								}

							},
							error: function (err) {
								console.error("initial-subscription", err.responseText);

								showError("Ocorreu algum problema");
							}
						}
				);
			});
		</script>
	@endpush

@endsection
@component('components.solicitateBudget')
@endcomponent