@use('Illuminate\Support\Number')

<div class="mx-auto min-w-[76rem] px-4 my-4">
    <div class="bg-white rounded-md px-4 pb-20 pt-8 sm:px-6 lg:px-8">
        @if(!blank($this->items))
            <h1 class="text-3xl font-semibold tracking-tight text-gray-900">
                Panier ({{ $this->items->sum('quantite') }})
            </h1>
            <div class="mt-8 lg:grid lg:grid-cols-3 lg:items-start lg:gap-x-12 xl:gap-x-16">
                <section aria-labelledby="cart-heading" class="lg:col-span-2">
                    <ul role="list" class="divide-y divide-gray-200 border-b border-t border-gray-200">
                        @forelse($this->items as $item)
                            <li class="flex flex-col">
                                <div class="relative flex items-stretch py-4">
                                    <div class="flex-shrink-0">
                                        <img
                                            src="{{ $item['image_principale'] }}"
                                            alt="{{ $item['description'] }}"
                                            class="size-20 rounded-md object-cover object-center">
                                    </div>

                                    <div class="ml-4 h-full flex-1 flex flex-col justify-between sm:ml-6">
                                        <div class="relative pr-9 sm:grid sm:grid-cols-4 sm:gap-x-6 sm:pr-0">
                                            <div class="sm:col-span-3">
                                                <div class="flex justify-between">
                                                    <h3 class="font-medium text-gray-700 hover:text-gray-800">
                                                        {{ $item['nom'] }}
                                                    </h3>
                                                </div>
                                                <div class="mt-1 flex text-sm">
                                                    <span class="text-gray-500 pr-1.5">Vendeur : </span>
                                                    <p>{{ $item['boutique'] }}</p>
                                                </div>
                                            </div>

                                            <div class="flex flex-col justify-between items-end">
                                                <p class="font-medium text-gray-900 text-lg">
                                                    {{ Number::currency($item['prix_original'], in: 'XAF', locale: 'fr') }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <a href="{{ route('product-details', $item['uuid']) }}"
                                       class="absolute inset-0"
                                       wire:navigate
                                    ></a>
                                </div>

                                <div class="flex items-start justify-between pb-2">
                                    <x-filament::modal
                                        id="delete-item-{{ $item['article_uuid'] }}"
                                        width="xl"
                                        :sticky-header="true"
                                        :sticky-footer="true"
                                        footerActionsAlignment="right"
                                    >
                                        <x-slot name="trigger">
                                            <button type="button"
                                                    class="inline-flex items-center gap-x-1 rounded-md bg-transparent px-2 py-1.5 text-sm font-semibold text-danger-500 hover:text-white hover:bg-danger-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger-600">
                                                <x-filament::icon
                                                    icon="heroicon-o-trash"
                                                    class="-ml-0.5 h-5 w-5"
                                                />
                                                SUPPRIMER
                                            </button>
                                        </x-slot>

                                        <x-slot name="heading">
                <span class="text-xl">
                    Retirer du panier
                </span>
                                        </x-slot>

                                        <x-slot name="description">
                                            Voulez-vous vraiment supprimer cet article du panier?
                                        </x-slot>

                                        <x-slot name="footerActions">
                                            <x-filament::button
                                                color="danger"
                                                wire:click.prevent="removeFromCart('{{ $item['article_uuid'] }}')"
                                            >
                                                Supprimer
                                            </x-filament::button>
                                            <x-filament::button
                                                color="gray"
                                                @click="$dispatch('close-modal', { id: 'delete-item-{{ $item['article_uuid'] }}' })"
                                            >
                                                Annuler
                                            </x-filament::button>
                                        </x-slot>
                                    </x-filament::modal>

                                    <div x-data="{ quantity: @js($item['quantite']) }"
                                         x-modelable="quantity"
                                         class="flex items-center gap-5"
                                    >
                                        {{--                                        <button type="button"--}}
                                        {{--                                                wire:click="decreaseItemQuantity({{ $loop->index }}, false)"--}}
                                        {{--                                                wire:target="decreaseItemQuantity, increaseItemQuantity"--}}
                                        {{--                                                class="rounded bg-gray-400 px-1.5 py-1 text-white shadow-md hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 disabled:cursor-not-allowed disabled:opacity-50"--}}
                                        {{--                                                wire:loading.attr="disabled"--}}
                                        {{--                                                :disabled="quantity <= 1"--}}
                                        {{--                                        >--}}
                                        <x-filament::button
                                            wire:click="decreaseItemQuantity({{ $loop->index }})"
                                            wire:target="decreaseItemQuantity, increaseItemQuantity"
                                            wire:loading.attr="disabled"
                                            wire:loading.class="opacity-50"
                                            :loading-indicator="false"
                                            class="!p-1 disabled:opacity-50"
                                            x-bind:disabled="quantity <= 1"
                                        >
                                            <x-filament::icon
                                                icon="heroicon-m-minus"
                                                class="h-5 w-5"
                                            />
                                        </x-filament::button>
                                        {{--                                        </button>--}}

                                        <span wire:loading.attr.class="sr-only" x-text="quantity"></span>

                                        <x-filament::loading-indicator
                                            wire:loading
                                            wire:target="decreaseItemQuantity, increaseItemQuantity"
                                            class="h-5 w-5 text-gray-500"
                                        />

                                        {{--                                        <button type="button"--}}
                                        {{--                                                wire:click="increaseItemQuantity({{ $loop->index }})"--}}
                                        {{--                                                wire:target="decreaseItemQuantity, increaseItemQuantity"--}}
                                        {{--                                                class="rounded bg-gray-400 px-1.5 py-1 text-white shadow-md hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"--}}
                                        {{--                                                wire:loading.attr="disabled"--}}
                                        {{--                                        >--}}
                                        <x-filament::button
                                            wire:click="increaseItemQuantity({{ $loop->index }})"
                                            wire:target="decreaseItemQuantity, increaseItemQuantity"
                                            wire:loading.attr="disabled"
                                            wire:loading.class="opacity-50"
                                            :loading-indicator="false"
                                            class="!p-1"
                                        >
                                            <x-filament::icon
                                                icon="heroicon-m-plus"
                                                class="h-5 w-5"
                                            />
                                        </x-filament::button>
                                        {{--                                        </button>--}}
                                    </div>
                                </div>
                            </li>
                        @empty
                        @endforelse
                    </ul>
                </section>

                <!-- Résumé du panier -->
                <section aria-labelledby="summary-heading"
                         class="mt-16 rounded-lg bg-gray-50 px-4 py-6 sm:p-6 lg:col-span-1 lg:mt-0 lg:p-8">
                    <h2 id="summary-heading" class="text-lg font- font-medium text-gray-900">
                        Résumé du panier
                    </h2>

                    <dl class="mt-6 space-y-4">
                        <div class="flex items-center justify-between">
                            <dt class="text-sm text-gray-600">Sous total</dt>
                            <dd class="text-sm font-medium text-gray-900">
                                {{ Number::currency($this->getOrderSubTotal(), in: 'XAF', locale: 'fr') }}
                            </dd>
                        </div>
                        <div class="flex items-center justify-between border-t border-gray-200 pt-4">
                            <dt class="flex items-center text-sm text-gray-600">
                                <span>Frais de livraison</span>
                                <a href="#" class="ml-2 flex-shrink-0 text-gray-400 hover:text-gray-500">
                                    <span class="sr-only">Learn more about how shipping is calculated</span>
                                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd"
                                              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM8.94 6.94a.75.75 0 11-1.061-1.061 3 3 0 112.871 5.026v.345a.75.75 0 01-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 108.94 6.94zM10 15a1 1 0 100-2 1 1 0 000 2z"
                                              clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </dt>
                            <dd class="text-sm font-medium text-gray-900">
                                {{ Number::currency($this->fraisLivraison, in: 'XAF', locale: 'fr') }}
                            </dd>
                        </div>
                        <div class="flex items-center justify-between border-t border-gray-200 pt-4">
                            <dt class="flex text-sm text-gray-600">
                                <span>Taxes</span>
                                <a href="#" class="ml-2 flex-shrink-0 text-gray-400 hover:text-gray-500">
                                    <span class="sr-only">Learn more about how tax is calculated</span>
                                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd"
                                              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM8.94 6.94a.75.75 0 11-1.061-1.061 3 3 0 112.871 5.026v.345a.75.75 0 01-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 108.94 6.94zM10 15a1 1 0 100-2 1 1 0 000 2z"
                                              clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </dt>
                            <dd class="text-sm font-medium text-gray-900">
                                {{ Number::currency($this->taxes, in: 'XAF', locale: 'fr') }}
                            </dd>
                        </div>
                        <div class="flex items-center justify-between border-t border-gray-200 pt-4">
                            <dt class="text-base font-medium text-gray-900">Total panier</dt>
                            <dd class="text-base font-medium text-gray-900">
                                {{ Number::currency($this->getOrderTotal(), in: 'XAF', locale: 'fr') }}
                            </dd>
                        </div>
                    </dl>

                    <div class="mt-6">
                        <a
                            type="button"
                            href="{{ route('checkout') }}"
                            wire:navigate
                            class="w-full text-center uppercase rounded-md border border-transparent bg-primary-600 px-4 py-2.5 text-base font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-gray-50"
                        >
                            Commander
                        </a>
                    </div>
                </section>
            </div>
        @else
            <div class="mt-6 flex flex-col items-center gap-y-6">
                <div
                    class="p-4 w-fit flex items-center justify-center rounded-full shadow-inner bg-gray-100">
                    <x-filament::icon
                        icon="heroicon-o-shopping-cart"
                        class="size-16 text-gray-500"
                    />
                </div>
                <p class="font-semibold">Votre panier est vide !</p>

                <p class="text-sm">Parcourez nos catégories et découvrez nos meilleures offres !</p>

                <x-filament::button
                    tag="a"
                    href="{{ route('accueil') }}"
                    size="lg"
                    class="uppercase"
                >
                    Commencer vos achats
                </x-filament::button>
            </div>
        @endif
    </div>
</div>