@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">Editar 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>
                    @if (json_decode(Auth::user()->permisos)->puede_ver_historico_precios == 'on')
                        <a href="{{ route('productos.history', $producto->id) }}" class="btn btn-primary">Ver histórico de
                            precios</a>
                    @endif
                    <div class="btn-group">
                        <a href="#" class="btn btn-primary"
                            onclick="event.preventDefault(); document.getElementById('form_update').submit()">Actualizar
                            producto</a>
                    </div>
                </div>
            </div>
            
            @include('layouts.partials.session')

            <div class="card">
                <form 
                    class="card-body" 
                    id="form_update"
                    accept-charset="utf-8"
                    enctype="multipart/form-data"
                    method="post"
                    action="{{ route('productos.update', $producto->id) }}"
                >
                    @csrf
                    @php
                        $json = [];
                        foreach ($producto->hijos as $pcombo) {
                            $json[] = [
                                'id' => $pcombo->id_producto,
                                'cant' => $pcombo->cantidad,
                            ];
                        }
                    @endphp
                    <input type="hidden" id="productos_compuestos" item="{{ $producto->id }}" name="productos_compuestos" value="{{ json_encode($json) }}">
                    <input type="hidden" id="productos_prep" item="{{ $producto->id }}" name="productos_prep" value="{{ json_encode($json) }}">
                    <input type="hidden" id="url_update_preparacion" value="{{ route('productos.update_prep', $producto->id) }}">
					<input type="hidden" id="url_index" value="{{ route('productos') }}">
					<div>
                        <h5 class="card-title">Datos basicos</h5>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <center>
                                <img src="{{ $producto->imagen() }}" height="120"
                                    class="img-fluid rounded laimagendelproducto">
                            </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="{{ $producto->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="{{ $producto->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"
                                    @if ($producto->estado == 'activo') checked="checked" @endif 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" @if ($producto->vendible == 'on') checked="checked" @endif>
                                <label class="form-check-label" for="vendible">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 ($producto->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="{{ $producto->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="{{ $producto->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="{{ $producto->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="{{ $producto->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 @if ($producto->tipo_descuento == 'fijo') selected @endif value="fijo">Fijo</option>
                                            <option @if ($producto->tipo_descuento == 'porcentaje') selected @endif 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">{{ $producto->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 mb-3">
                                    <option @if ($producto->tipo_producto == '') selected @endif value=""> Producto simple </option>
                                    <option @if ($producto->tipo_producto == 'on') selected @endif value="on"> Producto compuesto </option>
                                    <option @if ($producto->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" style="@if ($producto->tipo_producto == '' || $producto->tipo_producto == 'pre') display: flex; @else display: none; @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="{{ $producto->cantidad }}" placeholder="0" readonly>
                                @error('cantidad')
                                    <span class="invalid-feedback" role="alert" style="display: block;">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <i>Cantidad de procuctos en el inventario</i> <br>
                                <i class="avaluo_total">Avalúo del producto:
                                    ${{ number_format($producto->cantidad * $producto->precio_final, 0) }}</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 == $producto->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="{{ $producto->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>

					{{-- Tabla productos compuestos --}}
                    <div id="producto_combo"
                        style="@if ($producto->tipo_producto == 'on') display: flex; @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">
                                    @foreach ($producto->hijos as $pcombo)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="recent-product-img">
                                                        <img src="{{ $pcombo->producto->imagen_small() }}"
                                                            alt="Imagen">
                                                    </div>
                                                    <div class="ms-2">
                                                        <h6 class="mb-1 font-14">{{ $pcombo->producto->nombre }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $pcombo->producto->unidad_medida }}</td>
                                            <td style="text-align: center" id="td_cant">
                                                <input class="form-control" style="width:100px; text-aling: center"
                                                    placeholder="0" type="number" id="amount" placeholder="0"
                                                    value="{{ $pcombo->cantidad }}" item="{{ $pcombo->id_producto }}">
                                            </td>
                                            <td id="price_item" price="{{ $pcombo->producto->precio_costo }}">
                                                {{ number_format($pcombo->producto->precio_costo) }}</td>
                                            <td>
                                                <div class="d-flex order-actions">
                                                    <a id="eliminar_producto" item="{{ $pcombo->id_producto }}"
                                                        href="#" class="ms-4">
                                                        <i class="bx bx-trash"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

					{{-- Tabla productos preparaciòn --}}
                    <div id="producto_preparacion" style="@if ($producto->tipo_producto == 'pre') display: block; @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" 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">
                                    @foreach ($producto->hijos as $pcombo)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="recent-product-img">
                                                        <img src="{{ $pcombo->producto->imagen_small() }}"
                                                            alt="Imagen">
                                                    </div>
                                                    <div class="ms-2">
                                                        <h6 class="mb-1 font-14">{{ $pcombo->producto->nombre }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $pcombo->producto->unidad_medida }}</td>
                                            <td style="text-align: center" id="td_cant">
                                                <input class="form-control" style="width:50%; text-aling: center"
                                                    placeholder="Ingrese cantidad..." type="number"
                                                    value="{{ $pcombo->cantidad }}" id="amount-cantidad-entrada-prep"
                                                    item="{{ $pcombo->id_producto }}">
                                            </td>
                                            <td>
                                                <div class="d-flex order-actions">
                                                    <a id="eliminar_producto_prep" item="{{ $pcombo->id_producto }}"
                                                        href="#" class="ms-4">
                                                        <i class="bx bx-trash"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </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 cantidad..." type="number" id="master_amount_prep"
                                        value="{{ $producto->total_preparacion }}" name="total_preparacion"
                                        item="">
                                </div>
                                <div>
                                    <a id="open_modal_preparacion" class="btn btn-primary">Realizar preparación</a>
                                </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="{{ $producto->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_{{ $producto->nombre }}.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="{{ $producto->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>
                        <button type="submit" class="btn btn-primary px-5">Actualizar producto</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

	{{-- Modales --}}
    @include('productos.partials.modalBarras')
	@include('productos.partials.modalProductosCompuestos')
	@include('productos.partials.modalProductosPreparacion')
	@include('productos.partials.modalFormulaPreparacion')
@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