@extends('layouts.seller')

@section('content')
    <div class="card">
        <div class="card-header">
            <h4>Product Details</h4>
        </div>
        
        <div class="card-body">
        <a href="{{ url()->previous() }}" class="btn btn-primary me-2">Back</a>

            <div class="row">
                <div class="col-md-6">
            @if ($product->status == 0)
                <label for="" class="badge bg-success">  Unpublished </label>
                @elseif ($product->status == 1)
                <label for="" class="badge bg-info">  Published</label>
                @elseif ($product->status == 2)
                <label for="" class="badge bg-danger">  Blocked</label>
                @endif
                    <div class="form-group">
                        <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->shop->shop_name }}" disabled>
                    </div>
                    <div class="form-group">
                        <label for="date_created">Date Created:</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>
                            <button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#inactivePriceModal">View Price History</button>
                        @endif
                    </div>


                    <!-- Inactive Price Modal -->
<div class="modal fade" id="inactivePriceModal" tabindex="-1" aria-labelledby="inactivePriceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="inactivePriceModalLabel">Price History</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
    @foreach ($productPrices as $productPrice)
        @if ($productPrice->is_active == 1)
            @if ($productPrice != $latestActivePrice)
                <p>Price: {{ $productPrice->price }} ({{ $productPrice->created_at->format('F j, Y') }})</p>
            @endif
        @endif
    @endforeach
</div>

            <div class="modal-body">
                <form action="{{ route('add.new.price', ['productId' => $product->id]) }}" method="post">
                    @csrf
                    <div class="mb-3">
                        <label for="new_price" class="form-label">New Price</label>
                        <input type="number" class="form-control" id="new_price" name="new_price" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Add Price</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

                    @if ($product->qty < 11)
                 
                    @if($product->qty > 0)
                    <label for="" style="background:rgba(234,88,11,255); color:white;" class="badge bg-info">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! RESTOCK NOW</p>
                    @endif
                    
                  
<br>               
@endif
                    <div class="form-group">
    @if ($product->images)
        @foreach($product->images as $image)
            @if ($image->product_id === $product->id)
                <img src="{{ asset('upload/product/'.$image->image) }}" alt="Product Image" class="img-fluid adjustable-image">
            @endif
        @endforeach
    @endif
    @if ($product->image)
        <img src="{{ asset('upload/product/'.$product->image) }}" alt="Product Image" class="img-fluid adjustable-image">
    @endif
</div>
<style>.adjustable-image {
    max-width: 20%;
    height: auto;
}</style>

                </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>

<br>



                    <a class="btn btn-primary" href="{{url('edit-sellerproduct/'.$product->id)}}">Edit</a>

                </div>
            </div>

           
            <!-- Add other fields as needed -->
        </div>
    </div>

    
@endsection