Initial commit: Lash Vanshy - Complete project with admin panel, gallery, products, and contact
This commit is contained in:
223
resources/views/admin/galeria/create.blade.php
Executable file
223
resources/views/admin/galeria/create.blade.php
Executable file
@@ -0,0 +1,223 @@
|
||||
@extends('admin.layouts.master')
|
||||
|
||||
@section('title', 'Nuevo Modelo - Lash Vanshy')
|
||||
|
||||
@section('page-title', 'Nuevo Modelo')
|
||||
|
||||
@section('content')
|
||||
<nav aria-label="breadcrumb" class="mb-4">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.galeria.index') }}">Galería</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Nuevo Modelo</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card-admin">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-plus-circle me-2"></i>Nuevo Modelo
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ route('admin.galeria.store') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="titulo" class="form-label">Titulo *</label>
|
||||
<input type="text"
|
||||
class="form-control @error('titulo') is-invalid @endif"
|
||||
id="titulo"
|
||||
name="titulo"
|
||||
value="{{ old('titulo') }}"
|
||||
placeholder="Ej: Extension de pestanas volumen russo"
|
||||
required>
|
||||
@error('titulo')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="tipo" class="form-label">Tipo *</label>
|
||||
<select class="form-select @error('tipo') is-invalid @endif"
|
||||
id="tipo"
|
||||
name="tipo"
|
||||
required
|
||||
onchange="toggleFileInputs()">
|
||||
<option value="">Selecciona el tipo</option>
|
||||
<option value="imagen" {{ old('tipo') === 'imagen' ? 'selected' : '' }}>Imagen</option>
|
||||
<option value="video" {{ old('tipo') === 'video' ? 'selected' : '' }}>Video</option>
|
||||
</select>
|
||||
@error('tipo')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="descripcion" class="form-label">Descripcion</label>
|
||||
<textarea class="form-control @error('descripcion') is-invalid @endif"
|
||||
id="descripcion"
|
||||
name="descripcion"
|
||||
rows="3"
|
||||
placeholder="Descripcion opcional del trabajo">{{ old('descripcion') }}</textarea>
|
||||
@error('descripcion')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="archivo" class="form-label">Archivo *</label>
|
||||
<input type="file"
|
||||
class="form-control @error('archivo') is-invalid @endif"
|
||||
id="archivo"
|
||||
name="archivo">
|
||||
<small class="text-muted" id="file-hint">Selecciona primero el tipo para ver los formatos validos</small>
|
||||
<div class="mt-2">
|
||||
<img id="file-preview" class="image-preview" style="max-width: 300px; display: none;">
|
||||
<video id="video-preview" class="video-preview" style="max-width: 300px; display: none;" controls></video>
|
||||
</div>
|
||||
@error('archivo')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="thumbnail-container" style="display: none;">
|
||||
<label for="thumbnail" class="form-label">Miniatura (Thumbnail)</label>
|
||||
<input type="file"
|
||||
class="form-control @error('thumbnail') is-invalid @endif"
|
||||
id="thumbnail"
|
||||
name="thumbnail"
|
||||
accept="image/*">
|
||||
<small class="text-muted">Imagen de previsualizacion para el video</small>
|
||||
<div class="mt-2">
|
||||
<img id="thumbnail-preview" class="image-preview" style="max-width: 150px; display: none;">
|
||||
</div>
|
||||
@error('thumbnail')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="orden" class="form-label">Orden</label>
|
||||
<input type="number"
|
||||
class="form-control"
|
||||
id="orden"
|
||||
name="orden"
|
||||
value="{{ old('orden', 0) }}"
|
||||
min="0"
|
||||
placeholder="0">
|
||||
<small class="text-muted">Orden de visualizacion (menor = primero)</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Estado</label>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input"
|
||||
type="checkbox"
|
||||
id="activo"
|
||||
name="activo"
|
||||
value="1"
|
||||
{{ old('activo', true) ? 'checked' : '' }}>
|
||||
<label class="form-check-label" for="activo">Activo (visible en web)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between mt-4">
|
||||
<a href="{{ route('admin.galeria.index') }}" class="btn btn-secondary-admin">
|
||||
<i class="fas fa-arrow-left me-2"></i>Cancelar
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary-admin">
|
||||
<i class="fas fa-save me-2"></i>Guardar Modelo
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card-admin">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-info-circle me-2"></i>Informacion
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">
|
||||
Los modelos son trabajos realizados que se mostraran en la galeria publica del sitio web.
|
||||
</p>
|
||||
<ul class="text-muted">
|
||||
<li class="mb-2">Puedes subir imagenes o videos de tus trabajos</li>
|
||||
<li class="mb-2">Los videos necesitan una miniatura para mostrarse en la galeria</li>
|
||||
<li>Usa el campo "orden" para controlar el orden de visualizacion</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function toggleFileInputs() {
|
||||
var tipo = document.getElementById('tipo').value;
|
||||
var archivo = document.getElementById('archivo');
|
||||
var fileHint = document.getElementById('file-hint');
|
||||
var thumbnailContainer = document.getElementById('thumbnail-container');
|
||||
|
||||
if (tipo === 'imagen') {
|
||||
archivo.accept = 'image/jpeg,image/png,image/gif,image/webp,image/svg+xml';
|
||||
fileHint.textContent = 'Formatos: JPG, PNG, GIF, WebP, SVG. Maximo: 100MB';
|
||||
thumbnailContainer.style.display = 'none';
|
||||
} else if (tipo === 'video') {
|
||||
archivo.accept = 'video/mp4,video/webm,video/ogg';
|
||||
fileHint.textContent = 'Formatos: MP4, WebM, OGG. Maximo: 100MB';
|
||||
thumbnailContainer.style.display = 'block';
|
||||
} else {
|
||||
archivo.accept = '';
|
||||
fileHint.textContent = 'Selecciona primero el tipo para ver los formatos validos';
|
||||
thumbnailContainer.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('archivo').addEventListener('change', function(e) {
|
||||
var file = e.target.files[0];
|
||||
var imagePreview = document.getElementById('file-preview');
|
||||
var videoPreview = document.getElementById('video-preview');
|
||||
|
||||
if (!file) {
|
||||
imagePreview.style.display = 'none';
|
||||
videoPreview.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.type.startsWith('image/')) {
|
||||
imagePreview.src = URL.createObjectURL(file);
|
||||
imagePreview.style.display = 'block';
|
||||
videoPreview.style.display = 'none';
|
||||
} else if (file.type.startsWith('video/')) {
|
||||
videoPreview.src = URL.createObjectURL(file);
|
||||
videoPreview.style.display = 'block';
|
||||
imagePreview.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('thumbnail').addEventListener('change', function(e) {
|
||||
var file = e.target.files[0];
|
||||
var preview = document.getElementById('thumbnail-preview');
|
||||
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
preview.src = URL.createObjectURL(file);
|
||||
preview.style.display = 'block';
|
||||
} else {
|
||||
preview.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
toggleFileInputs();
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
Reference in New Issue
Block a user