@extends('layouts.customer')

@section('title',$product->name)

@section('content')
<div class="py-5"></div>
<link rel="shortcut icon" type="x-icon" href="Click and Get.png">

<div class="py-3 mb-3 mt-2 shadow-sm backgroundofroutes border-top">
    <div class="container">
        <h6 class="mb-0">
            <a href="{{url('category')}}">Collection</a>/
            <a href="{{url('view-category/'.$product->category->id)}}">{{$product->category->name}}</a>/
            <a href="{{url('view-category/'.$product->category->id)}}">{{$product->user->shop->shop_name}}</a>/
            <a href="{{url('view-category/'.$product->category->id.'/'.$product->id)}}">{{$product->name}}</a>
        </h6>
    </div>
</div>

<div class="container">
    <div class="card shadow product_data">
        <div class="card-body">
            <div class="row">


            <style>
    .enlarged-image {
        transform: scale(1.9);
        z-index: 1;
        position: absolute;
        top: 40%;
        left: 30%;
        transform-origin: center center;
    }
    .discount-percent {
    color: green;
    font-size: 14px;
}
    .small-image {
        width: 50px;
        height: 50px;
        object-fit: cover;
        cursor: pointer;
    }
</style>

<div class="col-md-4 border-right">
    <div class="image-container position-relative">
        @if($product->images->count() > 1)
            <button class="prev-image-btn position-absolute top-50 start-0 translate-middle-y" onclick="showPrevImage()">&#60;</button>
            <img id="currentImage" src="{{ asset('upload/product/'.$product->images[0]->image) }}" alt="" class="main-image w-100" onclick="toggleImageSize(this)">
            <button class="next-image-btn position-absolute top-50 end-0 translate-middle-y" onclick="showNextImage()">&#62;</button>
        @else
            <img id="currentImage" src="{{ asset('upload/product/'.$product->images[0]->image) }}" alt="" class="main-image w-100" onclick="toggleImageSize(this)">
        @endif
    </div>
    
    @if($product->images->count() > 1)
        <div class="row mt-3">
            @foreach($product->images as $key => $image)
                @if($key > 0)
                    <div class="col-md-4">
                        <img src="{{ asset('upload/product/'.$image->image) }}" alt="" class="small-image" onclick="changeMainImage(this)">
                    </div>
                @endif
            @endforeach
        </div>
    @endif

<script>
    function toggleImageSize(image) {
        image.classList.toggle('enlarged-image');
    }

    function changeMainImage(clickedImage) {
        var mainImage = document.getElementById('currentImage');
        var tempSrc = mainImage.src;
        mainImage.src = clickedImage.src;
        clickedImage.src = tempSrc;
    }

    function showPrevImage() {
        // Implement logic to show the previous image
    }

    function showNextImage() {
        // Implement logic to show the next image
    }
</script>


<script>
    var images = {!! json_encode($product->images->pluck('image')) !!};
    var currentImageIndex = 0;
    var mainImage = document.querySelector('.main-image');

    function showImage(index) {
        if (index >= 0 && index < images.length) {
            mainImage.src = "{{ asset('upload/product/') }}" + '/' + images[index];
            currentImageIndex = index;
        }
    }

    function showPrevImage() {
        showImage(currentImageIndex - 1);
    }

    function showNextImage() {
        showImage(currentImageIndex + 1);
    }
</script>

</div>

<script>
    var images = {!! json_encode($product->images->pluck('image')) !!};
    var currentImageIndex = 0;
    var mainImage = document.querySelector('.main-image');

    function showImage(index) {
        if (index >= 0 && index < images.length) {
            mainImage.src = "{{ asset('upload/product/') }}" + '/' + images[index];
            currentImageIndex = index;
        }
    }

    function showPrevImage() {
        showImage(currentImageIndex - 1);
    }

    function showNextImage() {
        showImage(currentImageIndex + 1);
    }
</script>


                <div class="col-md-8">

                    <h1 class="mb-0">
                        {{$product->name}}
                       <br> 
                       @php
    $overallRating = $product->ratings->avg('product_rating');
@endphp

    <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>{{ $ratings->count() }} ratings</p>

                        <label for="" style="font-size: 1rem; background: rgba(234,88,11,255); color: white;" class="float-end badge trending_tag">{{$product->trending == "1" ? 'Trending' : '' }}</label>
                        <br>
                        <div class="d-flex align-items-center">
                            <div>
                            <h6>
                                
                            <a href="{{ route('user.items', $product->user->id) }}">
    <div style="font-size: 24px; font-weight: bold; cursor: pointer;">
        {{ $product->user->shop->shop_name }}
    </div>
