@extends('user.layouts.main')
@push('style')
<style>
    .star-input {
    display: none;
}

/* Style the stars */
.star-label {
    cursor: pointer;
    font-size: 24px;
    color: gray; /* Default color */
}

/* Change color when hovered */
.star-label:hover,
.star-input:checked ~ .star-label {
    color: gold; /* Gold color for selected stars */
}
</style>

@endpush
@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="bg-white px-3 py-2 mb-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title my-2">Review </h5>
                <a href="{{route('user.service')}}" class="btn btn-sm btn-primary border-0"> Back </a>
            </div>
        </div>
        <div class="user_wrapper">
            {{-- <div class="card dashboard_card px-3 py-3 border-0 rounded-2 position-relative">
                <div class="content">
                    <h4 class="title text-nowrap fs-6 mb-1"> Service ID: #0877 </h4>
                    <h2 class="text-nowrap fs-5 mb-3 theme-color fw-bold"> I Want to clean my house window </h2>
                    <div class="text-details-content">
                        <span class="fw-bold"> Category: </span>
                        <span> Window Clean </span>

                        <span class="fw-bold"> Selected Date: </span>
                        <span> 04 Dec 2024 </span>

                        <span class="fw-bold"> Selected Time: </span>
                        <span> 02.00pm </span>

                        <span class="fw-bold"> Approx Rate: </span>
                        <span> 800 KSh </span>

                        <span class="fw-bold"> Selected City: </span>
                        <span> Nairobi </span>

                        <span class="fw-bold"> Location: </span>
                        <span> Westlands, Nairobi </span>

                        <span class="fw-bold">  Special Note: </span>
                        <span> Urgent </span>

                        <span class="fw-bold">  Description: </span>
                        <span> I would like to have all the windows in my house cleaned. There are a total of 17 windows, and I need both the inside and outside surfaces cleaned thoroughly. The windows vary in size, and some are harder to reach, so proper tools and equipment may be required. Please let me know the estimated cost and availability for the service. </span>
                    </div>
                </div>
            </div> --}}

            <div class="card dashboard_card px-3 py-3 my-3 border-0 rounded-2 position-relative">
                <div class="content sp-user-review">
                    <div class="row">
                        <div class="col-md-8">
                            <h4 class="title fs-5 mb-3"> Reviews </h4>

                            {{-- Review Summary --}}
                            <div class="d-flex align-items-center mb-3">
                                <div class="flex-shrink-0">
                                    <!-- Average Rating -->
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="fs-1 fw-bold">{{ number_format($average_rating, 1) }}</div>
                                        <div class="fs-4 ms-2">/5</div>
                                    </div>

                                    <!-- Stars Display -->
                                    @for ($i = 1; $i <= 5; $i++)
                                        @php
                                            // Calculate the floor of the average rating and check if we need a half star
                                            $wholeRating = floor($average_rating);
                                            $isHalfStar = ($average_rating - $wholeRating) >= 0.5;
                                        @endphp

                                        @if ($i <= $wholeRating)
                                            <i class="fas fa-star star"></i>
                                        @elseif ($i == $wholeRating + 1 && $isHalfStar)
                                            <i class="fas fa-star-half-alt star"></i>
                                        @else
                                            <i class="fas fa-star star-outline"></i>
                                        @endif
                                    @endfor
                                    {{-- @for ($i = 1; $i <= 5; $i++)
                                        <i class="fas fa-star {{ $i <= round($average_rating) ? 'star' : 'star-outline' }}"></i>
                                    @endfor --}}
                                    {{-- <div class="mb-2">
                                        <i class="fas fa-star star"></i>
                                        <i class="fas fa-star star"></i>
                                        <i class="fas fa-star star"></i>
                                        <i class="fas fa-star star"></i>
                                        <i class="fas fa-star star-outline"></i>
                                    </div> --}}

                                    <!-- Total Ratings -->
                                    <div class="text-muted mb-3">{{ $reviews->count() }} Ratings</div>
                                </div>
                                <div class="flex-grow-1 ms-4">
                                    <!-- Rating Breakdown -->
                                    @foreach (range(5, 1) as $star)
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="me-2">
                                                <span class="pe-2">{{ $star }} </span>
                                                @for ($i = 1; $i <= 5; $i++)
                                                    <i class="fas fa-star {{ $i <= $star ? 'star' : 'star-outline' }}"></i>
                                                @endfor
                                            </span>
                                            <div class="rating-bar flex-grow-1">
                                                <div class="h-100 bg-warning" style="width: {{ $reviews->count() > 0 ? ($reviews->where('rating', $star)->count() / $reviews->count()) * 100 : 0 }}%;"></div>
                                            </div>
                                            <span class="ms-2 text-muted">{{ $reviews->where('rating', $star)->count() }}</span>
                                        </div>
                                    @endforeach
                                    {{-- <div>
                                        <!-- 5 Stars -->
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="me-2">
                                                <span class="pe-2"> 5 </span>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                            </span>
                                            <div class="rating-bar flex-grow-1">
                                                <div class="h-100 bg-warning" style="width: 70%;"></div>
                                            </div>
                                            <span class="ms-2 text-muted">3</span>
                                        </div>

                                        <!-- 4 Stars -->
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="me-2">
                                                <span class="pe-2"> 4 </span>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star-outline"></i>
                                            </span>
                                            <div class="rating-bar flex-grow-1">
                                                <div class="h-100 bg-warning" style="width: 20%;"></div>
                                            </div>
                                            <span class="ms-2 text-muted">2</span>
                                        </div>

                                        <!-- 3 Stars -->
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="me-2">
                                                <span class="pe-2"> 3 </span>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star-outline"></i>
                                                <i class="fas fa-star star-outline"></i>
                                            </span>
                                            <div class="rating-bar flex-grow-1">
                                                <div class="h-100 bg-warning" style="width: 5%;"></div>
                                            </div>
                                            <span class="ms-2 text-muted">1</span>
                                        </div>

                                        <!-- 2 Stars -->
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="me-2">
                                                <span class="pe-2"> 2 </span>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star-outline"></i>
                                                <i class="fas fa-star star-outline"></i>
                                                <i class="fas fa-star star-outline"></i>
                                            </span>
                                            <div class="rating-bar flex-grow-1">
                                                <div class="h-100 bg-warning" style="width: 4%;"></div>
                                            </div>
                                            <span class="ms-2 text-muted">1</span>
                                        </div>

                                        <!-- 1 Star -->
                                        <div class="d-flex align-items-center">
                                            <span class="me-2">
                                                <span class="pe-2"> 1 </span>
                                                <i class="fas fa-star star"></i>
                                                <i class="fas fa-star star-outline"></i>
                                                <i class="fas fa-star star-outline"></i>
                                                <i class="fas fa-star star-outline"></i>
                                                <i class="fas fa-star star-outline"></i>
                                            </span>
                                            <div class="rating-bar flex-grow-1">
                                                <div class="h-100 bg-warning" style="width: 0%;"></div>
                                            </div>
                                            <span class="ms-2 text-muted">0</span>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>

                            {{-- Customer Reviews --}}
                            @foreach ($reviews as $review)
                                <div class="biding-item border p-2 rounded mb-3">
                                    <div class="media mb-0">
                                        <img class="align-self-center rounded-circle img-thumbnail mr-3" src="{{ asset('assets/images/default-user.png') }}" alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="my-0 fs-6">{{ $review->review_user_name }}</h5>
                                            <p class="mb-1 fs-12">{{ $review->service->service_title }}</p>
                                            <div class="mb-0">
                                                <span class="service-star pe-2">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        <i class="fa-solid fa-star {{ $i <= $review->rating ? 'star' : 'star-outline' }}"></i>
                                                    @endfor
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="comment mb-0 mt-3 ">{{ $review->review_text }}</p>
                                </div>
                            @endforeach
                            {{-- <div class="biding-item border p-2 rounded mb-3">
                                <div class="media mb-0">
                                    <img class="align-self-center rounded-circle img-thumbnail mr-3" src="{{ asset('assets/images/default-user.png') }}" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5 class="my-0 fs-6"> Mwangi </h5>
                                        <p class="mb-1 fs-12"> Window Clean </p>
                                        <div class="mb-0">
                                            <span class="service-star pe-2">
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <p class="comment mb-0 mt-3"> I recently tried 'Window Clean' for cleaning my house windows, and I’m really satisfied! It made the process so much easier and left my windows sparkling clean. The results exceeded my expectations, and it was much quicker than my usual routine. Definitely recommend it for anyone who wants streak-free, spotless windows! </p>

                                <span class="thumb-up user-liked mt-2 d-inline-block">
                                    <i class="fa fa-thumbs-up"></i>
                                    2
                                </span>
                            </div>
                            <div class="biding-item border p-2 rounded mb-3">
                                <div class="media mb-0">
                                    <img class="align-self-center rounded-circle img-thumbnail mr-3" src="{{ asset('assets/images/default-user.png') }}" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5 class="my-0 fs-6"> Achieng </h5>
                                        <p class="mb-1 fs-12"> Window Clean </p>
                                        <div class="mb-0">
                                            <span class="service-star pe-2">
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star-half-stroke"></i>
                                                <i class="fa-regular fa-star"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <p class="comment mb-0 mt-3"> Amazing experience! Cleaning my house windows used to be a chore, but with 'window clean', it’s a breeze. It’s effective, easy to use, and leaves no streaks. I can see the outdoors clearly now. Highly recommend! </p>

                                <span class="thumb-up user-liked mt-2 d-inline-block">
                                    <i class="fa fa-thumbs-up"></i>
                                    0
                                </span>
                            </div>
                            <div class="biding-item border p-2 rounded mb-3">
                                <div class="media mb-0">
                                    <img class="align-self-center rounded-circle img-thumbnail mr-3" src="{{ asset('assets/images/default-user.png') }}" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5 class="my-0 fs-6"> Mutiso </h5>
                                        <p class="mb-1 fs-12"> Window Clean </p>
                                        <div class="mb-0">
                                            <span class="service-star pe-2">
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <p class="comment mb-0 mt-3"> So happy I found this! My windows were a mess, but window cleaning handled it effortlessly. The windows look brand-new, and I didn’t have to put in too much effort. Will definitely use it again. </p>

                                <span class="thumb-up user-liked mt-2 d-inline-block">
                                    <i class="fa fa-thumbs-up"></i>
                                    1
                                </span>
                            </div>
                            <div class="biding-item border p-2 rounded mb-3">
                                <div class="media mb-0">
                                    <img class="align-self-center rounded-circle img-thumbnail mr-3" src="{{ asset('assets/images/default-user.png') }}" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5 class="my-0 fs-6"> Wanjiru </h5>
                                        <p class="mb-1 fs-12"> Window Clean </p>
                                        <div class="mb-0">
                                            <span class="service-star pe-2">
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fas fa-star star-outline"></i>
                                                <i class="fas fa-star star-outline"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <p class="comment mb-0 mt-3"> Best solution for window cleaning! I was looking for something to make cleaning easier, and window clean was perfect. It cleans thoroughly and doesn’t leave residue. My home feels brighter! </p>

                                <span class="thumb-up user-liked mt-2 d-inline-block">
                                    <i class="fa fa-thumbs-up"></i>
                                    2
                                </span>
                            </div>
                            <div class="biding-item border p-2 rounded mb-3">
                                <div class="media mb-0">
                                    <img class="align-self-center rounded-circle img-thumbnail mr-3" src="{{ asset('assets/images/default-user.png') }}" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5 class="my-0 fs-6"> Omondi </h5>
                                        <p class="mb-1 fs-12"> Window Clean </p>
                                        <div class="mb-0">
                                            <span class="service-star pe-2">
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-regular fa-star"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <p class="comment mb-0 mt-3"> Totally worth it! Cleaning my house windows used to take forever, but window clean made it quick and easy. It gave professional-quality results without the cost of hiring someone. Super satisfied! </p>

                                <span class="user-liked mt-2 d-inline-block">
                                    <i class="fa fa-thumbs-up"></i>
                                    3
                                </span>
                            </div> --}}
                        </div>
                        <div class="col-md-4">
                            <div class="position-sticky top-80">
                                <h4 class="title fs-5 mb-3"> Leave a comment </h4>
                                <div class="card p-3">
                                    <form action="{{route('user.leaveReview')}}" method="POST">
                                        @csrf
                                        <input type="hidden" name="service_id" value="{{ $service }}">
                                        <input type="hidden" name="reviewer_user_id" value="{{ auth()->id() }}">
                                        <input type="hidden" name="provider_user_id" value="{{ $provider_id }}">
                                        <div class="review-rating-submit text-center mb-3">
                                            {{-- <i class="fa-solid fa-star star" data-value="1"></i>
                                            <i class="fa-solid fa-star star" data-value="2"></i>
                                            <i class="fa-solid fa-star star" data-value="3"></i>
                                            <i class="fa-solid fa-star star" data-value="4"></i>
                                            <i class="fa-solid fa-star star" data-value="5"></i> --}}
                                             <!-- Hidden radio buttons for star rating -->
                                            <input type="radio" name="rating" value="1" class="star-input" id="star-1" />
                                                <label for="star-1" class="star-label"><i class="fa-solid fa-star"></i>
                                            </label>

                                            <input type="radio" name="rating" value="2" class="star-input" id="star-2" />
                                                <label for="star-2" class="star-label"><i class="fa-solid fa-star"></i>
                                            </label>

                                            <input type="radio" name="rating" value="3" class="star-input" id="star-3" />
                                                <label for="star-3" class="star-label"><i class="fa-solid fa-star"></i>
                                            </label>

                                            <input type="radio" name="rating" value="4" class="star-input" id="star-4" />
                                                <label for="star-4" class="star-label"><i class="fa-solid fa-star"></i>
                                            </label>

                                            <input type="radio" name="rating" value="5" class="star-input" id="star-5" />
                                                <label for="star-5" class="star-label"><i class="fa-solid fa-star"></i>
                                            </label>
                                        </div>


                                        <div class="mb-3">
                                            <label for="name" class="form-label"> Your Name </label>
                                            <input type="email" class="form-control" id="review_user_name" name="review_user_name" value="{{auth()->user()->name}}" readonly>
                                        </div>

                                        {{-- <select class="form-select mb-3" aria-label="" readonly disabled>
                                            <option> Service Category </option>
                                            <option value="1"> Home Cleaning </option>
                                            <option value="2" selected> Window Clean </option>
                                            <option value="3"> On-Demand Cleaning </option>
                                        </select> --}}

                                        <div class="mb-3">
                                            <label for="review" class="form-label"> Your Comment <span class="text-danger">*</span> </label>
                                            <textarea class="form-control" name="review" id="review" rows="5" required></textarea>
                                        </div>

                                        {{-- <div class="mb-3 form-check">
                                            <input type="checkbox" class="form-check-input" id="check-mail">
                                            <label class="form-check-label" for="check-mail"> Anonymous </label>
                                        </div> --}}
                                        <button type="submit" class="btn btn-sm btn-primary w-100"> Post Comment </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection