@extends('layouts.app')

@section('content')
<link href="{{asset('css/profile.css')}}" rel="stylesheet">

<div class="profile d-flex">
	<div class="row">
		<h2 class="mt-2 mb-3">Lista de produtos</h2>
	</div>
</div>
<div class="profile justify-content-center">
	
	<div class="row">
		<div class="col-sm-12 col-lg-2">
			<ul class="nav flex-column nav-pills nav-pills-primary">
                <li class="nav-item">
                    <a href="javascript:void();" data-target="#list" data-toggle="pill" class="nav-link {{isset($info)?'':'active show'}}"><i class="icon-user"></i> <span class="hidden-xs">Lista de produtos</span></a>
                </li>
				@can('inserir produto')
				<li class="nav-item">
                    <a href="javascript:void();" data-target="#new" data-toggle="pill" class="nav-link {{isset($info)?'active show':''}}"><i class="icon-envelope-open"></i> <span class="hidden-xs">Novo produto</span></a>
				</li>
				@endcan
	        </ul>
		</div>
		<div class="col-lg-10">
	            <div class="card z-depth-3">
	                <div class="card-body">
		                <div class="tab-content p-3">
							<!-- LISTA DE PRODUTOS -->
							<div class="tab-pane {{isset($info)?'':'active show'}}" id="list">
		                        <div class="col-lg-12">  
		                            <table class="table table-hover table-striped">
		                                <thead>
											<th>Imagem</th>
								            <th>Nome do produto</th>
								            <th>Ativo no quiosque</th>
								            <th>Última atualização</th>
											<th>Data de criação</th>
											<th>&nbsp;</th>
								        </thead>
								        <tbody>
											@forelse($products as $p)
											
												<tr>
													<td><img src="{{asset('img/'.$p->img)}}" width='45px'></td>
													<td>{{$p->title}}</td>
													<td>{{$p->on_kiosk==1?'Sim':'Não'}}</td>
													<td>{{$p->updated_at}}</td>
													<td>{{$p->created_at}}</td>
												    <td>@can('editar produto')<a href="{{ route('prices.show',$p->id) }}"><img src="{{asset('img/edit.png')}}" width="25px"/></a>@endcan</td>
												</tr>
											
										    @empty
										       	<tr><td colspan="5" align="center">Não existe nenhum produto para apresentar</td></tr>
										    @endforelse
										</tbody>
		                            </table>
		                        </div>
							</div>
							@can('inserir produto')
		                    <div class="tab-pane {{isset($info)?'active show':''}}" id="new">
		                    	<div class="col-12">
		                           <form action="{{isset($info)?route('prices.update',$info->id):route('prices.store')}}" method="POST" id="newform" enctype="multipart/form-data">
									@csrf
									@isset($info)
										@method('PATCH')
									@endisset
			                            <div class="form-group row">
			                                <label class="col-lg-12"><strong>Novo produto</strong></label>
			                            </div>
			                            <div class="form-group row">
			                                <label class="col-lg-3 col-form-label form-control-label">Nome</label>
			                                <div class="col-lg-9">
											<input class="form-control" type="text" value="{{isset($info)?old('title',$info->title):''}}" name="title">
			                                </div>
			                            </div>
			                            <div class="form-group row">
										    <label for="textarea" class="col-lg-3 col-form-label form-control-label">Descrição Site</label>
										    <div class="col-lg-9">
										    	<textarea class="form-control" id="textarea" rows="3" name="description">{{isset($info)?old('description',$info->description):''}}</textarea>
										    </div>
										</div>
										<div class="form-group row">
										    <label for="textarea" class="col-lg-3 col-form-label form-control-label">Aviso Quiosque PT</label>
										    <div class="col-lg-9">
										    	<textarea class="form-control" 
