@extends('layout')
@section('title', 'Search Product')
@section('content')
<style>
.product-image {
    text-align: center;
    padding: 55px 3px;
    border-radius: 5px;
}
.product-image img {
    width: 400px!important;
}
</style>
 @if(session('customer_id'))
    <nav aria-label="breadcrumb" class="mt-2">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/account">{{ __('text.dashboard') }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ __('text.product') }}</li>
  </ol>
</nav>
@endif
<div class="container">
  <div class="row mt-2 products2">
        <h2  class="mb-0">{{ __('text.products') }}</h2>
    @forelse($searchData as $d)
    <div class="col-md-3 mb-4 mt-4">
        <div class="card">
          <a href="/{{ $d->slug }}">
                <img src="{{ $d->image ? asset('public/storage/product/'.$d->image) : asset('public/storage/blog/no imge.jpg') }}" class="card-img card-img-top" alt="Product Image" style="width: 100%; height: 150px; object-fit: cover;">
            </a>
            <div class="card-body">
                <a href="/{{ $d->slug }}">
                    <h5 class="card-title">{{ $d->name }}</h5>
                </a>
                <p class="card-text">{{ __('text.price') }}: 

                        @if(session('currency_id'))
                        {{ session('currency_symbol') }}
                 @php
            $currencyValue = session('value') ?? 1; 
            $totalPrice = $currencyValue * $d->price;
        @endphp
          {{ $totalPrice }}</p>
                        @else
                        {{$symbol}} {{$d->price}}</p>
                        @endif 
                
                <button class="btn btn-warning add-to-cart" data-id="{{ $d->product_id }}">{{ __('text.add_cart') }}</button>
            
            </div>
        </div>
    </div>
    @empty
    <div class="col md-4">
        <div class="alert alert-info md-4" role="alert">
            {{ __('text.no_records_found') }} 
            <button type="button" class="btn-close " data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
    @endforelse
  
    <div class="d-flex showing-page">
      {{ $searchData->appends(['search'=>$name ?? ''])->links() }}
    </div>
  
  
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.add-to-cart').click(function(e) {
        e.preventDefault();
        var productId = $(this).data('id');

        $.ajax({
            type: 'POST',
            url: '/add_to_cart',
            data: {
                product_id: productId,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                updateCartBadge(); // Update cart badge content
            },
            error: function(xhr, status, error) {
                alert('An error occurred while adding the product to cart.');
                console.error(xhr.responseText);
            }
        });
    });

    // Function to update cart badge content
    function updateCartBadge() {
        $.ajax({
            type: 'GET',
            url: '/get-cart-count', // Route to get cart count
            success: function(response) {
                $('#cart-badge').text(response.count);
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    }

    // Call updateCartBadge on page load
    updateCartBadge();
});
</script>
@endsection