@extends('layouts.app')

@section('content')
    <div class="container-fluid page-headline"></div>
    <div class="container casino-more-details">
        <div class="row casino-info shadow-sm p-md-0">
            <div class="col-12 col-md-5 pr-md-0">
                <div class="casino-image float-left"
                     style="background-image:url('/uploads/companies/{{$company->image}}')"></div>
                <div class="float-left">
                    <div class="casino-title">{{$company->title}}</div>
                    @if(isset($company->offers[0]))
                        <div class="casino-bonus">{{$company->offers[0]->categories[0]->title}}</div>
                        <div class="casino-bonus-descr">
                            {{$company->offers[0]->short_content}}
                        </div>
                    @endif
                    @if(isset($company->offers[1]))
                        <div class="d-block d-md-none">
                            <div class="casino-bonus">{{$company->offers[1]->categories[0]->title}}</div>
                            <div class="casino-bonus-descr">
                                {{$company->offers[1]->short_content}}
                            </div>
                        </div>
                    @endif
                </div>

            </div>

            <div class="col-6 col-md-3 p-md-0 d-none d-md-block">
                @if(isset($company->offers[1]))
                    <div class="casino-title">&nbsp;</div>
                    <div class="casino-bonus">{{$company->offers[1]->categories[0]->title}}</div>
                    <div class="casino-bonus-descr">
                        {{$company->offers[1]->short_content}}
                    </div>
                @endif
            </div>

            <div class="col-12 col-md-4 pl-md-0 ">
                <div class="float-left mt-65">
                    @for($i=0; $i<5; $i++)
                        @if($i>=$company->score)
                            <i class="fa fa-star star-o-color" aria-hidden="true"></i>
                        @else
                            <i class="fa fa-star star-color" aria-hidden="true"></i>
                        @endif
                    @endfor
                    <span class="rate align-middle text-white">&nbsp;{{$company->score}}/5</span>
                </div>
                <div class="float-left ">
                    <button class="btn btn-primary align-bottom roboto-bold view-all"
                            onclick="window.open('{{$company->play_now_link}}')">
                        PLAY NOW
                    </button>
                </div>

            </div>
        </div>
        <div class="row ">
            <div class="col-12 casino-tabs shadow-sm">
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="overview" data-toggle="pill" href="#pills-overview" role="tab"
                           aria-controls="pills-overview" aria-selected="true">OVERVIEW</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="bonus-details" data-toggle="pill" href="#pills-bonus-details" role="tab"
                           aria-controls="pills-bonus-details" aria-selected="false">BONUS DETAILS</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-8 tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="overview">
                    <h3>{{$company->title}}</h3>
                    {!! $company->description !!}
                </div>
                <div class="tab-pane fade" id="pills-bonus-details" role="tabpanel"
                     aria-labelledby="pills-bonus-details">
                    @foreach($company->offers as $offer)
                        <p>{{$offer->categories[0]->title}}</p>
                        <p>{{$offer->title}}</p>
                        <p>{!!$offer->content  !!}</p>
                        <hr>
                    @endforeach


                </div>

            </div>
            <div class="col-12 col-md-4 most-popular-casinos pr-md-0">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Most Popular</h5>
                    </div>
                    <ul class="list-group list-group-flush">
                        @foreach($top_companies as $top_company)
                            <li class="list-group-item">
                                <div class="float-left casino-image"
                                     style="background-image: url('/uploads/companies/{{$top_company->image}}')"></div>
                                <div class="float-left casino-title">
                                    {{$top_company->title}}
                                </div>
                                <div class="float-right play-btn">
                                    <a href="{{$top_company->play_now_link}}" target="_blank"
                                       class="h-100 text-center text-white w-100">PLAY</a>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    <div class="card-btn w-100">
                        <a href="/" class="card-link h-100 text-white w-100">
                            SEE ALL CASINOS
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-30 p-5 text-white casino-bonus-middle-banner d-flex align-items-center">
            <div class="align-middle roboto-regular">
                <h3>CASINO REVIEWS BY PLAYERS</h3>
                <h6>Rate Casino and Write a Review</h6>
            </div>
        </div>
        <div class="row mt-30">
            <div class="col-12 col-md-5 pl-md-0">
                <div class="w-100 bg-white add-review">
                    <form>
                        <div class="row">
                            <div class="col-12 col-md-7">
                                <h5>Rate a Casino</h5>
                            </div>
                            <div class="col-12 col-md-5 text-md-right">
                                <i data-rate="1" class="review-star fa fa-star star-o-color" aria-hidden="true"></i>
                                <i data-rate="2" class="review-star fa fa-star star-o-color" aria-hidden="true"></i>
                                <i data-rate="3" class="review-star fa fa-star star-o-color" aria-hidden="true"></i>
                                <i data-rate="4" class="review-star fa fa-star star-o-color" aria-hidden="true"></i>
                                <i data-rate="5" class="review-star fa fa-star star-o-color" aria-hidden="true"></i>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-12">
                                <h5>Your Review</h5>
                                <textarea id="review_text" class="w-100"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button id="review_btn" type="submit" class="btn btn-primary">POST MY REVIEW</button>
                            </div>
                        </div>
                        <input type="hidden" name="action" value="add_review">
                    </form>
                </div>
            </div>
            @if($reviews->count()>0)
            <div class="col-12 col-md-7 pr-md-0">
                @foreach($reviews as $review)
                    <div class="w-100 bg-white casino-review-item">
                        <div class="row">
                            <div class="col-3 col-md-1 ">
                                <div class="rounded-circle user-image"
                                     style="background-image: url('{{asset('images/user.png')}}')"></div>
                            </div>
                            <div class="col-9 col-md-5">
                                <div class="user-name roboto-regular">{{$review->user->name}}</div>
                                <div class="user-reviews-count roboto-regular">{{count($review->user->reviews)}}
                                    Reviews
                                </div>
                            </div>
                            <div class="col-6 col-md-3 user-reviews text-md-right pr-md-0">
                                @for($i=0; $i<5; $i++)
                                    @if($i >= $review->rate)
                                        <i class="fa fa-star star-o-color" aria-hidden="true"></i>
                                    @else
                                        <i class="fa fa-star star-color" aria-hidden="true"></i>
                                    @endif
                                @endfor
                                <span class="rate-text text-white">&nbsp;{{$review->rate}}/5</span>
                            </div>
                            <div class="col-6 col-md-3 roboto-bold review-date text-md-right">
                                <span>Reviewed on</span>
                                <span class="text-dark ">{{\Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $review->created_at)->format('M d Y')}}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-11 offset-md-1 roboto-regular user-text text-black">{{$review->content}}
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="row">
                    <div class="col-12">
                        <button class="btn btn-primary w-100 p-0 m-0 roboto-bold">SHOW MORE</button>
                    </div>
                </div>
            </div>
            @else
                <div class="col-12 col-md-7 pr-md-0">
                    <div class="w-100 bg-white casino-review-item d-flex align-items-center justify-content-center" style="min-height: 435px">
                        <div class="align-self-middle mt-0 roboto-regular section-title">No Reviews</div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('end-of-body')
    <script>
        function fillStars(rate) {
            $('.review-star').each(function () {
                if ($(this).data('rate') <= rate) {
                    $(this).css('color', '#ffc600');
                } else {
                    $(this).css('color', '#b2b2b2');
                }

            });
        }

        $(document).ready(function () {

            let review_rate = 0;
            $('.review-star').mouseover(function () {
                fillStars($(this).data('rate'));
            }).mouseout(function () {
                fillStars(review_rate);
            }).click(function () {
                if (user.id == 0) {
                    showAlert(1, "You must login first");
                    return;
                }
                review_rate = $(this).data('rate');
                fillStars(review_rate);
            });
            $('#review_text').focus(function () {
                if (user.id == 0) {
                    showAlert(1, "You must login first");
                    return;
                }
            });

            $('#review_btn').on('click', function (event) {
                event.preventDefault();
                if (user.id == 0) {
                    showAlert(1, "You must login first");
                    return;
                }
                let review_content = $('#review_text').val();
                if (review_content.length < 10) {
                    showAlert(1, "Review must contain at least 10 characters!");
                    return;
                }
                let request = $.ajax({
                    url: "/review/add",
                    type: "post",
                    data: {
                        'company_id': '{{$company->id}}',
                        'rate': review_rate,
                        'content': review_content,
                        '_token': '{{csrf_token()}}'
                    }
                });

                request.done(function (response, textStatus, jqXHR) {
                    if (parseInt(response.error) == 0) {
                        review_rate = 0;
                        fillStars(review_rate);
                        $('#review_text').val('');
                    }
                    showAlert(response.error, response.message);
                });

                request.fail(function (jqXHR, textStatus, errorThrown) {
                    showAlert(1, 'Server Error!');
                });
            });

        });


    </script>
@endpush