@extends('layouts.app')

@section('title', 'Día ' . $log->day_number . ' — ' . $batch->name)

@section('content')

<div class="mb-3">
    <a href="{{ route('batches.logs.index', $batch) }}" class="btn-back">← Logs</a>
</div>

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

        <div class="page-title numeric">Día {{ $log->day_number }}</div>
        <p class="page-subtitle numeric">{{ $log->date->format('d \d\e F \d\e Y') }}</p>

        <form action="{{ route('batches.logs.update', [$batch, $log]) }}" method="POST" id="logForm" class="fermenty-form">
            @csrf
            @method('PUT')

            <!-- Mood/Estado -->
            <div class="fermenty-card mb-4">
                <div class="card-title">Estado del lote</div>
                <div class="d-flex gap-3">
                    @foreach(['good' => ['emoji' => '😊', 'label' => 'Todo bien'],
                               'odd'  => ['emoji' => '🤔', 'label' => 'Algo raro'],
                               'bad'  => ['emoji' => '😟', 'label' => 'Algo va mal']] as $value => $mood)
                        <label class="mood-selector" for="mood_{{ $value }}">
                            <input type="radio" name="mood" id="mood_{{ $value }}"
                                   value="{{ $value }}"
                                   {{ old('mood', $log->mood) === $value ? 'checked' : '' }}>
                            <div class="mood-selector-body">
                                <div class="mood-emoji">{{ $mood['emoji'] }}</div>
                                <div class="mood-label">{{ $mood['label'] }}</div>
                            </div>
                        </label>
                    @endforeach
                </div>
                @error('mood')
                    <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                @enderror
            </div>

            <!-- Notas -->
            <div class="fermenty-card mb-4">
                <div class="card-title">Notas</div>
                <textarea name="notes" id="notes" class="form-control @error('notes') is-invalid @enderror" rows="4" placeholder="Observaciones sobre el lote...">{{ old('notes', $log->notes) }}</textarea>
                @error('notes')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <!-- Mediciones (solo premium) -->
            @if(auth()->user() && auth()->user()->isPremium())
            <div class="fermenty-card mb-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="card-title mb-0">Mediciones</div>
                    <button type="button" class="btn btn-fermenty-outline btn-sm" id="addMeasurement">
                        + Agregar medición
                    </button>
                </div>
                {{-- Las catas NO se editan aquí: son la decisión a paladar (el hilo
                     del bucle 2) y este formulario las habría borrado al sincronizar
                     — no están en el select y update() eliminaba lo no enviado. --}}
                @php $catas = $log->measurements->where('type', 'cata'); @endphp
                @if($catas->isNotEmpty())
                    @php $frases = $batch->frasesDeCata(); @endphp
                    <div class="d-flex gap-2 flex-wrap mb-3">
                        @foreach($catas as $c)
                            <span class="fermenty-badge badge-paused">👅 {{ $frases[(int) $c->value] ?? 'Cata' }}</span>
                        @endforeach
                    </div>
                @endif
                <div id="measurementsList">
                    @forelse($log->measurements as $index => $m)
                        @continue($m->type === 'cata')
                        <div class="measurement-row mb-3" id="measurement_existing_{{ $m->id }}">
                            <div class="d-flex gap-2 align-items-start">
                                <select name="measurements[{{ $index }}][type]" class="form-select @error('measurements.*.*') is-invalid @enderror" style="width:130px;flex-shrink:0;">
                                    <option value="">-- Seleccionar --</option>
                                    @foreach(['ph' => 'pH', 'temperature' => 'Temperatura', 'sugar' => 'Azúcar', 'brix' => 'Brix', 'weight' => 'Peso', 'volume' => 'Volumen', 'other' => 'Otro'] as $val => $label)
                                        <option value="{{ $val }}" @selected($m->type === $val)>{{ $label }}</option>
                                    @endforeach
                                </select>
                                <input type="number" step="0.001" name="measurements[{{ $index }}][value]" class="form-control @error('measurements.*.*') is-invalid @enderror" placeholder="Valor" value="{{ old('measurements.' . $index . '.value', $m->value) }}" required>
                                <input type="text" name="measurements[{{ $index }}][unit]" class="form-control @error('measurements.*.*') is-invalid @enderror" placeholder="Unidad (opcional)" style="width:80px;flex-shrink:0;" value="{{ old('measurements.' . $index . '.unit', $m->unit) }}">
                                <input type="hidden" name="measurements[{{ $index }}][id]" value="{{ $m->id }}">
                                <button type="button" class="btn btn-sm" style="background:#FDECEA;color:#7A1A1A;border:none;border-radius:8px;padding:8px 12px;flex-shrink:0;" onclick="removeMeasurement('measurement_existing_{{ $m->id }}')">✕</button>
                            </div>
                        </div>
                    @empty
                    @endforelse
                </div>
                <div class="measurement-hint text-muted" id="measurementHint"
                     style="font-size:0.8rem;text-align:center;padding:1rem 0;@if($log->measurements->count() > 0)display:none;@endif">
                    Pulsa "Agregar medición" para registrar pH, temperatura, etc.
                </div>
            </div>
            @else
            <div class="fermenty-card mb-4 bg-light text-center" style="opacity:0.7;">
                <div class="card-title mb-2">Mediciones (Premium)</div>
                <div class="text-muted" style="font-size:0.95rem;">
                    Esta funcionalidad de trazabilidad está disponible solo para usuarios <strong>Premium</strong>.<br>
                    <a href="{{ route('suscripcion.show') }}" class="btn btn-fermenty-orange btn-sm mt-2">Ver beneficios Premium</a>
                </div>
            </div>
            @endif

            <!-- Submit -->
            <div class="d-flex gap-3">
                <button type="submit" class="btn btn-fermenty">
                    <i class="fas fa-save"></i> Guardar cambios
                </button>
                <a href="{{ route('batches.show', $batch) }}" class="btn btn-fermenty-primary">
                    <i class="fas fa-arrow-left"></i> Volver al lote
                </a>
            </div>
        </form>

    </div>
