@extends('admin.layouts.master')

@section('title', 'Editar Modelo - Lash Vanshy')

@section('page-title', 'Editar Modelo')

@section('content')
<!-- Breadcrumb -->
<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">Editar Modelo</li>
    </ol>
</nav>

<div class="row">
    <div class="col-lg-8">
        <div class="card-admin">
            <div class="card-header">
                <i class="fas fa-edit me-2"></i>Editar Modelo
            </div>
            <div class="card-body">
                <form action="{{ route('admin.galeria.update', $galeria) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="titulo" class="form-label">Título *</label>
                            <input type="text" 
                                   class="form-control @error('titulo') is-invalid @enderror" 
                                   id="titulo" 
                                   name="titulo" 
                                   value="{{ old('titulo', $galeria->titulo) }}"
                                   placeholder="Ej: Extensión de pestañas volumen ruso"
                                   required>
                            @error('titulo')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="tipo" class="form-label">Tipo *</label>
                            <select class="form-select @error('tipo') is-invalid @enderror" 
                                    id="tipo" 
                                    name="tipo" 
                                    required
                                    onchange="toggleFileInputs()">
                                <option value="">Selecciona el tipo</option>
                                <option value="imagen" {{ $galeria->tipo === 'imagen' ? 'selected' : '' }}>Imagen</option>
                                <option value="video" {{ $galeria->tipo === 'video' ? 'selected' : '' }}>Video</option>
                            </select>
                            @error('tipo')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="descripcion" class="form-label">Descripción</label>
                        <textarea class="form-control @error('descripcion') is-invalid @enderror" 
                                  id="descripcion" 
                                  name="descripcion" 
                                  rows="3"
                                  placeholder="Descripción opcional del trabajo">{{ old('descripcion', $galeria->descripcion) }}</textarea>
                        @error('descripcion')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Current File Info -->
                    @if($galeria->tipo === 'imagen' && $galeria->archivo)
                    <div class="mb-3">
                        <label class="form-label">Imagen Actual</label>
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $galeria->archivo) }}" 
                                 alt="{{ $galeria->titulo }}" 
                                 class="image-preview"
                                 style="max-height: 200px;">
                        </div>
                        <small class="text-muted">Deja este campo vacío para mantener la imagen actual</small>
                    </div>
                    @endif
                    
                    @if($galeria->tipo === 'video')
                    <div class="mb-3">
                        <label class="form-label">Video Actual</label>
                        @if($galeria->archivo)
                        <div class="mb-2">
                            <video controls style="max-width: 100%; max-height: 200px; border-radius: 10px;">
                                <source src="{{ asset('storage/' . $galeria->archivo) }}" type="video/mp4">
                                Tu navegador no soporta videos.
                            </video>
                        </div>
                        <small class="text-muted">Deja este campo vacío para mantener el video actual</small>
                        @else
                        <p class="text-muted">No hay video cargado</p>
                        @endif
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Miniatura Actual</label>
                        @if($galeria->thumbnail)
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $galeria->thumbnail) }}" 
                                 alt="Thumbnail" 
                                 class="image-preview"
                                 style="max-height: 150px;">
                        </div>
                        <small class="text-muted">Deja este campo vacío para mantener la miniatura actual</small>
                        @else
                        <p class="text-muted">No hay miniatura</p>
                        @endif
                    </div>
                    @endif
                    
                    <!-- New File Input -->
                    @if($galeria->tipo === 'imagen')
                    <div id="imagen-input" class="mb-3">
                        <label for="archivo" class="form-label">Nueva Imagen</label>
                        <input type="file" 
                               class="form-control @error('archivo') is-invalid @enderror" 
                               id="archivo" 
                               name="archivo"
                               accept="image/*"
                               onchange="previewImage(event, 'imagen-preview-edit')">
                        <small class="text-muted">Formats: JPG, PNG, GIF. Max: 5MB</small>
                        <div class="mt-2">
                            <img id="imagen-preview-edit" class="image-preview" style="display: none;">
                        </div>
                        @error('archivo')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    @else
                    <div id="imagen-input" class="mb-3" style="display: none;">
                        <label for="archivo" class="form-label">Nueva Imagen</label>
                        <input type="file" 
                               class="form-control @error('archivo') is-invalid @enderror" 
                               id="archivo" 
                               name="archivo"
                               accept="image/*"
                               onchange="previewImage(event, 'imagen-preview-edit')">
                        <div class="mt-2">
                            <img id="imagen-preview-edit" class="image-preview" style="display: none;">
                        </div>
                    </div>
                    @endif
                    
                    @if($galeria->tipo === 'video')
                    <div id="video-inputs">
                        <div class="mb-3">
                            <label for="archivo_video" class="form-label">Nuevo Video</label>
                            <input type="file" 
                                   class="form-control @error('archivo') is-invalid @enderror" 
                                   id="archivo_video" 
                                   name="archivo"
                                   accept="video/*">
                            <small class="text-muted">Formats: MP4, WebM. Max: 50MB</small>
                            @error('archivo')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="thumbnail_video" class="form-label">Nueva Miniatura</label>
                            <input type="file" 
                                   class="form-control @error('thumbnail') is-invalid @enderror" 
                                   id="thumbnail_video" 
                                   name="thumbnail"
                                   accept="image/*"
                                   onchange="previewImage(event, 'thumbnail-preview-edit')">
                            <div class="mt-2">
                                <img id="thumbnail-preview-edit" class="image-preview" style="display: none;">
                            </div>
                            @error('thumbnail')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    @else
                    <div id="video-inputs" style="display: none;">
                        <div class="mb-3">
                            <label for="archivo_video" class="form-label">Nuevo Video</label>
                            <input type="file" 
                                   class="form-control @error('archivo') is-invalid @enderror" 
                                   id="archivo_video" 
                                   name="archivo"
                                   accept="video/*">
                        </div>
                        
                        <div class="mb-3">
                            <label for="thumbnail_video" class="form-label">Nueva Miniatura</label>
                            <input type="file" 
                                   class="form-control @error('thumbnail') is-invalid @enderror" 
                                   id="thumbnail_video" 
                                   name="thumbnail"
                                   accept="image/*"
                                   onchange="previewImage(event, 'thumbnail-preview-edit')">
                            <div class="mt-2">
                                <img id="thumbnail-preview-edit" class="image-preview" style="display: none;">
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    <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', $galeria->orden) }}"
                                   min="0"
                                   placeholder="0">
                            <small class="text-muted">Orden de visualización (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"
                                       {{ $galeria->activo ? '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>Actualizar 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>Información
            </div>
            <div class="card-body">
                <p class="text-muted">
                    Los modelos son trabajos realizados que se mostrarán en la galería pública del sitio web.
                </p>
                <ul class="text-muted">
                    <li class="mb-2">Puedes subir imágenes o videos de tus trabajos</li>
                    <li class="mb-2">Los videos necesitan una miniatura para mostrarse en la galería</li>
                    <li>Usa el campo "orden" para controlar el orden de visualización</li>
                </ul>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function toggleFileInputs() {
    const tipo = document.getElementById('tipo').value;
    const imagenInput = document.getElementById('imagen-input');
    const videoInputs = document.getElementById('video-inputs');
    
    if (tipo === 'imagen') {
        imagenInput.style.display = 'block';
        videoInputs.style.display = 'none';
    } else if (tipo === 'video') {
        imagenInput.style.display = 'none';
        videoInputs.style.display = 'block';
    } else {
        imagenInput.style.display = 'none';
        videoInputs.style.display = 'none';
    }
}

function previewImage(event, previewId) {
    const file = event.target.files[0];
    const preview = document.getElementById(previewId);
    
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else {
        preview.style.display = 'none';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    toggleFileInputs();
});
</script>
@endpush
@endsection