@extends('adminlte::page')

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

@section('content_articulo')
   <h1>Crear Blog</h1>
@stop

@section('content')
<form action="/Articulos" method="POST" enctype="multipart/form-data">
  @csrf
  <div class="mb-3">
    <label for="" class="form-label">Codigo</label>
    <input id="codigo" name="codigo" type="text" class="form-control" tabindex="1">
  </div>
  <div class="mb-3">
    <label for="" class="form-label">Titulo</label>
    <input id="titulo" name="titulo" type="text" class="form-control" tabindex="1">
  </div>
  <div class="mb-3">
    <label for="" class="form-label">Autor</label>
    <input id="autor" name="autor" type="text" class="form-control" tabindex="1">
  </div>
  <div class="mb-3">
    <label for="" class="form-label">Parrafo</label>
    <input id="parrafo" name="parrafo" type="text" class="form-control" tabindex="1">
  </div>
  <div class="mb-3">
    <label for="" class="form-label">Fecha</label>
    <input id="fecha" name="fecha" type="text" class="form-control" tabindex="1">
  </div>
  <div class="mb-3">
    <label for="img" class="form-label">Imagen</label>
    <input id="img" name="img" type="file" class="form-control" tabindex="1">
  </div>
  <!-- Contenedor para la vista previa de la imagen -->
  <div class="preview-container">
    <img id="img-preview" class="img-preview" src="#" 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="/articulos" class="btn btn-secondary" tabindex="5">Cancelar</a>
  <button type="submit" class="btn btn-primary" tabindex="4">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 */
  }
  /* Estilos generales para el contenedor del formulario */
form {
  background: linear-gradient(135deg, #f9f9f9, #eaeaea);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
  color: #333;
}

/* Estilo para los labels */
.form-label {
  font-weight: bold;
  color: #444;
  font-size: 14px;
}

/* Estilo para los inputs */
.form-control {
  border-radius: 10px;
  padding: 12px;


  font-size: 16px;
}

/* Estilo para el botón */
.btn {
  border-radius: 30px;
  padding: 10px 25px;
  font-weight: bold;
  transition: all 0.3s ease;
  font-size: 16px;
}

/* Hover y focus en los botones */
.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #0056b3;
  border-color: #0056b3;
  box-shadow: 0 8px 15px rgba(0, 91, 187, 0.4);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: #5a6268;
  border-color: #545b62;
  box-shadow: 0 8px 15px rgba(90, 98, 104, 0.4);
  transform: translateY(-2px);
}

/* Estilo del contenedor de la vista previa de la imagen */
.preview-container {
  position: relative;
  display: none; /* Ocultar el contenedor por defecto */
}

.img-preview {
  max-width: 100%;
  max-height: 300px;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

/* Icono de eliminación de imagen */
.delete-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 22px;
  color: #ff3333;
  cursor: pointer;
}

.delete-icon:hover {
  color: #cc0000;
}

/* Estilo para centrar el título */
h1 {
  font-size: 2rem;
  font-weight: bold;
  color: #444;
  margin-bottom: 30px;
  text-align: center; /* Centrar el título */
}

</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
