@extends('webview.master')

@section('maincontent')
@section('title')
    {{ env('APP_NAME') }}- All Product 
@endsection
<style>
    #checked {
        color: orange;
    }
    .star{
        font-size: 12px !important;
    }
</style>

<!-- /.breadcrumb -->
<div class="body-content outer-top-xs">
    

        <div class="container p-0">
            <div class="pt-2 pb-2 row" style="background: white;" >
                @forelse ($allProducts as $firstcatepro)
                 @php
                    $regularPrice = $firstcatepro->sizes[0]->RegularPrice ?? 0;
                    $salePrice = $firstcatepro->sizes[0]->SalePrice ?? 0;
                    $discount = 0;
                    if ($regularPrice > 0 && $salePrice > 0 && $salePrice < $regularPrice) {
                        $discount = round((($regularPrice - $salePrice) / $regularPrice) * 100);
                    }
                @endphp
                  <div class="my-1 px-1 col-6 col-md-4 col-lg-2">
                     <div class="product-micro-row">
                       <div class="product_item_inner">
                          <div class="product-image">
                              <div class="sale-badge">
                                 <div class="sale-badge-inner">
                                    <div class="sale-badge-box">
                                      <span class="sale-badge-text">
                                          {{ $discount }}% <span style="font-size:9pt;vertical-align: top;">off</span>
                                         </span>
                                        </div>
                                    </div>
                                   </div>
                             <a href="{{ url('view-product/' . $firstcatepro->ProductSlug) }}">
                              <img src="{{ asset($firstcatepro->ProductImage) }}">
                              </a>
                            </div>
                            <!-- /.product-image -->
                            <div class="product-text" style="padding-bottom: 4px !important;background: white;">
                                <div class="pro_name">
                                  <a href="{{ url('view-product/' . $firstcatepro->ProductSlug) }}" id="f_pro_name">{{ \Illuminate\Support\Str::limit($firstcatepro->ProductName, 20) }}</a>
                                  <p class="my-1" style="font-size: 15px;line-height: 17px;">{!! \Illuminate\Support\Str::limit($firstcatepro->ProductBreaf, 40) !!}</p>
                                 </div>
                                  <div class="d-flex" style="justify-content:center">
                                    <div class="star" style="padding-top: 5px;">
                                        <span  style="font-weight: bold;color:black;font-size:10px">({{ App\Models\Review::where('product_id', $firstcatepro->id)->get()->count() }})</span>
                                        <span class="fas fa-star" id="checked"></span>
                                        <span class="fas fa-star" id="checked"></span>
                                        <span class="fas fa-star" id="checked"></span>
                                        <span class="fas fa-star" id="checked"></span>
                                        <span class="fas fa-star" id="checked"></span>
                                    </div>
                                  </div>
                                <div class="product-footer d-flex justify-content-center align-items-center px-3 pb-3 pt-2">
                                    <div class="price-box text-start">
                                        <div class="old-price mb-1">৳ {{ round($firstcatepro->sizes[0]->RegularPrice) }}</div>
                                        <div class="new-price">৳ {{ round($firstcatepro->sizes[0]->SalePrice) }}</div>
                                    </div>
                                
                                    <a href="{{ url('view-product/' . $firstcatepro->ProductSlug) }}"><button class="cart-btn rounded-circle d-flex justify-content-center align-items-center mx-2">
                                        <i class="fas fa-shopping-bag"></i>
                                    </button></a>
                                </div>
                            </div>
                      </div>
                    </div>
                </div>
                @empty
                @endforelse
            </div>
            <div class="text-center auto-load" style="display: none;">
                <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                    <path fill="#000"
                        d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                        <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                            from="0 50 50" to="360 50 50" repeatCount="indefinite" />
                    </path>
                </svg>
            </div>
        </div>
   </div>



<script>


</script>

<style>
    @media only screen and (max-width: 768px) {
        #cateoryProSidebar {
            padding-right: 0;
        }

        #cateoryPro {
            padding-left: 0;
        }
    }

    #cateoryProSidebar {
        padding-left: 0;
    }

    #cateoryPro {
        padding-right: 0px;
    }

    .sidebar-widget .sidebar-widget-body .accordion .accordion-group .accordion-heading .accordion-toggle.collapsed:after {
        color: #636363;
        content: "\f067";
        font-family: fontawesome;
        font-weight: normal;
    }

    .sidebar .sidebar-module-container .sidebar-widget .sidebar-widget-body .accordion .accordion-group .accordion-heading .accordion-toggle:after {
        content: "\f068";
        float: right;
        font-family: fontawesome;
    }

    .widget-title {
        font-size: 16px;
        text-align: center;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 10px;
        margin: 0;
    }

    .list {
        list-style: none;
    }

    #liaside {
        color: #858585;
        font-weight: bold;
    }

    .breadcrumb {
        padding: 5px 0;
        border-bottom: 1px solid #e9e9e9;
        background-color: #fafafa;
    }
</style>

@endsection
