@extends('adminlte::page')

@section('title', 'CRUD con Laravel 8')

@section('content_header')
    <h1>Editar Artículo</h1>
@stop

@section('content')
   <form action="/Headers/{{$header->id}}" method="POST">
   @csrf
   @method('PUT')
  <div class="mb-3">
    <label for="" class="form-label">Código</label>
    <input id="codigo" name="codigo" type="text" class="form-control" value="{{$header->codigo}}">
  </div>
  <div class="mb-3">
    <label for="" class="form-label">Titulo</label>
    <input id="titulo" name="titulo" type="text" class="form-control" value="{{$header->titulo}}">
  </div>
  <div class="mb-3">
    <label for="img" class="form-label">Imagen</label>
    <input id="img" name="img" type="file" class="form-control" value="{{$header->img}}">
  </div>
  <!-- Contenedor para la vista previa de la imagen -->
  <div class="preview-container">
    <img id="img-preview" class="img-preview" src="{{ $header->img }}" alt="Vista previa de la imagen">
    <i id="delete-icon" class="delete-icon fas fa-trash-alt" title="Eliminar imagen"></i>
  </div>
  <br><br>
  <a href="/Headers" class="btn btn-secondary">Cancelar</a>
  <button type="submit" class="btn btn-primary">Guardar</button>
</form>
@stop

@section('css')
    <style>
  /* Estilo para quitar los bordes del input tipo file */
  #img {
    border: none; /* Quitar los bordes */
    padding: 0; /* Quitar el relleno */
    outline: none; /* Quitar el contorno al enfocar */
    background-color: transparent; /* Fondo transparente */
  }

  /* Estilo para la imagen previa */
  .img-preview {
    max-width: 200px; /* Ancho máximo para la imagen previa */
    max-height: 200px; /* Altura máxima para la imagen previa */
    margin-top: 10px; /* Margen superior para separación visual */
  }

/* Estilos adicionales para el ícono de basurero */
.delete-icon {
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima */
    margin-left: 10px; /* Espaciado izquierdo para separación visual */
}

  /* Estilo para ocultar el contenedor de vista previa */
  .preview-container {
    display: none; /* Ocultar el contenedor por defecto */
  }
</style>
@stop

@section('js')
<script>
  // Función para mostrar u ocultar el contenedor de vista previa
  function togglePreviewContainer(show) {
    var previewContainer = document.querySelector('.preview-container'); // Obtener el contenedor de vista previa

    if (show) {
      previewContainer.style.display = 'block'; // Mostrar el contenedor si show es true
    } else {
      previewContainer.style.display = 'none'; // Ocultar el contenedor si show es false
    }
  }

  // Función para mostrar la imagen seleccionada por el usuario
  function previewImage(input) {
    var preview = document.getElementById('img-preview'); // Obtener el elemento de la imagen previa

    if (input.files && input.files[0]) {
      var reader = new FileReader(); // Objeto FileReader para leer archivos

      reader.onload = function(e) {
        preview.src = e.target.result; // Asignar la URL de la imagen al src de la imagen previa
        togglePreviewContainer(true); // Mostrar el contenedor de vista previa
      }

      reader.readAsDataURL(input.files[0]); // Leer el archivo como URL
    } else {
      togglePreviewContainer(false); // Ocultar el contenedor de vista previa si no se selecciona ningún archivo
    }
  }

  // Escuchar el evento de cambio en el campo de archivo
  document.getElementById('img').addEventListener('change', function() {
    previewImage(this); // Llamar a la función para mostrar la imagen previa al cambiar el archivo
  });
  // Función para eliminar la imagen previa
  function deleteImage() {
    var preview = document.getElementById('img-preview'); // Obtener el elemento de la imagen previa
    preview.src = ''; // Limpiar la URL de la imagen previa
    document.getElementById('img').value = ''; // Limpiar el valor del campo de archivo

    togglePreviewContainer(false); // Ocultar el contenedor de vista previa
  }

  // Escuchar el evento de clic en el ícono de basurero
  document.getElementById('delete-icon').addEventListener('click', function() {
    deleteImage(); // Llamar a la función para eliminar la imagen previa al hacer clic en el ícono de basurero
  });
</script>
@stop