</div>

@push('scripts')
<script>
let measurementCount = {{ $log->measurements->count() }};

document.getElementById('addMeasurement').addEventListener('click', function() {
    measurementCount++;
    document.getElementById('measurementHint').style.display = 'none';

    const types = ['ph','temperature','sugar','brix','weight','volume','other'];
    const typeOptions = types.map(function(t) {
        const labels = {
            'ph': 'pH',
            'temperature': 'Temperatura',
            'sugar': 'Azúcar',
            'brix': 'Brix',
            'weight': 'Peso',
            'volume': 'Volumen',
            'other': 'Otro'
        };
        return '<option value="' + t + '">' + labels[t] + '</option>';
    }).join('');

    const html = '<div class="measurement-row mb-3" id="measurement_' + measurementCount + '">' +
        '<div class="d-flex gap-2 align-items-start">' +
            '<select name="measurements[' + measurementCount + '][type]" class="form-select" style="width:130px;flex-shrink:0;" required>' +
                '<option value="">-- Seleccionar --</option>' +
                typeOptions +
            '</select>' +
            '<input type="number" step="0.001" name="measurements[' + measurementCount + '][value]" class="form-control" placeholder="Valor" required>' +
            '<input type="text" name="measurements[' + measurementCount + '][unit]" class="form-control" placeholder="Unidad (opcional)" style="width:80px;flex-shrink:0;">' +
            '<button type="button" class="btn btn-sm" style="background:#FDECEA;color:#7A1A1A;border:none;border-radius:8px;padding:8px 12px;flex-shrink:0;" onclick="removeMeasurement(\'measurement_' + measurementCount + '\')">✕</button>' +
        '</div>' +
    '</div>';

    document.getElementById('measurementsList').insertAdjacentHTML('beforeend', html);
});

function removeMeasurement(id) {
    const el = document.getElementById(id);
    if (el) el.remove();
    if (document.getElementById('measurementsList').children.length === 0) {
        document.getElementById('measurementHint').style.display = 'block';
    }
}

// Initialize mood selector styling
document.querySelectorAll('.mood-selector input').forEach(function(input) {
    if (input.checked) {
        input.closest('.mood-selector').querySelector('.mood-selector-body').classList.add('selected');
    }
    input.addEventListener('change', function() {
        document.querySelectorAll('.mood-selector-body').forEach(function(b) {
            b.classList.remove('selected');
        });
        this.closest('.mood-selector').querySelector('.mood-selector-body').classList.add('selected');
    });
});
</script>
@endpush

@endsection