@extends('layouts.blesser.app')

@section('content')

<div class="container pb-28 pt-6 lg:pb-10">

    <div class="grid grid-cols-12 gap-2 lg:gap-6">
        <div class="col-span-12 lg:col-span-8">
            <div class="rounded-lg bg-muted shadow">
                <div>
                    @if (session('success'))
                    <x-blesser.ui.alert type="success" title="{{ __('Products added to cart successfully') }}" icon="i-lucide-check-circle">
                        <div>{{ session('success') }}</div>
                    </x-blesser.ui.alert>
                    @endif
                    @if (session('error'))
                    <x-blesser.ui.alert type="error" title="{{ __('Error') }}" icon="i-lucide-alert-triangle">
                        <div>{{ session('error') }}</div>
                    </x-blesser.ui.alert>
                    @endif
                </div>
                @if($group->products->isEmpty())
                <div class="flex items-center justify-center py-10">
                    <div class="flex flex-col items-center justify-center gap-4">
                        <div class="i-lucide-package-x w-12 h-12"></div>
                        <div>
                            {{ __('your cart is empty') }}
                        </div>
                    </div>
                </div>
                @else
                <ul class="divide-y">
                    @foreach($group->products as $product)
                    <li>
                        <div class="px-4 py-4 sm:py-6 relative">
                            <div class="grid grid-cols-2 items-center justify-start gap-2 xs:grid-cols-3 xs:gap-6 sm:grid-cols-4 xl:grid-cols-6">
                                <div class="relative row-span-2 min-w-fit xs:mx-auto">
                                    <a href="{{ route('product.details', $product->slug) }}">
                                        <img src="{{ $product->brand_img }}" alt="{{ $product->title }}" class="h-25 w-25 rounded-lg object-cover sm:h-28 sm:w-28">
                                    </a>
                                </div>
                                <div class="row-span-2 space-y-4 xs:col-span-2 sm:col-span-3 xl:col-span-5">
                                    <a href="{{ route('product.details', $product->slug) }}" class="line-clamp-2 text-sm xs:text-base">{{ $product->title }}</a>
                                    <div class="space-y-2 text-text/95">
                                    </div>
                                </div>
                                <div class="flex items-center gap-x-2 xs:justify-center" style="margin-right: 100px !important;">
                                    <div action="" method="POST" class="flex items-center">
                                        @csrf
                                        <div class="flex h-10 w-24 items-center justify-between rounded-lg border px-2 py-1">
                                            <button name="quantity" value="{{ 1 }}" type="submit" class="text-success disabled:text-text/60">
                                                <div class="i-lucide-plus size-6"></div>
                                            </button>
                                            <div class="flex h-5 w-full grow select-none items-center justify-center bg-transparent text-center text-sm text-text outline-none">
                                                {{ $product->pivot->quantity }}
                                            </div>
                                            <button name="quantity" value="{{ 1 }}" type="submit" class="text-warning disabled:text-text/60">
                                                <div class="i-lucide-minus size-6"></div>
                                            </button>
                                        </div>
                                        </d>
                                    </div>
                                    <div class="flex items-center gap-2 text-primary xs:col-span-2 sm:col-span-3 lg:text-lg xl:col-span-5">
                                        <span class="font-bold">{{ number_format($product->price * $product->pivot->quantity) }}</span><span class="text-sm lg:text-base">
                                            {{ getCurrency() }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <span class="absolute end-1 top-1 m-3 px-3 py-1 {{ $product->consumable ? "bg-[#10A3C41A] text-[#10A3C4]  rounded-lg" : "text-[#FF8C00] bg-[#FF8C001A] rounded-lg" }}">
                                {{ $product->consumable ? __('consumable product') : __('Equipment') }}
                            </span>
                        </div>
                    </li>
                    @endforeach
                </ul>
                @endif
            </div>
        </div>
        <div class="lg:col-span-4">
            <div class="hidden rounded-lg bg-muted p-4 shadow lg:block">
                <form action="{{ route('office-equipment.products.add-to-cart' , $group->id) }}" method="post">
                    @csrf
                    <div class="max-w-md mx-auto space-y-4" dir="rtl">
                        <!-- Card 1 -->
                        <button name="action" value="all" class="w-full cursor-pointer text-start p-4 bg-[#49754C1A] rounded-lg">
                            <h3 class="text font-medium text-[#49754C]">خرید همه بخش‌ها</h3>
                            <p class="mt-1 text-lg font-black text-gray-900 dark:text-white ">
                                @if ($group->products->isNotEmpty())
                                {{ number_format($group->products->reduce(function ( $carry, $item) {
                                    return $carry + $item->price * $item->pivot->quantity;
                                })) }}
                                @endif

                                {{ getCurrency() }}
                            </p>
                        </button>

                        <!-- Card 2 -->
                        <button name="action" value="equipment" class="w-full cursor-pointer text-start p-4 bg-[#FF8C001A] rounded-lg">
                            <h3 class="text font-medium text-[#FF8C00]">خرید تجهیزات</h3>
                            @php
                            $equipmentPrice = $group->products->groupBy('consumable')->get("0" , collect([]))->reduce(function ( $carry, $item) {
                            return $carry + $item->price * $item->pivot->quantity;
                            });
                            @endphp
                            <p class="mt-1 text-lg font-black text-gray-900 dark:text-white ">
                                {{ number_format($equipmentPrice) }}
                                {{ getCurrency() }}
                            </p>
                        </button>

                        <!-- Card 3 -->
                        <button name="action" value="consumable" class="w-full cursor-pointer text-start p-4 bg-[#10A3C41A] rounded-lg">
                            <h3 class="text font-medium text-[#10A3C4]">خرید کالاهای مصرفی</h3>
                            @php

                            $consumablePrice = $group->products->groupBy('consumable')->get("1" , collect([]))->reduce(function ( $carry, $item) {
                            return $carry + $item->price * $item->pivot->quantity;
                            });
                            @endphp
                            <p class="mt-1 text-lg font-black text-gray-900 dark:text-white ">
                                {{ number_format($consumablePrice) }}
                                {{ getCurrency() }}
                            </p>
                        </button>
                    </div>
                </form>

                @if (false)

                <div class="mb-2 divide-y">
                    <div class="flex items-center justify-between gap-x-2 py-6">
                        <div class="text-sm text-text/95 lg:text-base">
                            {{ __('total price') }}
                            ({{ $items->count() }})
                        </div>
                        <div class="flex items-center gap-1 text-sm lg:text-base">
                            <div class="font-bold">{{ number_format($total) }}</div>
                            <div class="text-xs lg:text-sm">
                                {{ getCurrency() }}
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between gap-x-2 py-6">
                        <div class="text-sm text-text/95 lg:text-base">
                            {{ __('discount') }}
                        </div>
                        <div class="flex items-center gap-1 text-sm font-medium text-warning lg:text-base">
                            <div class="font-bold">{{ number_format($items->sum(fn($i) => $i->discount * $i->quantity)) }}</div>
                            <div class="text-xs lg:text-sm">تومان</div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between gap-x-2 py-6">
                        <div class="text-sm text-text/95 lg:text-base">
                            {{ __('total price after discount') }}
                        </div>
                        <div class="flex items-center gap-1 text-sm text-primary lg:text-base">
                            <div class="font-bold">{{ number_format($items->sum(fn($i) => $i->price * $i->quantity)) }}</div>
                            <div class="text-xs lg:text-sm">
                                {{ getCurrency() }}
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <a href="{{ route('cart.delivery-type') }}" class="inline-flex h-11 w-full items-center justify-center gap-x-2 whitespace-nowrap rounded-md bg-primary-btn px-8 text-sm font-medium text-white ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
                        {{ __('continue')  }}
                    </a>
                </div>
                @endif
            </div>
            <div class="fixed inset-x-0 bottom-0 z-20 rounded-t-xl bg-muted px-4 pb-20 pt-4 transition-all duration-300 lg:hidden" data-onscrollclass="translate-y-1/2">
                <div>
                    <a href="{{ route('cart.delivery-type') }}" class="inline-flex h-10 w-full items-center justify-center gap-x-2 whitespace-nowrap rounded-md bg-primary-btn px-4 py-2 text-sm font-medium text-white ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
                        {{ __('continue')  }}
                        |
                        {{ number_format($group->products->sum('price')) }}
                        <span class="text-xs"> {{ getCurrency() }} </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection