@extends('layouts.app')

@section('styles')
	<link href="{{ asset('assets/plugins/input-tags/css/tagsinput.css') }}" rel="stylesheet" />
@endsection

@section('content')

    <div class="page-wrapper">
        <div class="page-content">

        	<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
				<div class="breadcrumb-title pe-3">Productos</div>
				<div class="ps-3">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb mb-0 p-0">
							<li class="breadcrumb-item">
								<a href="{{route('home')}}"><i class="bx bx-home"></i></a>
							</li>
							<li class="breadcrumb-item">
								<a href="{{route('productos')}}"><i class="bx bx-cart"></i></a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">Crear producto</li>
						</ol>
					</nav>
				</div>
				<div class="ms-auto">
                    <a class="btn btn-dark" id="btn-categoria" href="{{URL::previous()}}"><i class="bx bx-arrow-to-left"></i>Volver</a>
                </div>
			</div>
			@include('layouts.partials.session')
			<div class="card">
				<form class="card-body" accept-charset="utf-8" enctype="multipart/form-data" method="post" id="form_producto" action="{{route('productos.store', '1')}}">
					@csrf
					<input type="hidden" id="productos_compuestos" name="productos_compuestos" value="">
					<input type="hidden" id="productos_prep" name="productos_prep" value="">
					<input type="hidden" id="total_formula_post" name="total_formula_post" value="">
					<div>
						<h5 class="card-title">Datos basicos</h5>
					</div>
					<hr>
					<div class="row">
						<div class="col-md-6">
							<center>
								<img src="{{asset('img/productos/defecto.png')}}" height="120" class="img-fluid laimagendelproducto rounded">
							</center>

							<div class="mb-3">
								<label for="formFile" class="form-label">Subir imagen</label>
								<div class="d-flex">
									<input class="form-control" name="imagen" accept="image/*" type="file" id="formFile" style="width: 50%; margin-right: 20px;">
									<input class="form-control" name="imagenSelect" type="hidden" id="formimgselect">
									<a href="#" id="select_image" style="width: 50%" class="btn btn-primary">Seleccionar imágen</a>
								</div>
							</div>
							<div class="mb-3">
								<label>Nombre del producto</label>
								<input 
									class="form-control mb-3" 
									type="text"
									name="nombre" 
									value="{{old('nombre')}}" 
									placeholder="Ingresa el nombre de tu negocio" 
								>
								@error('nombre')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
							</div>
							<div class="mb-3">
								<label>SKU</label><br>
								<input 
									class="form-control mb-3" 
									type="text"
									name="sku" 
									value="{{old('sku')}}"
									placeholder="00000000" 
								>
								@error('sku')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
							</div>
							<div class="form-check form-switch">
                                <input 
									class="form-check-input" 
									name="estado"
									checked="checked"
									type="checkbox"
                                    id="status"
								>
                                <label class="form-check-label" for="status">(Inactivo / Activo) Estado del producto</label>
                            </div>
							<div class="form-check form-switch">
								<input 
									class="form-check-input" 
									name="vendible" 
									type="checkbox" 
									id="vendible" 
									checked="checked"
									
								>
								<label class="form-check-label" for="tipo_producto">Producto no vendible / Producto vendible</label>
								@error('productos_compuestos')
									<span class="invalid-feedback" role="alert" style="display: block;">
										<strong>{{ $message }}</strong>
									</span>
								@enderror
							</div>
						</div>
						<div class="col-md-6">
							<div class="md-3">
								<label>Categoria</label>
								<select name="id_categoria" class="form-control mb-3">
									<option value="">Seleccionar..</option>
									@foreach($categorias as $categoria)
										<option @if(old('id_categoria') == $categoria->id) selected @endif value="{{$categoria->id}}">{{$categoria->nombre}}</option>
									@endforeach
								</select>
							</div>
							<div class="mb-3">
								<div class="row md-3">
									<div class="col-md-4">
										<label>Precio costo</label>
										<input 
											class="form-control" 
											type="number"
											name="precio_costo"
											id="precio_costo" 
											value="{{old('precio_costo')}}" 
											placeholder="0" 
											step="any"
										>
										@error('precio_costo')
		                                    <span class="invalid-feedback" role="alert" style="display: block;">
		                                        <strong>{{ $message }}</strong>
		                                    </span>
		                                @enderror
									</div>
									<div class="col-md-4">
										<label>Ganancia (%)</label>
										<input 
											class="form-control" 
											type="number"
											name="ganancia"
											id="ganancia" 
											value="{{old('ganancia')}}" 
											placeholder="0" 
											step="any"
										>
										@error('ganancia')
		                                    <span class="invalid-feedback" role="alert" style="display: block;">
		                                        <strong>{{ $message }}</strong>
		                                    </span>
		                                @enderror
									</div>
									<div class="col-md-4">
										<label>Precio final *</label>
										<input 
											class="form-control" 
											type="number"
											name="precio_final"
											id="precio_final"
											value="{{old('precio_final')}}" 
											placeholder="0" 
											step="any"
										>
										@error('precio_final')
		                                    <span class="invalid-feedback" role="alert" style="display: block;">
		                                        <strong>{{ $message }}</strong>
		                                    </span>
		                                @enderror
		                            </div>
								</div>
							</div>
							<div class="mb-3">
								<div class="row">
									<div class="col-md-6">
										<label>Descuento</label>
										<input 
											class="form-control" 
											type="text"
											name="descuento" 
											value="{{old('descuento')}}" 
											placeholder="0" 
										>
										@error('descuento')
		                                    <span class="invalid-feedback" role="alert" style="display: block;">
		                                        <strong>{{ $message }}</strong>
		                                    </span>
		                                @enderror
									</div>
									<div class="col-md-6">
										<label>Tipo de descuento</label>
										<select name="tipo_descuento" class="form-control">
											<option value="">Seleccionar..</option>
											<option value="fijo">Fijo</option>
											<option value="porcentaje">Porcentaje</option>
										</select>
									</div>
								</div>
							</div>
							<div class="mb-3">
								<label>Descripción</label>
								<textarea 
									class="form-control" 
									name="descripcion" 
									placeholder="Ingresa la descripcion del producto" 
									rows="3"
								>{{old('descripcion')}}</textarea>
								@error('descripcion')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
							</div>
							<div class="md-3">
								<label>Tipo de producto</label>
								<select name="tipo_producto" id="tipo_producto" class="form-control">
									<option value=""> Producto simple </option>
									<option @if(old('tipo_producto') == 'on') selected @endif value="on"> Producto compuesto </option>
									<option @if(old('tipo_producto') == 'pre') selected @endif value="pre"> Preparación </option>
								</select>
		
								@error('productos_compuestos')
									<span class="invalid-feedback" role="alert" style="display: block;">
										<strong>{{ $message }}</strong>
									</span>
								@enderror
							</div>
						</div>
					</div>
					<br>
					<div>
						<h5 class="card-title">Inventario</h5>
					</div>
					<hr>
					<div class="row" id="producto_simple" @if(old('tipo_producto') == '' or old('tipo_producto') == null) style="display: flex;" @endif>
						<div class="col-md-4">
							<div class="mb-3">
								<label>Cantidad en inventario</label>
								<input 
									class="form-control mb-3 cantidad_en_inventario" 
									type="number"
									name="cantidad" 
									value="{{old('cantidad')}}"
									placeholder="0" 
								>
								@error('cantidad')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
								<i>Cantidad de productos en el inventario</i><br>
								<i class="avaluo_total"></i>
							</div>
						</div>
						<div class="col-md-4">
							<div class="mb-3">
								<label>Unidad de medida</label>
								<select name="unidad_medida" class="form-control mb-3">
									<option value="">Seleccionar..</option>
									@foreach($unidades as $unidad)
										<option
											@if($unidad->unidad == old('unidad_medida'))
												selected
											@endif 
											value="{{$unidad->unidad}}"
										>({{$unidad->unidad}}) {{$unidad->descripcion}}</option>
									@endforeach
								</select>
							</div>
						</div>
						<div class="col-md-4">
							<div class="mb-3">
								<label>Umbral de pocas existencias</label>
								<input 
									class="form-control mb-3" 
									type="number"
									name="umbral_existencias" 
									value="{{old('umbral_existencias')}}"
									placeholder="0" 
								>
								@error('umbal_exixtencias')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
								<i>El umbras de pocas existencias se utiliza para notificaciones de pocos productos en el inventario</i>
							</div>
						</div>
					</div>
					<div id="producto_combo" style="@if(old('tipo_producto') == 'on') display: block; @else display: none; @endif">
						<br/>
                        <a id="add_productos" class="btn btn-primary">Seleccionar productos</a>
                        <br/>
                        <br/>
						<div class="table-responsive">
	                        <table class="table align-middle mb-3">
	                            <thead class="table-light">
	                                <tr>
	                                    <th>Producto</th>
	                                    <th>Unidad de medida</th>
	                                    <th>Cantidad</th>
	                                    <th>Precio costo</th>
	                                    <th>Acciones</th>
	                                </tr>
	                            </thead>
	                            <tbody id="body_product_table">
	                            </tbody>
	                        </table>
	                    </div>
					</div>

					<div class="row" id="producto_preparacion" style="@if(old('tipo_producto') == 'pre') display: flex; @else display: none; @endif">
						@error('productos_prep')
							<span class="invalid-feedback" role="alert" style="display: block;">
								<strong>{{ $message }}</strong>
							</span>
						@enderror
						<div class="row">
							<h5 class="card-title">Formula preparación</h5>
                        </div>
						<hr>
                        <a id="add_productos_pre" style="width: auto; margin-top: 20px; margin-left: 10px; margin-bottom: 25px;" class="btn btn-primary">Seleccionar productos</a>
                        <br/>
                        <br/>
						<div class="table-responsive">
	                        <table class="table align-middle mb-3">
	                            <thead class="table-light">
	                                <tr>
	                                    <th>Producto</th>
	                                    <th>Unidad de medida</th>
	                                    <th>Cantidad</th>
										<th>Acciones</th>
	                                </tr>
	                            </thead>
	                            <tbody id="body_product_table_prep">
	                            	
	                            </tbody>
	                        </table>
							<br>
							<div class="d-flex">
                                <h5 class="card-title">Resultado de la formula</h5>
                            </div>
							<div class="d-flex">
								<div style="margin-right: 10px">
									<input 
									class="form-control" 
									style="width:100%; text-aling: center"
									placeholder="Ingrese la cantidad"
									type="number" 
									id="master_amount_prep"
									value=""
									name="total_preparacion" 
									item=""
									>
								</div>
							</div>
	                    </div>
					</div>
					<br>
					<div>
						<h5 class="card-title">Código de barras</h5>
					</div>
					<hr>
					<div class="row">
						<div class="col-md-6">
							<div class="mb-3">
								<label class="form-label">Código de barras</label>
								<input 
									type="text" 
									name="codigo_barras" 
									class="form-control" 
									id="codigo_barras"
									value="{{old('codigo_barras')}}"
								>
								@error('codigo_barras')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <center>
									<img src="" alt="" id="barcode"><br>
                                </center>
								<div class="btns" style="display: flex; justify-content: space-between; align-items: center;">
									<a href="#" id="descargar_codigo" class="btn visually-hidden btn-dark" download="codigo_barras.png">Descargar</a>
									<a href="#" id="generate_code" class="btn btn-primary">Generar</a>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="mb-3">
								<label class="form-label">Puedes generar un código de barras ingresando el código en el campo "Código de barras" y luego haciendo click en el botón "Generar"</label>
								<br>
							</div>
						</div>
					</div>
					<br>
					<div>
						<h5 class="card-title">Etiquetas de busqueda</h5>
					</div>
					<hr>
					<div class="row">
						<div class="col-md-6">
							<div class="mb-3">
								<label class="form-label">Palabras clave</label>
								<input 
									type="text" 
									name="tags" 
									class="form-control visually-hidden" 
									data-role="tagsinput" 
									value="{{old('tags')}}"
								>
								@error('tags')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
							</div>
						</div>
						<div class="col-md-6">
							<div class="mb-3">
								<label class="form-label">Las Palabras clave se usan para que un producto pueda ser encontrado de manera facil y rapida, por ejemplo:</label><br>
								<label class="form-label">Tengo un producto que se llama "Vela volcán" y a la hora de vender quiero encontrarlo rapido, para eso uso la palabra clave "volcán"</label>
							</div>
						</div>
					</div>
					<div class="btns" style="display: flex; justify-content: space-between; align-items: center;">
						<a href="#" class="btn btn-dark">Cancelar</a>
						<div class="">
							<button type="submit" class="btn btn-primary px-5 guardeme guardar_salir" id="guardar_salir">Guardar y salir</button>
							<a href="#" class="btn btn-primary px-5 guardeme" id="guardar_nuevo">Guardar y crear nuevo producto</a>
						</div>
					</div>
				</form>
			</div>
        </div>
    </div>

	@include('productos.partials.modalBarras')
	@include('productos.partials.modalProductosCompuestos')
	@include('productos.partials.modalProductosPreparacionCreate')
@endsection
@section('scripts')
	<script src="{{asset('assets/plugins/input-tags/js/tagsinput.js')}}"></script>
	<script src="{{asset('barcode.js')}}"></script>
	<script src="{{ asset('productos.js') }}"></script>
	@include('productos.imagenes')
@endsection