@extends('layouts.app')

@section('title', 'Resultado de búsqueda')

@section('content')
<div class="container">
    <h1>Resultado de búsqueda</h1>

    @if($error)
        <div class="alert alert-error" style="font-size:1rem; white-space:pre-wrap;">
            <strong>Error al conectar con Shopify o al buscar:</strong><br><br>
            {{ $error }}
        </div>
    @else
        <p class="alert alert-success">
            <strong>Conectado.</strong> Encontrados: {{ count($products) }} productos.
            @if($query)
                Búsqueda: «{{ $query }}»
            @endif
        </p>
        @if(count($products) > 0)
            <ul style="list-style:none; padding:0;">
                @foreach($products as $p)
                    <li style="padding:0.5rem 0; border-bottom:1px solid #eee; display:flex; align-items:center; gap:0.5rem;">
                        @if($p['image_url'] ?? null)
                            <img src="{{ $p['image_url'] }}" alt="" style="width:40px; height:40px; object-fit:cover; border-radius:4px;">
                        @else
                            <span style="width:40px; color:#9ca3af;">—</span>
                        @endif
                        <span>{{ $p['title'] ?? 'Product' }}</span>
                        <span style="font-size:0.85rem; color:#6b7280;">({{ count($p['variants'] ?? []) }} variantes)</span>
                    </li>
                @endforeach
            </ul>
        @endif
    @endif

    <p style="margin-top:1.5rem;">
        <a href="{{ route('deals.index') }}" class="btn btn-primary">Volver a Deals y buscar de nuevo</a>
    </p>
</div>
@endsection