@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="response-data">
	
</div>
<div class="card">
	<div class="card-header header-elements-inline">
		<h5 class="card-title">Agregar 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 mt-2">
		<form action="{{ url('articulos') }}" method="POST" id="form-file" onsubmit="submitFile(this); return false">
			@csrf
			<input type="hidden" name="action" value="add">
			<input type="hidden" name="carpeta_file" value="Articulos">
			<div class="row">
				<div class="col-4">
					<input type="text" class="form-control"  id="input-cont" name="nombre" placeholder="Nombre articulo" required="">
				</div>
				<div class="col-4">
					<input type="text" class="form-control"  id="input-cont" name="codigo" placeholder="Codigo del articulo" required="">
				</div>
				<div class="col-4 text-center">
					<b>Publico:</b> <input type="checkbox"   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="" >
				</div>
				<div class="col-3">
					<input type="text" class="form-control"  id="input-cont" name="pvprebaja" placeholder="Precio rebaja"  required="">
				</div>
				<div class="col-3">
					<input type="text" class="form-control" id="input-cont"  name="cantidad" placeholder="Cantidad" required="">
				</div>
				<div class="col-3">
					<input type="text" class="form-control" id="input-cont"  name="um" placeholder="U/M" required="" >
				</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-nombre="{{$f->nombre}}">{{$f->nombre}}</option>
								@endforeach
							@endif
						</select>
					</div>
					<div class="col-6 familia_art_content">
						
					</div>
				</div>
			</fieldset>
			<br>
			<hr>
			<fieldset class="mb-3">
				<legend class="text-uppercase font-size-sm font-weight-bold">Tags para articulos</legend>
				<div class="row">
					<div class="col-6">
						<select  id="family_select"  data-group="tags" class="form-control dynamic_selects selectpicker select_arts" data-live-search="true"  >
							<option value="">Seleccionar..</option>
							@if($data['tags']->isNotEmpty())
								@foreach ($data['tags'] as $f)
									<option value="{{$f->id}}" data-nombre="{{$f->nombre}}">{{$f->nombre}}</option>
								@endforeach
							@endif
						</select>
					</div>
					<div class="col-6 tag_art_content">
						
					</div>
				</div>
			</fieldset>
			<br>
			<div class="row">
				<div class="col-6">
					<textarea name="descripcion" id=""  class="form-control" placeholder="Ingrese una 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-floppy-disk "></i> Guardar</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){

				switch ($(this).data('group')){
					case 'family':
						$('.familycod'+$(this).data('id')).remove();
					break;
					case 'tag':
						$('.tagcod'+$(this).data('id')).remove();
					break
				}
				e.preventDefault();
			});
		});
	</script>
@endsection