@extends('layouts.customer')

@section('title')
   Search Result
@endsection

@section('content')
<div class="py-5"></div>
<div class="container p-5 my-10">
    <h3>Search Results</h3>
    <div class="row">
        @forelse ($results as $result)
        <div class="col-md-2 mb-3">
            <a class="link-dark" href="{{ url(asset('view-category/'.$result->category->id.'/'.$result->id)) }}">
                <div class="card h-100">
                    @if($result->images->isNotEmpty())
                    <img src="{{ asset('upload/product/'.$result->images[0]->image) }}" alt="" class="product-image">
                    @endif
                    <div class="card-body d-flex flex-column justify-content-between">
                        <div>
                            <h5 class="card-title" style="font-size: 14px;">{{ $result->name }}</h5>
                            
                            
                            <p style="font-size: 12px;">
                            @if($result->productPrices->isNotEmpty())
    @php
        // Fetch the latest active price
        $latestActivePrice = $result->productPrices()
            ->where('is_active', 1)
            ->latest('created_at')
            ->first();

        // Fetch the previous active price
        $previousActivePrice = null;
        if ($latestActivePrice) {
            $previousActivePrice = $result->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="card-text">{{ $result->user->shop_name }}</p>
                        </div>
                        <form class="product_data mt-2">
                            @csrf
                            <input type="hidden" 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">
                                <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>
                        </form>
                    </div>
                </div>
            </a>
        </div>
        @empty
        <div class="card-body d-flex align-items-center justify-content-center flex-column">
            <h2 class="p-2 m-1">No Results <i class="fa fa-magnifying-glass"></i> Found</h2>
            <a href="{{ url('category') }}" class="btn p-2 m-1 btn-outline-primary float-end">Continue Shopping</a>
        </div>
        <br>

        <br>
        <br>
        <br>   <br> <br>
        <br>
        <br>   <br> <br>
        <br>

        <br>
        <br>
        <br>   <br>
        @endforelse
    </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();
            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);
            }

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

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

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

.btn {
    margin-top: auto;
}

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

.selling-price {
    color: #e74c3c;
    font-size: 16px;
    font-weight: bold;
}

.original-price {
    color: black;
    font-size: 12px;
}
</style>