@if ( auth()->check() )                          
<div class="rounded shadow-sm p-4 bg-white mt-3">
    <div class="mt-3">
        <h5><b>ให้คะแนนร้านค้า</b></h5>
    </div>
    <div class="text-center" id="rating_bar">
        <i class="fa fa-star ico-gray f-size-34 btn-rating" data-score="1" aria-hidden="true"></i>
        <i class="fa fa-star ico-gray f-size-34 btn-rating" data-score="2" aria-hidden="true"></i>
        <i class="fa fa-star ico-gray f-size-34 btn-rating" data-score="3" aria-hidden="true"></i>
        <i class="fa fa-star ico-gray f-size-34 btn-rating" data-score="4" aria-hidden="true"></i>
        <i class="fa fa-star ico-gray f-size-34 btn-rating" data-score="5" aria-hidden="true"></i>
    </div>
</div>
@endif
{{-- Form input review --}}
<div class="rounded shadow-sm p-4 bg-white mt-3">
    @if ( auth()->guest() )                            
    <div class="mt-3">
        <h5><b>เขียนรีวิว</b> <span class="f-size-default">
                (กรุณาลงชื่อเข้าใช้ก่อนเขียนรีวิว)</span></h5>
    </div>
    @endif
    @if ( auth()->check() )                          
    <div class="mt-3">
        <form class="row g-3 needs-validation" id="frm-review" novalidate method="post" action="{{ url('review/'. $store->id ) }}" enctype="multipart/form-data">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="shop_id" id="shop_id" value="{{ $store->id }}">
            <input type="hidden" name="score" id="review-score" value="0">
            <input type="hidden" name="reply_id" id="reply_id" value="0">
            <div class="mb-3">
                <label for="subject" class="form-label "><b>หัวเรื่อง</b> <span
                        class="text-danger">*</span></label>
                <input type="text" class="form-control" id="subject" name="subject" placeholder=""
                    required>
            </div>
            <div class="mb-3">
                <label for="detail" class="form-label"><b>รายละเอียด</b> <span
                        class="text-danger">*</span></label>
                <textarea class="form-control" id="message" name="message" rows="3"
                    required></textarea>
            </div>
            <div class="" id="image-preview">
                <input type="file" name="images[]" accept="image/*" style="display:none;" id="inputFile" class="upload-file" multiple />
                <div class="row" id="image-list"></div>
            </div>
            <div>
                <h5><b>อัพโหลดรูปภาพ</b> <span class="f-size-default"> (ขนาดไฟล์ไม่เกิน 1 MB/รูป,
                        อัพโหลดได้ไม่เกิน 10 รูป)</span></h5>
            </div>
            <div>
                <button id="btn-upload" class="rounded-pill border-0 px-5 py-2"
                    style="background-color: #FFCF15">
                    <i class="fa fa-upload" aria-hidden="true"></i> เพิ่มไฟล์
                </button>
                <span class="text-black-50 count-upload">อัพโหลดแล้ว 0 รูป</span>
            </div>
            <div class="mb-3">
                <div class="ex-checkbox">
                    <input type="checkbox" id="open_user" name="open_user" value="1">
                    <label for="open_user" class="radio_one"> เปิดเผยชื่อผู้ใช้</label>

                </div>
            </div>
            <div>
                <button type="submit"
                    class="rounded-pill w-100 a-regis text-decoration-none text-white border-0 text-center"
                    style="background-color: #F66074;padding: 7px 50px;">
                    ส่งความคิดเห็น
                </button>
            </div>
        </form>
    </div>
    @endif
</div>
{{-- Review list --}}
    @if (count($store->reviews) > 0)
