@extends('layouts.app')

@section('title', 'Materiales y equipo')

@section('content')

<style>
    .mat-wrap { max-width:680px; }

    /* Ferment selector */
    .mat-cats { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin:6px 0 18px; -webkit-overflow-scrolling:touch; }
    .mat-cat { flex:0 0 auto; cursor:pointer; padding:8px 14px; border:1px solid var(--border-subtle,#ece2d4); border-radius:999px;
        background:var(--paper-1,#faf6ef); font:600 .85rem var(--font-sans); color:var(--text-secondary,#5d5346); white-space:nowrap; }
    .mat-cat.is-active { background:var(--green-600,#3a7a22); border-color:var(--green-600,#3a7a22); color:#fff; }

    /* Section headers */
    .mat-section { font:700 .68rem var(--font-sans); letter-spacing:.07em; text-transform:uppercase;
        color:var(--text-muted,#8a7a66); padding:22px 2px 7px; border-top:1px solid var(--border-subtle,#ece2d4); margin-top:4px; }

    /* Items */
    .mat-item { border-bottom:1px solid var(--border-subtle,#ece2d4); }
    .mat-item:last-child { border-bottom:none; }
    .mat-head { display:flex; align-items:center; gap:10px; width:100%; padding:13px 2px; background:none; border:none; text-align:left; cursor:default; }
    .mat-name { flex:1; min-width:0; font:700 .85rem var(--font-sans); color:var(--text-primary,#1b1b1b); }
    .mat-tag { flex-shrink:0; padding:3px 9px; border-radius:999px; font:700 .62rem var(--font-sans); letter-spacing:.03em; text-transform:uppercase; }
    .mat-tag--imprescindible { background:var(--green-050,#eaf6e4); color:var(--green-700,#2f6d1c); }
    .mat-tag--recomendado    { background:var(--gold-100,#faedcf); color:var(--gold-700,#9a6b12); }
    .mat-tag--opcional       { background:var(--paper-2,#f1ece3); color:var(--text-muted,#8a7a66); }
    .mat-caret { flex-shrink:0; color:var(--text-muted,#8a7a66); font-size:.74rem; transition:transform .16s ease; }
    .mat-desc { font-size:.86rem; color:var(--text-secondary,#5d5346); line-height:1.5; padding:0 2px 13px; }

    .mat.js-enabled .mat-head { cursor:pointer; }
    .mat.js-enabled .mat-desc { display:none; }
    .mat.js-enabled .mat-item.is-open .mat-desc { display:block; }
    .mat:not(.js-enabled) .mat-caret { display:none; }
    .mat-item.is-open .mat-caret { transform:rotate(180deg); }
</style>

@php
    $cats = [
        'general'  => 'General',
        'kombucha' => 'Kombucha',
        'kefir'    => 'Kéfir de agua',
        'kimchi'   => 'Kimchi y verduras',
        'vinagre'  => 'Vinagre',
    ];

    $sections = [
        'equipo'      => 'Equipo de fermentación',
        'ingrediente' => 'Ingredientes y cultivos',
        'analisis'    => 'Herramientas de análisis',
    ];

    $items = [
        // ── Equipo ─────────────────────────────────────────────────────────────
        ['name' => 'Tarro de vidrio de boca ancha',             'tag' => 'imprescindible', 'for' => ['general'],                     'kind' => 'equipo',      'desc' => 'Recipiente principal de fermentación. El vidrio no reacciona con los ácidos ni retiene sabores.'],
        ['name' => 'Tela transpirable + goma elástica',          'tag' => 'imprescindible', 'for' => ['kombucha', 'kefir', 'vinagre'], 'kind' => 'equipo',      'desc' => 'Cubre el tarro en fermentación aeróbica: deja entrar aire pero no insectos ni polvo.'],
        ['name' => 'Pesos de fermentación (vidrio o cerámica)', 'tag' => 'imprescindible', 'for' => ['kimchi'],                      'kind' => 'equipo',      'desc' => 'Mantienen la verdura sumergida en la salmuera, sin contacto con el aire, para evitar mohos.'],
        ['name' => 'Tapa con válvula (airlock)',                 'tag' => 'recomendado',    'for' => ['kimchi'],                      'kind' => 'equipo',      'desc' => 'Deja salir el CO₂ sin que entre aire: fermentación anaeróbica limpia y sin reventones.'],
        ['name' => 'Botellas de cierre mecánico (swing-top)',    'tag' => 'recomendado',    'for' => ['kombucha', 'kefir'],            'kind' => 'equipo',      'desc' => 'Para la segunda fermentación y la carbonatación; aguantan la presión del gas.'],
        ['name' => 'Embudo y colador no metálico',               'tag' => 'recomendado',    'for' => ['kombucha', 'kefir'],            'kind' => 'equipo',      'desc' => 'Para trasvasar y embotellar sin dañar el cultivo ni arrastrar metales.'],
        ['name' => 'Utensilios no reactivos (madera, silicona)', 'tag' => 'recomendado',    'for' => ['general'],                     'kind' => 'equipo',      'desc' => 'Para remover y manipular sin transferir sabores metálicos al fermento ácido.'],
        ['name' => 'Báscula de cocina (precisión 1 g)',          'tag' => 'imprescindible', 'for' => ['general'],                     'kind' => 'equipo',      'desc' => 'Para pesar sal, azúcar e ingredientes. Clave para acertar la salmuera y repetir resultados.'],
        ['name' => 'Etiquetas y rotulador',                      'tag' => 'recomendado',    'for' => ['general'],                     'kind' => 'equipo',      'desc' => 'Anota fermento, fecha de inicio y % de sal. Tu yo del futuro lo agradecerá.'],
        ['name' => 'Maza o prensa (krautstamper)',               'tag' => 'opcional',       'for' => ['kimchi'],                      'kind' => 'equipo',      'desc' => 'Prensa la verdura para que suelte su propio jugo y quede cubierta por su salmuera.'],
        ['name' => 'Tarro de cierre hermético (tipo Fido)',      'tag' => 'opcional',       'for' => ['kimchi'],                      'kind' => 'equipo',      'desc' => 'Alternativa al airlock; si no tiene válvula, ábrelo a diario para liberar el gas.'],
        ['name' => 'Estera calefactora o zona cálida',           'tag' => 'opcional',       'for' => ['general'],                     'kind' => 'equipo',      'desc' => 'Mantiene una temperatura estable en invierno, cuando los fermentos se ralentizan.'],

        // ── Ingredientes y cultivos ─────────────────────────────────────────────
        ['name' => 'SCOBY (madre de kombucha)',              'tag' => 'imprescindible', 'for' => ['kombucha'], 'kind' => 'ingrediente', 'desc' => 'El cultivo que fermenta el té azucarado. Consérvalo sano entre lotes en un poco de líquido de arranque.'],
        ['name' => 'Gránulos de kéfir de agua',             'tag' => 'imprescindible', 'for' => ['kefir'],    'kind' => 'ingrediente', 'desc' => 'Los gránulos vivos que fermentan el agua azucarada. Se reutilizan lote tras lote.'],
        ['name' => 'Madre de vinagre',                      'tag' => 'imprescindible', 'for' => ['vinagre'],  'kind' => 'ingrediente', 'desc' => 'El cultivo acético que convierte el alcohol en ácido acético (vinagre).'],
        ['name' => 'Sal sin aditivos (marina o en escamas)','tag' => 'imprescindible', 'for' => ['kimchi'],   'kind' => 'ingrediente', 'desc' => 'Dirige la fermentación láctica. Evita sal yodada o con antiaglomerantes: pueden inhibir los microbios.'],
        ['name' => 'Agua sin cloro',                        'tag' => 'imprescindible', 'for' => ['general'],  'kind' => 'ingrediente', 'desc' => 'El cloro del grifo frena los cultivos. Deja reposar el agua 24 h, hiérvela y enfríala, o fíltrala.'],

        // ── Herramientas de análisis ────────────────────────────────────────────
        ['name' => 'Termómetro',                           'tag' => 'recomendado', 'for' => ['general'], 'kind' => 'analisis', 'desc' => 'La temperatura es el factor que más cambia el tiempo de fermentación.'],
        ['name' => 'Tiras o medidor de pH',                'tag' => 'recomendado', 'for' => ['general'], 'kind' => 'analisis', 'desc' => 'Comprueba la acidez y la seguridad, y ayuda a decidir el punto de "listo".'],
        ['name' => 'Refractómetro o densímetro (Brix/SG)', 'tag' => 'opcional',    'for' => ['general'], 'kind' => 'analisis', 'desc' => 'Mide el azúcar y permite estimar el alcohol. Lo usan las calculadoras del Laboratorio.'],
    ];

    $grouped = collect($items)->groupBy('kind');
@endphp

<div class="mb-2">
    <a href="{{ route('laboratorio.index') }}" class="btn-back" onclick="event.preventDefault(); history.back();">← Volver</a>
</div>

<div class="mat-wrap">
    <div class="page-title">Materiales y equipo</div>
    <p class="page-subtitle">Elige qué quieres fermentar y verás lo que necesitas por categoría.</p>

    <div class="mat" id="mat">
        <div class="mat-cats" role="tablist" aria-label="Tipo de fermento">
            @foreach($cats as $key => $label)
                <button type="button" class="mat-cat {{ $key === 'general' ? 'is-active' : '' }}" data-cat="{{ $key }}">{{ $label }}</button>
            @endforeach
        </div>

        @foreach($sections as $kind => $sectionLabel)
            @if($grouped->has($kind))
                <div class="mat-section" data-section="{{ $kind }}">{{ $sectionLabel }}</div>
                @foreach($grouped[$kind] as $item)
                    <div class="mat-item" data-for="{{ implode(' ', $item['for']) }}" data-kind="{{ $kind }}">
                        <button type="button" class="mat-head" data-mat-toggle aria-expanded="false">
                            <span class="mat-name">{{ $item['name'] }}</span>
                            <span class="mat-tag mat-tag--{{ $item['tag'] }}">{{ $item['tag'] }}</span>
                            <span class="mat-caret"><i class="fa-solid fa-chevron-down"></i></span>
                        </button>
                        <div class="mat-desc">{{ $item['desc'] }}</div>
                    </div>
                @endforeach
            @endif
        @endforeach
    </div>

    <p class="mt-4" style="font-size:.8rem;color:var(--text-muted,#8a7a66);">
        Guía orientativa para fermentación doméstica. Los <b>ingredientes exactos</b> dependen de cada receta.
    </p>
</div>

@push('scripts')
<script>
(function () {
    var root = document.getElementById('mat');
    if (!root) return;
    root.classList.add('js-enabled');

    var chips = root.querySelectorAll('[data-cat]');
    var items = root.querySelectorAll('.mat-item');

    function filter(cat) {
        items.forEach(function (it) {
            var f = it.getAttribute('data-for').split(' ');
            var show = f.indexOf(cat) !== -1 || (cat !== 'general' && f.indexOf('general') !== -1);
            it.style.display = show ? '' : 'none';
        });
        root.querySelectorAll('.mat-section').forEach(function (sec) {
            var kind = sec.getAttribute('data-section');
            var anyVisible = Array.from(root.querySelectorAll('.mat-item[data-kind="' + kind + '"]'))
                .some(function (it) { return it.style.display !== 'none'; });
            sec.style.display = anyVisible ? '' : 'none';
        });
    }

    chips.forEach(function (c) {
        c.addEventListener('click', function () {
            chips.forEach(function (x) { x.classList.remove('is-active'); });
            c.classList.add('is-active');
            filter(c.getAttribute('data-cat'));
        });
    });

    root.querySelectorAll('[data-mat-toggle]').forEach(function (h) {
        h.addEventListener('click', function () {
            var item = h.closest('.mat-item');
            var open = item.classList.toggle('is-open');
            h.setAttribute('aria-expanded', open ? 'true' : 'false');
        });
    });

    var urlTipo = new URLSearchParams(window.location.search).get('tipo');
    if (urlTipo) {
        var tipoChip = root.querySelector('[data-cat="' + urlTipo + '"]');
        if (tipoChip) {
            chips.forEach(function (x) { x.classList.remove('is-active'); });
            tipoChip.classList.add('is-active');
        }
    }

    var active = root.querySelector('[data-cat].is-active') || chips[0];
    if (active) filter(active.getAttribute('data-cat'));
})();
</script>
@endpush

@endsection