@extends('layouts.app')

@section('title', 'Nueva publicación — Comunidad')

@section('content')

<div class="mb-3">
    <a href="{{ route('comunidad.index') }}" class="btn-back">← Comunidad</a>
</div>

<div class="row justify-content-center">
    <div class="col-12 col-lg-7">

        <div class="page-title">Nueva publicación</div>
        <p class="page-subtitle">Comparte un tip, receta o pregunta</p>

        <form method="POST" action="{{ route('comunidad.store') }}"
              class="fermenty-form" enctype="multipart/form-data">
            @csrf

            <div class="fermenty-card mb-4">

                {{-- Tipo --}}
                <div class="mb-3">
                    <label class="form-label">Tipo de publicación</label>
                    <div class="d-flex gap-2 flex-wrap">
                        @foreach(['tip' => 'Tip', 'question' => 'Pregunta', 'recipe' => 'Receta', 'review' => 'Valoración'] as $value => $label)
                            <label class="batch-filter-btn {{ old('post_type') === $value ? 'active' : '' }}"
                                for="type_{{ $value }}" style="cursor:pointer;">
                                <input type="radio" name="post_type" id="type_{{ $value }}"
                                    value="{{ $value }}" style="display:none;"
                                    {{ old('post_type') === $value ? 'checked' : '' }}>
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>
                    <div id="tipo-error" class="text-danger mt-2" style="font-size:0.8rem;display:none;">
                        Por favor selecciona un tipo de publicación
                    </div>
                    @error('post_type')
                        <div class="text-danger mt-1" style="font-size:0.8rem;">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Fermento --}}
                <div class="mb-3">
                    <label class="form-label">Fermento relacionado (opcional)</label>
                    <select name="guide_id" class="form-select">
                        <option value="">General</option>
                        @foreach($ferments as $ferment)
                            <option value="{{ $ferment->id }}"
                                {{ old('guide_id') == $ferment->id ? 'selected' : '' }}>
                                {{ $ferment->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Título --}}
                <div class="mb-3">
                    <label class="form-label">Título</label>
                    <input type="text" name="title"
                           class="form-control @error('title') is-invalid @enderror"
                           value="{{ old('title') }}"
                           placeholder="¿De qué trata tu publicación?" required>
                    @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Contenido --}}
                <div class="mb-3">
                    <label class="form-label">Contenido</label>
                    <textarea name="content" rows="6"
                              class="form-control @error('content') is-invalid @enderror"
                              placeholder="Cuéntanos más..." required>{{ old('content') }}</textarea>
                    @error('content')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Fotos --}}
                <div>
                    <label class="form-label">Fotos (hasta 3, opcional)</label>
                    <input type="file" name="images[]" class="form-control"
                           accept="image/jpg,image/jpeg,image/png,image/webp"
                           multiple>
                    <div class="form-text" style="font-size:0.78rem;color:#7AB858;">
                        Máx. 3 fotos · JPG, PNG o WebP · 2MB por foto
                    </div>
                    @error('images.*')
                        <div class="text-danger mt-1" style="font-size:0.8rem;">{{ $message }}</div>
                    @enderror
                </div>

            </div>

            <div class="d-flex gap-3">
                <button type="submit" class="btn btn-fermenty-primary">Publicar</button>
                <a href="{{ route('comunidad.index') }}" class="btn btn-fermenty-outline">Cancelar</a>
            </div>

        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.querySelector('form').addEventListener('submit', function(e) {
    var tipo = document.querySelector('[name="post_type"]:checked');
    if (!tipo) {
        e.preventDefault();
        document.getElementById('tipo-error').style.display = 'block';
        document.getElementById('tipo-error').scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
});

document.querySelectorAll('[name="post_type"]').forEach(function(input) {
    input.addEventListener('change', function() {
        document.getElementById('tipo-error').style.display = 'none';
        document.querySelectorAll('.batch-filter-btn').forEach(function(btn) {
            btn.classList.remove('active');
        });
        this.closest('.batch-filter-btn').classList.add('active');
    });
});

</script>
@endpush