@extends('layouts.dashboardnew')

@section('content')


<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                
                <form method="POST" action="{{ route('tienda-product-save') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}

                    <div class="row">    
            
                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                                <label class="control-label">Título del Producto</label>
                                <input class="form-control" type="text" name="titulo" required>
                            </div>
                        </div>
        
                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                               <label class="control-label">Precio distribuidor</label>
                               <input class="form-control" type="number" name="precio" step="any" required>
                            </div>
                        </div>
                        
                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                               <label class="control-label">Precio publico</label>
                               <input class="form-control" type="number" name="precio_publico" step="any" required>
                            </div>
                        </div>
                        
                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                               <label class="control-label">Puntos comisionable</label>
                               <input class="form-control" type="number" name="puntos" step="any" required>
                            </div>
                        </div>
                        
                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                               <label class="control-label">Puntos de fidelización</label>
                               <input class="form-control" type="number" name="fidelizacion" step="any" required>
                            </div>
                        </div>
                        
                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                               <label class="control-label">Iva este se tomara como porcentaje</label>
                               <input class="form-control" type="number" name="iva" step="any" required>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                                <label class="control-label">Tipo de Producto</label>
                                <select class="form-control" name="tipoproducto" required>
                                    <option value="" selected disabled>Seleccione una Opción</option>
               
                                    <option value="Recomendados">Recomendados</option>
                                    <option value="Anuncios">Anuncios (Tienda externa)</option>
                                    <option value="Vistos">Más Vistos</option>
               
                                </select>
                            </div>
                        </div>
                
                        <div class="col-md-6">
                            <div class="form-grup mb-3">
                                <label class="m-t-20">Categorías</label>
                                <select class="form-control select2-single" name="categoria" required onchange="cambiarsubcategoria(this.value)">
                                     <option value="" selected disabled>Seleccione una Opción</option>
                                     @foreach($categorias as $categ)
                                         <option value="{{$categ->id}}">{{$categ->titulo}}</option>
                                     @endforeach
                                </select>
                            </div>
                        </div>
                        
                        
                        <div class="col-md-6">
                            <div class="form-grup mb-3">
                                <label class="m-t-20">Subcategorías</label>
                                <select class="form-control subcategoria select2-single" name="subcategoria">
                                     <option value="" selected disabled>Seleccione una Opción</option>
                                     
                                </select>
                            </div>
                        </div>
            
                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                                <label class="control-label">Cantidad de estrellas</label>
                                <input class="form-control" type="number" name="estrellas" min="1" max="5" required>
                            </div>
                        </div>
            
            
                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                                <label class="control-label">Orden</label>
                                <input class="form-control" type="number" name="orden" required>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                                <label class="control-label">Descripcion estilo anuncio (Opcional)</label>
                                <input class="form-control" type="text" name="text_anuncio">
                            </div>
                        </div>

                        <div class="col-sm-6 mb-3">
                            <div class="form-group mb-3">
                                <div class="alert alert-info" role="alert">
                                    <ul>
                                        <li>Dimension para productos Mas vistos o recomendados la imagen 300 x 300 pixeles, formato PNG,JPG,JPEG.</li>
                                        <li>Dimension para productos como anuncios 277 x 260 o 574 x 259 pixeles, formato PNG,JPG,JPEG.</li>
                                        <li>Dimension para productos como slider 1920 x 440 pixeles, formato PNG,JPG,JPEG.</li>
                                    </ul>
                                </div>     
                            </div>
                            
                            <div class="form-group mb-3">
                                <label for="formFileSm" class="form-label">Seleccione una imagen</label>
                                <input class="form-control form-control-sm" name="archivo" id="formFileSm" type="file" accept="image/*">
                            </div>
                        </div>
                        

                        @livewire('tienda')
                        
                        <div class="col-sm-6 mb-3">
                            <div class="form-group mb-3">
                                <label class="control-label">Detalles del Producto</label>
                                <textarea class="form-control summernote" name="detalles" rows="5"></textarea>
                            </div>
                        </div>    
        
        
                        <div class="col-md-12">
                            <div class="row">
               
                                <div class="col-sm-6 col-6">
                                    <div class="form-group mb-3">
                                        <a href="{{ route('admin.index') }}" class="btn btn-danger w-100">Cancelar</a>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-6">
                                    <div class="form-group mb-3">
                                        <button class="btn btn-info w-100" type="submit">Aceptar</button>
                                    </div>
                                </div>   
               
                            </div>
                        </div>
            
                    </div>
        
                </form>
      
            </div>
        </div>
    </div>
</div>            	

@endsection

@push('script')
<script>
  $(document).ready(function () {
    $('.summernote').summernote({
      toolbar: [
        ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link']],
          ['view', ['fullscreen', 'codeview']]
      ]
    });
  })
  
  
    function cambiarsubcategoria(valor){
      
        $('.subcategoria').empty();
      
        $('.subcategoria').append($('<option>', {
          value: "",
          text : "Selecione una Opcion" 
        }));
        
        @foreach($subcategorias as $sub)
            if(valor == '{{$sub->idcategoria}}'){
        
      
                $('.subcategoria').append($('<option>',{
                  value: '{{$sub->id}}',
                  text : '{{$sub->nombre}}'
                }));
     
            }
        @endforeach
    }
  
 </script>
@endpush