@extends('adm.index')
@section('productos','active')
@section('productos_true','true')
@section('productos_show','show')
@section('productos_collapsed','collapsed')
@section('form')

<style>
    form{
        margin-bottom: 40px !important;
        height: 100%;
    }
    main{
        max-height: none;
    }
    .position-relative a{
        right: 10px;
        top: 20px;
        width: 40px;
        height: 40px;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-12">
            <h2>Editar producto</h2>
        </div>
        <div class="col-12">
            <form method="POST" action="<?= route('editProducto') ?>" enctype="multipart/form-data">
                @csrf
                
                <div class="container px-md-0">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="inputOrden" class="form-label">Orden</label>
                                <input type="text" class="form-control" id="inputOrden" name="orden" value="<?= $producto->orden ?>" required>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <input type="hidden" name="id" value="<?= $id ?>">
                                <label for="inputNombre" class="form-label">Nombre</label>
                                <input type="text" class="form-control" value="<?= $producto->nombre ?>" id="inputNombre" name="nombre">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="categoria" class="form-label">Selecciona la categor&iacute;a del producto</label>
                                <select class="form-select" name="categoria_id" aria-label="Default select example" id="categoria">
                                    <?php foreach($categorias as $categoria){ ?>
                                        <?php if($categoria->id == $producto->categoria_id){ ?>
                                            <option value="<?= $categoria->id ?>" selected><?= $categoria->nombre ?></option>
                                        <?php } else { ?>
                                            <option value="<?= $categoria->id ?>"><?= $categoria->nombre ?></option>
                                        <?php } ?>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="descripcion" class="form-label">Descripci&oacute;n</label>
                                <textarea class="form-control" name="descripcion" id="descripcion" cols="30" rows="10" value="{{$producto->descripcion}}">{!!$producto->descripcion!!}</textarea>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="texto_izq" class="form-label">Caracter&iacute;sticas generales(Texto izquierdo)</label>
                            <textarea class="form-control" name="texto_izq" id="texto_izq" cols="30" rows="10" value="{{$producto->texto_izq}}">{!!$producto->texto_izq!!}</textarea>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="texto_izq" class="form-label">Caracter&iacute;sticas generales(Texto derecho)</label>
                            <textarea class="form-control" name="texto_der" id="texto_der" cols="30" rows="10" value="{{$producto->texto_der}}">{!!$producto->texto_der!!}</textarea>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="datos_tecnicos" class="form-label">Datos t&eacute;cnicos</label>
                            <textarea class="form-control" name="datos_tecnicos" id="datos_tecnicos" cols="30" rows="10" value="{{$producto->datos_tecnicos}}">{!!$producto->datos_tecnicos!!}</textarea>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="datos_electricos" class="form-label">Datos el&eacute;ctricos</label>
                            <textarea class="form-control" name="datos_electricos" id="datos_electricos" cols="30" rows="10" value="{{$producto->datos_electricos}}">{!!$producto->datos_electricos!!}</textarea>
                        </div>
                        <div class=" mb-3">
                            <label for="foto_circuito" class="form-label">Foto Datos el&eacute;ctricos(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                            <input class="form-control" type="file" id="foto_circuito" name="foto_circuito">
                        </div>
                        <div class=" mb-3">
                            <label for="ficha" class="form-label">Ficha t&eacute;cnica</label>
                            <input class="form-control" type="file" id="ficha" name="ficha_tecnica" value="<?= $producto->nombre_archivo ?>">
                        </div>
                        <div class="form-group col-sm-12 col-md-4">
                            <div class="position-relative">
                                <!-- <a class="position-absolute btn btn-sm btn-danger rounded-pill far fa-trash-alt"></a> -->
                                <img src="{{asset(Storage::url($producto->foto))}}" style="width: 216px; height: 216px;" class="img-thumbnail mt-4 h-25 w-25">
                            </div>
                            <label for="formFile" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                            <input class="form-control" type="file" id="formFile" name="foto">
                        </div>
                        
                        <div class="form-group col-sm-12 col-md-4">
                            <?php if($producto->foto2){ ?>
                                <div class="position-relative">
                                    <a class="position-absolute btn btn-danger rounded-pill far fa-trash-alt" id="btnEliminarFoto2"></a>
                                    <img src="{{asset(Storage::url($producto->foto2))}}" style="width: 216px; height: 216px;" class="img-thumbnail mt-4 h-25 w-25">
                                </div>
                            <?php } ?>
                            <label for="formFile" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                            <input class="form-control" type="file" id="formFile" name="foto2">
                        </div>
                        
                        <div class="form-group col-sm-12 col-md-4">
                            <?php if($producto->foto3){ ?>
                                <div class="position-relative">
                                    <a class="position-absolute btn btn-danger rounded-pill far fa-trash-alt" id="btnEliminarFoto3"></a>
                                    <img src="{{asset(Storage::url($producto->foto3))}}" style="width: 216px; height: 216px;" class="img-thumbnail mt-4 h-25 w-25">
                                </div>
                            <?php } ?>
                            <label for="formFile" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                            <input class="form-control" type="file" id="formFile" name="foto3">
                        </div>
                        
                        <div class="form-group col-sm-12 col-md-4">
                            <?php if($producto->foto4){ ?>
                                <div class="position-relative">
                                    <a class="position-absolute btn btn-danger rounded-pill far fa-trash-alt" id="btnEliminarFoto4"></a>
                                    <img src="{{asset(Storage::url($producto->foto4))}}" style="width: 216px; height: 216px;" class="img-thumbnail mt-4 h-25 w-25">
                                </div>
                            <?php } ?>
                            <label for="formFile" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                            <input class="form-control" type="file" id="formFile" name="foto4">
                        </div>
                        
                        <div class="form-group col-sm-12 col-md-4">
                            <?php if($producto->foto5){ ?>
                                <div class="position-relative">
                                    <a class="position-absolute btn btn-danger rounded-pill far fa-trash-alt" id="btnEliminarFoto5"></a>
                                    <img src="{{asset(Storage::url($producto->foto5))}}" style="width: 216px; height: 216px;" class="img-thumbnail mt-4 h-25 w-25">
                                </div>
                            <?php } ?>
                            <label for="formFile" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                            <input class="form-control" type="file" id="formFile" name="foto5">
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-4">
                    <button type="submit" class="btn btn-primary">Actualizar producto</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
  $(document).ready(function() {
      let producto = <?php echo $producto ?>;
       $('textarea').summernote({
           height: 200,
           insertTableMaxSize: {
               col: 20,
               row: 20
           },
           toolbar: [
               // [groupName, [list of button]]
               ['table', ['table']],
               ['style', ['bold', 'italic', 'underline', 'clear']],
               ['font', ['strikethrough', 'superscript', 'subscript']],
               ['fontsize', ['fontsize']],
               ['color', ['color']],
               ['para', ['ul', 'ol', 'paragraph']],
               ['height', ['height']],
               ['view', ['fullscreen', 'codeview', 'help']],
            ],
       });
       $('#btnEliminarFoto5').click(function(){
           var confirm = window.confirm("¿Estas seguro/a que querés eliminar esta foto?");
           if(confirm == true){
               window.location = '<?= route('eliminarFoto5', $producto->id); ?>';
           }
       });
       $('#btnEliminarFoto4').click(function(){
           var confirm = window.confirm("¿Estas seguro/a que querés eliminar esta foto?");
           if(confirm == true){
               window.location = '<?= route('eliminarFoto4', $producto->id); ?>';
           }
       });
       $('#btnEliminarFoto3').click(function(){
           var confirm = window.confirm("¿Estas seguro/a que querés eliminar esta foto?");
           if(confirm == true){
               window.location = '<?= route('eliminarFoto3', $producto->id); ?>';
           }
       });
       $('#btnEliminarFoto2').click(function(){
           var confirm = window.confirm("¿Estas seguro/a que querés eliminar esta foto?");
           if(confirm == true){
               window.location = '<?= route('eliminarFoto2', $producto->id); ?>';
           }
       });
   });

</script>

@endsection