id="textarea" rows="3" name="descriptionPT">{{isset($info)?old('descriptionPT',$info->descriptionPT):''}}</textarea>
										    </div>
										</div>
										<div class="form-group row">
										    <label for="textarea" class="col-lg-3 col-form-label form-control-label">Aviso Quiosque EN</label>
										    <div class="col-lg-9">
										    	<textarea class="form-control" id="textarea" rows="3" name="descriptionEN">{{isset($info)?old('descriptionEN',$info->descriptionEN):''}}</textarea>
										    </div>
										</div>
										<div class="form-group row">
										    <label for="textarea" class="col-lg-3 col-form-label form-control-label">Aviso Quiosque FR</label>
										    <div class="col-lg-9">
										    	<textarea class="form-control" id="textarea" rows="3" name="descriptionFR">{{isset($info)?old('descriptionFR',$info->descriptionFR):''}}</textarea>
										    </div>
										</div>
										<div class="form-group row">
										    <label for="photo" class="col-lg-3 col-form-label form-control-label">Fotografia</label>
										    <div class="col-lg-9">
												<input type="file" class="form-control-file" id="photo" name="img" value="{{isset($info)?old('img',$info->img):''}}">
										    </div>
										</div>
										<div class="form-group row">
										<label class="col-lg-3 col-form-label form-control-label">Ranking</label>
										<div class="col-lg-6">
											<select name="rank" class="form-control">
												<option value="D" @isset($info){{ $info->rank == 'D'?'selected':'' }}@endisset>D</option>
												<option value="C" @isset($info){{ $info->rank == 'C'?'selected':'' }}@endisset>C</option>
												<option value="B" @isset($info){{ $info->rank == 'B'?'selected':'' }}@endisset>B</option>
												<option value="A" @isset($info){{ $info->rank == 'A'?'selected':'' }}@endisset>A</option>
											</select>
										</div>
										</div>
										<div class="form-group row">
										   	<label class="form-check-label col-form-label col-lg-3" for="kiosk">Ativo no Kiosk</label>
										   	<div class="col-lg-9">
												<input type="hidden" name="on_kiosk" value="0" />
											   	<input class="form-check-input" type="checkbox" id="kiosk" name="on_kiosk" value="1" @isset($info){{$info->on_kiosk==1?'checked':''}}@endisset>
											</div>  
										</div>
										<hr />
										<div class="form-group row">
			                                <label class="col-lg-12"><strong>Opções</strong></label>
										</div>
										@if(isset($info))
										
											@forelse($info->OptionProduct()->get() as $key => $item)
												<div class="form-group row">
												<label class="col-lg-2 col-form-label form-control-label" align="right">{{ ($key+1) }}</label>
													<div class="col-lg-7">
														<input class="form-control" type="text" value="{{$item->name}}" name="name[{{ $key }}][name]" placeholder="Descrição">
													</div>
													<div class="col-lg-3">
														<input class="form-control" type="number" step="0.01" value="{{$item->price}}" name="name[{{ $key }}][price]" placeholder="Preço">
													</div>
												</div>
											@empty
											 	<div class="form-group row">
													<label class="col-lg-2 col-form-label form-control-label" align="right">1</label>
													<div class="col-lg-7">
														<input class="form-control" type="text" value="" name="name[0][name]" placeholder="Descrição">
													</div>
													<div class="col-lg-3">
														<input class="form-control" type="number" step="0.01" value="" name="name[0][price]" placeholder="Preço">
													</div>
												</div>
											@endforelse
										@else
										<div class="form-group row">
			                                <label class="col-lg-2 col-form-label form-control-label" align="right">1</label>
			                                <div class="col-lg-7">
			                                    <input class="form-control" type="text" value="" name="name[0][name]" placeholder="Descrição">
			                                </div>
			                                <div class="col-lg-3">
			                                    <input class="form-control" type="number" value="" step="0.01" name="name[0][price]" placeholder="Preço">
			                                </div>
			                            </div>
										@endif


			                            
			                            <div id="fields0"></div>
			                            <div class="form-group row">
										    <div class="col-lg-12" align="right">
										      <button type="button" class="btn btn-primary" id="add">+ opções</button>
										    </div>
										</div>
										<hr />
										<div class="form-group row">
											
										    <div class="col-lg-9" align="left">
											<form></form>
											  @if(isset($info))
												<form action="{{route('prices.destroy',$info->id)}}" method="POST" class="delForm">
													@method('delete')
													@csrf
													<button type="button" class="btn btn-danger" id="delete">Apagar</button>
												</form>
											  @endif
										    </div>
											  <div class="col-lg-3" align="right">	
												  <button type="submit" class="btn btn-primary">Guardar</button>
											  </div>
										    </div>
										</div>
			                        </form>
		                        </div>
							</div>
							@endcan
		                </div>
	            	</div>
	            </div> 
        </div>
    </div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		var next = 0;
		$('#add').click(function(e){
			e.preventDefault();
			var i = next+1;
			var inputs = '<div class="form-group row"><label class="col-lg-2 col-form-label form-control-label" align="right">'+(i+1)+'</label><div class="col-lg-7"><input class="form-control" type="text" value="" name="name['+i+'][name]" placeholder="Descrição"></div><div class="col-lg-3"><input class="form-control" type="number" value="" name="name['+i+'][price]" step="0.01" placeholder="Preço"></div></div><div id="fields'+i+'"></div>'
			$('#fields'+next).html(inputs);
			next++;
		});

		$('#delete').click(function(event){
			event.preventDefault();
			swal({
				title: "Deseja eliminar o ficheiro?",
				icon: "warning",
				buttons: true,
				dangerMode: true,
				})
				.then((willDelete) => {
				if (willDelete) {
					$('.delForm').submit();
				} 
				});
			
	});
		
	})
</script>


@endsection