@extends('layouts.customer')

@section('title')
   {{ $category->name }}
@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> /
            <a> {{ $category->name }}</a>
        </h6>
    </div>
</div>

<div class="py-4 my-4">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 class="fs-4"> {{ $category->name }}</h2>
            </div>
        </div>

        @php 
        $productCount = count($product); @endphp
        
        <div class="row">
            @foreach($product as $item)
                <div class="col-md-2 mb-3">
                    <a class="link-dark" href="{{ url(asset('view-category/'.$category->id.'/'.$item->id)) }}">
                        <div class="card">
                            @if($item->images->isNotEmpty())
                                <img src="{{ asset('upload/product/'.$item->images[0]->image) }}" alt="" class="product-image">
                            @endif

                            <div class="card-body">
                                <h5 class="fs-6">{{  Str::limit($item->name, 15) }}</h5>
                                @if (!empty($item->description))
                                    <p class="product-description">{{ Str::limit($item->description, 15) }}</p>
                                @else
                                    &nbsp;
                                @endif

                                <p style="font-size: 12px;">
                                @if($item->productPrices->isNotEmpty())
    @php
        // Fetch the latest active price
        $latestActivePrice = $item->productPrices()
            ->where('is_active', 1)
            ->latest('created_at')
            ->first();

        // Fetch the previous active price
        $previousActivePrice = null;
        if ($latestActivePrice) {
            $previousActivePrice = $item->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>
                                <form class="product_data mt-2">
                                    @csrf
                                    <input type="hidden" value="{{ $item->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="{{ $item->qty }}">
                                        <button class="input-group-text increment-btn fs-6">+</button>
                                    </div>
                                    @if($item->qty > 0)
                                        <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>
                                    @endif
                                </form>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>

        @if ($productCount === 0)
            <div class="row">
                <div class="col-md-12 text-center">
                    <br>
                    <br>
                    <br>
                    <br>
                    <br> <br>
                    <br>
                    <br>
                    <br>
                    <h1><p>No products found.</p></h1>
                </div>
            </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        @endif


    </div>
</div>
@endsection

@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%;
}


.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: 14px;
}

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

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