</a>
</h6>  


                            <h6>{{ $product->user->email }}</h6>
                            <h6>{{ $product->user->phone }}</h6>

                            <h6>{{ $product->user->shop->barangay }}</h6><h6>{{ $product->user->shop->municipal }}</h6>

                            </div>
                            <div class="ms-auto">
                                <a class="btn btn-primary custom-report-button" href="#" data-bs-toggle="modal" data-bs-target="#reportModal" style="background-color: #FF0000; color: #FFFFFF; padding: 3px 8px; font-size: 12px;">
                                    <i class="fa-solid fa-flag" style="font-size: 14px;"></i> Report Abuse
                                </a>
                                @if (Auth::check())
                                <a class="btn btn-primary ms-2" href="/contactSeller/{{ $product->user->id }}" style="padding: 3px 8px; font-size: 12px;">
                                    <i class="fa-solid fa-envelope" style="font-size: 14px;"></i> Chat
                                </a>
                                @else
                                <a class="btn btn-primary ms-2" href="{{ route('login') }}" style="padding: 3px 8px; font-size: 12px;">
                                    <i class="fa-solid fa-envelope" style="font-size: 14px;"></i> Chat
                                </a>
                                @endif
                            </div>
                        </div>
                    </h1>


                    <style>
    .smaller-text {
        font-size: 14px; /* Adjust the font size as needed */
    }
</style>
                    <hr>
            <!-- @if($product->price > 0)
            <label for="" class="me-3">Original Price : <s>₱ {{number_format($product->price,  2, '.', ',') }}</s></label>
            @endif -->

            

            <p style="font-size: 24px;">
            @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">
                        {!! $product->description !!}
                    </p>
                    <p class="mt-3">
                    <small class="smaller-text">{!! $product->small_description !!}</small></p>
                    <hr>
                    @if($product->qty > 0)
                    <label for="" style="background:rgba(234,88,11,255); color:white;" class="badge">In Stock</label>
                    @else
                    <label for="" class="badge bg-danger">Out Of Stock</label>
                    @endif

                    @if ($product->qty <= 10)
                    <p class="text-warning">only {{$product->qty}} left in stock!</p>
                    @endif
                    <div class="row mt-2">
                        <div class="col-md-3">
                            <input type="hidden" value="{{$product->id}}" class="prod_id">
                            <label for="quantity">Quantity</label>
                            <div class="input-group text-center mb-3">
                                <button class="input-group-text decrement-btn">-</button>
                                <input type="text" readonly name="quantity" value="1" class="form-control quantity-input bg-light text-center">
                                <button class="input-group-text increment-btn">+</button>
                            </div>
                        </div>
                        <div class="col-md-10">
                            @if($product->qty > 0)
                            <button type="button" class="btn btn-primary btn-sm addToCartButton fs-8">Add to Cart <i class="fa-solid fa-cart-plus"></i></button>
                            @endif
                        </div>
                    </div>
                    <br>

                    <div class="mt-5 pt-5">
         
    <h4>Product Ratings</h4>
    @if ($ratings->isEmpty())
        <p>No ratings available for this product.</p>
    @else
        <ul id="allRatings">
        @foreach ($ratings as $rating) <!-- Limit to 2 items -->
                <li class="mb-4">
                    <div class="row">
                        <div class="col-md-2">
                            <strong>Customer:</strong><br>{{ $rating->user->name }}
                        </div>
                        <div class="col-md-5">
                            <strong>Product Rating:</strong><br>
                            <span class="rating-stars">
                                @for ($i = 1; $i <= 5; $i++)
                                    @if ($i <= $rating->product_rating)
                                        <i class="fas fa-star" style="color: gold;"></i>
                                    @else
                                        <i class="far fa-star" style="color: gold;"></i>
                                    @endif
                                @endfor
                            </span>
                        </div>
                       

                    <div class="mt-3">
                        <strong>Comment:</strong><br>{{ $rating->comment }}
                    </div>
                    @if ($rating->images && $rating->images->isNotEmpty())
                        <div class="row mt-3">
                            @foreach ($rating->images as $image)
                                <div class="col-md-4 mb-3">
                                    <div class="image-container" style="height: 300px; overflow: hidden;">
                                        <img src="{{ asset('upload/ratingImage/'.$image->image_path) }}" alt="Rating Image" class="img-fluid adjustable-image" onclick="toggleImageSizes(this)">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </li>
            @endforeach
        </ul>
        @if ($ratings->count() > 5)
            <button class="btn btn-primary" id="seeMoreBtn">Hide Ratings</button>
        @endif
    @endif
