jquery

@extends('_layouts.admin')


@section('content')

{{-- <nav class="flex flex-row justify-between transition duration-500 ease-in-out border-b dark:border-gray-600 dark:text-gray-400">
                <div class="flex">
                    <!-- Top NavBar -->

                    <a
                        href="users-dashboard/"
                        class="block py-2 font-medium text-green-500 capitalize transition duration-500 ease-in-out border-b-2 border-green-500 dark:text-green-200 dark:border-green-200 focus:outline-none">
                        users
                    </a>
                    <button
                        class="block py-2 ml-6 font-medium text-center capitalize transition duration-500 ease-in-out border-b-2 border-transparent focus:outline-none focus:text-green-500 focus:border-green-500 dark-focus:text-green-200 dark-focus:border-green-200">
                        role
                    </button>
                    <button
                        class="block py-2 ml-6 font-medium text-center capitalize transition duration-500 ease-in-out border-b-2 border-transparent focus:outline-none focus:text-green-500 focus:border-green-500 dark-focus:text-green-200 dark-focus:border-green-200">
                        access rights
                    </button>
                </div>

                <div class="flex items-center select-none">
                    <span
                        class="mr-3 transition duration-500 ease-in-out cursor-pointer hover:text-green-500 dark-hover:text-green-300">

                        <svg viewBox="0 0 512 512" class="w-5 h-5 fill-current">
                            <path
                                d="M505 442.7L405.3
                                343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7
                                44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1
                                208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4
                                2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9
                                0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7
                                0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0
                                128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                        </svg>
                    </span>

                    <input
                        class="w-12 bg-transparent focus:outline-none"
                        placeholder="Search" />

                </div>

            </nav> --}}
            <h2 class="my-4 mb-5 text-4xl font-semibold dark:text-gray-400">
                Liste des produits de la catégorie {{ $category->name }}
            </h2>


            @if (session('message'))
            <div id="flash-message" class="border border-green-700 text-green-700 bg-green-200 p-2 rounded mt-5 mx-5">
                {{ session('message') }}
            </div>
            @endif


            @forelse($products as $product)
            <div class="flex justify-between px-4 py-4 mt-4 bg-white rounded-lg shadow-xl cursor-pointer dark:bg-gray-600 ">
                <!-- Card -->

                <div class="flex justify-between">
                    <!-- Left side -->

                    <img
                        class="object-cover w-16 h-16 mt-2 rounded-full"
                        src="{{ asset('images/' . $product->image) }}"
                        alt="" />

                    <div
                        class="flex flex-col mt-4 ml-4 text-gray-600 capitalize dark:text-gray-400">
                        <span>Produit</span>
                        <span class="mt-2 text-black dark:text-gray-200">
                            {{ $product->title }}
                        </span>
                    </div>

                    {{-- <div
                        class="flex flex-col mt-4 ml-12 text-gray-600 capitalize dark:text-gray-400">
                        <span>Description</span>
                        <span class="mt-2 text-black dark:text-gray-200">
                            {{ $product->description }}
                        </span>
                    </div> --}}

                    <div
                        class="flex flex-col mt-4 ml-12 text-gray-600 capitalize dark:text-gray-400 mr-2">
                        <span>Prix</span>
                        <span class="mt-2 text-black dark:text-gray-200">
                            {{ $product->getPrice() }}
                        </span>
                    </div>

                    <div
                        class="flex flex-col mt-4 ml-12 text-gray-600 capitalize dark:text-gray-400 mr-2">
                        <span>Stock</span>
                        <span class="mt-2 text-black dark:text-gray-200">
                            @if ($product->stock_status == "instock")
                                <p class="text-green-700">Disponible</p>
                            @else
                            <p class="text-red-700">Non disponible</p>
                            @endif
                        </span>
                    </div>

                    <div
                        class="flex flex-col mt-4 ml-12 text-gray-600 capitalize dark:text-gray-400 mr-2">
                        <span>Visibilité</span>
                        <span class="mt-2 text-black dark:text-gray-200">
                            @if ($product->featured == 1)
                                <p class="text-green-700">Visible</p>
                            @else
                            <p class="text-red-700">Non visible</p>
                            @endif
                        </span>
                    </div>

                </div>

                <div class="flex">
                    <!-- Rigt side -->

                    <div class="flex flex-col mr-5 text-gray-600 capitalize dark:text-gray-400">
                        <button id="detailsBtn" class="flex items-center px-4 py-2 text-green-500 border-2 border-green-500 rounded-full shadow mt-7 hover:bg-green-500 hover:text-white">
                            Détails
                        </button>
                    </div>

                    <div class="flex flex-col mr-5 text-gray-600 capitalize dark:text-gray-400">
                        <a href="{{ route('admin.products.edit', $product) }}">
                            <button class="flex items-center px-4 py-2 text-blue-500 border-2 border-blue-500 rounded-full shadow mt-7 hover:bg-blue-500 hover:text-white">
                                Modifier
                            </button>
                        </a>
                    </div>

                    <div class="flex flex-col mr-5 text-gray-600 capitalize dark:text-gray-400">
                        <form action="{{ route('admin.products.destroy', $product) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button class="flex items-center px-4 py-2 text-red-500 border-2 border-red-500 rounded-full shadow mt-7 hover:bg-red-500 hover:text-white">
                                Supprimer
                            </button>
                        </form>
                    </div>

                </div>

            </div>

            <div id="product-description" class="flex justify-between px-4 py-4 mt-4 bg-white rounded-lg shadow-xl cursor-pointer dark:bg-gray-600 ">
                <div
                        class="flex flex-col mt-4 ml-4 text-gray-600 capitalize dark:text-gray-400">
                        <span>Description</span>
                        <span class="mt-2 text-black dark:text-gray-200">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lectus lacus, venenatis a pulvinar sed, porta sit amet nunc. Curabitur tempor et velit ac rutrum. Cras magna ex, elementum quis tincidunt non, ultrices vitae mauris. Nulla volutpat sollicitudin neque. Nunc nec massa tincidunt, congue augue nec, dignissim mi. Quisque lobortis quam at massa condimentum ultricies. Aliquam malesuada commodo urna, non maximus orci auctor sit amet. Curabitur nec consequat felis. Vestibulum dictum urna ornare vehicula faucibus.
                        </span>
                    </div>
            </div>

            @empty

            <h1 class="mt-8">Aucun produit dans cette catégorie.</h1>


            @endforelse

            <div class="mt-5">{{ $products->links() }}</div>





<script>
    $(document).ready(function(){
            $("[id=product-description]").hide();
    });
</script>
@endsection