@extends('layouts.website')
@section('title', 'All Products')
@section('content')
    <x-udo.breadcrumbs />
    <section class="single-product-container lg:flex mb-16 lg:mb-40">
        <div class="product-main-img-container lg:w-[55vw]  mx-20">
            <img src="{{ $product->pictures?->first()?->path }}" alt="non" id="product-main-img"
                class="w-full lg:max-h-[90vw]" />
        </div>
        <x-udo.product-media-files-for-mobile />

        <div class="mx-5 lg:mx-0 me-20 lg:w-[35vw] product-info-container font-light uppercase text-black ">
            <div class="brand-container mb-5 text-lg text-gray-500">
                create2fit
            </div>
            <div class="product-name-container mb-5 text-2xl leading-8 tracking-widest">
                {{ $product->name }}
            </div>
            <div class="product-price-container my-5 text-2xl leading-8 text-gray-500 tracking-widest">
                ₦ <span>{{ number_format($product->price, 2) }} </span>NGN
            </div>

            <div class="size-chart-container">
                <a href="#" class="underline capitalize">
                    <i class="lni lni-ruler-alt"></i>

                    <!-- size guide top drawer init and toggle -->
                    <span class="text-lg lg:text-base" data-drawer-target="drawer-top-for-size-charts"
                        data-drawer-show="drawer-top-for-size-charts" data-drawer-placement="top"
                        aria-controls="drawer-top-for-size-charts"> Size Chart</span>
                </a>
            </div>

            <x-udo.product-media-files-for-pc :product="$product" />

            <div class="product-available-sizes-container mt-10 pt-5 border-t-2 border-gray-400 w-full">
                <div class="size-heading tracking-widest">SIZE:</div>
                <div class="sizes-available mt-3 flex-wrap flex gap-3 ">
                    {{-- use loop to mimic sizes available for this product --}}
                    @foreach ($product->sizes as $item)
                        {{-- ui for when product is in cart --}}
                        @if (($options = getProductInCart($product)?->options) && isset($options['size']))
                            <a href="{{ route('cart-update', ['product' => $product->id, 'size' => $item->name]) }}"
                                @class([
                                    'size-container border border-black w-fit py-2 px-4',
                                    'bg-black text-white' => $options['size'] == $item->name,
                                ])>{{ $item->name }} </a>
                        @else
                            {{-- ui for when product is not in cart --}}

                            <a href="{{ route('cart-update', ['product' => $product->id, 'size' => $item->name]) }}"
                                @class(['size-container border border-black w-fit py-2 px-4'])>{{ $item->name }} </a>
                        @endif
                    @endforeach
                </div>
            </div>

            <div class="collection-title relative hover:scale-y-110 transition mt-10">
                @if (productInCart($product))
                    <form action="{{ route('remove-from-cart', $product->id) }}" method="POST">@csrf
                        <button type="submit" uname="add-to-cart-btn" id="{{ $product->id }}" title="Remove from cart"
                            class="py-2 px-5 md:text-xl leading-10 bottom-8 right-5 uppercase text-white bg-gray-800 w-fit font-light ">
                            Remove from cart
                        </button>
                    </form>
                @else
                    <form action="{{ route('add-to-cart', $product->id) }}" method="POST">@csrf
                        <button type="submit" uname="remove-from-cart-btn" id="{{ $product->id }}" title="Add to cart"
                            class="py-2 px-5 md:text-xl leading-10 bottom-8 right-5 uppercase text-white bg-gray-800  w-fit font-light ">
                            Add to cart
                        </button>
                    </form>
                @endif
            </div>

            <x-udo.flat-btn position="justify-start" btn-text="add to cart" class="w-full text-center"
                href={{ route('products.show', 'prod_id') }} />

            {{-- description container --}}
            <div class="w-full">
                <ul class="space-y-2 font-light uppercase">
                    @foreach (['description', 'size guide'] as $title)
                        <li>
                            <div class=" border-b-2 hover:border-b-gray-600 border-b-gray-300 flex items-center w-full  my-7 py-3 text-base text-gray-600 hover:text-gray-900 focus:text-gray-900 transition duration-75 rounded-none group hover:bg-transparent dark:text-white dark:hover:bg-transparent cursor-pointer"
                                aria-controls="dropdown-{{ \Str::slug($title) }}"
                                data-collapse-toggle="dropdown-{{ \Str::slug($title) }}">

                                <span class="flex-1 text-left rtl:text-right whitespace-nowrap ">{{ $title }}</span>

                                <svg class="w-3 h-3 me-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="1" d="m1 1 4 4 4-4" />
                                </svg>
                            </div>
                            @if ($title == 'description')
                                <ul id="dropdown-{{ \Str::slug($title) }}" class="hidden py-2 space-y-2">
                                    @foreach (range(1, 4) as $item)
                                        <li>
                                            <a href="#"
                                                class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
                                                {{ 'item' . $item }}
                                            </a>
                                        </li>
                                    @endforeach

                                </ul>
                            @endif
                            @if ($title == 'size guide')
                                <div id="dropdown-{{ \Str::slug($title) }}"
                                    class="dropdown-container hidden py-2 space-y-2">
                                    <img src="/images/size_guide.png" alt="" class="w-full">
                                </div>
                            @endif
                        </li>
                    @endforeach

                </ul>
            </div>
        </div>
    </section>

    <div class="flex justify-center">
        <p class="uppercase text-3xl tracking-widest mb-10 lg:mb-0">related products</p>
    </div>

    <div class="filter-and-sort-bar">
        @include('partials.all_products_page.related-products-section')
    </div>



    <script defer></script>
@endsection