<?php
use Livewire\Component;
use App\Models\Product;
?>

<div class="min-h-screen py-8 bg-base-200/50">

    {{-- Alert de bienvenue --}}
    @if (session('registered'))
        <div class="max-w-7xl mx-auto px-4 mb-8">
            <x-alert
                title="{!! session('registered') !!}"
                icon="o-rocket-launch"
                class="alert-info shadow-lg"
                dismissible
            />
        </div>
    @endif

    {{-- Présentation du shop (provenant de View::share) --}}
    @if(isset($shop) && $shop->home)
        <section class="max-w-4xl mx-auto px-4 mb-12">
            <x-card class="shadow-xl bg-base-100">
                <div class="max-w-none text-base-content">
                    {!! $shop->home !!}
                </div>
            </x-card>
        </section>
    @endif

    {{-- Produits --}}
    <section id="products" class="max-w-6xl mx-auto px-4 mb-16">
        <h2 class="text-3xl font-extrabold text-center mb-10 tracking-tight">
            @lang('Nos produits')
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse ($products as $product)
                <x-card class="shadow-xl bg-base-100 hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 group p-0 overflow-hidden">

                    {{-- Image & Badges --}}
                    <x-slot:figure class="relative aspect-square bg-base-200/50 overflow-hidden">
                        @if($product->image)
                            <a href="/" class="w-full h-full block">
                                <img
                                    src="{{ asset('storage/photos/' . $product->image) }}"
                                    alt="{{ $product->name }}"
                                    class="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
                                    loading="lazy"
                                />
                            </a>
                        @else
                            <div class="flex items-center justify-center w-full h-full text-base-content/20">
                                <x-icon name="o-photo" class="w-20 h-20" />
                            </div>
                        @endif

                        {{-- Badges de stock --}}
                        @if(!$product->quantity)
                            <div class="absolute top-3 right-3">
                                <x-badge value="{{ __('Rupture de stock') }}" class="badge-error text-white font-bold border-none" />
                            </div>
                        @elseif($product->quantity < 5)
                            <div class="absolute top-3 right-3">
                                <x-badge value="{{ __('Derniers articles') }}" class="badge-warning text-white font-bold border-none" />
                            </div>
                        @endif
                    </x-slot:figure>

                    {{-- Informations produit --}}
                    <div class="flex flex-col h-full p-6">
                        <h3 class="text-xl font-bold text-base-content truncate" title="{{ $product->name }}">
                            {{ $product->name }}
                        </h3>

                        @if($product->description)
                            <p class="mt-2 text-sm text-base-content/70 line-clamp-2">
                                {{ Str::limit($product->description, 150) }}
                            </p>
                        @endif

                        <div class="flex items-center justify-between mt-auto pt-6">
                            <div class="flex flex-col">
                                <span class="text-2xl font-black text-primary">
                                    {{ number_format($product->price, 2, ',', ' ') }} €
                                </span>
                                <span class="text-xs font-semibold text-base-content/50 uppercase">TTC</span>
                            </div>

                            @if($product->quantity)
                                <x-button
                                    link="/"
                                    label="{{ __('Voir') }}"
                                    icon="o-eye"
                                    class="btn-primary btn-sm"
                                />
                            @else
                                <x-button
                                    label="{{ __('Indisponible') }}"
                                    class="btn-disabled btn-sm"
                                    disabled
                                />
                            @endif
                        </div>
                    </div>
                </x-card>
            @empty
                <div class="col-span-full py-20 text-center">
                    <x-icon name="o-archive-box-x-mark" class="w-24 h-24 mx-auto text-base-content/20 mb-4" />
                    <p class="text-xl font-semibold text-base-content/60">@lang('Aucun produit disponible pour le moment.')</p>
                </div>
            @endforelse
        </div>
    </section>

    {{-- Informations supplémentaires --}}
    @if(isset($shop))
        <section class="max-w-4xl mx-auto px-4 pb-8">
            <x-card class="shadow-xl bg-base-100 p-0 overflow-hidden">
                <x-accordion class="divide-y divide-base-200">

                    <x-collapse name="info1" class="px-2">
                        <x-slot:heading class="text-lg font-bold">
                            <div class="flex items-center gap-3">
                                <x-icon name="o-information-circle" class="w-6 h-6 text-primary" />
                                @lang('Informations générales')
                            </div>
                        </x-slot:heading>
                        <x-slot:content class="max-w-none text-base-content/80 mt-2">
                            {!! $shop->home_infos !!}
                        </x-slot:content>
                    </x-collapse>

                    <x-collapse name="info2" class="px-2">
                        <x-slot:heading class="text-lg font-bold">
                            <div class="flex items-center gap-3">
                                <x-icon name="o-truck" class="w-6 h-6 text-primary" />
                                @lang('Frais de livraison')
                            </div>
                        </x-slot:heading>
                        <x-slot:content class="max-w-none text-base-content/80 mt-2">
                            {!! $shop->home_shipping !!}
                        </x-slot:content>
                    </x-collapse>

                </x-accordion>
            </x-card>
        </section>
    @endif
</div>