@extends('layouts.app')

@section('title',"articulos")

@section('content')
@section('scripts_url')
<script src="{!! asset('assets/file/js/piexif.min.js') !!}" type="text/javascript"></script>
<link href="{!! asset('assets/file/css/fileinput.min.css') !!}" rel="stylesheet" type="text/css">
<script src="{!! asset('assets/file/js/fileinput.min.js') !!}"></script>
@endsection
<div class="alert alert-secundary p-2 mb-0"><a href="{{ url('articulos') }}"><i class="icon-arrow-left13"></i> Volver al listado de articulos</a></div>
<div class="card">
	<div class="card-header header-elements-inline">
		<h5 class="card-title">Edicion de articulos </h5>
		<div class="header-elements">
			<div class="list-icons">
        		<a class="list-icons-item" data-action="collapse"></a>
        		<a class="list-icons-item" data-action="reload"></a>
        		<a class="list-icons-item" data-action="remove"></a>
        	</div>
    	</div>
	</div>
	<div class="card-body">

		<div class="response-data">
			
		</div>
		<form action="{{ url('articulos') }}" method="POST" id="form-file" onsubmit="submitFile(this); return false">
			@csrf
			@if(!empty($data['file']))
				<input type="hidden" name="id_file" value="{{ $data['file'][0]->id}}">
			@endif
			<input type="hidden" name="id_articulo" value="{{ $data['articulo']->id }}">
			<input type="hidden" name="action" value="update">
			<div class="row">
				<div class="col-4">
					<input type="text" class="form-control"  id="input-cont" name="nombre" placeholder="Nombre articulo" required="" value="{{ $data['articulo']->nombre }}">
				</div>
				<div class="col-4">
					<input type="text" class="form-control"  id="input-cont" name="codigo" placeholder="codigo articulo" required="" value="{{ $data['articulo']->codigo }}">
				</div>
				<div class="col-4 text-center">
					<b>Publico:</b> <input type="checkbox"  {{ ($data['articulo']->status == 1) ? 'checked' : '' }}   id="input-cont" name="status"  value="1">
				</div>
			</div>
			<hr>
			<div class="row">
				<div class="col-3">
					<input type="text" class="form-control"  id="input-cont" name="precio" placeholder="Precio" required="" value="{{ $data['articulo']->precio }}">
				</div>
				<div class="col-3">
					<input type="text" class="form-control" id="input-cont"  name="pvprebaja" placeholder="Precio rebaja" required="" value="{{ $data['articulo']->pvprebaja }}">
				</div>
				<div class="col-3">
					<input type="text" class="form-control" id="input-cont"  name="cantidad" placeholder="Cantidad" required="" value="{{ $data['articulo']->cantidad }}">
				</div>
				<div class="col-3">
					<input type="text" class="form-control" id="input-cont"  name="um" placeholder="U/M" required="" value="{{ $data['articulo']->um }}">
				</div>
			</div>
			<hr>
			<fieldset class="mb-3">
				<legend class="text-uppercase font-size-sm font-weight-bold">Familias</legend>
				<div class="row">
					<div class="col-6">
						<select  id="family_select"  class="form-control dynamic_selects selectpicker select_arts" data-group="family" data-live-search="true"  >
							<option value="">Seleccionar..</option>
							@if($data['familia']->isNotEmpty())
								@foreach ($data['familia'] as $f)
									<option value="{{$f->id}}" data-group="family" data-nombre="{{$f->nombre}}">{{$f->nombre}}</option>
								@endforeach
							@endif
						</select>
					</div>
					<div class="col-6 familia_art_content">
						@if(!empty($data['art_relation']))
							@foreach ($data['art_relation'] as $f)
								<span class="tag_custom familycod{{$f->id_familia}}" id="codenv{{$f->id_relation}}"><a   href="#">{{$f->nombre_familia}}</a> <a href="#"  data-url="{{ url('art_familia/rel'.$f->id_relation) }}" data-id="{{$f->id_relation}}" onclick="deletreg(this); return false"><i class="icon-cross"></i></a>
								<input type="hidden"  name="family[]" value="{{$f->id_familia}}">
								</span>
							@endforeach
						@endif
					</div>
				</div>
			</fieldset>
			<br>
			<hr>
			<fieldset class="mb-3">
				<legend class="text-uppercase font-size-sm font-weight-bold">Tag</legend>
				<div class="row">
					<div class="col-6">
						<select  id="family_select"  class="form-control dynamic_selects selectpicker select_arts" data-group="tags" data-live-search="true"  >
							<option value="">Seleccionar..</option>
							@if($data['tags']->isNotEmpty())
								@foreach ($data['tags'] as $f)
									<option value="{{$f->id}}" data-group="tag" data-nombre="{{$f->nombre}}">{{$f->nombre}}</option>
								@endforeach
							@endif
						</select>
					</div>
					<div class="col-6 tag_art_content">
						@if(!empty($data['tag_relation']))
							@foreach ($data['tag_relation'] as $f)
								<span class="tag_custom tagcod{{$f->id_tag}}" id="codenv{{$f->id_relation}}"><a   href="#">{{$f->nombre_tag}}</a> <a href="#"  data-url="{{ url('tag_art/rel'.$f->id_relation) }}" data-id="{{$f->id_relation}}" onclick="deletreg(this); return false"><i class="icon-cross"></i></a>
								<input type="hidden"  name="tag[]" value="{{$f->id_tag}}">
								</span>
							@endforeach
						@endif
					</div>
				</div>
			</fieldset>
			<br>
			<div class="row">
				<div class="col-6">
					<textarea name="descripcion" id=""  class="form-control" placeholder="Ingrese una descripcion">{{ $data['articulo']->descripcion }}</textarea>
				</div>
				<div class="col-6">
					<label for=""><b>Imagen del articulo</label>
					<input  name="file[]" type="file" id="file_edit" class="file" multiple 
                  data-show-upload="false" data-show-caption="true" data-msg-placeholder="Select {files} for upload..." >  
				</div>
			</div>
			<div class="row">
				<div class="col-12 text-center">
					<br>
					<button class="btn btn-primary"> <i class="icon-rotate-cw2 "></i> Actualizar</button>
				</div>
			</div>
		</form>

	</div>
