@extends('layouts.admin')

@section('content')
    <div class="card">
        <div class="card-header">
            <h4>Product Details</h4>
        </div>


        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                    <form method="POST" action="{{ route('updateProductStatus', ['id' => $product->id]) }}" enctype="multipart/form-data"> 
            @csrf
            @method('PUT')
            <label for="status">Status</label>
            <style>
    select#status {
        color: black; /* Default color for the select */
        font-weight: bold; /* Bold text for the select */
    }

    select#status option[value="0"] {
        color: gray;
    }

    select#status option[value="1"] {
        color: green;
    }

    select#status option[value="2"] {
        color: red;
    }
</style>

<select class="form-control" name="status" id="status">
  <option value="0" {{ $product->status == "0" ? "selected" : "" }}>Unpublish</option>
    <option value="1" {{ $product->status == "1" ? "selected" : "" }}>Published</option>
    <option value="2" {{ $product->status == "2" ? "selected" : "" }}>Blocked</option>
</select>

<script>
                        document.getElementById('status').addEventListener('change', function() {
                            this.form.submit(); // Automatically submit the form when the option changes
                        });
                    </script>



                        <label for="seller">Seller:</label>
                        <input type="text" class="form-control" value="{{ $product->user->name }}" disabled>
                    </div>
                    <div class="form-group">
                        <label for="seller">Shop Name:</label>
                        <input type="text" class="form-control" value="{{ $product->user->shop->shop_name }}" disabled>
                    </div>

                    <div class="form-group">
                        <label for="seller">Shop Address:</label>
                        <input type="text" class="form-control" value="{{ $product->user->shop->municipal }}, {{ $product->user->shop->barangay }} {{ $product->user->shop->streets }}" disabled>
                    </div>

                    <div class="form-group">
                        <label for="date_created">Date Ordered:</label>
                        <input type="text" class="form-control" value="{{ $product->created_at->format('M d, Y H:i:s') }}" disabled>
                    </div>
                    <div class="form-group">
                        <label for="name">Product Name:</label>
                        <input type="text" class="form-control" value="{{ $product->name }}" disabled>
                    </div>
                    <div class="form-group">
                        <label for="price">Price:</label>
                        @php
                            $latestActivePrice = $productPrices->where('is_active', 1)->sortByDesc('created_at')->first();
                        @endphp
                        @if ($latestActivePrice)
                            <input type="text" class="form-control" value="{{ $latestActivePrice->price }}" disabled>
                        @endif
                    </div>
<br>

                    <style>
    .enlarged-image {
        transform: scale(3); /* Increase the size of the image */
        z-index: 1; /* Ensure the enlarged image appears on top */
        position: absolute; /* Position the enlarged image on top of the page */
        max-width: 90%;

        top: 30%; /* Position the enlarged image in the center vertically */
        left: 40%; /* Position the enlarged image in the center horizontally */
        transform-origin: center center; /* Set the transform origin to the center */
    }
</style>
                    @if ($product->images)
        @foreach($product->images as $image)
            @if ($image->product_id === $product->id)
                <img src="{{ asset('upload/product/'.$image->image) }}" alt="Product Image"  onclick="toggleImageSize(this)"class="img-fluid adjustable-image">
            @endif
        @endforeach
    @endif

    <style>.adjustable-image {
    max-width: 20%;
    height: auto;
}</style>

<script>
    function toggleImageSize(image) {
        image.classList.toggle('enlarged-image');
    }
</script>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="description">Description:</label>
                        <textarea class="form-control" rows="5" disabled>{{ $product->description }}</textarea>
                    </div>
                
            
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ratingsModal">
    View Ratings
</button>
            <!-- Ratings Modal -->
<div class="modal fade" id="ratingsModal" tabindex="-1" aria-labelledby="ratingsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ratingsModalLabel">Ratings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul>
                    @foreach ($ratingsCount as $star => $count)
                        <li>
                            @for ($i = 1; $i <= 5; $i++)
                                @if ($i <= $star)
                                    <i class="fas fa-star text-warning"></i>
                                @else
                                    <i class="far fa-star text-warning"></i>
                                @endif
                            @endfor
                            <span class="ml-2">{{ $count }} Ratings</span>
                        </li>
                        <br>
                    @endforeach
                    <li>
                        <span class="ml-2">{{ $totalRatingsCount }} Customer Rated</span>
                    </li>
                    <br>
                    <li>
                        <span class="ml-2">{{ $totalCombinedStars }} Stars in Total</span>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <div class="col-md-12 text-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
    


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#commentsModal">
    View Comments
</button>

<!-- Modal -->
<div class="modal fade" id="commentsModal" tabindex="-1" aria-labelledby="commentsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="commentsModalLabel">Comments</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul>
                    @foreach ($ratings as $rating)
                    <li>
                        {{ $rating->comment }}
                    </li>
                    <br>
                    @endforeach
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#imagesModal">
    View Images
</button>

<!-- Image Modal -->
<div class="modal fade" id="imagesModal" tabindex="-1" aria-labelledby="imagesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imagesModalLabel">Images</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
    <div class="row">
    @if (isset($rating) && $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: 250px; overflow: hidden;">
                            <img src="{{ asset('upload/ratingImage/'.$image->image_path) }}" alt="Rating Image" class="img-fluid" style="height: 100%; width: auto;">
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


@endsection