@extends('layouts.app')

@section('title', 'Laboratorio')

@section('content')

<style>
    .lab-card {
        background:#fff; border:1px solid #ece2d4; border-radius:14px; padding:14px 16px; height:100%;
        display:flex; flex-direction:column; gap:4px;
    }
    .lab-name { font-weight:600; }
    .lab-desc { color:#8a7a66; font-size:0.83rem; }
    .lab-foot { margin-top:auto; padding-top:8px; }

    /* Teaser card for upcoming / premium features */
    .lab-teaser { border-style:dashed; background:linear-gradient(135deg,var(--gold-050,#fdf6e7),#fff); }
    .lab-rot { font-weight:700; color:var(--gold-700,#9a6b12); transition:opacity .35s ease; min-height:1.25em; }
    .lab-rot.is-fading { opacity:0; }
</style>

<div class="page-title">Laboratorio</div>
<p class="page-subtitle">Herramientas y aprendizaje para afinar tus fermentos. Iremos activándolas poco a poco.</p>

@php
    [$readyCalcs, $comingCalcs]   = collect($calculators)->partition(fn ($t) => !empty($t['route']));
    [$readySecs,  $comingSecs]    = collect($sections)->partition(fn ($s) => !empty($s['route']));
@endphp

{{-- Calculadoras --}}
<div class="card-title mt-2">Calculadoras</div>
<div class="row g-3 mb-4">
    @foreach($readyCalcs as $tool)
        <div class="col-12 col-md-6 col-lg-4">
            <a href="{{ $tool['route'] }}" class="lab-card text-decoration-none" style="color:inherit;">
                <div class="d-flex justify-content-between align-items-start">
                    <span class="lab-name">{{ $tool['name'] }}</span>
                    @if($tool['premium'])<span class="fermenty-badge badge-premium" style="font-size:0.66rem;">Premium</span>@endif
                </div>
                <div class="lab-desc">{{ $tool['desc'] }}</div>
                <div class="lab-foot"><span class="btn-back">Abrir →</span></div>
            </a>
        </div>
    @endforeach

    @if($comingCalcs->isNotEmpty())
        <div class="col-12 col-md-6 col-lg-4">
            <div class="lab-card lab-teaser">
                <div class="d-flex justify-content-between align-items-start">
                    <span class="lab-name">Más calculadoras</span>
                    <span class="fermenty-badge badge-premium" style="font-size:0.66rem;">Premium</span>
                </div>
                <div class="lab-desc">En preparación:</div>
                <div class="lab-rot" data-rotate='@json($comingCalcs->pluck('name')->values())'>{{ $comingCalcs->first()['name'] }}</div>
                <div class="lab-foot"><a href="{{ route('suscripcion.show') }}" class="btn-back">Ver Pro →</a></div>
            </div>
        </div>
    @endif
</div>

{{-- Aprendizaje y soporte --}}
<div class="card-title">Aprendizaje y soporte</div>
<div class="row g-3 mb-4">
    @foreach($readySecs as $sec)
        <div class="col-12 col-md-6 col-lg-3">
            <a href="{{ $sec['route'] }}" class="lab-card text-decoration-none" style="color:inherit;">
                <div class="d-flex justify-content-between align-items-start">
                    <span class="lab-name">{{ $sec['name'] }}</span>
                    @if($sec['premium'])<span class="fermenty-badge badge-premium" style="font-size:0.66rem;">Premium</span>@endif
                </div>
                <div class="lab-desc">{{ $sec['desc'] }}</div>
                <div class="lab-foot"><span class="btn-back">Abrir →</span></div>
            </a>
        </div>
    @endforeach

    @if($comingSecs->isNotEmpty())
        <div class="col-12 col-md-6 col-lg-3">
            <div class="lab-card lab-teaser">
                <div class="d-flex justify-content-between align-items-start">
                    <span class="lab-name">Más recursos</span>
                    <span class="fermenty-badge badge-premium" style="font-size:0.66rem;">Premium</span>
                </div>
                <div class="lab-desc">En preparación:</div>
                <div class="lab-rot" data-rotate='@json($comingSecs->pluck('name')->values())'>{{ $comingSecs->first()['name'] }}</div>
                <div class="lab-foot"><a href="{{ route('suscripcion.show') }}" class="btn-back">Ver Pro →</a></div>
            </div>
        </div>
    @endif
</div>

@unless($isPremium)
    <div class="fermenty-card text-center">
        <div class="card-title mb-1">Desbloquea todo el Laboratorio</div>
        <p class="text-muted mb-3" style="font-size:0.9rem;">Calculadoras avanzadas, cursos y el asistente 101 con Premium.</p>
        <a href="{{ route('suscripcion.show') }}" class="btn btn-fermenty-primary">Ver Pro</a>
    </div>
@endunless

@push('scripts')
<script>
(function () {
    document.querySelectorAll('[data-rotate]').forEach(function (el) {
        var list;
        try { list = JSON.parse(el.getAttribute('data-rotate')); } catch (e) { list = []; }
        if (!Array.isArray(list) || list.length < 2) return;

        var i = 0;
        setInterval(function () {
            el.classList.add('is-fading');
            setTimeout(function () {
                i = (i + 1) % list.length;
                el.textContent = list[i];
                el.classList.remove('is-fading');
            }, 350);
        }, 2400);
    });
})();
</script>
@endpush

@endsection