<div class="rounded shadow-sm p-4 bg-white mt-3">
        @foreach ($store->reviews as $review)
        @php
            $reviewer = reviewer( $review );
        @endphp
    <div class="row justify-content-end position-relative">
        <div class="position-absolute" style="left: 0;top:0">
            <span class="reviewer">
                <img src="{{ $reviewer['avatar'] }}" alt="" class=""
                    style="width: 70px;" class="p-3">

            </span>
        </div>
        <div class="col-12 col-md-10 col-lg-10 align-self-end">
            <div class="">
                <img src="{{ url('assets/frontend/icon/user-pink.svg') }}" alt="" class=""
                    style="height: 15px;">
                <span class="align-middle">{{ $reviewer['name'] }}</span>
                <span class="float-end">{{ days_ago( $review->created_at ) }}</span>
            </div>
            <div class="mt-2">
                <h5><b>{{ $review->subject }}</b></h5>
            </div>
            <div>
                <i class="fa fa-star {{ $review->score >= 1 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                <i class="fa fa-star {{ $review->score >= 2 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                <i class="fa fa-star {{ $review->score >= 3 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                <i class="fa fa-star {{ $review->score >= 4 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                <i class="fa fa-star {{ $review->score >= 5 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
            </div>
            <div>
                {!! nl2br( $review->message ) !!}
            </div>
            @if (count( $review->images))
            <div class="mt-3 p-1">
                <div class="row">
                    @foreach ($review->images as $image)
                        <div class="col-4 col-md-2 col-lg-2 p-1 ">
                            <img src="{{ url( $image->link ) }}" alt=""
                                class="w-100 rounded cursor-pointer"
                                onclick="openModal();currentSlide({{ $image->id }})">
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
            <hr class="mb-0">
            <div>
                <button class="border-0 background-none ps-0 btn-like" data-review="{{ $review->id }}">
                    <img src="{{ url('assets/frontend/icon/like-pink.svg') }}" alt="" class="">
                    <span class="align-middle"><span class="like-no" id="like-no-{{ $review->id }}">{{ count( $review->liked ) > 0 ? count( $review->liked ) : '' }}</span> Like</span>
                </button>
                <button class="border-0 background-none">
                    <img src="{{ url('assets/frontend/icon/comment-pink.svg') }}" alt=""
                        class="">
                    <span class="align-middle">{{ count( $review->replys ) > 0 ? count( $review->replys ) : '' }} Comment</span>
                </button>
                <button class="border-0 background-none btn-reply" data-ref="{{ $review->id }}">
                    <img src="{{ url('assets/frontend/icon/reply-pink.svg') }}" alt="" class="">
                    <span class="align-middle">Reply</span>
                </button>
            </div>
            @if (count( $review->replys ) > 0 )
                @foreach ($review->replys as $reply)
                @php
                    $replyer = reviewer( $reply );
                @endphp
                <div class="mb-2 position-relative mt-3 ps-5" style="display: block;">
                    <div class="position-absolute" style="left: 0;top:0">
                        <span class="reviewer">
                            <img src="{{ $replyer['avatar'] }}" alt="" class="" style="width: 40px;" class="p-3">
                        </span>
                    </div>
                    <div class="col-12 col-md-10 col-lg-10 align-self-end">
                        <div class="">
                            <img src="{{ url('assets/frontend/icon/user-pink.svg') }}" alt="" class=""
                                style="height: 15px;">
                            <span class="align-middle">{{ $replyer['name'] }}</span>
                            <span class="float-end">{{ days_ago( $reply->created_at ) }}</span>
                        </div>
                    </div>
                    <div>
                        {!! nl2br( $reply->message ) !!}
                    </div>
                </div>
                <hr class="mb-3">

                @endforeach
                
            @endif
            @if (auth()->check() )                
                <form class="row mt-3 g-3 needs-validation" id="frm-reply" novalidate method="post" action="{{ url('review/'. $store->id ) }}" enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="shop_id" id="shop_id" value="{{ $store->id }}">
                    <input type="hidden" name="score" id="review-score" value="0">
                    <input type="hidden" name="reply_id" id="reply_id" value="{{ $review->id }}">
                    <input type="hidden" name="subject" id="subject" value="Reply comment">
                    <div class="mt-3 ps-5 position-relative">
                        <div class="position-absolute" style="left: 0px;top:0;">
                            <span class="reply-avatar">
                                <img src="{{ (auth()->user()->avatar && auth()->user()->avatar->link ) ? auth()->user()->avatar->link : url('assets/frontend/icon/user-white.png') }}" alt="" style="background:#ccc;" />
                            </span>
                        </div>
                        <textarea class="form-control" id="message" name="message" rows="2" required=""></textarea>
                        <div class="mt-3">
                            <div class="ex-checkbox">
                                <input type="checkbox" id="open_user" name="open_user" value="1">
                                <label for="open_user" class="radio_one"> เปิดเผยชื่อผู้ใช้</label>
                            </div>
                        </div>
                        <div class="mt-3 text-end">
                            <button type="submit"
                                class="rounded-pill a-regis text-decoration-none text-white border-0 text-center"
                                style="background-color: #F66074;padding: 7px 50px;"
                            >
                                ส่งความคิดเห็น
                            </button>
                        </div>
                    </div>
                </form>
            @endif
        </div>
    </div>
    <hr class="mb-4">

    @endforeach

</div>    
@endif