@extends('website.layouts.index')
@section('content')
<div class="bg-img">
    <img src="assets/img/bg/work-bg-03.png" alt="img" class="bgimg1">
    <img src="assets/img/bg/work-bg-03.png" alt="img" class="bgimg2">
    <img src="assets/img/bg/feature-bg-03.png" alt="img" class="bgimg3">
</div>

<!-- Breadcrumb -->
<div class="breadcrumb-bar">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-12">
                <h2 class="breadcrumb-title">Services</h2>
                <nav aria-label="breadcrumb" class="page-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('home')}}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Service List</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- /Breadcrumb -->	

<div class="content">
    <div class="container">
        
        <div class="row">
        
            <!-- Filter -->
            <div class="col-lg-3 col-sm-12 theiaStickySidebar">
                <div class="filter-div">
                    <div class="filter-head">
                        <h5>Filter by</h5>
                        <a href="#" class="reset-link">Reset Filters</a>
                    </div>
                    <div class="filter-content">
                        <h2>Keyword</h2>
                        <input type="text" class="form-control" placeholder="What are you looking for?">
                    </div>
                    <div class="filter-content">
                        <h2>Categories <span><i class="feather-chevron-down"></i></span></h2>
                        <div class="filter-checkbox" id="fill-more">
                            <ul>
                                <li>
                                    <label class="checkboxs">
                                        <input type="checkbox">
                                        <span><i></i></span>
                                        <b class="check-content">All Categories</b>
                                    </label>
                                </li>
                                <li>
                                    <label class="checkboxs">
                                        <input type="checkbox">
                                        <span><i></i></span>
                                        <b class="check-content">Home Clean</b>
                                    </label>
                                </li>
                            </ul>
                        </div>
                        <a href="javascript:void(0);" id="more" class="more-view">View More <i class="feather-arrow-down-circle ms-1"></i></a>
                    </div>
                    <div class="filter-content">
                        <h2>Sub Category</h2>
                        <select class="form-control select">
                            <option>All Sub Category</option>
                            <option>Domestic</option>
                            <option>Commericial</option>
                        </select>
                    </div>
                    <div class="filter-content">
                        <h2>Location</h2>
                        <div class="group-img">
                            <input type="text" class="form-control" placeholder="Select Location">
                            <i class="feather-map-pin"></i>
                        </div>
                    </div>
                    <div class="filter-content">
                        <h2 class="mb-4">Price Range</h2>
                        <div class="filter-range">
                            <input type="text" id="range_03">
                        </div>
                        <div class="filter-range-amount">
                            <h5>Price: <span>$5 - $210</span></h5>
                        </div>
                    </div>
                    <div class="filter-content">
                        <h2>By Rating <span><i class="feather-chevron-down"></i></span></h2>
                        <ul class="rating-set">
                            <li>
                                <label class="checkboxs d-inline-flex">
                                    <input type="checkbox">
                                    <span><i></i></span>												
                                </label>
                                <a class="rating" href="#">	
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star"></i>
                                    <span class="d-inline-block average-rating float-end">(35)</span>
                                </a>
                            </li>
                            <li>
                                <label class="checkboxs d-inline-flex">
                                    <input type="checkbox">
                                    <span><i></i></span>												
                                </label>
                                <a class="rating" href="#">	
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star"></i>		
                                    <span class="d-inline-block average-rating float-end">(40)</span>
                                </a>
                            </li>
                            <li>
                                <label class="checkboxs d-inline-flex">
                                    <input type="checkbox">
                                    <span><i></i></span>												
                                </label>
                                <a class="rating" href="#">	
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star"></i>		
                                    <i class="fa-regular fa-star"></i>		
                                    <span class="d-inline-block average-rating float-end">(40)</span>
                                </a>
                            </li>
                            <li>
                                <label class="checkboxs d-inline-flex">
                                    <input type="checkbox">
                                    <span><i></i></span>												
                                </label>
                                <a class="rating" href="#">		
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star"></i>		
                                    <i class="fa-regular fa-star"></i>		
                                    <i class="fa-regular fa-star"></i>		
                                    <span class="d-inline-block average-rating float-end">(20)</span>
                                </a>
                            </li>
                            <li>
                                <label class="checkboxs d-inline-flex">
                                    <input type="checkbox">
                                    <span><i></i></span>												
                                </label>
                                <a class="rating" href="#">	
                                    <i class="fa-regular fa-star filled"></i>
                                    <i class="fa-regular fa-star"></i>		
                                    <i class="fa-regular fa-star"></i>		
                                    <i class="fa-regular fa-star"></i>		
                                    <i class="fa-regular fa-star"></i>		
                                    <span class="d-inline-block average-rating float-end">(5)</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <button class="btn btn-primary">Search</button>
                </div>
            </div>
            <!-- /Filter -->
            
            <!-- Service -->
            <div class="col-lg-9 col-sm-12">
                <div class="row sorting-div">
                    <div class="col-lg-4 col-sm-12 ">
                        <div class="count-search">
                            <h6>Found {{count($services)}} Services</h6>
                        </div>
                    </div>
                    <div class="col-lg-8 col-sm-12 d-flex justify-content-end ">
                        <div class="sortbyset">
                            <div class="sorting-select">
                                <select class="form-control select">
                                    <option>Price Low to High</option>
                                    <option>Price High to Low</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                
                        @foreach ($services as $each)
                            
                        <div class="service-list">
                            <div class="service-cont">
                                <div class="service-cont-img">
                                    <a href="{{route('service-detail',['id'=>$each->id])}}">
                                        <img class="img-fluid serv-img" alt="Service Image" src="{{asset($each->image ? $each->image : 'assets/img/services/service.jpg')}}">
                                    </a>
                                    <div class="fav-item">
                                        <a href="{{route('user.toggle-favorite',['service_id'=>$each->id])}}" class="fav-icon @if($each->favourite_exists) active @endif">
                                            <i class="feather-heart"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="service-cont-info">
                                    <span class="item-cat">Home Clean</span>
                                    <h3 class="title">
                                        <a href="{{route('service-detail',['id'=>$each->id])}}">{{$each->title}}</a>
                                    </h3>
                                    <p><i class="feather-map-pin"></i>{{$each->address}}</p>
                                    @if($each->open_for == 'professional')
                                    <p><i class="feather-calendar"></i>{{$each->date}}  {{'('.$each->start_time.' - '.$each->end_time.')'}}</p>
                                    @endif
                                    <div class="service-pro-img">
                                        <img src="{{asset($each->creator->profile_image ?? 'assets/img/user.png')}}" alt="">
                                        <span>{{$each->creator->first_name}}<i class="mx-1 fas fa-star filled"></i>4.9</span>
                                    </div>
                                </div>
                            </div>
                            <div class="service-action">
                                <h6>${{number_format($each->amount,2,'.',',')}}</h6>
                                <a href="{{route('service-detail',['id'=>$each->id])}}" class="btn btn-secondary">Book Now</a>
                            </div>
                        </div>
                        @endforeach
                    
                        @if(count($services) == 0)
                        <div class="col-md-6 mx-auto">
                            <img src="{{asset('assets/img/error-404.png')}}" class="img-fluid"/>
                            <div class="text-center mt-3">
                                <h4>No Service Available</h4>
                            </div>
                        </div>
                        @endif 
                    </div>
                </div>
                
                <!-- Pagination -->
                {{-- <div class="row">
                    <div class="col-sm-12">
                        <div class="blog-pagination rev-page">
                            <nav>
                                <ul class="pagination justify-content-center mt-0">
                                    <li class="page-item disabled">
                                        <a class="page-link page-prev" href="#" tabindex="-1"><i class="fa-solid fa-arrow-left me-1"></i> PREV</a>
                                    </li>
                                    <li class="page-item active">
                                        <a class="page-link" href="#">1</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">2</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">3</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link page-next" href="#">NEXT <i class="fa-solid fa-arrow-right ms-1"></i></a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div> --}}
                <!-- /Pagination -->
                
            </div>
            <!-- /Service -->
            
        </div>
    </div>			
</div>
@endsection