@php
  $file_name = route('product_table');
@endphp

@if (count($products) == 0)
  <div class="text-center my-5">
    <i class="fas fa-box-open fa-5x text-secondary mb-4"></i>
    <h3 class="text-muted">No Products Found</h3>
    <p class="lead text-muted">We couldn’t find any matching products. Try adjusting your filters or check back later.
    </p>
    <a href="{{ route('home') }}" class="btn btn-primary mt-3">
      <i class="fas fa-arrow-left"></i> Back to Home
    </a>
  </div>
@else
  <div class="row m-0">
    @foreach ($products as $product)
      @php
        $productName = Str::limit($product['product_name'] ?? 'No Name', 60, '...');
        $brand = $product['brand']['name'] ?? 'Unknown';
        $category = $product['category']['name'] ?? 'N/A';
        $subCategory = $product['sub_category']['name'] ?? 'N/A';
        $productCode = $product['product_code'] ?? 'N/A';
        $unit = $product['unit'];
        $purchasePrice = $product['purchase_price'] ?? 0;
        $mrp = $product['mrp'] ?? 0;
        $salesPrice = $product['sales_price'] ?? $mrp;
        $discount = $product['discount'] ?? ($mrp > $salesPrice ? round((($mrp - $salesPrice) / $mrp) * 100) : null);
        $quantity = $product['quantity'] ?? 0;
        $weight = $product['weight'] ?? 'N/A';
        $material = $product['material'] ?? 'N/A';
        $size = $product['size']['name'] ?? 'N/A';
        $brandingCost = $product['branding_cost'] ?? 0;
        $shippingCost = $product['shipping_cost'] ?? 0;
        $hsn = $product['hsn_code'] ?? 'N/A';
        $gst = $product['gst'] ?? '0';
        $cgst = $product['cgst'] ?? '0';
        $sgst = $product['sgst'] ?? '0';
        $inStock = $product['instock'] ?? 0;
        $description = Str::limit(strip_tags($product['description'] ?? 'No Description'), 150, '...');
        $image = $product['product_image_1'] ?? 'no-image.png';
      @endphp
      <div class="col-12 mb-3 px-2">
        <div class="card p-3 shadow-sm product-list-card d-flex flex-column flex-md-row justify-content-between"
          style="border-radius: 10px;">
          {{-- Product Image --}}
          <div class="position-relative mb-3 mb-md-0" style="width: 100%; max-width: 150px; flex-shrink: 0;">
            @if (isset($microsite_subdomain) && $microsite_subdomain != '')
              @if (isset($product['image_mapping']) && !empty($product['image_mapping']))
                @foreach ($product['image_mapping'] as $i => $map_img)
                  <div class="position-relative">
                    <img src="{{ url('images/products/' . $map_img['image_path']) }}" class="img-fluid w-100 h-auto"
                      style="object-fit: contain; border-radius: 8px;">
                    <div class="mapped-areas">
                      @php
                        $map_img['x'] = json_decode($map_img['x'], true);
                        $map_img['y'] = json_decode($map_img['y'], true);
                        $map_img['height'] = json_decode($map_img['height'], true);
                        $map_img['width'] = json_decode($map_img['width'], true);
                        $map_img['angle'] = json_decode($map_img['angle'], true);
                      @endphp
                      @foreach ($map_img['x'] as $j => $x)
                        <div class="position-absolute pre_map d-flex justify-content-center align-items-center"
                          style="width:{{ $map_img['width'][$j] }}%;height:{{ $map_img['height'][$j] }}%;left:{{ $x }}%;top:{{ $map_img['y'][$j] }}%;transform:{{ $map_img['angle'][$j] ?? '' }};">
                          <img src="{{ url('images/micrositelogo/' . $microsite_data['logo']) }}" class="w-100 h-auto"
                            alt="">
                        </div>
                      @endforeach
                    </div>
                  </div>
                @endforeach
              @else
                <img src="{{ url('images/products/' . $image) }}" alt="{{ $product['product_name'] }}"
                  class="img-fluid w-100 h-auto" style="object-fit: contain; border-radius: 8px;">
              @endif
            @else
              <img src="{{ url('images/products/' . $image) }}" alt="{{ $product['product_name'] }}"
                class="img-fluid w-100 h-auto" style="object-fit: contain; border-radius: 8px;">
            @endif
            {{-- <i class='bx bxs-heart position-absolute top-0 end-0 m-2 text-danger fs-5 hrt_icon_'
              style="cursor: pointer;"></i> --}}
          </div>
          {{-- Product Details & Price --}}
          <div class="flex-grow-1 d-flex flex-column flex-md-row justify-content-between w-100 ps-md-3">
            {{-- Left Info --}}
            <div class="pe-md-3 mb-3 mb-md-0 w-100"
              onclick="window.location.href=`{{ route('viewproduct', [$product['product_name'], enc($product['id'])]) }}`"
              style="cursor: pointer;">
              <h6 class="fw-semibold mb-1">{{ $productName }}</h6>
              <p class="text-muted mb-1">Brand: {{ $brand }}</p>
              <p class="text-muted mb-1 small">Category: {{ $category }} > {{ $subCategory }}</p>
              @php
                $avgRating = $product['reviews_avg_rating'] ?? 0;
                $fullStars = floor($avgRating);
                $hasHalfStar = $avgRating - $fullStars >= 0.5;
              @endphp
              <div class="d-flex align-items-center mb-1">
                <span class="bg-success text-white px-2 py-1 rounded small me-2">{{ round($avgRating, 1) }} ★</span>
                <span class="text-muted small"> {{ $product['reviews_count'] ?? 0 }} Reviews</span>
              </div>
              <p class="text-muted small mb-1">Material: {{ $material }} | Size: {{ $size }} | Weight:
                {{ $weight }}</p>
              <p class="text-muted small mb-1">In Stock: {{ $inStock }} | Unit: {{ $unit }}</p>
              <p class="text-muted small mb-0">{{ $description }}</p>
            </div>

            {{-- Pricing Info --}}
            <div class="text-md-end w-md-25">
              <p class="fw-bold text-primary mb-1 fs-5">₹{{ number_format($salesPrice, 2) }}</p>
              @if ($mrp > $salesPrice)
                <p class="mb-0">
                  <span class="text-muted text-decoration-line-through">₹{{ number_format($mrp, 2) }}</span>
                  <span class="text-success ms-2 fw-semibold">{{ $discount }}% off</span>
                </p>
              @endif
              <p class="text-muted mt-2 small">Inclusive of all taxes</p>
            </div>
          </div>
        </div>
      </div>
    @endforeach
  </div>







  <nav class="custom-pagination-wrapper d-flex justify-content-center my-4">
    <ul class="pagination pagination-sm">
      <li class="page-item"><a class="page-link" value="1" onclick="PaginationBtn(this,'{{ $file_name }}')"
          id="first">First</a></li>
      <li class="page-item"><a class="page-link" onclick="PaginationBtn(this,'{{ $file_name }}')"
          id="prev">&laquo;</a></li>

      @for ($i = 1; $i <= $totalpages; $i++)
        <li class="page-item  {{ $i == $page ? 'active' : '' }}">
          <a class="page-link page_numbers {{ $i == $page ? 'paginactive' : '' }}"
            onclick="PaginationBtn(this,'{{ $file_name }}')" id="{{ $i }}">{{ $i }}</a>
        </li>
      @endfor

      <li class="page-item"><a class="page-link" onclick="PaginationBtn(this,'{{ $file_name }}')"
          id="next">&raquo;</a></li>
      <li class="page-item"><a class="page-link" value="{{ $totalpages }}"
          onclick="PaginationBtn(this,'{{ $file_name }}')" id="last">Last</a></li>
    </ul>
  </nav>

  <p>Showing {{ $page }}–{{ $totalpages }} of {{ $totalrecord }} results</p>

@endif