@extends('layouts.web.index')

@section('content')
    @include('layouts.web.header')

    <div class="content-page our-advisor-page">
        <div class="header-banner">
            <div class="header-banner-img">
                <div class="container">
                    <div class="advisor-main advisor-inner">
                        <main role="main" style="">
                            <div class="row justify-content-center align-items-center">
                                <div class="col-md-9">
                                    <div class="row">
                                        <div class="col-lg-1 col-md-1 col-1 px-md-0 mt-3">
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-3">
                                            @php
                                                if (does_url_exists($advisor['image'])) {
                                                    $image = $advisor['image'];
                                                } else {
                                                    $image = asset('web/images/no_image.jpg');
                                                }
                                            @endphp

                                            <img src="{{ $image }}" class="img-fluid  profile-picture-img"
                                                width="150" height="150" style="border-radius: 7%;">
                                        </div>
                                        <div class="col-lg-8 col-md-8 col-6 pl-md-0">
                                            <h1 class="mb-0 h1-about fontw800 pt-30 text-left padtop5xs" id="nickname">
                                                {{ $advisor['nick_name'] }}</h1>
                                            <p class="advisor_name mb-0">
                                            <div class="Stars" style="--rating: {{ (int) $advisor['average_rating'] }};"
                                                aria-label="Rating of this product is {{ (int) $advisor['average_rating'] }} out of 5.">
                                            </div>

                                            <span class="rating coloryellow">{{ $advisor['average_rating'] }}</span>
                                            <span class="count coloryellow"> ({{ count($advisor['review_rating']) }})
                                            </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </main>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-background">
            <div class="container">
                <div class="advisor-main1 advisor-inner">
                    <main role="main" style="">
                        <div class="row justify-content-center align-items-center">
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12">
                                        <h4 class=" mb-0 h1-about">Description </h4>
                                        <p>{{ $advisor['description'] }}</p>
                                        <h4 class="mt-3 h1-about">Categories </h4>
                                        <div>
                                            <ul class="nav nav-tabs" style="border: none">
                                                @foreach ($advisor['advisor_category'] as $key => $item)
                                                    @php
                                                        if ($key == 0) {
                                                            $class = 'lite-greentag';
                                                        } elseif ($key == 1) {
                                                            $class = 'lite-redtag';
                                                        } else {
                                                            $class = 'lite-bluetag';
                                                        }
                                                    @endphp
                                                    <li class="mt-2">
                                                        <a data-toggle="tab" class="active" href="#category_id9">
                                                            <span class="{{ $class }} category-pill"
                                                                style="margin: 5px;">{{ $item['category_detail']['title'] }}</span>
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-content">
                                    <div id="category_id9" class="tab-pane fade in active show">
                                        @foreach ($advisor['service_prices'] as $servicePrices)
                                            @php
                                                if ($servicePrices['service_type'] == 'chat' || $servicePrices['service_type'] == '24_chat') {
                                                    $class = 'border-litegreen';
                                                    $image_tag = 'chat-icon.png';
                                                    $color = 'color-green';
                                                } elseif ($servicePrices['service_type'] == 'audio' || $servicePrices['service_type'] == '24_audio') {
                                                    $class = 'border-red';
                                                    $image_tag = 'phone-icon.png';
                                                    $color = 'color-red';
                                                } else {
                                                    $class = 'border-blue';
                                                    $image_tag = 'video-icon.png';
                                                    $color = 'color-blue';
                                                }
                                            @endphp
                                            <div class="row mt-3">
                                                <div class="col-lg-12 col-md-12">
                                                    <a href="javascript:void(0);" class="link">
                                                        <div class="border-litegreen">
                                                            <div class="row">
                                                                <div class="col-md-6 col-6">
                                                                    <span class="font15 {{ $color }}">
                                                                        <img src="{{ asset('web/images/advisor_details/' . $image_tag) }}"
                                                                            width="20">&nbsp;
                                                                        {{ ADVISOR_SERVICES_TEXT[$servicePrices['service_type']] }}
                                                                    </span>
                                                                </div>
                                                                <div
                                                                    class="col-md-6 col-6 float-right font15 color-green text-right">
                                                                    $ {{ $servicePrices['price'] }}/min &nbsp; &nbsp;<img
                                                                        src="{{ asset('web/images/advisor_details/arrow-right.png') }}"
                                                                        width="7"></div>
                                                            </div>

                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                </div>

                                <div class="row mt-3 border-top pt-40 ">
                                    <div class="col-lg-12 col-md-12">
                                        <div class="row">
                                            <div class="col-md-6 col-6">
                                                <h4 class="mb-0 h1-about"> Rate & Review </h4>
                                            </div>
                                            <div class="col-md-6 col-6 float-right text-right">
                                                <p class="advisor_name mb-0">
                                                <div class="Stars"
                                                    style="--rating: {{ (int) $advisor['average_rating'] }};"
                                                    aria-label="Rating of this product is {{ (int) $advisor['average_rating'] }} out of 5.">
                                                </div>
                                                <span
                                                    class="rating coloryellow">{{ (int) $advisor['average_rating'] }}</span><span
                                                    class="count coloryellow">
                                                    ({{ count($advisor['review_rating']) }}) </span></p>
                                            </div>
                                        </div>


                                    </div>
                                </div>

                                @php
                                    $reviews = array_slice($advisor['review_rating'], 0, 5);
                                @endphp

                                @foreach ($reviews as $review)
                                    <div class="row mt-2">
                                        <div class="col-lg-12 col-md-12">
                                            <div class="litebgbox">
                                                <div class="row">
                                                    <div class="col-md-10 col-lg-6">
                                                        <div class="row ">
                                                            @php
                                                                if (does_url_exists($review['user_detail']['image'])) {
                                                                    $userImage = $review['user_detail']['image'];
                                                                } else {
                                                                    $userImage = asset('web/images/No_Image.png');
                                                                }
                                                            @endphp
                                                            <div class="col-md-3 col-3">
                                                                <img src="{{ $userImage }}" class="border-redius50">
                                                            </div>
                                                            <div class="col-md-9 col-9">
                                                                <p class="mb-0">{{ $review['user_detail']['name'] }}<span
                                                                        class="font14">&nbsp
                                                                        {{ date('d F', strtotime($review['created_at'])) }}</span>
                                                                </p>
                                                                <h6 class="mb-0 font14"></h6>
                                                                <p class="advisor_name mb-0">
                                                                <div class="Stars"
                                                                    style="--rating: {{ (int) $review['rating'] }};"
                                                                    aria-label="Rating of this product is {{ (int) $review['rating'] }} out of 5.">
                                                                </div>
                                                                <span class="rating coloryellow"
                                                                    style="font-size: 18px !important;">{{ (int) $review['rating'] }}</span>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLongTitle">Download Our App</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="col-md-12 centerdiv text-center">
                                                    <a href="https://play.google.com/store/apps/details?id=com.templeBliss"
                                                        target="_blank"><img
                                                            src="{{ asset('web/images/gplaystore.png') }}"
                                                            class="comingsoonimgimg" style="margin: 4%;"></a>
                                                    <a href="https://apps.apple.com/us/app/temple-bliss-live-psychics/id1547969270"
                                                        target="_blank"><img
                                                            src="{{ asset('web/images/iplaystore.png') }}"></a>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>
        <div class="pagebottom">
            <h1 class="bottom-heading pt-0">DOWNLOAD NOW</h1>
            <div class="col-md-12 centerdiv text-center">
                <a href="https://play.google.com/store/apps/details?id=com.templeBliss" target="_blank"><img
                        src="{{ asset('web/images/gplaystore.png') }}" class="comingsoonimgimg"></a>

                <a href="https://apps.apple.com/us/app/temple-bliss-live-psychics/id1547969270" target="_blank"><img
                        src="{{ asset('web/images/iplaystore.png') }}"></a>

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

    @include('layouts.web.footer')
@endsection

@section('style')
    <style>
        a.active>.category-pill {
            box-shadow: 5px 10px 18px #888888;
        }

        @media only screen and (max-width: 575px) {
            .profile-picture-img {
                height: 75px !important;
                max-height: 75px !important;
                min-width: 100%;
                object-fit: cover;
            }
        }

        .profile-picture-img {
            height: 175px;
            max-height: 180px;
            min-width: 100%;
            object-fit: cover;
        }

        @charset "UTF-8";

        :root {
            --star-size: 30px;
            --star-color: #d6dadc;
            --star-background: #fc0;
        }

        .Stars {
            --percent: calc(var(--rating) / 5 * 100%);
            display: inline-block;
            font-size: var(--star-size);
            font-family: Times;
            line-height: 1;
        }

        .Stars::before {
            content: "★★★★★";
            letter-spacing: 3px;
            background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
@endsection

@section('script')
@endsection