@props(['product'])

{{--<div class="card rounded-2 mb-3">--}}
{{--    <a href="{{ $product->slug == '' ? route('landing.product', ['product' => $product->id]) :  route('landing.product.slug', ['slug' => $product->slug]) }}"--}}
{{--       style="text-decoration: none;">--}}
{{--        @if (isset($product->image))--}}
{{--            @if(json_decode($product->image) == '')--}}
{{--                <img src="{{ Storage::url($product->image) }}"--}}
{{--                     class="img-responsive card-img-top card-img-fit p-3 pb-0" width="250px"--}}
{{--                     height="250px" alt="..."/>--}}
{{--            @else--}}
{{--               @if(count(json_decode($product->image)) > 1)--}}
{{--                    <div id="carouselExampleDark_{{$product->id}}" class="carousel carousel-dark slide"--}}
{{--                         data-bs-ride="carousel">--}}
{{--                        <div class="carousel-inner">--}}
{{--                            @foreach (json_decode($product->image) as $index => $image)--}}
{{--                                <div class="carousel-item {{ $index == 0 ? 'active' : '' }}"--}}
{{--                                     data-bs-interval="10000">--}}
{{--                                    @if(pathinfo($image, PATHINFO_EXTENSION) == 'jpg' ||--}}
{{--                                    pathinfo($image, PATHINFO_EXTENSION) == 'jpeg' ||--}}
{{--                                     pathinfo($image, PATHINFO_EXTENSION) == 'web' ||--}}
{{--                                    pathinfo($image, PATHINFO_EXTENSION) == 'png' )--}}
{{--                                        <img src="{{ Storage::url($image) }}" width="250px" height="250px"--}}
{{--                                             class="img-responsive card-img-top card-img-fit p-3 pb-0">--}}
{{--                                    @else--}}
{{--                                        <iframe width="250px"  height="250px" src="{{ Storage::url($image) }}"--}}
{{--                                                sandbox></iframe>--}}
{{--                                    @endif--}}
{{--                                </div>--}}
{{--                            @endforeach--}}
{{--                        </div>--}}
{{--                        <button class="carousel-control-prev" type="button"--}}
{{--                                data-bs-target="#carouselExampleDark_{{$product->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="#carouselExampleDark_{{$product->id}}" data-bs-slide="next">--}}
{{--                            <span class="carousel-control-next-icon" aria-hidden="true"></span>--}}
{{--                            <span class="visually-hidden">Next</span>--}}
{{--                        </button>--}}
{{--                    </div>--}}
{{--                @else--}}
{{--                    @foreach (json_decode($product->image) as $index => $image)--}}
{{--                        @if(pathinfo($image, PATHINFO_EXTENSION) == 'jpg' ||--}}
{{--                                     pathinfo($image, PATHINFO_EXTENSION) == 'jpeg' ||--}}
{{--                                      pathinfo($image, PATHINFO_EXTENSION) == 'web' ||--}}
{{--                                     pathinfo($image, PATHINFO_EXTENSION) == 'png' )--}}
{{--                            <img src="{{ Storage::url($image) }}" width="250px" height="250px"--}}
{{--                                 class="img-responsive card-img-top card-img-fit p-3 pb-0">--}}
{{--                        @else--}}
{{--                            <iframe width="250px"  height="250px" src="{{ Storage::url($image) }}"--}}
{{--                                    sandbox></iframe>--}}
{{--                        @endif--}}
{{--                    @endforeach--}}
{{--                @endif--}}

{{--            @endif--}}

{{--        @else--}}
{{--            <img src="{{ asset('landing/default-product.png') }}"--}}
{{--                 class="img-responsive card-img-top card-img-fit p-3 pb-0" width="250px"--}}
{{--                 height="250px" alt="..."/>--}}
{{--        @endif--}}
{{--    </a>--}}
{{--    <hr>--}}
{{--    <div class="card-body">--}}

{{--        <a class="text-decoration-none mb-1"--}}
{{--           href="{{ $product->slug == '' ? route('landing.product', ['product' => $product->id]) :  route('landing.product.slug', ['slug' => $product->slug]) }}"--}}
{{--        >--}}
{{--            <h5 class="text-dark mb-0 text-capitalize">{{ substr($product->name, 0, 20) }}  {{strlen($product->name) > 20 ? '...' : ''}} </h5>--}}
{{--        </a>--}}

{{--        <p class="mb-3 text-primary">--}}
{{--            {{ $product->category ? $product->category->name : '' }}--}}
{{--        </p>--}}

{{--        <p class="mb-1">--}}
{{--            <a class="text-decoration-none text-dark"--}}
{{--               style="width: 150px; margin-right: 10px">{{ $product->avg_rating }} <i class="bi bi-star-fill text-warning"></i>--}}
{{--            </a>--}}
{{--        </p>--}}



{{--            @if($product->discount != '' && $product->discount > 0)--}}
{{--            <div class="mt-4">--}}
{{--                <h6 class="fw-bold mb-0 text-success">  -{{ $product->discount}}%--}}
{{--                    <i class="bi bi-currency-rupee"></i>{{ $product->tax_inclusive_price }}--}}
{{--                </h6>--}}
{{--                <h6 class="fw-bold mb-0  text-muted">--}}
{{--                   M.R.P.: <s><i class="bi bi-currency-rupee me-1"></i>{{ $product->mrp }}</s>--}}
{{--                </h6>--}}
{{--                <small  class="fw-bold">Including of all taxes</small>--}}
{{--            </div>--}}
{{--                    @else--}}
{{--            <div class="mt-4" style="margin-bottom: 42px;">--}}
{{--                 <h6 class="fw-bold mb-0 text-lg text-success" > <i class="bi bi-currency-rupee me-1"></i>{{ $product->tax_inclusive_price }}</h6>--}}
{{--                <small  class="fw-bold">Including of all taxes</small>--}}
{{--            </div>--}}
{{--            @endif--}}
{{--          <div class="d-flex align-items-center justify-content-between mt-4">--}}
{{--            @if(getStock($product->id) >= 1 || $product->type == 'service')--}}
{{--                <a class="btn btn-dark btn-sm w-100"--}}
{{--                   wire:click="addToCart({{ $product->id }})"><i class="bi bi-cart3"></i> ADD TO CART</a>--}}
{{--        @else--}}
{{--            <a class="btn btn-danger btn-sm text-white w-100"><i class="bi bi-cart-x"></i> OUT OF STOCK</a>--}}
{{--            @endif--}}
{{--       </div>--}}

{{--    </div>--}}
{{--</div>--}}


<div class="product-card mt-5">
    <div class="card hover-shadow">
        <a class="text-decoration-none mb-1" href="{{ $product->slug == '' ? route('landing.product', ['product' => $product->id]) :  route('landing.product.slug', ['slug' => $product->slug]) }}">
        <div>
            @if (isset($product->image))
                @if(json_decode($product->image) == '')
                    @php
                        $supported_image = array('jpg','jpeg','web','png');
                      $ext = strtolower(pathinfo($product->image, PATHINFO_EXTENSION));
                    @endphp
                    @if(in_array($ext, $supported_image))
                        <img src="{{ Storage::url($product->image) }}" class="card-img-top" alt="..." style="">
                    @endif
                @else
                    @php
                        $image_type = false;
                        $path = '';
                         $supported_image = array('jpg','jpeg','web','png');
                         foreach (json_decode($product->image) as $index => $image){
                               $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION));
                               if (in_array($ext, $supported_image) === true){
                                   $path = $index;
                                   $image_type = true;
                                   break;
                               }
                         }
                    @endphp
                @if($image_type === true)
                        <img src="{{ Storage::url(json_decode($product->image)[$path]) }}" class="card-img-top" alt="..." style="height: 250px">
                @endif
                @endif
            @else
                <img src="{{ asset('landing/default-product.png') }}" class="card-img-top" alt="..." style="height: 250px">
            @endif
            @if($product->discount != '' && $product->discount > 0)
                    <div class="top-right p-2 text-white">
                        {{ $product->discount}}% off
                    </div>
                @endif
        </div>
        </a>
        <div class="card-body text-center">
            <a class="text-decoration-none mb-1" href="{{ $product->slug == '' ? route('landing.product', ['product' => $product->id]) :  route('landing.product.slug', ['slug' => $product->slug]) }}">
            <p class="mb-2 text-primary">
                {{ $product->category ? $product->category->name : '' }}
            </p>
                <h5 class="text-dark mb-0 text-capitalize">
                    {{ substr($product->name, 0, 20) }}  {{strlen($product->name) > 20 ? '...' : ''}}
                </h5>
            <div class="my-3" >
                @if($product->discount != '' && $product->discount > 0)
                    <h5 class="fw-bold mb-0 text-lg text-success">
                        <i class="bi bi-currency-rupee"></i>
                        {{ $product->tax_inclusive_price }}<sapn class="fs-6 px-2 text-muted"> <i class="bi bi-currency-rupee"></i><s>{{ $product->mrp }}</s></sapn></h5>
                    <small  class="fw-bold">Including of all taxes</small>
                @else
                    <h5 class="fw-bold mb-0 text-lg text-success">
                        <i class="bi bi-currency-rupee"></i>
                        {{ $product->tax_inclusive_price }}</h5>
                    <small  class="fw-bold">Including of all taxes</small>
                @endif

            </div>
            <p class="card-hr mb-3">
                <a class="h6 text-decoration-none text-dark">
                   <span class="me-2 ms-2"> {{ $product->avg_rating }} <i class="bi bi-star-fill text-warning"></i></span>
                </a>
            </p>
            </a>
            <div class="d-flex align-items-center justify-content-between">
                @if(getStock($product->id) >= 1 || $product->type == 'service')
                    <a class="btn btn-dark btn-sm w-100"
                       wire:click="addToCart({{ $product->id }})"><i class="bi bi-cart3"></i> ADD TO CART</a>
                @else
                    <a class="btn btn-danger btn-sm text-white w-100"><i class="bi bi-cart-x"></i> OUT OF STOCK</a>
                @endif
            </div>
        </div>
    </div>

</div>