{{--
    Vista BY-AXIS — mesa de trabajo cross-product, 1 eje a la vez.

    Cada eje renderiza columnas distintas con acciones inline contextuales.
    Es donde se sienta el owner del rol (designer / copywriter / dev) a trabajar.
--}}
@push('styles')
<style>
    .axis-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
    .axis-tab {
        padding: 10px 18px; border-radius: 10px;
        background: #f3f4f6; color: #4b5563;
        font-size: 13px; font-weight: 600;
        text-decoration: none;
        border: 2px solid transparent;
        transition: all 120ms;
    }
    .axis-tab:hover { background: #e5e7eb; color: #111827; }
    .axis-tab.active {
        background: #fff; color: #111827;
        border-color: #1f2937;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .axis-table { font-size: 12px; border-collapse: separate; border-spacing: 0; width: 100%; }
    .axis-table thead th {
        background: #f9fafb; padding: 12px 10px;
        font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
        color: #6b7280; font-weight: 700;
        border-bottom: 2px solid #e5e7eb;
        white-space: nowrap;
    }
    .axis-table tbody td { padding: 10px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
    .axis-table tbody tr:hover { background: #fafafa; }
    .axis-table tbody tr:last-child td { border-bottom: none; }

    .axis-pct { display: inline-block; min-width: 44px; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; text-align: center; }
    .axis-pct.full { background: #d1fae5; color: #059669; }
    .axis-pct.partial { background: #fef3c7; color: #b45309; }
    .axis-pct.empty { background: #fef2f2; color: #b91c1c; }

    .field-state { font-size: 18px; line-height: 1; }
    .field-state.ok { color: #10b981; }
    .field-state.miss { color: #ef4444; }
    .field-state.muted { color: #d1d5db; }

    .product-name-cell .slug { font-family: ui-monospace, monospace; font-size: 10px; color: #6b7280; }
    .product-name-cell .name { font-weight: 600; font-size: 13px; color: #111827; }

    .upload-mini {
        display: inline-block;
        font-size: 10px; padding: 2px 6px;
        background: #1f2937; color: #fff; border-radius: 4px;
        cursor: pointer; line-height: 1.3;
    }
    .upload-mini:hover { background: #111827; }
    .upload-mini input { display: none; }

    .thumb-mini { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; vertical-align: middle; }
    .thumb-placeholder { width: 28px; height: 28px; background: #f3f4f6; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }

    .cmd-snippet { font-family: ui-monospace, monospace; font-size: 10px; color: #6b7280; padding: 2px 6px; background: #f9fafb; border-radius: 3px; }
</style>
@endpush

@php
    $currentAxis = $data['axis'];
    $axisUrl = fn($a) => route('reseller.factory.index', ['view' => 'by-axis', 'axis' => $a]);
    $axesMeta = [
        'tecnico'   => ['label' => '⚙️ Técnico',   'desc' => 'cert score, paridad vista↔schema↔admin↔json'],
        'comercial' => ['label' => '💬 Comercial', 'desc' => 'copy del marketplace (tagline, persona, value props, etc)'],
        'visual'    => ['label' => '🖼️ Visual',    'desc' => 'imagen catálogo + assets de landing'],
        'seeds'     => ['label' => '📝 Seeds',     'desc' => 'JSON de contenido por módulo del core'],
    ];
@endphp

<div class="d-flex justify-content-between align-items-center mb-2">
    <div>
        <h5 class="fw-bold mb-1">Mesa de trabajo · {{ $axesMeta[$currentAxis]['label'] }}</h5>
        <p class="text-muted fs-8 mb-0">{{ $axesMeta[$currentAxis]['desc'] }} · ordenado por % asc (los más críticos arriba)</p>
    </div>
</div>

{{-- Tabs de ejes --}}
<div class="axis-tabs">
    @foreach($axesMeta as $key => $meta)
        <a href="{{ $axisUrl($key) }}" class="axis-tab {{ $currentAxis === $key ? 'active' : '' }}">
            {{ $meta['label'] }}
        </a>
    @endforeach
</div>

<div class="card shadow-sm" style="border-radius: 10px;">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="axis-table">

                {{-- ════════ EJE TÉCNICO ════════ --}}
                @if($currentAxis === 'tecnico')
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th class="text-center">Cert</th>
                            <th class="text-center">Críticos</th>
                            <th class="text-center">Dry-run</th>
                            <th class="text-center">Real</th>
                            <th>Última cert</th>
                            <th>Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data['rows'] as $row)
                            @php
                                $cls = $row['cert_score'] === 100 ? 'full' : ($row['cert_score'] >= 80 ? 'partial' : 'empty');
                            @endphp
                            <tr>
                                <td class="product-name-cell">
                                    <a href="{{ route('reseller.factory.product.show', $row['core_slug']) }}" class="text-decoration-none">
                                        <div class="name">{{ $row['name'] }}</div>
                                        <span class="slug">{{ $row['slug'] }}</span>
                                    </a>
                                </td>
                                <td class="text-center">
                                    <span class="axis-pct {{ $cls }}">{{ $row['cert_score'] ?? '—' }}{{ $row['cert_score'] !== null ? '/100' : '' }}</span>
                                </td>
                                <td class="text-center">
                                    @if($row['cert_critical'] > 0)
                                        <span class="field-state miss">⚠ {{ $row['cert_critical'] }}</span>
                                    @else
                                        <span class="field-state ok">✓</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($row['dryrun_pass'])<span class="field-state ok">✓</span>@else<span class="field-state muted">○</span>@endif
                                </td>
                                <td class="text-center">
                                    @if($row['real_pass'])<span class="field-state ok">✓</span>@else<span class="field-state muted">○</span>@endif
                                </td>
                                <td class="text-muted fs-9">{{ $row['cert_at'] ? \Carbon\Carbon::parse($row['cert_at'])->diffForHumans() : '—' }}</td>
                                <td><code class="cmd-snippet">{{ $row['cmd_recert'] }}</code></td>
                            </tr>
                        @endforeach
                    </tbody>

                {{-- ════════ EJE COMERCIAL ════════ --}}
                @elseif($currentAxis === 'comercial')
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th class="text-center">%</th>
                            <th class="text-center" title="Tagline">tagline</th>
                            <th class="text-center" title="Target persona">persona</th>
                            <th class="text-center" title="Pain points">pain</th>
                            <th class="text-center" title="Value props">value</th>
                            <th class="text-center" title="CTA primario">cta</th>
                            <th class="text-center" title="Keywords SEO">keywords</th>
                            <th>Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data['rows'] as $row)
                            @php
                                $cls = $row['pct'] >= 100 ? 'full' : ($row['pct'] >= 50 ? 'partial' : 'empty');
                            @endphp
                            <tr>
                                <td class="product-name-cell">
                                    <a href="{{ route('reseller.factory.product.show', $row['core_slug']) }}" class="text-decoration-none">
                                        <div class="name">{{ $row['name'] }}</div>
                                        <span class="slug">{{ $row['slug'] }}</span>
                                    </a>
                                </td>
                                <td class="text-center"><span class="axis-pct {{ $cls }}">{{ $row['pct'] }}%</span></td>
                                @foreach(['tagline','target_persona','pain_points','value_props','cta_primary','keywords'] as $f)
                                    <td class="text-center">
                                        @if($row['fields'][$f]['filled'])
                                            <span class="field-state ok" title="{{ $row['fields'][$f]['len'] }} chars">✓</span>
                                        @else
                                            <span class="field-state miss">✗</span>
                                        @endif
                                    </td>
                                @endforeach
                                <td>
                                    <a href="{{ $row['admin_edit_url'] }}" target="_blank" class="btn btn-sm btn-light">
                                        <i class="fas fa-pen me-1"></i>Editar
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>

                {{-- ════════ EJE VISUAL ════════ --}}
                @elseif($currentAxis === 'visual')
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th class="text-center">%</th>
                            <th class="text-center">Catálogo<br><small class="text-muted">(/products-catalogue)</small></th>
                            <th class="text-center">Card</th>
                            <th class="text-center">Hero</th>
                            <th class="text-center">Parallax</th>
                            <th class="text-center">Grid 1·2·3</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data['rows'] as $row)
                            @php
                                $cls = $row['pct'] >= 80 ? 'full' : ($row['pct'] >= 30 ? 'partial' : 'empty');
                            @endphp
                            <tr>
                                <td class="product-name-cell">
                                    <a href="{{ route('reseller.factory.product.show', $row['core_slug']) }}" class="text-decoration-none">
                                        <div class="name">{{ $row['name'] }}</div>
                                        <span class="slug">{{ $row['slug'] }}</span>
                                    </a>
                                </td>
                                <td class="text-center"><span class="axis-pct {{ $cls }}">{{ $row['pct'] }}%</span></td>

                                {{-- Catalog image --}}
                                <td class="text-center">
                                    @if($row['first_catalog'])
                                        <img src="{{ $row['first_catalog'] }}" class="thumb-mini" title="{{ $row['catalog_image_count'] }} en catálogo">
                                    @else
                                        <div class="thumb-placeholder"><i class="fas fa-image text-muted fs-9"></i></div>
                                    @endif
                                    <form method="POST" action="{{ route('reseller.factory.product.upload-asset', $row['slug']) }}" enctype="multipart/form-data" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="field" value="catalog_image">
                                        <label class="upload-mini ms-1">
                                            ⬆ <input type="file" name="asset" accept="image/*" onchange="this.form.submit()">
                                        </label>
                                    </form>
                                </td>

                                {{-- Card image --}}
                                <td class="text-center">
                                    @if($row['card_image'])
                                        <img src="{{ $row['card_image'] }}" class="thumb-mini">
                                    @else
                                        <div class="thumb-placeholder"><i class="fas fa-image text-muted fs-9"></i></div>
                                    @endif
                                    <form method="POST" action="{{ route('reseller.factory.product.upload-asset', $row['slug']) }}" enctype="multipart/form-data" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="field" value="card_image">
                                        <label class="upload-mini ms-1">
                                            ⬆ <input type="file" name="asset" accept="image/*" onchange="this.form.submit()">
                                        </label>
                                    </form>
                                </td>

                                {{-- Hero --}}
                                <td class="text-center">
                                    @if($row['hero_poster'])
                                        <img src="{{ $row['hero_poster'] }}" class="thumb-mini">
                                    @else
                                        <div class="thumb-placeholder"><i class="fas fa-image text-muted fs-9"></i></div>
                                    @endif
                                    <form method="POST" action="{{ route('reseller.factory.product.upload-asset', $row['slug']) }}" enctype="multipart/form-data" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="field" value="hero_poster">
                                        <label class="upload-mini ms-1">
                                            ⬆ <input type="file" name="asset" accept="image/*" onchange="this.form.submit()">
                                        </label>
                                    </form>
                                </td>

                                {{-- Parallax --}}
                                <td class="text-center">
                                    @if($row['parallax_image'])
                                        <img src="{{ $row['parallax_image'] }}" class="thumb-mini">
                                    @else
                                        <div class="thumb-placeholder"><i class="fas fa-image text-muted fs-9"></i></div>
                                    @endif
                                    <form method="POST" action="{{ route('reseller.factory.product.upload-asset', $row['slug']) }}" enctype="multipart/form-data" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="field" value="parallax_image">
                                        <label class="upload-mini ms-1">
                                            ⬆ <input type="file" name="asset" accept="image/*" onchange="this.form.submit()">
                                        </label>
                                    </form>
                                </td>

                                {{-- Grid 1·2·3 --}}
                                <td class="text-center">
                                    @foreach(['grid_image_1','grid_image_2','grid_image_3'] as $g)
                                        @if($row[$g])
                                            <i class="fas fa-circle-check text-success fs-8 me-1"></i>
                                        @else
                                            <i class="far fa-circle text-muted fs-8 me-1"></i>
                                        @endif
                                    @endforeach
                                </td>
                            </tr>
                        @endforeach
                    </tbody>

                {{-- ════════ EJE SEEDS ════════ --}}
                @elseif($currentAxis === 'seeds')
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th class="text-center">%</th>
                            <th>Seeds por módulo del core</th>
                            <th>Faltantes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data['rows'] as $row)
                            @php
                                $cls = $row['pct'] >= 100 ? 'full' : ($row['pct'] >= 60 ? 'partial' : 'empty');
                                $missing = collect($row['seeds'])->filter(fn($s) => !$s['exists'])->keys()->all();
                            @endphp
                            <tr>
                                <td class="product-name-cell">
                                    <a href="{{ route('reseller.factory.product.show', $row['core_slug']) }}" class="text-decoration-none">
                                        <div class="name">{{ $row['name'] }}</div>
                                        <span class="slug">{{ $row['slug'] }}</span>
                                    </a>
                                </td>
                                <td class="text-center"><span class="axis-pct {{ $cls }}">{{ $row['pct'] }}%</span></td>
                                <td>
                                    @foreach($row['seeds'] as $mod => $info)
                                        @if($info['exists'])
                                            <span class="badge bg-light-success text-success fs-9" title="{{ $info['size'] }} bytes">
                                                ✓ {{ $mod }}
                                            </span>
                                        @else
                                            <span class="badge bg-light-danger text-danger fs-9" title="{{ $info['path'] }}">
                                                ✗ {{ $mod }}
                                            </span>
                                        @endif
                                    @endforeach
                                </td>
                                <td>
                                    @if(count($missing) > 0)
                                        <div class="fs-9 text-muted">
                                            Crear: {{ count($missing) }} seed(s) en
                                            <code class="cmd-snippet">database/seeders/products/core/seeds/</code>
                                        </div>
                                        @foreach($missing as $m)
                                            <code class="cmd-snippet d-block mt-1">{{ $m }}-{{ $row['core_slug'] }}.json</code>
                                        @endforeach
                                    @else
                                        <span class="text-success fs-8"><i class="fas fa-check-double"></i> completo</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                @endif

            </table>
        </div>
    </div>
</div>

<div class="alert alert-info border-info py-2 mt-3 fs-8" style="border-radius: 10px;">
    <i class="fas fa-info-circle me-1"></i>
    <strong>Mesa de trabajo por rol.</strong>
    @if($currentAxis === 'visual')
        Designer: subí imágenes directamente desde cualquier celda. Click ⬆ + seleccioná archivo.
    @elseif($currentAxis === 'comercial')
        Copywriter: click "Editar" para abrir el row de products y completar los campos faltantes (✗).
    @elseif($currentAxis === 'tecnico')
        Dev: si el cert score es &lt; 100, copiá el comando y corré <code>--verbose-details</code> para ver qué falla.
    @elseif($currentAxis === 'seeds')
        Dev: cada seed faltante es un JSON nuevo en <code>database/seeders/products/core/seeds/</code>.
    @endif
</div>