</div>

<script>
    document.getElementById('seeMoreBtn').addEventListener('click', function() {
        var allRatings = document.getElementById('allRatings');
        var seeMoreBtn = document.getElementById('seeMoreBtn');
        if (allRatings.style.display === 'none') {
            allRatings.style.display = 'block';
            seeMoreBtn.innerText = 'See Less';
        } else {
            allRatings.style.display = 'none';
            seeMoreBtn.innerText = 'See Ratings';
        }
    });
</script>


</div>
</div>
</div>
</div>
  

<script>

function toggleImageSizes(image) {
        image.classList.toggle('enlarged-images');
    }

</script>
<style>
    
    .enlarged-images {
        transform: scale(0.7);
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 10%;
        transform-origin: center center;

    }
</style>

<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">Report Product</h5>
            </div>
            <form action="{{ route('report.reportstore', $product->user->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="reason" class="form-label">Reason for Report</label>
                        <select class="form-select" id="reason" name="reason" required>
                            <option value="">Select a reason</option>
                            <option value="Inappropriate content">Inappropriate content</option>
                            <option value="Fraudulent activity">Fraudulent activity</option>
                            <option value="Misleading information">Misleading information</option>
                            <option value="Counterfeit product">Counterfeit product</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3" id="otherReasonContainer" style="display: none;">
                        <label for="otherReason" class="form-label">Other Reason</label>
                        <textarea class="form-control" id="otherReason" name="otherReason" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    @if (Auth::check())
                    <button type="submit" class="btn btn-primary">Submit Report</button>
                    @else
                    @endif
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')

<script>
    $(document).ready(function () {
        $('.addToCartButton').click(function (e) {
            e.preventDefault();
            var product_id = $(this).closest('.product_data').find('.prod_id').val();
            var product_qty = $(this).closest('.product_data').find('.quantity-input').val();
            $.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");
                    }
                }
            });
        });
        
        $('.increment-btn').click(function (e) {
    e.preventDefault();

    var inputField = $(this).closest('.input-group').find('.quantity-input');
    var value = parseInt(inputField.val(), 10);
    var maxQuantity = {{$product->qty}};

    if (value < maxQuantity) {
        value++;
        inputField.val(value);
    }

    // Disable the increment button if the available quantity is less than or equal to the desired quantity
    if (value >= maxQuantity) {
        $(this).prop('disabled', true);
    }

    // Enable the decrement button
    $(this).closest('.input-group').find('.decrement-btn').prop('disabled', false);

    // Update the value attribute of the input field
    inputField.attr('value', value);
});

$('.decrement-btn').click(function (e) {
    e.preventDefault();

    var inputField = $(this).closest('.input-group').find('.quantity-input');
    var value = parseInt(inputField.val(), 10);

    if (value > 1) {
        value--;
        inputField.val(value);
    }

    // Enable the increment button
    $(this).closest('.input-group').find('.increment-btn').prop('disabled', false);

    // Disable the decrement button if the quantity is 1
    if (value <= 1) {
        $(this).prop('disabled', true);
    }

    // Update the value attribute of the input field
    inputField.attr('value', value);
});


        var reasonSelect = $('#reason');
        var otherReasonContainer = $('#otherReasonContainer');
        var otherReasonInput = $('#otherReason');

        reasonSelect.on('change', function () {
            if ($(this).val() === 'Other') {
                otherReasonContainer.show();
                otherReasonInput.attr('required', 'required');
            } else {
                otherReasonContainer.hide();
                otherReasonInput.removeAttr('required');
            }
        });

        $('.addToCartButton').click(function (e) {
            e.preventDefault();

            // Check if the user is logged in
            @auth
                var product_id = $(this).closest('.product_data').find('.prod_id').val();
                var product_qty = $(this).closest('.product_data').find('.quantity-input').val();

                $.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 Verify your Email") {
                            swal("Oops...", `${response.status}`, "error");
                        } else {
                            swal("Done!", `${response.status}`, "success");
                        }
                    },
                    error: function (error) {
                        console.error('Error adding product to the cart:', error);
                    }
                });
            @else
                // Redirect to the login page
                window.location.href = "{{ route('login') }}";
            @endauth
        });
    });
</script>




@endsection