@extends('user.layout.master')
@section('content')
    @php
        $reviews = $service->orders->pluck('reviews')->flatten();
        
        if ($reviews->count() > 0) {
            $average_rating = round($reviews->avg('rating'), 2);
        } else {
            $average_rating = 0;
        }
    @endphp
    <!-- Titlebar
                                                                        ================================================== -->
    <div class="single-page-header" data-background-image="{{ asset('assets/images/single-job.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="single-page-header-inner">
                        <div class="left-side">
                            <div class="header-image"><a href="/company/profile"><img
                                        src="{{ asset('assets/images/company-logo-03a.png') }}" alt=""></a></div>
                            <div class="header-details">
                                <h3>{{ $service->title }}</h3>
                                <h5>About the Employer</h5>
                                <ul>
                                    <li><a href="{{ route('buyer.provider.profile', ['seller' => $service->seller_id]) }}"><i
                                                class="icon-material-outline-business"></i>
                                            {{ $service->seller->full_name }}</a></li>
                                    <li>
                                        <div class="star-rating" data-rating="{{ $average_rating }}"></div>
                                    </li>
                                    {{-- <li><img class="flag" src="{{ asset('assets/images/flags/gb.svg') }}" alt="">
                                        United Kingdom</li>
                                    <li>
                                        <div class="verified-badge-with-title">Verified</div>
                                    </li> --}}
                                </ul>
                            </div>
                        </div>
                        <div class="right-side">
                            <div class="salary-box">
                                <div class="salary-type">Price</div>
                                <div class="salary-amount">${{ $service->price }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Page Content
                                                                        ================================================== -->
    <div class="container">
        <div class="row">

            <!-- Content -->
            <div class="col-xl-8 col-lg-8 content-right-offset">

                <div class="single-page-section">
                    <h3 class="margin-bottom-25">Job Description</h3>
                    {{ $service->description }}
                </div>

                {{-- MEDIA --}}
                <div class="single-page-section">
                    <h3 class="margin-bottom-25">Media</h3>
                    <div class="row">
                        @forelse ($service->media as $m)
                            @if ($m->type == 'image')
                                <div class="col-md-6 mb-2">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <img src="{{ asset($m->media) }}" height="180" alt="media">
                                        </div>
                                        <div class="card-footer text-muted">
                                            <a href="{{ route('seller.profile.media.delete', ['media' => $m->id]) }}"
                                                class="btn btn-danger" onclick="return confirm('Sure want to delete?')">
                                                <i class='icon-feather-trash'></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="col-md-6 mb-2">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <video controls width="100%">
                                                <source src="{{ asset($m->media) }}">
                                            </video>
                                        </div>
                                        <div class="card-footer text-muted">
                                            <a href="{{ route('seller.profile.media.delete', ['media' => $m->id]) }}"
                                                class="btn btn-danger" onclick="return confirm('Sure want to delete?')">
                                                <i class='icon-feather-trash'></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @empty
                        @endforelse
                    </div>
                </div>

                <!-- Reviews -->
                <div class="boxed-list margin-bottom-60">
                    <div class="boxed-list-headline">
                        <h3><i class="icon-material-outline-group"></i> Reviews</h3>
                    </div>
                    @forelse ($service->orders->pluck('reviews') as $reviews)
                        @forelse ($reviews as $review)
                            <ul class="boxed-list-ul">
                                <li>
                                    <div class="bid">
                                        <!-- Avatar -->
                                        <div class="bids-avatar">
                                            <div class="freelancer-avatar">
                                                <div class="verified-badge"></div>
                                                <a href="#"><img
                                                        src="{{ asset('assets/images/user-avatar-big-01.jpg') }}"
                                                        alt=""></a>
                                            </div>
                                        </div>

                                        <!-- Content -->
                                        <div class="bids-content">
                                            <!-- Name -->
                                            <div class="freelancer-name">
                                                {{-- <h4><a href="#"> 
                                            <img class="flag"
                                                    src="{{ asset('assets/images/flags/gb.svg') }}" alt=""
                                                    title="United Kingdom" data-tippy-placement="top"></a></h4> --}}
                                                <div class="star-rating" data-rating="{{ $review->rating }}"></div>
                                                <br>
                                                <p>{{ $review->review }}
                                                </p>
                                            </div>
                                        </div>

                                        <!-- Bid -->
                                        <div class="bids-bid">
                                            <div class="bid-rate">
                                                <span>{{ $review->created_at->diffForHumans() }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        @empty
                        @endforelse
                    @empty
                    @endforelse
                </div>
                {{-- <div class="single-page-section">
                    <h3 class="margin-bottom-30">Location</h3>
                    <div id="single-job-map-container">
                        <div id="singleListingMap" data-latitude="51.507717" data-longitude="-0.131095"
                            data-map-icon="im im-icon-Hamburger"></div>
                        <a href="#" id="streetView">Street View</a>
                    </div>
                </div> --}}

                {{-- <div class="single-page-section">
                    <h3 class="margin-bottom-25">Similar Services</h3>

                    <!-- Listings Container -->
                    <div class="listings-container grid-layout">

                        <!-- Job Listing -->
                        <a href="#" class="job-listing">

                            <!-- Job Listing Details -->
                            <div class="job-listing-details">
                                <!-- Logo -->
                                <div class="job-listing-company-logo">
                                    <img src="{{ asset('assets/images/company-logo-02.png') }}" alt="">
                                </div>

                                <!-- Details -->
                                <div class="job-listing-description">
                                    <h4 class="job-listing-company">Coffee</h4>
                                    <h3 class="job-listing-title">Barista and Cashier</h3>
                                </div>
                            </div>

                            <!-- Job Listing Footer -->
                            <div class="job-listing-footer">
                                <ul>
                                    <li><i class="icon-material-outline-location-on"></i> San Francisco</li>
                                    <li><i class="icon-material-outline-business-center"></i> Full Time</li>
                                    <li><i class="icon-material-outline-account-balance-wallet"></i> $35000-$38000</li>
                                    <li><i class="icon-material-outline-access-time"></i> 2 days ago</li>
                                </ul>
                            </div>
                        </a>

                        <!-- Job Listing -->
                        <a href="#" class="job-listing">

                            <!-- Job Listing Details -->
                            <div class="job-listing-details">
                                <!-- Logo -->
                                <div class="job-listing-company-logo">
                                    <img src="{{ asset('assets/images/company-logo-03.png') }}" alt="">
                                </div>

                                <!-- Details -->
                                <div class="job-listing-description">
                                    <h4 class="job-listing-company">King <span class="verified-badge"
                                            title="Verified Employer" data-tippy-placement="top"></span></h4>
                                    <h3 class="job-listing-title">Restaurant Manager</h3>
                                </div>
                            </div>

                            <!-- Job Listing Footer -->
                            <div class="job-listing-footer">
                                <ul>
                                    <li><i class="icon-material-outline-location-on"></i> San Francisco</li>
                                    <li><i class="icon-material-outline-business-center"></i> Full Time</li>
                                    <li><i class="icon-material-outline-account-balance-wallet"></i> $35000-$38000</li>
                                    <li><i class="icon-material-outline-access-time"></i> 2 days ago</li>
                                </ul>
                            </div>
                        </a>
                    </div>
                    <!-- Listings Container / End -->

                </div> --}}
            </div>


            <!-- Sidebar -->
            <div class="col-xl-4 col-lg-4">
                <div class="sidebar-container">
                    @if (auth('buyer')->check())
                        <a href="{{ route('chats.chat', ['conversation' => $service->conversation->id]) }}"
                            class="apply-now-button text-white">Chat <i class="icon-material-outline-chat-alt"></i></a>

                        <a href="{{ route('buyer.order.session.place', ['service_id' => $service->id, 'buyer' => auth('buyer')->id()]) }}"
                            class="apply-now-button text-white">Buy Now <i
                                class="icon-material-outline-arrow-right-alt"></i></a>

                        <a href="{{ route('buyer.order.session.place', ['service_id' => $service->id, 'buyer' => auth('buyer')->id(), 'same_seller' => true, 'seller' => $service->seller->id]) }}"
                            class="apply-now-button text-white">Buy Now From This Seller <i
                                class="icon-material-outline-arrow-right-alt"></i></a>
                    @else
                        <a href="{{ route('buyer.login') }}" class="apply-now-button text-white">Buy Now <i
                                class="icon-material-outline-arrow-right-alt"></i></a>

                        <a href="{{ route('buyer.login') }}" class="apply-now-button text-white">Buy Now This Seller<i
                                class="icon-material-outline-arrow-right-alt"></i></a>
                    @endif

                    <!-- Sidebar Widget -->
                    <div class="sidebar-widget">
                        <div class="job-overview">
                            <div class="job-overview-headline">Service Summary</div>
                            <div class="job-overview-inner">
                                <ul>
                                    {{-- <li>
                                        <i class="icon-material-outline-location-on"></i>
                                        <span>Location</span>
                                        <h5>London, United Kingdom</h5>
                                    </li> --}}
                                    <li>
                                        <i class="icon-material-outline-local-atm"></i>
                                        <span>Price</span>
                                        <h5>${{ $service->price }}</h5>
                                    </li>
                                    <li>
                                        <i class="icon-material-outline-access-time"></i>
                                        <span>Date Posted</span>
                                        <h5>{{ $service->created_at->diffForHumans() }}</h5>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Sidebar Widget -->
                    {{-- <div class="sidebar-widget">
                        <h3>Bookmark or Share</h3>

                        <!-- Bookmark Button -->
                        <button class="bookmark-button margin-bottom-25">
                            <span class="bookmark-icon"></span>
                            <span class="bookmark-text">Bookmark</span>
                            <span class="bookmarked-text">Bookmarked</span>
                        </button>

                        <!-- Copy URL -->
                        <div class="copy-url">
                            <input id="copy-url" type="text" value="" class="with-border">
                            <button class="copy-url-button ripple-effect" data-clipboard-target="#copy-url"
                                title="Copy to Clipboard" data-tippy-placement="top"><i
                                    class="icon-material-outline-file-copy"></i></button>
                        </div>

                        <!-- Share Buttons -->
                        <div class="share-buttons margin-top-25">
                            <div class="share-buttons-trigger"><i class="icon-feather-share-2"></i></div>
                            <div class="share-buttons-content">
                                <span>Interesting? <strong>Share It!</strong></span>
                                <ul class="share-buttons-icons">
                                    <li><a href="#" data-button-color="#3b5998" title="Share on Facebook"
                                            data-tippy-placement="top"><i class="icon-brand-facebook-f"></i></a></li>
                                    <li><a href="#" data-button-color="#1da1f2" title="Share on Twitter"
                                            data-tippy-placement="top"><i class="icon-brand-twitter"></i></a></li>
                                    <li><a href="#" data-button-color="#dd4b39" title="Share on Google Plus"
                                            data-tippy-placement="top"><i class="icon-brand-google-plus-g"></i></a></li>
                                    <li><a href="#" data-button-color="#0077b5" title="Share on LinkedIn"
                                            data-tippy-placement="top"><i class="icon-brand-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
@endsection