</div>
@endsection
@section('scripts')
	<script>
		$(function() {
			$(document).on("change",".select_arts",function(e){
				let id = $(this).val(), nombre = $(this).find(':selected').attr('data-nombre'),tipe = $(this).data('group');
				if ($(this).val() != '') {
					switch (tipe){
						case 'family':
							if ($('.familycod'+id).length == 0)  {
								$('.familia_art_content').append(`
									<span class="tag_custom familycod${id}"><a  id="familycod${id}" href="#">${nombre}</a> 
										<a href="#" class="delete_item" data-group="family" data-id="${id}">
										<i class="icon-cross"></i></a>
									</span>`);
								$('.familia_art_content').append(`<input type="hidden" class="familycod ${id}" name="family[]" value="${id}">`);
							}
						break;
						case 'tags':
							if ($('.tagcod'+id).length == 0 ) {
								$('.tag_art_content').append(`
									<span class="tag_custom tagcod${id}"><a  id="tagcod${id}" href="#">${nombre}</a> 
										<a href="#" class="delete_item" data-group="tag"  data-id="${id}">
											<i class="icon-cross"></i>
										</a>
									</span>`);
								$('.tag_art_content').append(`<input type="hidden" class="tagcod${id}" name="tag[]" value="${id}">`);
							}
						break
					}
				}
			});
			$(document).on("click",".delete_item",function(e){
				if(!$(this).data('url')){
					switch ($(this).data('group')){
						case 'family':
							$('.familycod'+$(this).data('id')).remove();
						break;
						case 'tag':
							$('.tagcod'+$(this).data('id')).remove();
						break
					}
				}
				e.preventDefault();
			});

		});
		let url = "{{ (!empty($data['file'])) ? asset('storage/'.$data['file'][0]->nombre_archivo) : '' }}",deleteurl ="{{ (!empty($data['file'])) ? url('filescontable/'.$data['file'][0]->id) : '' }}";
		$("#file_edit").fileinput({
		    initialPreview: url,
		    initialPreviewAsData: true,
		    initialPreviewConfig: [
		        {caption: "Image", downloadUrl: url, key: 1},
		    ],
		    overwriteInitial: true,
		    showUpload: false,
		    deleteUrl:deleteurl,
		    ajaxDeleteSettings: { method: "DELETE" },
		    initialCaption: ''
		}).on('filepredelete', function (event, data) {

		});
	</script>
	@if (session('update_success'))
	    <script>
	    	$.noty_success('{{ session("update_success") }}');
	    </script>
	@endif
@endsection