@extends('layouts.admin.master', ['bodyCss'=>'', 'title'=>'Bioderma | Admin'])

	@section('styles')
		<style type="text/css">
			
			.textarea-h150 {
			  height: 150px!important;
			}

			.img-wrap {
			    position: relative;
			}
			.img-wrap .close {
			    position: absolute;
			    top: 2px;
			    right: 2px;
			    z-index: 100;
			}
			.close{
				cursor: pointer;
			}

			.hideSpinnerLoading{
				display: none!important;
			}

			.showSpinnerLoading{
				display: inline-block;
			}

		</style>
	@endsection

	@section('scripts')
		<script type="text/javascript">

			//fade to hide alert
			$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
			    $("#success-alert").slideUp(500);
			});

			
			//action to upload app images
			$(document).ready(function(){
				$('#file_path').change(function(){
			        var form = $('#productForm')[0];
			        var data = new FormData(form);
			        $.ajax({
			            type: "POST",
			            enctype: 'multipart/form-data',
			            url: '/admin/uploadImage',
			            data: data,
			            processData: false,
			            contentType: false,
			            cache: false,
			            timeout: 600000,
			            success: function (data) {
			            	$( "#div_product_images" ).append( data );
			            },
			            error: function (e) {
			                console.log(e);
			            }
			        });
				});
			});


			//function to delete app image
			function deleteImage(id){
				$.ajax({
		            type: "POST",
		            url: '/admin/deleteImage/'+id,
		            data: { "_token": "{{ csrf_token() }}" },
		            success: function (data) {
		            	if(data == 'fail'){
		            		alert('Error eliminando imagen, intente de nuevo...');
		            	}else{
		            		$('#imageProduct_'+data).remove();
		            	}
		            },
		            error: function (e) {
		                console.log(e);
		            }
		        });
			}


			//action to upload augmented reality images
			$(document).ready(function(){
				$('#file_path_ar').change(function(){

					$('#objLoader').hide();
					toggleLoaderArImage('loading');
					
			        var form = $('#productForm')[0];
			        var data = new FormData(form);
			        $.ajax({
			            type: "POST",
			            enctype: 'multipart/form-data',
			            url: '/admin/uploadArImage',
			            data: data,
			            processData: false,
			            contentType: false,
			            cache: false,
			            timeout: 600000,
			            success: function (data) {
			            	
			            	var objData = jQuery.parseJSON(data);

			            	//$('#'+objData.image).remove();
			            	if ($('#cont_imageObj_0').length){
			            		$('#cont_imageObj_0').remove();
			            	}
			            	
			            	$('#'+objData.cont).append( objData.html );
			            	
			            	$('#objLoader').show();
							toggleLoaderArImage('hide');

			            },
			            error: function (e) {
			                console.log(e);
			            }
			        });
				});
			});
			

			//function to delete app image
			function deleteArImage(id){

				$('#objLoader').hide();
				toggleLoaderArImage('loading');

				$.ajax({
		            type: "POST",
		            url: '/admin/deleteArImage/'+id,
		            data: { "_token": "{{ csrf_token() }}" },
		            success: function (data) {
		            	if(data == 'fail'){
		            		alert('Error eliminando archivo, intente de nuevo...');
		            	}else{
		            		var objData = jQuery.parseJSON(data);

			            	$('#'+objData.image).remove();
			            	$('#'+objData.cont).append( objData.html );
			            	
			            	$('#objLoader').show();
							toggleLoaderArImage('hide');
		            	}
		            },
		            error: function (e) {
		                console.log(e);
		            }
		        });
			}

			function toggleLoaderArImage(action){

				let areaImage = document.getElementById('loadingArImg');

				if(action=='loading'){
					//areaImage.classList.remove("showSpinnerLoading");
					$("#loadingArImg").attr("style", "display:inline-block!important")
				}else{
					//areaImage.classList.add("hideSpinnerLoading");
					$("#loadingArImg").attr("style", "display:none!important")
				}
				
				
				

			}
			

			//action to validate check and uncheck product characteristics
		    $(document).ready(function(){
		    	$('.checkbox').on('click', function() {
		    		//SET
		            setCharacteristic = '';
		        	$("input:checkbox:checked").each(function (index) {
		                let total = $("input:checkbox:checked").length;
		                if (index === 0 ) {
		                    setCharacteristic = $(this).attr('id')+':'+$(this).val();
		                }else{
		                    setCharacteristic = setCharacteristic + ',' + $(this).attr('id')+':'+$(this).val();
		                }
		            });
		        	$('#characteristicSet').val(setCharacteristic);

		        	//UNSET
		        	unsetCharacteristic = '';
		        	$("input:checkbox:not(:checked)").each(function (index) {
	                    let total = $("input:checkbox:not(:checked)").length;
                        if (index === 0 ) {
                            unsetCharacteristic = $(this).attr('id')+':'+$(this).val();
                        }else{
                            unsetCharacteristic = unsetCharacteristic + ',' + $(this).attr('id')+':'+$(this).val();
                        }        
	                });
	                $('#characteristicUnset').val(unsetCharacteristic);
	            
		        });
		    });

		</script>

	@endsection

	@section('content')

		<header>
			@include('layouts.admin.navbar')
		</header>

	    <div class="container-fluid">
	      <div class="row">

	        @include('layouts.admin.sidebar', [ 'menuActive' => 'productos' ] )

	        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
	        {!!Form::model($product,['method'=>'PATCH', 'route'=>['products.update',$product->id], 'id' => 'productForm' ] )!!}
        	{{Form::token()}}

				<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
					<h1 class="h5">Editando Producto</h1>
					<button type="submit" class="btn btn-outline-primary btn-sm">Guardar</button>
				</div>
		          
		          <!-- Start Content  -->
	          	<div class="col-md-12 order-md-1">

	          		<div class="col-md-12 mb-12">
		          		@if (count($errors)>0)
						<div class="alert alert-danger">
							<ul>
							@foreach ($errors->all() as $error)
								<li>{{$error}}</li>
							@endforeach
							</ul>
						</div>
						@endif
					</div>

					<div class="col-md-12 mb-12" id="success-alert">
		          		@if (session('status'))
						    <div class="alert alert-success alert-dismissible">
						    	<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
						        {{ session('status') }}
						    </div>
						@endif
					</div>

					<div class="row">
						<div class="col-6">

							<div class="input-group mb-2">
								<label for="name" class="col-4 col-form-label text-left p-0">Nombre</label>
								<div class="col-8">
								<input id="name" name="name" type="text" class="form-control" value="{{ $product->name }}">
								</div>
							</div>

						</div>
						<div class="col-6">
							<div class="input-group mb-2">
								<label for="category_id" class="col-4 col-form-label text-left p-0">Categoría</label>
								<div class="col-8">
									{!! Form::select('category_id', $categoriesList, $product->category_id, ['class'=>'custom-select d-block w-100']) !!}
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-6">
							<div class="input-group ">
								<label for="status" class="col-4 col-form-label text-left p-0">Estatus</label>
								<div class="col-8">
									<select id="status" name="status" class="custom-select d-block w-100">
										<option value="1" {{ ($product->status=='1') ? 'selected' : '' }}>Activo</option>
										<option value="0" {{ ($product->status=='0') ? 'selected' : '' }}>Inactivo</option>
									</select>
								</div>
							</div>
						</div>
						<div class="col-6">
							<div class="input-group ">
								<label for="subcategory_id" class="col-4 col-form-label text-left p-0">Sub-Categoría</label>
								<div class="col-8">
									{!! Form::select('sub_category_id', $subCategoriesList, $product->sub_category_id, ['class'=>'custom-select d-block w-100']) !!}
								</div>
							</div>	
						</div>
					</div>

						
					<div class="row">
						<div class="col-12">							
							<div class="form-group">
								<label for="description">Resumen:</label>
								<textarea id="resume" name="resume" class="form-control">{{ $product->resume }}</textarea>
							</div>
						</div>
					</div>

					

					

					

					<!-- Nav tabs -->
					<ul class="nav nav-tabs">
					  <li class="nav-item">
					    <a class="nav-link active" data-toggle="tab" href="#overview-detalle">Detalle</a>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link" data-toggle="tab" href="#overview-imagenes">Imagenes</a>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link" data-toggle="tab" href="#overview-consejos">Consejos</a>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link" data-toggle="tab" href="#overview-modo">Accion biológica</a>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link" data-toggle="tab" href="#overview-indicaciones">Indicaciones</a>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link" data-toggle="tab" href="#overview-beneficios">Beneficios</a>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link" data-toggle="tab" href="#overview-infomacion">Informacion útil</a>
					  </li>
					  <!--li class="nav-item">
					    <a class="nav-link" data-toggle="tab" href="#overview-ingredientes">Ingredientes</a>
					  </li-->
					  <li class="nav-item">
					    <a class="nav-link" data-toggle="tab" href="#overview-caracteristicas">Caracteristicas</a>
					  </li>
					</ul>

					<!-- Tab panes -->
					<div class="tab-content">
					  <div class="tab-pane container active" id="overview-detalle">
					  	
					  	<div class="row">
							<div class="col-6">
								<div class="form-group">
									<label for="description">Descripcion:</label>
									<textarea id="description" name="description" class="form-control">{{ $product->description }}</textarea>
								</div>
							</div>
							<div class="col-6">
								<div class="form-group">
									<label for="description">Resumen de formato:</label>
									<textarea id="format_description" name="format_description" class="form-control ">{{ $product->format_description }}</textarea>
								</div>
							</div>
						</div>
						


						<div class="row">
							<div class="col-4">
								<div class="input-group mb-2">
									<label for="category_id" class="col-3 col-form-label text-left p-0">Código:</label>
									<div class="col-9">
										<input id="cod" name="cod" type="text" class="form-control" placeholder="Código" value="{{ $product->cod }}">
									</div>
								</div>
							</div>
							<div class="col-4">
								<div class="input-group ">
									<label for="subcategory_id" class="col-4 col-form-label text-left p-0">Código de barras:</label>
									<div class="col-8">
										<input id="cod_bar" name="cod_bar" type="text" class="form-control" placeholder="Código de barras" value="{{ $product->cod_bar }}">
									</div>
								</div>	
							</div>
							<div class="col-4">
								<div class="input-group ">
									<label for="subcategory_id" class="col-4 col-form-label text-left p-0">Unidad de medida:</label>
									<div class="col-8">
										{!! Form::select('und_med', $measurementsList, $product->und_med, ['class'=>'custom-select d-block w-100']) !!}
									</div>
								</div>
							</div>
						</div>


						<div class="row">
							<div class="col-4">
								<div class="input-group ">
									<label for="category_id" class="col-3 col-form-label text-left p-0">Formato:</label>
									<div class="col-9">
										{!! Form::select('format_id', $formatsList, $product->format_id, ['class'=>'custom-select d-block w-100']) !!}
									</div>
								</div>
							</div>
							<div class="col-4">
								<div class="input-group ">
									<label for="visualitations" class="col-4 col-form-label text-left p-0">Visualización:</label>
									<div class="col-8">
										{!! Form::select('visualitations', $visualitations, $product->visualitation, ['class'=>'custom-select d-block w-100']) !!}
									</div>
								</div>	
							</div>
							<div class="col-4">
								<div class="input-group ">
									<label for="qty" class="col-4 col-form-label text-left p-0">Cantidad:</label>
									<div class="col-8">
										<input id="qty" name="qty" type="text" class="form-control" placeholder="Cantidad" value="{{ $product->qty }}">
									</div>

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

					  </div>



					  <div class="tab-pane container fade" id="overview-imagenes">
					  	
					  	<div class="row">
					  		<div class="col-6" style="border-right: solid 1px blue;">
					  			<div class="col-md-12 pt-1 m-0 p-0">
					  				<p class="p-0 m-0 ">Imagenes para app:</p>
					  			</div>
					  			<div class="col-md-12 p-0 m-0">
								  	<div class="custom-file mt-3 mb-2">
									  <input type="file" class="custom-file-input" id="file_path" name="file_path">
									  <label class="custom-file-label" for="file_path">Seleccione la imagen a subir</label>
									</div>
								</div>

							  	<div id="div_product_images" class="row text-center text-lg-left">
									@foreach ($productImages as $productImage)

										<div id="imageProduct_{{ $productImage->id }}" class="col-lg-4 col-md-4 col-4">
											<div class="img-wrap">
											    <span class="close" onclick="deleteImage('{{ $productImage->id }}')">&times;</span>
											    <img class="img-thumbnail" src="{{ asset('storage/product_images/'.$productImage->file_name) }}" alt="">
											</div>
										</div>
										
									@endforeach						    							    
								</div>


					  		</div>
					  		<div class="col-6">
					  			
					  			<div class="col-md-12 pt-1 m-0 p-0">
					  				<p class="p-0 m-0 ">Imagen de realidad aumentada:</p>
					  			</div>
					  			<div class="col-md-12 p-0 m-0">
					  				
								  	<div id="objLoader" class="custom-file mt-3 mb-2">
									  <input type="file" class="custom-file-input" id="file_path_ar" name="file_path_ar">
									  <label class="custom-file-label" for="file_path_ar">Seleccione la imagen a subir</label>
									</div>

									<div id="loadingArImg" class="d-flex justify-content-center" style="display: none!important;">
										<div class="spinner-border" role="status">
											<span class="sr-only">Loading...</span>
										</div>
									</div>
									
								</div>

								<div id="div_product_ar_images" class="row text-center text-lg-left">

									@if( count($imagesObj) == 0)

										<div id="cont_imageObj_0" class="col-12">
											<span class="badge badge-light">Objeto</span>
											<span id="imageObj" class="text-danger">
												.: no se han cargado objetos :.
											</span>
										</div>

									@else

										@foreach ($imagesObj as $imageObj)

											<div id="imageObj{{ $imageObj->id }}" class="col-12">
												<span class="badge badge-light">Objeto</span>
												<span >
													{{ $imageObj->file_name }}
													<span class="close float-none" onclick="deleteArImage('{{ $imageObj->id }}')" title="Eliminar archivo {{ $imageObj->file_name }} ">&times;</span>
													
												</span>
											</div>

										@endforeach	

									@endif

										

										

									{{-- CODIGO COMENTADO
									<div id="cont_imageMtl" class="col-12">
										<span class="badge badge-light">Material</span>
										<span id="imageMtl" class="{{ ( $imageMtl ) ? $imageMtl->file_name : 'text-danger' }}">
											{{ ( $imageMtl ) ? $imageMtl->file_name : '.:: no se ha cargado el material :.' }}
											@if ($imageMtl)
												<span class="close float-none" onclick="deleteArImage('{{ $imageMtl->id }}')" title="Eliminar archivo {{ $imageMtl->file_name }} ">&times;</span>
											@endif
										</span>
									</div>
									
									<div id="cont_imagePng" class="col-12">
										<span class="badge badge-light">Textura</span>
										<span id="imagePng" class="{{ ( $imagePng ) ? $imagePng->file_name : 'text-danger' }}">
											{{ ( $imagePng ) ? $imagePng->file_name : '.: no se ha cargado la textura :.' }}
											@if ($imagePng)
												<span class="close float-none" onclick="deleteArImage('{{ $imagePng->id }}')" title="Eliminar archivo {{ $imagePng->file_name }} ">&times;</span>
											@endif
										</span>
									</div>
									--}}

								</div>

					  		</div>
					  	</div>


					  	

					  </div>
					  
					  <div class="tab-pane container fade" id="overview-consejos">
					  	
					  	<div class="form-group">
							<label for="use_advice"></label>
							<textarea id="use_advice" name="use_advice" rows="5" class="form-control textarea-h150">{{ $product->use_advice }}</textarea>
						</div>

					  </div>

					  <div class="tab-pane container fade" id="overview-modo">
					  	
					  	<div class="form-group">
							<label for="biologic_mode_action"></label>
							<textarea id="biologic_mode_action" name="biologic_mode_action" class="form-control textarea-h150">{{ $product->biologic_mode_action }}</textarea>
						</div>

					  </div>
					  
					  <div class="tab-pane container fade" id="overview-indicaciones">
					  	
					  	<div class="form-group">
							<label for="indications"></label>
							<textarea id="indications" name="indications" class="form-control textarea-h150">{{ $product->indications }}</textarea>
						</div>

					  </div>
					  
					  <div class="tab-pane container fade" id="overview-beneficios">
					  	
					  	<div class="form-group">
							<label for="benefits"></label>
							<textarea id="benefits" name="benefits"  class="form-control textarea-h150">{{ $product->benefits }}</textarea>
						</div>

					  </div>
					  
					  <div class="tab-pane container fade" id="overview-infomacion">
					  	
					  	<div class="form-group">
							<label for="util_information"></label>
							<textarea id="util_information" name="util_information" class="form-control textarea-h150">{{ $product->util_information }}</textarea>
						</div>

					  </div>
					  
					  <!--div class="tab-pane container fade" id="overview-ingredientes">
					  	
					  	<div class="form-group">
							<label for="ingredients"></label>
							<textarea id="ingredients" name="ingredients" class="form-control textarea-h150">{{ $product->ingredients }}</textarea>
						</div>

					  </div-->

					  <div class="tab-pane container fade" id="overview-caracteristicas">
					  	
					  	<ul class="list-group list-group-flush">
					  		@foreach ($characteristics as $characteristic)

					  			
								<li class="list-group-item">
									
									<input class="form-check-input checkbox" 
										id="{{ $characteristic->id }}" 
										type="checkbox" 
										value="{{ $characteristic->getPrCa_PrCaId($product->id, $characteristic->id) }}"
										{{ ( $characteristic->getPrCa_id($product->id, $characteristic->id) == $characteristic->id ) ? 'checked' : '' }}
									>

									<img src="{{ asset('storage/characteristic_image/'.$characteristic->file_name) }}" 
										height="60" width="60" class="img-thumbnail" alt="{{ $characteristic->file_name }}"
									>
									{{ $characteristic->name }}
								</li>

					  		@endforeach
						</ul>						  

						<input type="hidden" id="characteristicSet" name="characteristicSet" value="">
						<input type="hidden" id="characteristicUnset" name="characteristicUnset" value="">

					  </div>

					</div>
				
				</div>

				<input type="hidden" id="productId" name="productId" value="{{ $product->id }}">

			{!!Form::close()!!}
			<!-- End Content  -->
	        </main>
	      </div>
	    </div>


	    <footer>
	    	@include('layouts.admin.footer')
	    </footer>

	@endsection