@extends('default.layout')
@section('content')
<style type="text/css">
	.ativo{
		background-color: #55C6BD;
		color: #fff;
	}
	.desativo{
		background-color: #EBEDF3;
		color: #000;
	}
	.img-prod{
		height: 120px;
		border-radius: 50%;
		margin-top: 5px;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	#atalho_add:hover{
		cursor: pointer;
	}
</style>

<div class="card card-custom gutter-b">
	<div class="card-body">

		<h2>Frente de Pedido de Delivery</h2>
		<button class="btn btn-info" data-toggle="modal" data-target="#modal-pedidos">
			<i class="la la-list"></i>
			Ver Pedidos
		</button>
		<input type="hidden" id="clientes" value="{{json_encode($clientes)}}" name="">
		<input type="hidden" value="{{getenv('DIVISAO_VALOR_PIZZA')}}" id="DIVISAO_VALOR_PIZZA">

		<div class="row align-items-center">
			@if(!isset($pedido)) 
			<div class="col-12">
				<p class="text-danger">Informe o cliente primeiramente!!</p>
			</div>
			@endif
			@if(!isset($pedido))
			<div class="form-group validated col-sm-5 col-lg-5 col-10">
				<label class="col-form-label" id="">Cliente</label><br>
				<select class="form-control select2" style="width: 100%" id="kt_select2_3" name="cliente">
					<option value="null">Selecione o cliente</option>
					@foreach($clientes as $c)
					<option value="{{$c->id}}">{{$c->id}} - {{$c->nome}} ({{$c->celular}})</option>
					@endforeach
				</select>
			</div>

			<div class="col-sm-1 col-lg-1 col-2">
				<!-- Modal add cliente -->
				<a style="margin-top: 12px;" href="#" data-toggle="modal" data-target="#modal-cliente" class="btn btn-icon btn-circle btn-success">
					<i class="la la-plus"></i>
				</a>
			</div>
			@else
			<div class="form-group validated col-sm-5 col-lg-5 col-10"><br>
				<h5>Cliente: <strong class="text-info">{{$pedido->cliente->nome}} {{$pedido->cliente->sobre_nome}}</strong></h5>
				<h5>Celular: <strong class="text-info">{{$pedido->cliente->celular}}</strong></h5>
				<a href="/pedidosDelivery/frente" class="btn btn-sm btn-danger">Novo cliente</a>
			</div>
			@endif

			<div class="form-group validated col-sm-4 col-lg-4 col-10">
				<label class="col-form-label" id="">Endereço</label><br>
				<select class="form-control custom-select" @if(!isset($pedido)) disabled @endif id="endereco" style="width: 100%" name="cliente">
					<option value="NULL">Balcão</option>
					@if(isset($pedido))
					@foreach($pedido->cliente->enderecos as $e)
					<option value="{{$e->id}}"
						@if(isset($pedido))
						@if($pedido->endereco_id == $e->id)
						selected
						@endif
						@endif
						>{{$e->rua}}, {{$e->numero}} - {{$e->bairro()}}
					</option>
					@endforeach
					@endif
				</select>

				
			</div>
			<div class="col-sm-1 col-lg-1 col-2">
				<!-- Modal add cliente -->
				<a data-toggle="modal" data-target="#modal-endereco" style="margin-top: 12px;" href="#" class="btn btn-icon btn-circle btn-info @if(!isset($pedido)) disabled @endif">
					<i class="la la-plus"></i>
				</a>
			</div>
		</div>



		@if(isset($pedido))
		@if($pedido->endereco)
		<h5>Endereco: <strong class="text-success">{{$pedido->endereco->rua}}, {{$pedido->endereco->numero}}</strong></h5>
		<h5>Bairro: <strong class="text-success">{{$pedido->endereco->bairro()}}</strong></h5>
		<h5>Referência: <strong class="text-success">{{$pedido->endereco->referencia}}</strong></h5>
		@endif
		@endif
		<!-- Item -->

		<div class="card card-custom gutter-b">
			<div class="card-body">

				<form id="formItem" class="col s12" method="post" action="/pedidosDelivery/saveItemCaixa">
					<input type="hidden" id="token" name="_token" value="{{ csrf_token() }}">
					<input type="hidden" id="pedido_id" name="pedido_id" value="{{{ isset($pedido) ? $pedido->id : 0 }}}">

					<input type="hidden" id="pedido_id" name="id" value="{{{ isset($pedido) ? $pedido->id : 0 }}}">
					<input type="hidden" id="produtos" value="{{json_encode($produtos)}}" name="">
					<input type="hidden" id="adicionais" value="{{json_encode($adicionais)}}" name="">
					<input type="hidden" id="categorias" value="{{json_encode($categorias)}}" name="">
					<input type="hidden" id="pizzas" value="{{json_encode($pizzas)}}" name="">
					<br>

					<div class="col-12">
						<div class="card card-custom gutter-b example example-compact">
							<div class="card-header">
								<div class="row" style="height: 72px; overflow-x: auto; width: auto; white-space: nowrap">
									<div class="form-group validated col-sm-12 col-lg-12 col-12 col-sm-12" style="margin-top: 10px;">
										<a href="#!" id="cat_todos" onclick="categoria('todos')" style="height: 40px; min-width: 80px;" class="label label-xl label-inline label-light-muted ativo">Mais vendidos</a>
										@foreach($categorias as $c)
										<a href="#!" id="cat_{{$c->id}}" onclick="categoria('{{$c->id}}')" style="height: 40px; min-width: 80px;" class="label label-xl label-inline desativo">{{$c->nome}}</a>
										@endforeach

									</div>

								</div>
							</div>
							<div class="card-body">
								<div class="row" id="prods">
									@foreach($destaques as $p)
									<div class="col-sm-12 col-lg-6 col-md-6 col-xl-3" id="atalho_add">
										<div class="card card-custom gutter-b example example-compact">
											<div onclick="adicionarProdutoRapido('{{$p->id}}')" class="card-header" style="height: 200px;">
												@if($p->produto->imagem)
												<img class="img-prod" src="/imgs_produtos/{{$p->produto->imagem}}">
												@else
												<img class="img-prod" src="/imgs/no_image.png">
												@endif

												<h6 style="font-size: 12px; width: 100%" class="kt-widget__label">
													{{$p->produto->nome}}
												</h6>
												<h6 style="font-size: 12px;" class="text-danger" class="kt-widget__label">
													R$ {{number_format($p->valor, 2)}}
												</h6>

											</div>
											<button type="button" onclick="adicionarProdutoRapidoComAdicional('{{$p->id}}')" class="btn btn-info">
												+ Adicional
											</button>
										</div>

									</div>
									@endforeach

								</div>
							</div>
						</div>
					</div>
					<div class="accordion" id="accordionExample1">
						<div class="card card-custom gutter-b example example-compact">
							<div class="card-header">
								<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne1">
									<h3 class="card-title">
										Busca Por Nome
										<i class="la la-angle-double-down"></i>
									</h3>
								</div>
							</div>
							<div id="collapseOne1" class="collapse" data-parent="#accordionExample1">
								<div class="card-content">
									<div class="row align-items-center">
										<div class="form-group validated col-sm-6 col-lg-5 col-12">
											<label class="col-form-label" id="">Produto</label><br>
											<select class="form-control select2" style="width: 100%" @if(!isset($pedido)) disabled @endif id="kt_select2_1" name="produto">
												<option value="null">Selecione o produto</option>
												@foreach($produtos as $p)
												<option value="{{$p->id}}">{{$p->id}} - {{$p->produto->nome}} - R$ {{number_format($p->valor, 2, ',', '.')}}</option>
												@endforeach
											</select>
										</div>


										<div class="form-group validated col-sm-3 col-lg-3 col-6">
											<div style="display: none;" id="tamanhos-pizza">
												<label class="col-form-label" id="">Tamanho de Pizza</label>
												<select class="custom-select form-control" id="seleciona_tamanho" name="seleciona_tamanho">
													@foreach($tamanhos as $t)
													<option value="{{$t->id}}">{{$t->nome}}</option>
													@endforeach
												</select>
											</div>
										</div>

										<div class="form-group validated col-sm-3 col-lg-3 col-6">
											<div style="display: none;" id="sabores-pizza">
												<label class="col-form-label" id="">Sabores</label>
												<select class="custom-select form-control" id="sabores" name="sabores">
													<option></option>
												</select>
											</div>

										</div>
										<div class="col-sm-1 col-lg-1 col-3" style="display: none;" id="btn-add-sabor">
											<a style="margin-top: 12px;" class="btn btn-light-info">
												<i class="la la-plus"></i>
											</a>
										</div>

										<input type="hidden" name="tamanho_pizza_id" id="tamanho_pizza_id">
										<input type="hidden" name="sabores_escolhidos" id="sabores_escolhidos">
										<input type="hidden" name="adicioanis_escolhidos" id="adicioanis_escolhidos">
									</div>

									<div id="sabores-html" style="display: none;">
										<div class="row">

										</div>
									</div>


									<div class="row align-items-center">
										<div class="form-group validated col-sm-5 col-lg-5 col-12">
											<label class="col-form-label" id="">Adicionais</label><br>
											<select class="form-control select2" @if(!isset($pedido)) disabled @endif style="width: 100%" id="kt_select2_2">
												@foreach($adicionais as $a)
												<option value="{{$a->id}}">{{$a->id}} - {{$a->nome}} - R${{$a->valor}}</option>
												@endforeach
											</select>
										</div>
										<div class="col-sm-1 col-lg-1 col-3" id="btn-add-adicional">
											<a style="margin-top: 12px;" class="btn btn-light-info">
												<i class="la la-plus"></i>
											</a>
										</div>

										<div class="form-group col-lg-6 col-md-6 col-sm-6 col-6">
											<label class="col-form-label">Observação</label>
											<div class="">
												<div class="input-group">
													<input type="text" name="observacao" class="form-control" id="observacao"/>
												</div>
											</div>
										</div>
									</div>

									<div id="adicioanais-html" style="display: none;">
										<div class="row">

										</div>
									</div>

									<div class="row align-items-center">

										<div class="form-group col-lg-2 col-md-2 col-sm-6 col-6">
											<label class="col-form-label">Quantidade</label>
											<div class="">
												<div class="input-group">
													<input type="text" value="1.000" name="quantidade" class="form-control @if($errors->has('quantidade')) is-invalid @endif" id="quantidade"/>
													@if($errors->has('quantidade'))
													<div class="invalid-feedback">
														{{ $errors->first('quantidade') }}
													</div>
													@endif
												</div>
											</div>
										</div>

										<div class="form-group col-lg-2 col-md-2 col-sm-6 col-6">
											<label class="col-form-label">Valor</label>
											<div class="">
												<div class="input-group">
													<input type="text" value="0" name="valor" class="form-control @if($errors->has('valor')) is-invalid @endif" id="valor"/>
													@if($errors->has('valor'))
													<div class="invalid-feedback">
														{{ $errors->first('valor') }}
													</div>
													@endif
												</div>
											</div>
										</div>

										<div class="col-lg-2 col-md-2 col-sm-6 col-6">
											<button style="margin-top: 12px;" value="0" type="submit" class="btn btn-success @if(!isset($pedido)) disabled @endif">
												<i class="la la-plus"></i> Adicionar
											</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>


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

		<div class="card card-custom gutter-b">
			<div class="card-body">
				<div class="row">
					<div class="col-xl-12">
						<br>
						<div id="kt_datatable" class="datatable datatable-bordered datatable-head-custom datatable-default datatable-primary datatable-loaded">

							<table class="datatable-table" style="max-width: 100%; overflow: scroll">
								<thead class="datatable-head">
									<tr class="datatable-row" style="left: 0px;">

										<th data-field="OrderID" class="datatable-cell datatable-cell-sort"><span style="width: 200px;">Produto</span></th>
										<th data-field="OrderID" class="datatable-cell datatable-cell-sort"><span style="width: 100px;">Tamanho Pizza</span></th>
										<th data-field="Country" class="datatable-cell datatable-cell-sort"><span style="width: 100px;">Sabores</span></th>
										<th data-field="ShipDate" class="datatable-cell datatable-cell-sort"><span style="width: 100px;">Adicionais</span></th>

										<th data-field="CompanyName" class="datatable-cell datatable-cell-sort"><span style="width: 100px;">Status</span></th>

										<th data-field="CompanyName" class="datatable-cell datatable-cell-sort"><span style="width: 100px;">Quantidade</span></th>
										<th data-field="CompanyName" class="datatable-cell datatable-cell-sort"><span style="width: 100px;">Subtotal+adicional</span></th>
										<th data-field="CompanyName" class="datatable-cell datatable-cell-sort"><span style="width: 100px;">Observação</span></th>
										<th data-field="CompanyName" class="datatable-cell datatable-cell-sort"><span style="width: 180px;">Ações</span></th>
									</tr>
								</thead>
																								@if(isset($pedido))
								<tbody id="body" class="datatable-body">
									@foreach($pedido->itens as $i)
									<tr class="datatable-row" @if($i->status) style="background: #64ffda" @endif>
																				
										<td style="display: none" id="item_id">{{$i->id}}</td>

										<td class="datatable-cell">
											<span class="codigo" style="width: 200px;">
												{{$i->produto->produto->nome}}
											</span>
										</td>
										<td class="datatable-cell">
											<span class="codigo" style="width: 100px;">
												@if(!empty($i->tamanho))
												<label>{{$i->tamanho->nome}}</label>
												@else
												<label>--</label>
												@endif
											</span>
										</td>

										<td class="datatable-cell">
											<span class="codigo" style="width: 100px;">
												@if(count($i->sabores) > 0)
												<label>
													@foreach($i->sabores as $key => $s)
													{{$s->produto->produto->nome}}
													@if($key < count($i->sabores)-1)
													| 
													@endif
													@endforeach
												</label>
												@else
												<label>--</label>
												@endif
											</span>
										</td>

										<td class="datatable-cell">
											<span class="codigo" style="width: 100px;">
																								@if(count($i->itensAdicionais) > 0)
												<label>
													@foreach($i->itensAdicionais as $key => $a)
													{{$a->adicional->nome()}}
																										@if($key < count($i->itensAdicionais)-1)
													| 
													@endif
													@endforeach
												</label>
												@else
												<label>--</label>
												@endif
											</span>
										</td>

										<td class="datatable-cell">
											<span class="codigo" style="width: 100px;">
												@if($i->status)
												<span class="label label-xl label-inline label-light-success">OK</span>
												@else
												<span class="label label-xl label-inline label-light-danger">PENDENTE</span>
												@endif
											</span>
										</td>