@extends('layouts.customer')

@section('title')
C&G
@endsection
<link rel="shortcut icon" type="x-icon" href="Click and Get.png">

@section('content')
<div class="py-5"></div>

<div class="py-2 mb-2 mt-1 shadow-sm backgroundofroutes border-top">
    <div class="container">
        <h6 class="mb-0">
            <a href="{{ url('category') }}">Collections</a> /
            
        </h6>
    </div>
</div>

<center>
<h1 class="mb-0">
   <br> 
   <h6>
    @for ($i = 1; $i <= 5; $i++)
        @if ($i <= round($overallRating))
            <i class="fas fa-star" style="color: gold;"></i>
        @else
            <i class="far fa-star" style="color: gold;"></i>
        @endif
    @endfor
    ({{ number_format($overallRating, 1) }} out of 5)
</h6>
<p>{{ $shop_ratings->count() }} ratings</p>

<div class="py-5 my-5">
    <div class="container">
<!-- 
    @foreach ($shop_ratings as $rating)
    <div>
        <span>{{ $rating->rating }} stars:</span>
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: {{ $rating->percentage }}%;" aria-valuenow="{{ $rating->percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <span>{{ $rating->percentage }}%</span>
    </div>
    @endforeach -->

        <div class="row">
            <div class="col-md-12">
                <h2>{{ $user->shop->shop_name }}</h2>
            </div>
        </div>
        <div class="row">
            @foreach ($items as $product)
            <div class="col-md-2 mb-3">
                    <div class="card">
                    <a class="link-dark" href="{{ url(asset('view-category/'.$product->category->id.'/'.$product->id)) }}">

                    <img src="{{ asset('upload/product/'. ($product->images->first()->image ?? 'default-image.jpg')) }}" alt="" class="product-image">
                        <div class="card-body">
                            <h5 class="card-title" style="font-size: 14px;">{{ Str::limit($product->name, 15) }}</h5>
                            <p style="font-size: 12px;">
                            @if($product->productPrices->isNotEmpty())
    @php
        // Fetch the latest active price
        $latestActivePrice = $product->productPrices()
            ->where('is_active', 1)
            ->latest('created_at')
            ->first();

        // Fetch the previous active price
        $previousActivePrice = null;
        if ($latestActivePrice) {
            $previousActivePrice = $product->productPrices()
                ->where('is_active', 1)
                ->where('created_at', '<', $latestActivePrice->created_at)
                ->latest('created_at')
                ->first();
        }

        // Calculate the discount
        $discountedPrice = $latestActivePrice ? $latestActivePrice->price : null;
        $originalPrice = $previousActivePrice ? $previousActivePrice->price : null;
        $discountPercent = $originalPrice && $discountedPrice ? (($originalPrice - $discountedPrice) / $originalPrice) * 100 : null;
    @endphp
    @if($discountedPrice && $discountPercent > 0) <!-- Ensure the discount percentage is positive -->
        <b><span class="selling-price">₱ {{ number_format($discountedPrice, 2, '.', ',') }}</span></b>
        @if($originalPrice)
            <span class="original-price"><s>₱ {{ number_format($originalPrice, 2, '.', ',') }}</s></span>
        @endif
        <span class="discount-percent">({{ number_format($discountPercent, 2) }}% off)</span>
    @else
        <!-- If there's no discount or if the discounted price is higher than the original price, display the original price -->
        <b><span class="selling-price">₱ {{ number_format($discountedPrice, 2, '.', ',') }}</span></b>
    @endif
@endif
                                </p>     <p class="mt-3">
                    </p>      
 <!-- @if($product->price > 0)
                                <span class="float-end"><s>₱ {{ number_format($product->price, 2, '.', ',') }}</s></span>
                            @endif -->
                            <br>
                            <p style="font-size: 12px;">
        <a href="{{ route('user.items', $product->user->id) }}" class="fs-8">{{ $product->user->shop_name }}</a>
        @if ($product->qty <= 10)
            <span class="text-warning fs-7">{{ $product->qty }} left in stock!</span>
        @elseif ($product->qty > 10)
            &nbsp;
        @endif
    </p>
    <form class="product_data mt-2">
    @csrf
    <input type="hidden" value="{{ $product->id }}" class="prod_id">
    <div class="input-group text-center mb-2">
        <button class="input-group-text decrement-btn fs-6">-</button>
        <input type="text" readonly name="quantity" value="1" class="form-control quantity-input bg-light text-center fs-6" max="{{ $product->qty }}">
        <button class="input-group-text increment-btn fs-6">+</button>
        </div>
    <div class="d-flex justify-content-center">
    <button type="button" class="btn btn-primary btn-sm addToCartButton fs-8">Add To Cart<i class="fa-solid fa-cart-plus"></i></button>
    </div>     
                        </div>
                    </div>
                </a>
            </div>
            @endforeach




                        </a>
                    </div>

    
  
    <br>
    <br>


<br>
                                    <br>
                                    <br>
                                    <br>
                                    <br>
                                    <br>
</div>
</div>
</div>
</div>
@endsection



<!-- <style>



.increment-btn,
.decrement-btn {
    flex: 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style> -->

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.addToCartButton').click(function(e){
                e.preventDefault();

                // Find the closest '.card-body' instead of '.product_data'
                var product_id = $(this).closest('.card-body').find('.prod_id').val();
                var product_qty = $(this).closest('.card-body').find('.quantity-input').val();

                if (!{{ auth()->check() ? 'true' : 'false' }}) {
                window.location.href = "{{ route('login') }}";
                return;
            }
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    method : "POST",
                    url : "/add-to-cart",
                    data : {
                        'product_id': product_id,
                        'product_qty': product_qty
                    },
                    success: function(response) {
                        if(response.status === "Please Login First...") {
                            swal("Oops...", `${response.status}`, "error");
                        }
                        else if(response.status === "Please Verify your Email") {
                            swal("Oops...", `${response.status}`, "error");
                        }
                        else {
                            swal("Done!", `${response.status}`, "success");
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            });

            $('.increment-btn').click(function (e) {
    e.preventDefault();
    var inc_value = $(this).closest('.card-body').find('.quantity-input').val();
    var value = parseInt(inc_value, 10);
    value = isNaN(value) ? 0 : value;
    var maxQty = parseInt($(this).closest('.card-body').find('.quantity-input').attr('max'), 10);

    if (value < maxQty) {
        value++;
        $(this).closest('.card-body').find('.quantity-input').val(value);
    }

    // Disable the increment button if the value reaches the maximum quantity
    if (value >= maxQty) {
        $(this).prop('disabled', true);
    }
});


            $('.decrement-btn').click(function (e) {
                e.preventDefault();
                var inc_value = $(this).closest('.card-body').find('.quantity-input').val();
                var value = parseInt(inc_value, 10);
                value = isNaN(value) ? 0 : value;
                if (value > 1) {
                    value--;
                    $(this).closest('.card-body').find('.quantity-input').val(value);
                }
            });
        });
    </script>
@endsection

<style>

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

 .discount-percent {
    color: green;
    font-size: 14px;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-card:hover {
    transform: translateY(-5px);
}
.product-image {
    width: 100%;
    height: 200px; /* Set a fixed height for the image */
    object-fit: cover; /* Cover the entire space, maintaining aspect ratio */
}


.product-description {
    font-size: 12px;
    color: #555;
    margin-bottom: 10px;
}
.selling-price {
    color: #e74c3c;
    font-size: 16px;
    font-weight: bold;
}

.original-price {
    color: black;
    font-size: 12px;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f5f5f5;
    text-align: center;
    padding: 10px 0;
}
</style>