@extends('layouts.app')

@section('title', 'Log del día ' . $dayNumber . ' — ' . $batch->name)

@section('content')

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

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

        <div class="page-title">{{ __('batches.log.title', ['day' => $dayNumber]) }}</div>
        <p class="page-subtitle">{{ $batch->guide->name }} — {{ $batch->start_date->format('d/m/Y') }}</p>

        <form method="POST" action="{{ route('batches.logs.store', $batch) }}" class="fermenty-form">
            @csrf

            {{-- Estado general --}}
            <div class="fermenty-card mb-4">
                <div class="card-title">{{ __('batches.log.mood_label') }}</div>
                <div class="d-flex gap-3">
                    @foreach(['good' => ['emoji' => '😊', 'label' => __('batches.log.mood_good')],
                               'odd'  => ['emoji' => '🤔', 'label' => __('batches.log.mood_odd')],
                               'bad'  => ['emoji' => '😟', 'label' => __('batches.log.mood_bad')]] as $value => $mood)
                        <label class="mood-selector" for="mood_{{ $value }}">
                            <input type="radio" name="mood" id="mood_{{ $value }}"
                                   value="{{ $value }}"
                                   {{ old('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>
            </div>

            {{-- Notas --}}
            <div class="fermenty-card mb-4">
                <div class="card-title">{{ __('batches.log.notes_label') }}</div>
                <textarea name="notes"
                          class="form-control @error('notes') is-invalid @enderror"
                          rows="4"
                          placeholder="{{ __('batches.log.notes_placeholder') }}">{{ old('notes') }}</textarea>
                @error('notes')
                    <div class="invalid-feedback">{{ $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">{{ __('batches.log.measurements_title') }}</div>
                    <button type="button" class="btn btn-fermenty-outline btn-sm" id="addMeasurement">
                        {{ __('batches.log.add_measurement') }}
                    </button>
                </div>
                <div id="measurementsList">
                    {{-- Filas de medición añadidas dinámicamente --}}
                </div>
                <div class="measurement-hint text-muted" id="measurementHint"
                     style="font-size:0.8rem;text-align:center;padding:1rem 0;">
                    Pulsa "Añadir 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('premium.landing') }}" 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-primary">
                    {{ __('batches.log.save_btn') }}
                </button>
                <a href="{{ route('batches.show', $batch) }}" class="btn btn-fermenty-outline">
                    {{ __('general.btn.cancel') }}
                </a>
            </div>

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

@endsection

@push('scripts')
<script>
var measurementCount = 0;

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

    var types = ['ph','temperature','sugar','brix','weight','volume','other'];
    var typeOptions = types.map(function(t) {
        return '<option value="' + t + '">' + t.toUpperCase() + '</option>';
    }).join('');

    var 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;">' +
                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(' + measurementCount + ')">✕</button>' +
        '</div>' +
    '</div>';

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

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

document.querySelectorAll('.mood-selector input').forEach(function(input) {
    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