@extends('public-site.layouts.review-app')

@section('style')



<style>

    .rating {
    --dir: right;
    --fill: gold;
    --fillbg: rgba(100, 100, 100, 0.15);
    --heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    --stars: 5;
    --starsize: 3rem;
    --symbol: var(--star);
    --value: 1;
    --w: calc(var(--stars) * var(--starsize));
    --x: calc(100% * (var(--value) / var(--stars)));
    block-size: var(--starsize);
    inline-size: var(--w);
    position: relative;
    touch-action: manipulation;
    -webkit-appearance: none;
    }
    [dir="rtl"] .rating {
    --dir: left;
    }
    .rating::-moz-range-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    }
    .rating::-webkit-slider-runnable-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
    }
    .rating::-moz-range-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
    }
    .rating::-webkit-slider-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
    -webkit-appearance: none;
    }
    .rating, .rating-label {
    display: block;
    font-family: ui-sans-serif, system-ui, sans-serif;
    }
    .rating-label {
    margin-block-end: 1rem;
    }

    /* NO JS */
    .rating--nojs::-moz-range-track {
    background: var(--fillbg);
    }
    .rating--nojs::-moz-range-progress {
    background: var(--fill);
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--star);
    }
    .rating--nojs::-webkit-slider-runnable-track {
    background: var(--fillbg);
    }
    .rating--nojs::-webkit-slider-thumb {
    background-color: var(--fill);
    box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
    opacity: 1;
    width: 1px;
    }
    [dir="rtl"] .rating--nojs::-webkit-slider-thumb {
    box-shadow: var(--w) 0 0 var(--w) var(--fill);
    }
    .faq-search-section  .card-review{
        position: relative;
        line-height: 43px;
        top: -80px;
        padding: 10px 50px 10px 30px;
        background: #ffffff;
        font-size: 15px;
        width: 100%;
        min-height: 70px;
        color: #7e8597;
        box-shadow: 0px 0px 15px rgb(0 0 0 / 10%);
    }

    .title-ratings{
        text-align: center;
    }

    .rate{
        width: 50%;
        margin: auto;
    }
</style>
@endsection

@section('content')
<section class="faq-banner-section" style="background-image:url(images/background/9.jpg);">
    <div class="auto-container">
        <h1>Review</h1>
        <div class="text">You've come to the right place! You can track your consultation</div>
    </div>
</section>

<div class="faq-search-section">
    <div class="auto-container">
            <div class="review-group">
                <div class="card-review">
                    Nama Client : ahajjak <br>
                    Asal Organisasi : ahajjak <br>
                    Judul Pengajuan Konsultasi : ahajjak <br>
                    Uraian Pengajuan Konsultasi : ahajjak <br>
                    Tanggal Pengajuan : ahajjak <br>
                    Nama Konsultan : ahajjak <br>
                    Media Konsultasi : ahajjak <br>
                    Hasil Konsultasi : ahajjak <br>

                    {{-- <div class="height-100 d-flex justify-content-beet align-items-center"> --}}

                        <div class="card p-3 rate">
                            <div class="title-ratings">
                                <h5 class="review-count">Ratings</h5>
                            </div>


                            <div class="mt-1 d-flex justify-content-between align-items-center">
                                <h5 class="review-stat py-3">Cleanliness</h5>
                                <div class="small-ratings">
                                    <input class="rating" max="5" oninput="this.style.setProperty('--value', this.value)" step="0.5" style="--value:0.5" type="range" value="1">

                                    {{-- <input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="0.5" value="2"> --}}
                                </div>
                            </div>

                            <div class="mt-1 d-flex justify-content-between align-items-center">
                                <h5 class="review-stat">Front Office</h5>
                                <div class="small-ratings">
                                    <input class="rating" max="5" oninput="this.style.setProperty('--value', this.value)" step="0.5" style="--value:1" type="range" value="1">
                                </div>
                            </div>


                            <div class="mt-1 d-flex justify-content-between align-items-center">
                                <h5 class="review-stat">CPD</h5>
                                <div class="small-ratings">
                                    <input class="rating" max="5" oninput="this.style.setProperty('--value', this.value)" step="0.5" style="--value:2.5" type="range" value="1">
                                </div>
                            </div>


                            <div class="mt-1 d-flex justify-content-between align-items-center">
                                <h5 class="review-stat">Pastrol</h5>
                                <div class="small-ratings">
                                    <input class="rating" max="5" oninput="this.style.setProperty('--value', this.value)" step="0.5" style="--value:3.5" type="range" value="1">
                                </div>
                            </div>

                            <div class="mt-1 d-flex justify-content-between align-items-center">
                                <h5 class="review-stat">Office Space</h5>
                                <div class="small-ratings">
                                    <input class="rating" max="5" oninput="this.style.setProperty('--value', this.value)" step="0.5" style="--value:4.5" type="range" value="1">
                                </div>
                            </div>
                        </div>

                        <div class="card p-3 mt-3">
                            <div class="title-ratings">
                                <h5 class="review-count">Reviews</h5>
                            </div>
                            <div class="mt-2">
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="Tulis kesan dan pesan anda...."></textarea>

                            </div>
                            <div class="mt-2">
                                <button type="submit" class="btn btn-primary mb-2">Kirim</button>
                            </div>

                        </div>
                </div>
            </div>
    </div>
</div>


@endsection

@section('js')
@endsection