@extends('layout')

@section('h4-page', __('Rating'))

@section('contents')
    <link rel="stylesheet" href="{{ asset('css/rating.css') }}?v={{ filemtime(public_path('css/rating.css')) }}">
    <div class="row layout-top-spacing">
        <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
            <div class="mb-3">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show " role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            <div class="widget-content widget-content-area br-6">
                <div class="row">
                    <div class="col-12 col-md-8 mt-3">
                        <h4>{{ __('Rating') }}</h4>
                        <div class="d-flex align-items-center mt-3">
                            <p class="m-0">5</p>
                            <i class="fas fa-star @if(@$fiveStarCount != 0) active @endif"></i>
                            <div class="progress w-100 m-0" style="border-radius: 16px;">
                                <div class="progress-bar" role="progressbar" style="width: {{ @$fiveStarAverage }}%"
                                    aria-valuenow="{{ @$fiveStarAverage }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">{{ @$fiveStarCount ?? 0 }}</span>
                        </div>
                        <div class="d-flex align-items-center mt-3">
                            <p class="m-0">4</p>
                            <i class="fas fa-star @if(@$fourStarCount != 0) active @endif"></i>
                            <div class="progress w-100 m-0" style="border-radius: 16px;">
                                <div class="progress-bar" role="progressbar" style="width: {{ @$fourStarAverage }}%"
                                    aria-valuenow="{{ @$fourStarAverage }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">{{ @$fourStarCount ?? 0 }}</span>
                        </div>
                        <div class="d-flex align-items-center mt-3">
                            <p class="m-0">3</p>
                            <i class="fas fa-star @if(@$threeStarCount != 0) active @endif"></i>
                            <div class="progress w-100 m-0" style="border-radius: 16px;">
                                <div class="progress-bar" role="progressbar" style="width: {{ @$threeStarAverage }}%"
                                    aria-valuenow="{{ @$threeStarAverage }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">{{ @$threeStarCount ?? 0 }}</span>
                        </div>
                        <div class="d-flex align-items-center mt-3">
                            <p class="m-0">2</p>
                            <i class="fas fa-star @if(@$twoStarCount != 0) active @endif"></i>
                            <div class="progress w-100 m-0" style="border-radius: 16px;">
                                <div class="progress-bar" role="progressbar" style="width: {{ @$twoStarAverage }}%"
                                    aria-valuenow="{{ @$twoStarAverage }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">{{ @$twoStarCount ?? 0 }}</span>
                        </div>
                        <div class="d-flex align-items-center mt-3">
                            <p class="m-0">1</p>
                            <i class="fas fa-star @if(@$oneStarCount != 0) active @endif"></i>
                            <div class="progress w-100 m-0" style="border-radius: 16px;">
                                <div class="progress-bar" role="progressbar" style="width: {{ @$oneStarAverage }}%"
                                    aria-valuenow="{{ @$oneStarAverage }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">{{ @$oneStarCount ?? 0 }}</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 mt-3">
                        <h4>{{ __('Average') }}</h4>
                        <div class="d-flex align-items-center mt-3">
                            <span class="me-2">{{ __('Overall') }}</span>
                            <svg style="display:none;">
                                <defs>
                                    <symbol id="fivestars" viewBox="0 0 120 24">
                                        <path
                                            d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
                                            fill="currentColor" fill-rule="evenodd" />
                                        <path
                                            d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
                                            fill="currentColor" fill-rule="evenodd" transform="translate(24)" />
                                        <path
                                            d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
                                            fill="currentColor" fill-rule="evenodd" transform="translate(48)" />
                                        <path
                                            d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
                                            fill="currentColor" fill-rule="evenodd" transform="translate(72)" />
                                        <path
                                            d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
                                            fill="currentColor" fill-rule="evenodd" transform="translate(96)" />
                                    </symbol>
                                </defs>
                            </svg>
                            <div class="rating">
                                <progress class="rating-bg" value="{{ @$avgRating }}" max="5"></progress>
                                <svg>
                                    <use xlink:href="#fivestars" />
                                </svg>
                            </div>
                            <span class="ms-2">{{ number_format(@$avgRating, 2) ?? 0 }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="widget-content widget-content-area br-6 mt-3">
                <div class="row">
                    <div class="col-10 mt-3">
                        @if(count(@$main) > 0)
                        {{ @$main->firstItem() }}-{{ @$main->lastItem() }} of {{ @$main->total() }} {{ __('Reviews') }}
                        @endif
                    </div>
                    <div class="col-2 text-end mt-3">
                        <!-- Example single danger button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                {{ __('Sort') }}
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="?sort=asc">{{ __('Newest') }}</a></li>
                                <li><a class="dropdown-item" href="?sort=desc">{{ __('Oldest') }}</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                @forelse (@$main as $key => $item)
                    <div class="rating-blox my-3">
                        <div class="d-flex justify-content-between">
                            <div class="d-flex align-items-center">
                                <svg style="display:none;">
                                    <defs>
                                        <symbol id="fivestars">
                                            <path
                                                d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24"
                                                fill="white" fill-rule="evenodd" />
                                            <path
                                                d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24"
                                                fill="white" fill-rule="evenodd" transform="translate(24)" />
                                            <path
                                                d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24"
                                                fill="white" fill-rule="evenodd" transform="translate(48)" />
                                            <path
                                                d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24"
                                                fill="white" fill-rule="evenodd" transform="translate(72)" />
                                            <path
                                                d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24"
                                                fill="white" fill-rule="evenodd" transform="translate(96)" />
                                        </symbol>
                                    </defs>
                                </svg>
                                <div class="rating">
                                    <progress class="rating-bg" value="{{ @$item->rating }}" max="5"></progress>
                                    <svg>
                                        <use xlink:href="#fivestars" />
                                    </svg>
                                </div>
                                <span class="ms-2 text-black">{{ @$item->account->fullname() }}</span>
                                <span class="text-muted ms-2">{{ @$item->showDate() }}</span>
                            </div>
                            <div>
                                <div class="bg-light bg-gradient p-2 rounded"><span
                                        class="fw-bold">{{ __('OrderNo') }}.</span> {{ @$item->order?->no }}</div>
                            </div>
                        </div>
                        <div class="text-wrap mt-2 text-black" >
                            {{ @$item->comment }}
                        </div>
                        <hr>
                    </div>
                @empty
                    <div class="rating-blox my-3">
                        <p class="text-center">{{ __('No rating found') }}</p>
                    </div>
                @endforelse

                <div class="d-flex justify-content-end pb-0">
                    @if(count(@$main) > 0)
                    {{ @$main->appends(request()->except('page'))->links('pagination::custom-paginate') }}
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection