@extends('user.layout.master')
@section('content')
    <!-- Intro Banner
                                                                ================================================== -->
    <div class="intro-banner dark-overlay" data-background-image="{{ asset('assets/images/home-background-02.jpg') }}">

        <!-- Transparent Header Spacer -->
        <div class="transparent-header-spacer"></div>

        <div class="container">

            <!-- Intro Headline -->
            <div class="row">
                <div class="col-md-12">
                    <div class="banner-headline">
                        <h3>
                            <strong>Hire experts freelancers for any job, any time.</strong>
                            <br>
                            <span>Huge community of service providers nearby you, ready to serve!</span>
                        </h3>
                    </div>
                </div>
            </div>

            <!-- Search Bar -->
            <div class="row">
                <div class="col-md-12">
                    <form action="{{ route('buyer.index', ['search' => request()->search]) }}">
                        <div class="intro-banner-search-form margin-top-95">

                            <!-- Search Field -->
                            <div class="intro-search-field with-autocomplete">
                                {{-- <label for="autocomplete-input" class="field-title ripple-effect">Where?</label> --}}
                                <div class="input-with-icon">
                                    <input id="autocomplete-input" type="text" placeholder="Services" name="search"
                                        value="{{ old('search') }}" required>
                                    <i class="icon-material-outline-location-on"></i>
                                </div>
                            </div>

                            <!-- Button -->
                            <div class="intro-search-button">
                                <button type="submit" class="button ripple-effect">Search</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>

            <!-- Stats -->
            {{-- <div class="row">
                <div class="col-md-12">
                    <ul class="intro-stats margin-top-45 hide-under-992px">
                        <li>
                            <strong class="counter">1,586</strong>
                            <span>Jobs Posted</span>
                        </li>
                        <li>
                            <strong class="counter">3,543</strong>
                            <span>Tasks Posted</span>
                        </li>
                        <li>
                            <strong class="counter">1,232</strong>
                            <span>Freelancers</span>
                        </li>
                    </ul>
                </div>
            </div> --}}

        </div>
    </div>


    <!-- Content
                                                                ================================================== -->

    <!-- Popular Job Categories -->
    {{-- <div class="section margin-top-65 margin-bottom-30">
        <div class="container">
            <div class="row">

                <!-- Section Headline -->
                <div class="col-xl-12">
                    <div class="section-headline centered margin-top-0 margin-bottom-45">
                        <h3>Popular Categories</h3>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6">
                    <!-- Photo Box -->
                    <a href="#" class="photo-box small"
                        data-background-image="{{ asset('assets/images/job-category-01.jpg') }}">
                        <div class="photo-box-content">
                            <h3>Web / Software Dev</h3>
                            <span>612</span>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3 col-md-6">
                    <!-- Photo Box -->
                    <a href="#" class="photo-box small"
                        data-background-image="{{ asset('assets/images/job-category-02.jpg') }}">
                        <div class="photo-box-content">
                            <h3>Data Science / Analitycs</h3>
                            <span>113</span>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3 col-md-6">
                    <!-- Photo Box -->
                    <a href="#" class="photo-box small"
                        data-background-image="{{ asset('assets/images/job-category-03.jpg') }}">
                        <div class="photo-box-content">
                            <h3>Accounting / Consulting</h3>
                            <span>186</span>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3 col-md-6">
                    <!-- Photo Box -->
                    <a href="#" class="photo-box small"
                        data-background-image="{{ asset('assets/images/job-category-04.jpg') }}">
                        <div class="photo-box-content">
                            <h3>Writing & Translations</h3>
                            <span>298</span>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3 col-md-6">
                    <!-- Photo Box -->
                    <a href="#" class="photo-box small"
                        data-background-image="{{ asset('assets/images/job-category-05.jpg') }}">
                        <div class="photo-box-content">
                            <h3>Sales & Marketing</h3>
                            <span>549</span>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3 col-md-6">
                    <!-- Photo Box -->
                    <a href="#" class="photo-box small"
                        data-background-image="{{ asset('assets/images/job-category-06.jpg') }}">
                        <div class="photo-box-content">
                            <h3>Graphics & Design</h3>
                            <span>873</span>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3 col-md-6">
                    <!-- Photo Box -->
                    <a href="#" class="photo-box small"
                        data-background-image="{{ asset('assets/images/job-category-07.jpg') }}">
                        <div class="photo-box-content">
                            <h3>Digital Marketing</h3>
                            <span>125</span>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3 col-md-6">
                    <!-- Photo Box -->
                    <a href="#" class="photo-box small"
                        data-background-image="{{ asset('assets/images/job-category-08.jpg') }}">
                        <div class="photo-box-content">
                            <h3>Education & Training</h3>
                            <span>445</span>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div> --}}
    <!-- Features Cities / End -->



    <!-- Features Jobs -->
    <div class="section gray margin-top-45 padding-top-65 padding-bottom-75">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">

                    <!-- Section Headline -->
                    <div class="section-headline margin-top-0 margin-bottom-35">
                        <h3>Recent Services</h3>
                        {{-- <a href="#" class="headline-link">Browse All Tasks</a> --}}
                    </div>

                    <!-- Jobs Container -->
                    <div class="tasks-list-container compact-list margin-top-35">

                        <!-- Task -->
                        @forelse ($services as $service)
                            @php
                                $reviews = $service->orders->pluck('reviews')->flatten();
                                
                                if ($reviews->count() > 0) {
                                    $average_rating = round($reviews->avg('rating'), 2);
                                } else {
                                    $average_rating = 0;
                                }
                            @endphp


                            <!-- Job Listing Details -->
                            <div class="task-listing">
                                @if (auth('buyer')->check())
                                    <a href="{{ route('buyer.service.show', ['service' => $service]) }}" style="flex: 1;">
                                    @else
                                        <a href="{{ route('buyer.login') }}" style="flex: 1;">
                                @endif
                                <div class="task-listing-details">

                                    <!-- Details -->
                                    <div class="task-listing-description">
                                        <h3 class="task-listing-title">{{ $service->title }}</h3>
                                        <ul class="task-icons">
                                            <li><i class="icon-material-outline-category-on"></i>
                                                {{ $service->category->name }}
                                            </li>
                                            <li><i
                                                    class="icon-material-outline-business"></i>{{ $service->seller->full_name }}
                                                {{-- <div class="verified-badge" title="Verified Employer"
                                                data-tippy-placement="top"></div> --}}
                                            </li>
                                            <li><i class="icon-material-outline-access-time"></i> {{ $service->created_at }}
                                            </li>
                                        </ul>
                                        <div class="rating">
                                            @for ($i = 1; $i <= 5; $i++)
                                                @if ($i <= $average_rating)
                                                    <i class="fa fa-star"></i>
                                                @elseif ($i == ceil($average_rating) && !is_int($average_rating))
                                                    <i class="fa fa-star-half-o"></i>
                                                @else
                                                    <i class="fa fa-star-o"></i>
                                                @endif
                                            @endfor
                                            <span class="ml-1">{{ $average_rating }}</span>
                                        </div>

                                        {{-- <div class="task-tags margin-top-15">
                                            <span>iOS</span>
                                            <span>Android</span>
                                            <span>mobile apps</span>
                                            <span>design</span>
                                        </div> --}}
                                    </div>

                                </div>
                                </a>

                                <div class="task-listing-bid">
                                    <div class="task-listing-bid-inner">
                                        <div class="task-offers">
                                            <strong>${{ $service->price }}</strong>
                                            <span>Fixed Price</span>
                                        </div>
                                        @php
                                            $order = $order = $service->orders
                                                ->where('buyer_id', auth('buyer')->id())
                                                ->whereIn('status', [0, 1, 2, 3, 6])
                                                ->first();
                                        @endphp
                                        @if ($order != null)
                                            @switch($order->status)
                                                @case(0)
                                                    <button href="#" class="button button-sliding-icon ripple-effect">Pending
                                                        <i class="icon-material-outline-arrow-right-alt"></i></button>
                                                @break

                                                @case(1)
                                                    <button title="Click to pay" href="#"
                                                        class="button button-sliding-icon ripple-effect">Waiting for payment from
                                                        buyer
                                                        <i class="icon-material-outline-arrow-right-alt"></i></button>
                                                @break

                                                @case(2)
                                                    <button href="#" class="button button-sliding-icon ripple-effect">Waiting
                                                        for
                                                        delivery
                                                        By Seller<i class="icon-material-outline-arrow-right-alt"></i></button>
                                                @break

                                                @case(3)
                                                    <button href="#" class="button button-sliding-icon ripple-effect">Order
                                                        Delivered
                                                        By Seller<i class="icon-material-outline-arrow-right-alt"></i></button>
                                                @break

                                                @case(6)
                                                    <button href="#" class="button button-sliding-icon ripple-effect">Waiting
                                                        for
                                                        payment secured<i
                                                            class="icon-material-outline-arrow-right-alt"></i></button>
                                                @break

                                                @default
                                                    <button
                                                        onclick="window.location='{{ route('buyer.order.session.place', ['service_id' => $service->id, 'buyer' => auth('buyer')->id()]) }}"
                                                        class="button button-sliding-icon ripple-effect">Order Now <i
                                                            class="icon-material-outline-arrow-right-alt"></i></button>
                                            @endswitch
                                        @else
                                            <button
                                                onclick="window.location.href='{{ route('buyer.order.session.place', ['service_id' => $service->id, 'buyer' => auth('buyer')->id()]) }}'"
                                                class="button button-sliding-icon ripple-effect">Order Now <i
                                                    class="icon-material-outline-arrow-right-alt"></i></button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @empty
                            @endforelse
                        </div>
                        <!-- Jobs Container / End -->
                    </div>
                </div>
            </div>
        </div>
        <!-- Featured Jobs / End -->

        <!-- Icon Boxes -->
        <div class="section padding-top-65 padding-bottom-65">
            <div class="container">
                <div class="row">

                    <div class="col-xl-12">
                        <!-- Section Headline -->
                        <div class="section-headline centered margin-top-0 margin-bottom-5">
                            <h3>How It Works?</h3>
                        </div>
                    </div>

                    <div class="col-xl-4 col-md-4">
                        <!-- Icon Box -->
                        <div class="icon-box with-line">
                            <!-- Icon -->
                            <div class="icon-box-circle">
                                <div class="icon-box-circle-inner">
                                    <i class="icon-line-awesome-lock"></i>
                                    <div class="icon-box-check"><i class="icon-material-outline-check"></i></div>
                                </div>
                            </div>
                            <h3>Create an Account</h3>
                            <p>Bring to the table win-win survival strategies to ensure proactive domination going forward.</p>
                        </div>
                    </div>

                    <div class="col-xl-4 col-md-4">
                        <!-- Icon Box -->
                        <div class="icon-box with-line">
                            <!-- Icon -->
                            <div class="icon-box-circle">
                                <div class="icon-box-circle-inner">
                                    <i class="icon-line-awesome-legal"></i>
                                    <div class="icon-box-check"><i class="icon-material-outline-check"></i></div>
                                </div>
                            </div>
                            <h3>Post a Task</h3>
                            <p>Efficiently unleash cross-media information without. Quickly maximize return on investment.</p>
                        </div>
                    </div>

                    <div class="col-xl-4 col-md-4">
                        <!-- Icon Box -->
                        <div class="icon-box">
                            <!-- Icon -->
                            <div class="icon-box-circle">
                                <div class="icon-box-circle-inner">
                                    <i class=" icon-line-awesome-trophy"></i>
                                    <div class="icon-box-check"><i class="icon-material-outline-check"></i></div>
                                </div>
                            </div>
                            <h3>Choose an Expert</h3>
                            <p>Nanotechnology immersion along the information highway will close the loop on focusing solely.
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Icon Boxes / End -->


        <!-- Testimonials -->
        {{-- <div class="section gray padding-top-65 padding-bottom-55">

            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <!-- Section Headline -->
                        <div class="section-headline centered margin-top-0 margin-bottom-5">
                            <h3>Testimonials</h3>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Categories Carousel -->
            <div class="fullwidth-carousel-container margin-top-20">
                <div class="testimonial-carousel testimonials">

                    <!-- Item -->
                    <div class="fw-carousel-review">
                        <div class="testimonial-box">
                            <div class="testimonial-avatar">
                                <img src="{{ asset('assets/images/user-avatar-small-02.jpg') }}" alt="">
                            </div>
                            <div class="testimonial-author">
                                <h4>Sindy Forest</h4>
                                <span>Freelancer</span>
                            </div>
                            <div class="testimonial">Efficiently unleash cross-media information without cross-media value.
                                Quickly maximize timely deliverables for real-time schemas. Dramatically maintain
                                clicks-and-mortar solutions without functional solutions.</div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="fw-carousel-review">
                        <div class="testimonial-box">
                            <div class="testimonial-avatar">
                                <img src="{{ asset('assets/images/user-avatar-small-01.jpg') }}" alt="">
                            </div>
                            <div class="testimonial-author">
                                <h4>Tom Smith</h4>
                                <span>Freelancer</span>
                            </div>
                            <div class="testimonial">Completely synergize resource taxing relationships via premier niche
                                markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically
                                innovate resource-leveling customer service for state of the art.</div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="fw-carousel-review">
                        <div class="testimonial-box">
                            <div class="testimonial-avatar">
                                <img src="{{ asset('assets/images/user-avatar-placeholder.png') }}" alt="">
                            </div>
                            <div class="testimonial-author">
                                <h4>Sebastiano Piccio</h4>
                                <span>Employer</span>
                            </div>
                            <div class="testimonial">Completely synergize resource taxing relationships via premier niche
                                markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically
                                innovate resource-leveling customer service for state of the art.</div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="fw-carousel-review">
                        <div class="testimonial-box">
                            <div class="testimonial-avatar">
                                <img src="{{ asset('assets/images/user-avatar-small-03.jpg') }}" alt="">
                            </div>
                            <div class="testimonial-author">
                                <h4>David Peterson</h4>
                                <span>Freelancer</span>
                            </div>
                            <div class="testimonial">Collaboratively administrate turnkey channels whereas virtual e-tailers.
                                Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully
                                researched growth strategies and interoperable sources.</div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="fw-carousel-review">
                        <div class="testimonial-box">
                            <div class="testimonial-avatar">
                                <img src="{{ asset('assets/images/user-avatar-placeholder.png') }}" alt="">
                            </div>
                            <div class="testimonial-author">
                                <h4>Marcin Kowalski</h4>
                                <span>Freelancer</span>
                            </div>
                            <div class="testimonial">Efficiently unleash cross-media information without cross-media value.
                                Quickly maximize timely deliverables for real-time schemas. Dramatically maintain
                                clicks-and-mortar solutions without functional solutions.</div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- Categories Carousel / End -->

        </div> --}}
        <!-- Testimonials / End -->


        <!-- Counters -->
        <div class="section padding-top-70 padding-bottom-75">
            <div class="container">
                <div class="row">

                    <div class="col-xl-12">
                        <div class="counters-container">

                            <!-- Counter -->
                            <div class="single-counter">
                                <i class="icon-line-awesome-suitcase"></i>
                                <div class="counter-inner">
                                    <h3><span class="counter">{{ $data['services'] }}</span></h3>
                                    <span class="counter-title">Jobs Posted</span>
                                </div>
                            </div>

                            <!-- Counter -->
                            {{-- <div class="single-counter">
                                <i class="icon-line-awesome-legal"></i>
                                <div class="counter-inner">
                                    <h3><span class="counter">3,543</span></h3>
                                    <span class="counter-title">Tasks Posted</span>
                                </div>
                            </div> --}}

                            <!-- Counter -->
                            {{-- <div class="single-counter">
                                <i class="icon-line-awesome-user"></i>
                                <div class="counter-inner">
                                    <h3><span class="counter">2,413</span></h3>
                                    <span class="counter-title">Active Members</span>
                                </div>
                            </div> --}}

                            <!-- Counter -->
                            {{-- <div class="single-counter">
                                <i class="icon-line-awesome-trophy"></i>
                                <div class="counter-inner">
                                    <h3><span class="counter">99</span>%</h3>
                                    <span class="counter-title">Satisfaction Rate</span>
                                </div>
                            </div> --}}

                        </div>
                    </div>
                </div>
            </div>
        </div>    
        <!-- Counters / End -->
        
        <div class="container">
            <h2 class="text-center">Customer Reviews</h2>
            <div class="row below-margin">
              @forelse ($feedbacks as $review)
              <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Service Review</h5>
                        <h6 class="card-subtitle mb-2 text-muted">
                            @for ($i = 0; $i < $review->rating; $i++)
                                <span class="fa fa-star checked"></span> 
                            @endfor
                        </h6>
                        <p class="card-text">{{$review->review}}</p>
                    </div>
                </div>
            </div>
              @empty
                  
              @endforelse
            </div>
          </div>
    @endsection