@extends('front.main')
@section('content')

<!-- start content -->
    <!-- breadcume section -->
    <div class="breadcume_bg">
        <div class="max-w-screen-xl mx-auto px-3 py-20 flex flex-col items-start justify-center">
            <h1 class="md:text-3xl sm:text-2xl text-xl text-white font-medium mb-3 uppercase">{{ $product->name }}</h1>
            <ul class="flex items-center">
                <li>
                    <a href="/" class="text-lg text-white hover:text-black">Home</a>
                </li>
                <li><p class="text-white mx-4">/</p></li>
                <li>
                    <a href="" class="text-lg text-white hover:text-black">{{ $product->category->name ?? '' }}</a>
                </li>
                <li><p class="text-white mx-4">/</p></li>
                <li>
                    <p class="text-lg text-white">{{ $product->subCategory->name ?? ''}}</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="px-3 py-20 bg-white">
        <div class="max-w-screen-xl mx-auto">
            <div class="flex lg:flex-row flex-col justify-between gap-10">
                <div class="lg:w-2/5 w-full lg:text-start text-center">
                    <div class="w-full overflow-hidden rounded-xl">
                        <img src="{{ $product->mainImage && $product->mainImage->file_path ? asset('storage/' . $product->mainImage->file_path) : asset('assets/images/1.jpg') }}" alt="Grain Greens" title="Grain Greens" class="w-full object-cover">
                    </div>
                </div>
                <div class="lg:w-3/5 w-full">
                    <div>
                        <h2 class="text-2xl text-green font-semibold mb-3">
                            {{ $product->name }}
                        </h2>
                        <p class="text-base text-gray-700 font-normal">
                            {{ $product->description }}
                        </p>
                    </div>
                </div>
            </div>

            <div x-data="{activeTab : 1}"  class="w-full overflow-hidden mt-8">
                <ul class="flex justify-start items-center font-light gap-3">
                    <li class="cursor-pointer px-6 py-3 text-base transition text-center font-medium" :class="activeTab===1 ? 'bg-green text-white' : 'bg-slate-200 text-green'" @click="activeTab = 1" >
                        Description
                    </li>
                    {{-- <li class="cursor-pointer px-6 py-3 text-base transition text-center font-medium" :class="activeTab===2 ? 'bg-green text-white' : 'bg-slate-200 text-green'" @click="activeTab = 2" >
                        Reviews (0)
                    </li> --}}
                </ul>

                <div class="py-4">
                    <div x-show="activeTab===1">
                        <div class="border rounded-md p-4">
                            <h2 class="font-heading text-2xl text-black font-semibold mb-6">Advantages</h2>
                            <p class="text-base text-gray-700 font-normal">
                                {{ $product['packagingDetail']->advantages }}
                            </p>
                            @if(isset($product['packagingDetail']->characteristics) && !empty($product['packagingDetail']->characteristics))
                            <h2 class="font-heading text-2xl text-black font-semibold mb-6 mt-4">Сharacteristic</h2>
                            <table class="table">
                                <tbody>
                                    @foreach($product['packagingDetail']->characteristics as $key=>$value)
                                        <tr>
                                            <th scope="row" class="font-normal">{{$key}}</th>
                                            <td class="font-normal">{{$value}}</td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                            @endif

                            <h2 class="font-heading text-2xl text-black font-semibold mb-6 mt-4">Packaging</h2>
                            <p class="text-base text-gray-700 font-normal">
                                - big-bags (500,1000) kg
                            </p>
                        </div>
                    </div>
                    {{-- <div x-show="activeTab===2">
                        <div>
                            <h2 class="font-heading lg:text-3xl text-2xl text-black font-semibold mb-6">Reviews</h2>
                            <p class="text-base text-gray-700 font-normal">
                                Recent developments have expanded our import routes, including new road connections of many countries in Asia. This expansion is timely, as the need for fertilizers is poised to surge dramatically. This anticipated growth in demand is largely fuelled by key infrastructural projects around the Globe. This ambitious project aims to significantly boost agricultural productivity in the different regions around the globe, enhancing food security and economic development.
                            </p>
                        </div>
                    </div> --}}
                </div>
            </div>

            <h2 class="text-3xl text-brown font-semibold mb-3 mt-6">Related Products</h2>
            <div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-8">
                <div class="text-center mx-auto group w-full">
                    <a href="">
                        <div class="w-full h-72 overflow-hidden rounded-xl">
                            <img src="{{ asset('assets/images/1.jpg')}}" alt="Complex fertilizers" title="Complex fertilizers" class="object-cover w-full h-full object-top transition group-hover:scale-110">
                        </div>
                        <p class="text-green group-hover:text-brown pt-3 text-center text-lg font-normal capitalize">Biomodified Fertiliser brand MultiStart, grade NPKS 15:15:15:11</p>
                    </a>
                </div>
                <div class="text-center mx-auto group w-full">
                    <a href="">
                        <div class="w-full h-72 overflow-hidden rounded-xl">
                            <img src="{{ asset('assets/images/2.webp')}}" alt="Nitrogen fertilizers" title="Nitrogen fertilizers" class="object-cover w-full h-full object-top transition group-hover:scale-110">
                        </div>
                        <p class="text-green group-hover:text-brown pt-3 text-center text-lg font-normal capitalize">NPK 15:15:15</p>
                    </a>
                </div>
                <div class="text-center mx-auto group w-full">
                    <a href="">
                        <div class="w-full h-72 overflow-hidden rounded-xl">
                            <img src="{{ asset('assets/images/2.webp')}}" alt="Phosphate fertilizers" title="Phosphate fertilizers" class="object-cover w-full h-full object-top transition group-hover:scale-110">
                        </div>
                        <p class="text-green group-hover:text-brown pt-3 text-center text-lg font-normal capitalize">NPK 16:16:16</p>
                    </a>
                </div>
                <div class="text-center mx-auto group w-full">
                    <a href="">
                        <div class="w-full h-72 overflow-hidden rounded-xl">
                            <img src="{{ asset('assets/images/3.webp')}}" alt="Potash fertilizers" title="Potash fertilizers" class="object-cover w-full h-full object-top transition group-hover:scale-110">
                        </div>
                        <p class="text-green group-hover:text-brown pt-3 text-center text-lg font-normal capitalize">NPK 18:4:18</p>
                    </a>
                </div>
            </div>
        </div>
    </div>


<!-- end content -->

@endsection
@push('script')
    @if(session('reload'))
        <script>
            window.location.reload(true);
        </script>
    @endif
@endpush