@extends('website.layout.master')
@section('content')
<style>
HEAD .rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate>input:checked~label {
    color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #ffc107;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #ffc107;
}

.custom-alert {
    margin-left: -16%;
}


.progress_bar {
    width: 100%;
}

.progress_bar_item {
    margin-bottom: 10px;
}

.item_bar {
    background-color: #f0f0f0;
    border-radius: 5px;
    height: 5px;
    overflow: hidden;
}

.progress {
    background-color: #f4c150;
    height: 100%;
    width: 0%;
    transition: width 0.5s ease;
}
</style>

@if (session()->has('alert'))
<div class="row">
    <div class="col-md-12 d-flex justify-content-end align-items-center ">
        <div class="alert alert-success alert-dismissible fade show col-md-4 " role="alert">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    {{ session('alert') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<div class="section single-course-banner-section" style="background-color: #ffff;">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="single-course-author-meta">
                    <div class="single-course-author">
                        <div class="author-avatar">
                            <a href="#">
                                @if($data?$data->image:'')
                                <img src="{{$data?$data->image:''}}" alt="" height="100px;">
                                @endif
                                {{-- <img height="100px" src="{{asset('assets/images/imagee.png')}}"> --}}

                            </a>
                        </div>
                        <div class="author-content">
                            <h3 class="title py-2">{{$data?$data->firstname:''}} {{$data?$data->lastname:''}}</h3>
                        </div>
                    </div>
                </div>
                <div class="single-course-banner-content">
                    <div class="course-top-meta">
                        @if ($data->user && $data->user->rating)
                        @for($i = 1; $i <= $data->user->rating; $i++)
                            <i class="color_star fas fa-star"></i>
                            @endfor
                            @endif
                            @if($data->user && $data->user->rating > 0)
                            <span class="rating">

                                {{$data && $data->user?$data->user->rating:''}}

                            </span>
                            @endif
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <img src="{{asset('assets/images/details.png')}}" style="max-width: 100%; max-height: 100%;" alt="">
            </div>
        </div>
    </div>
</div>
<div class="section single-course-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="single-course-wrapper">
                    <div class="single-course-description">
                        <h4 class="title">Description</h4>
                        <p>{{$data?$data->description:''}}</p>
                    </div>
                    <div class="single-course-feedback-wrap">
                        <h4 class="title">Lorem, ipsum dolor.</h4>
                        <div class="mt-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <form method="post" action="{{route('update.single.teacher')}}"
                                        class="feedback-form">
                                        @csrf
                                        <input type="hidden" name="user_id" value="{{$data?$data->id:''}}" />
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="rate">
                                                    <input type="radio" id="star5" name="rating" value="5" />
                                                    <label for="star5" title="text">5 stars</label>
                                                    <input type="radio" id="star4" name="rating" value="4" />
                                                    <label for="star4" title="text">4 stars</label>
                                                    <input type="radio" id="star3" name="rating" value="3" />
                                                    <label for="star3" title="text">3 stars</label>
                                                    <input type="radio" id="star2" name="rating" value="2" />
                                                    <label for="star2" title="text">2 stars</label>
                                                    <input type="radio" id="star1" name="rating" value="1" />
                                                    <label for="star1" title="text">1 star</label>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 mt-4">
                                                <textarea name="description" cols="30" rows="5"
                                                    placeholder="Write your review..." required></textarea>
                                            </div>
                                            <div class="col-sm-12 mt-4">
                                                <button class="btn" type="submit">Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @if($data->user && $data->user->rating > 0)
                        <div class="single-course-reviews-wrap">
                            <div class="single-course-rating-wrap">
                                <div class="average-rating-wrap">
                                    <div class="average-rating">
                                        <span class="average-digit">@if ($round_number > 0)
                                            {{$round_number}}
                                            @endif
                                        </span>
                                        <ul class="d-flex">
                                            @if ($data->user && $data->user->rating)
                                            @for($i = 1; $i <= $data->user->rating; $i++)
                                                <i class="color_star fas fa-star"></i>
                                                @endfor
                                                @endif
                                        </ul>
                                        <p class="total-digit d-flex">Total Reviews: <span
                                                class="rating">{{$totalNumberOfReviews}}</span></p>
                                    </div>
                                    <div class="average-rating-meter">
                                        @if($ratingPercentages > 0)
                                        @foreach($ratingPercentages as $index => $percentage)
                                        <div class="single-meter">
                                            <div class="rating-meter-star">
                                                <span><i class="fas fa-star"></i>{{ $index + 1 }}</span>
                                            </div>
                                            <div class="rating-meter-bar-inner">
                                                <div class="progress" style="width:{{$percentage}}%;">
                                                    <div class=" progress-bar bg-warning " role="progressbar"
                                                        aria-valuenow="{{ $percentage }}" aria-valuemin="0"
                                                        aria-valuemax="100">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="rating-meter-text">
                                                <span class="count">{{ $numberOfRatings[$index]}} ratings</span>
                                            </div>
                                        </div>
                                        @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="single-course-reviews-list">
                @if(isset($student_reviews))
                @foreach($student_reviews as $review)
                <div class="review-list-item">
                    <div class="review-left">
                        <div class="review-avatar">
                            <a class="" href="#">
                                <img height="60px" width="60px" src="{{asset('assets/images/imagee.png')}}"
                                    alt="Courses">
                                {{-- $review && $review->studnet ? initials($review->studnet->firstname) : '' --}}</a>
                        </div>
                        <div class="review-info">
                            <span class="name"><a href="#">anonymous</a></span>
                            @php
                            $date = isset($review->created_at) ? date('d-M-y', strtotime($review->created_at)) : '';
                            @endphp
                            <span class="time">{{$date}}</span>
                            <ul class="d-flex">
                                @if ($review->rating)
                                @for($i = 1; $i <= $review->rating; $i++)
                                    <i class="color_star fas fa-star"></i>
                                    @endfor
                                    @endif
                            </ul>
                        </div>
                    </div>
                    <div class="review-right">
                        <span class="message">{{$review?$review->description:''}}</span>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<script>
// Update progress bars when the page loads
window.addEventListener('load', function() {
    let progressBars = document.querySelectorAll('.progress-bar');
    progressBars.forEach(function(progressBar, index) {
        let percentage = parseFloat(progressBar.getAttribute('aria-valuenow'));
        progressBar.style.width = percentage + '%';
    });
});
</script>




@endsection