@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