@extends('layouts.app')

@section('title', 'Panel Comercio · Mis productos')

@section('content')
<div class="container py-4" style="max-width: 1100px;">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <div>
            <h1 class="h4 mb-1 fw-bold">Mis productos</h1>
            <div class="text-muted">
                {{ $profile->brand_name ?? 'Mi comercio' }} · Administra lo que se muestra en la home.
            </div>
        </div>

        <a href="{{ route('comercio.productos.create') }}" class="btn btn-primary">
            + Nuevo producto
        </a>
    </div>

    @include('comercio.partials.alerts')
    @include('comercio.partials.nav')

    @if($products->count() === 0)
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                <div class="fw-semibold mb-1">Aún no tienes productos</div>
                <div class="text-muted mb-3">Crea tu primer producto para que aparezca en el welcome.</div>
                <a href="{{ route('comercio.productos.create') }}" class="btn btn-outline-primary">
                    Crear producto
                </a>
            </div>
        </div>
    @else
        <div class="row g-3">
            @foreach($products as $p)
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
                        <div class="ratio ratio-4x3 bg-light">
                            <img
                                src="{{ $p->image_path ? asset($p->image_path) : asset('images/placeholder-producto.jpg') }}"
                                alt="{{ $p->name }}"
                                style="width:100%;height:100%;object-fit:cover;"
                            >
                        </div>

                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
                                <div>
                                    <div class="small text-muted">
                                        @if($p->category) {{ $p->category }} @else Sin categoría @endif
                                        ·
                                        @if($p->is_active)
                                            <span class="badge text-bg-success">Activo</span>
                                        @else
                                            <span class="badge text-bg-secondary">Oculto</span>
                                        @endif
                                    </div>
                                    <div class="fw-bold">{{ $p->name }}</div>
                                </div>

                                <div class="text-end">
                                    @if(!is_null($p->price))
                                        <div class="fw-bold">
                                            ${{ number_format($p->price, 0, ',', '.') }}
                                        </div>
                                        <div class="small text-muted">CLP</div>
                                    @else
                                        <div class="text-muted small">Precio a convenir</div>
                                    @endif
                                </div>
                            </div>

                            <div class="text-muted small" style="min-height: 40px;">
                                {{ \Illuminate\Support\Str::limit($p->description, 90) }}
                            </div>

                            <div class="d-flex gap-2 mt-3">
                                <a href="{{ route('comercio.productos.edit', $p->id) }}" class="btn btn-sm btn-outline-primary">
                                    Editar
                                </a>

                                <form method="POST" action="{{ route('comercio.productos.destroy', $p) }}"
                                      onsubmit="return confirm('¿Eliminar este producto?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger">
                                        Eliminar
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-4">
            {{ $products->links() }}
        </div>
    @endif
</div>
@endsection