@extends('layout')
@section('title', 'Product Detail')

@section('content')
<style>
.product-image {
    text-align: center;
    padding: 55px 3px;
    border-radius: 5px;
}
.product-image img {
    width: 400px!important;
}
.product-image {
    border:1px solid #d4c6c6;
     border-radius: 5px;
}
</style>
    <nav aria-label="breadcrumb" class="mt-4">
  <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>
 <div class="container">
    <div class="row prodect_page">
            <div class="row align-items-center p-0 pb-4 prodect_body">
        <div class="col-md-6">
            <div class="product-image">
             <img src="{{ $data->image ? asset('/public/storage/product/'.$data->image) : asset('/public/storage/blog/no imge.jpg') }}" class="img-fluid" alt="Product Image">
        </div>
         </div>
        <div class="col-md-6 product-text">
            <h2>{{ $data->name }}</h2>
            <p>{{ __('text.price') }}:@if(session('currency_id'))
                        {{ session('currency_symbol') }}
                 @php
            $currencyValue = session('value') ?? 1; 
            $totalPrice = $currencyValue * $data->price;
        @endphp
          {{ $totalPrice }}</p>
                        @else
                        {{$symbol}} {{$data->price}}</p>
                        @endif 
           <p>{{ strip_tags($data->description) }}</p>
           <button class="btn btn-warning add-to-cart" data-id="{{ $data->product_id }}">{{ __('text.add_cart') }}</button>
        </div>
          </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