@extends('pages.layouts.app')
@section('title') Shop @endsection

@section('css')
<!--Datatable CSS-->
<link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@php
$bg_image = \App\Models\GeneralSettings::where('key', \App\Models\GeneralSettings::STOREBANNERIMAGE)->first() != null ? asset("").\App\Models\GeneralSettings::where('key', \App\Models\GeneralSettings::STOREBANNERIMAGE)->first()->value : "";
@endphp

<section class="py-5">
    <div class="px-0">
        <div class="text-center">
            <img src="{{url($bg_image)}}" alt="Full Div Image" class="img-fluid w-100 so-radius">
        </div>
    </div>
</section>
<!-- Session Messages -->
@include('partials.session')

<section class="py-5">
    <div class="px-4 px-lg-5 mt-5">
        <div class="row gx-4">
            @foreach($items as $item)
            <div class="col-md-3 mb-5">
                <div class="card so-product-card h-100">
                    <!-- Sale badge-->
                    @if($item->type == \App\Models\Item::DIGITAL)
                    <div class="badge bg-danger position-absolute" style="top: 0.5rem; right: 0.5rem; z-index:9;">Trade</div>
                    @endif
                    @if($item->label)
                        <div class="badge bg-danger position-absolute" style="top: 0.5rem; z-index:9;">{{$item->label}}</div>
                    @endif
                    <!-- Product image-->
                    <div id="productCarousel{{ $item->id }}" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @if($item->type == \App\Models\Item::PHYSICAL)
                            @foreach($item->images as $index => $image)
                            <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                <img src="{{asset("").$image->image_path}}" class="d-block w-100" style="object-fit:contain;" alt="Product Image {{ $index + 1 }}">
                            </div>
                            @endforeach
                            @else
                            <div class="carousel-item active">
                                <img src="{{asset("").$item->digital_item->image}}" class="d-block w-100" style="object-fit:contain;" alt="Product Image">
                            </div>
                            @endif
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel{{ $item->id }}" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#productCarousel{{ $item->id }}" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>

                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-left">
                            <!-- Product name-->
                            @php
                                    if($item->type == \App\Models\Item::DIGITAL){
                                        $title = $item->digital_item->name;
                                    }else{
                                        $title = $item->title;
                                    }
                            @endphp
                            <h5 class="fw-bolder">{{$title}}</h5>
                            @if($item->type == \App\Models\Item::DIGITAL)
                            <p class="text-muted"><strong>You will get: </strong>{{$item->quantity}}</p>
                            @else
                            <p class="text-muted"><strong>Available: </strong>{{$item->stock}}</p>
                            @endif
                            <!-- Product reviews-->
                            {{-- <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div> --}}
                            <!-- Product description-->
                            @php
                            // Split the text into an array of words
                            $words = explode(' ', strip_tags($item->description));
                            // Define the word limit
                            $wordLimit = 10;
                            // Determine if the text exceeds the word limit
                            $excerpt = count($words) > $wordLimit ? implode(' ', array_slice($words, 0, $wordLimit)) . '...' : $item->description;
                            @endphp

                            {{ $excerpt }}


                        </div>
                        <h6 class="price mt-3">
                            <strong>Price: </strong>
                            <span class="mr-2">
                            @foreach($item->price as $price)
                            ({{$price->digital_item_quantity}} x {{$price->digital_asset->name}})
                            {{-- <img src="{{asset(""). $price->digital_asset->image}}" alt="{{$price->digital_asset->name}}" class="price-img"> --}}
                            @endforeach
                            </span>
                        </h6>
                        <div class="free-items">
                            <div class="fs-14 text-primary ms-auto mb-0">
                                @if($item->freeItems->isNotEmpty())
                                    <span>Free items on purchase of {{ $item->item_quantity_for_free_item }}</span>
                                    <ul style="list-style-type: none; padding: 0; margin: 0;">
                                       @foreach($item->freeItems as $freeItem)
                                           <li>
                                               <i class="ri-gift-line align-bottom me-1"></i>
                                               {{ $freeItem->free_item_quantity }} x {{ $freeItem->freeItem->name }}
                                           </li>
                                       @endforeach
                                   </ul>
                                @else
                                    <span>No free items available</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        @if($item->type == \App\Models\Item::PHYSICAL && $item->stock <= 0)
                        <div class="text-center"><span class="btn btn-danger mt-auto" disabled>Out of Stock</span></div>
                        @else
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="{{ url('/items/add/cart/'.encrypt($item->id))}}">Add to cart</a></div>
                        @endif
                    </div>
                </div>
            </div>

            @endforeach


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



@endsection

@section('script')
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Modal JS -->
<script src="{{ URL::asset('assets/js/pages/modal.init.js') }}"></script>
<!-- Custom JS -->
@endsection