@extends('web.layout.master')
@section('title', 'Welcome! | House Runs For Me')
@section('services-active','active')
@section('content')
    @include('web.pages.navbar')


 <style>
     .home-pro .services li .ser-inn {
    padding: 65px 29% !IMPORTANT;
}
     .ser-inn {
    min-height: 249px !important;
}
.home-pro .services li {
    background: linear-gradient(
90deg
, #6d0000 0%, #6d0000b8 35%, #6d0000 100%);
    padding: 0px;
    list-style: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-top: 20px;
    height: 200px;
}
.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: black;
}

.searchButton {
  width: 40px;
  height: 39px;
  border: 1px solid #6d0000;
  background: #6d0000;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.search-ul{
    width: 92%;
    max-height: 300px;
    height: auto;
    overflow-y: scroll;
    z-index: 9999999;
    position: absolute;
    background: #ffffff;
    box-shadow: 0px 1px 3px 0px #000;
}
.search-ul-hide{
    display:none;
}
ul#servicesearch li a:hover {
    color: #6d0000 !important;
    font-weight: bold !important;
}
ul#servicesearch li a{
    color: #333333 !important;
}
ul#servicesearch li {
    padding: 3px 0;
}
h3, .h3 {
    font-size: 22px;
}
@media (max-width:992px){
    h3, .h3 {
    font-size: 13px;
    padding-left: 12px;
}
.home-pro .services li .ser-inn {
    padding: 45px 0% !IMPORTANT;
}
}
 </style>   
    {{-- <div class="box-shadow-for-ui">
        <div class="uou-block-2b">
            <div class="container"> <a href="{{ url('home') }}" class="logo"><img
                        src="{{ asset('assets/web/img/logo.png') }}" alt=""></a> <a href="#"
                    class="mobile-sidebar-button mobile-sidebar-toggle"><span></span></a>
                <nav class="nav">
                    <ul class="sf-menu">
                        <li class="navLinkA"> <a href="{{ url('home') }}"><img
                                    src="{{ asset('assets/web/images/home.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Home</a> </li>
                        <li class="navLinkA"> <a href="{{ url('about') }}"><img
                                    src="{{ asset('assets/web/images/2.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />About</a></li>
                        <li class="navLinkA"> <a href="{{ url('recommended') }}"><img
                                    src="{{ asset('assets/web/images/3.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Recommended</a></li>
                        <li class="navLinkA active"> <a href="{{ url('services-provider') }}"><img
                                    src="{{ asset('assets/web/images/4.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Services</a>
                            <ul class="demo-menu" style="display: none;">
                                <li id="nav-menu-item-865"
                                    class="sub-menu-item  menu-item-odd menu-item-depth-1 menu-item menu-item-type-custom menu-item-object-custom">
                                    <a href="{{ url('services-provider/generalservices') }}"
                                        class="menu-link sub-menu-link">General Services</a>
                                </li>
                                <li id="nav-menu-item-866"
                                    class="sub-menu-item  menu-item-odd menu-item-depth-1 menu-item menu-item-type-custom menu-item-object-custom">
                                    <a href="{{ url('services-provider/professionalservices') }}"
                                        class="menu-link sub-menu-link">Professional Services</a>
                                </li>
                            </ul>
                        </li>
                        <li class="navLinkA"> <a href="{{ url('comingsoon') }}"><img
                                    src="{{ asset('assets/web/images/8.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Service Regions</a></li>
                        <li class="navLinkA"> <a href="{{ url('faq') }}"><img
                                    src="{{ asset('assets/web/images/8.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />FAQ'S</a></li>
                        <li class="navLinkA"> <a href="{{ url('contact') }}"><img
                                    src="{{ asset('assets/web/images/9.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Contact</a></li>
                        <li class="navLinkA active"> <a href="{{ url('comingsoon') }}"><img
                                    src="{{ asset('assets/web/img/shoppingtrolley.png') }}"
                                    class="img-responsive mr-2 mt-2" height="20" width="20" /></a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- end .uou-block-2b -->
    </div> --}}
    <div class="vh-100 bg-white home-pro">
        <section class="services">
            <!-- SERVICES ROW -->
            <ul class="row">
                <div class="col-md-"></div>

                <!-- SECTION -->
                <li class="col-md-12">
                    <a href="#" target="">
                        <div class="ser-inn">
                            <div class="mt-55 random-text">
                                {{-- <p> --}}
                                    @if(!empty($servicetext))
                                    @foreach ($servicetext as $item)
                                    <p>“{{$item->content}}"</p>    
                                    @endforeach
                                    @endif
                                    
                                {{-- </p> --}}
                                {{-- <p>“At houserunsforme, we embrace the principle that High Quality Outputs and Excellent
                                    Customer Care are minimum standards of service. We consistently incorporate these ideals
                                    in all aspects of our work."</p> --}}
                                    

                                 {{-- <p>“We are in the business of facilitating excellent services delivery for homes and
                                    properties. Our mission is to connect home owners / occupants with highly reputable
                                    service providers that are customer centered, trustworthy, professional and fairly
                                    priced."</p> 
                                    <p>“We provide easy access to a range of general and professional services providers, in a
                                        safe environment where both clients and Services Providers can conduct their business
                                        with confidence."</p> --}}
                            </div>  
                        </div>
                    </a>
                </li>
                <div class="col-md-"></div>

                <!-- SECTION -->
                <!-- <li class="col-md-6">
                    <a href="#" target="">
                        <div class="ser-inn">
                            <div class="mt-55">
                                <p>By submitting a simple service request, clients will be able to reach multiple Service
                                    Providers who are eager to provide clients with the best value for money.</p>
                                <br><br>
                                <p>We provide easy access to a range of general and professional services providers, in a
                                    safe environment where both clients and Services Providers can conduct their business
                                    with confidence. “</p>
                            </div>
                        </div>
                    </a>
                </li> -->
            </ul>
        </section>
    </div>
    <div class="vh-100 bg-white" style="margin-bottom: 41px;">
        <div class="blog-content pt60">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                       
                    </div>
                    <div class="col-md-6">
                        <p class="text-center"><h3>Please type the service you are looking for here</h3></p>
                    </div>
                    <div class="col-md-3">
                       
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <!-- <h3>General Services:</h3> -->
                        {{-- <div class="wrap"> --}}
                         
                            <div class="search">
                               <input type="text" class="searchTerm" id="searchprovider" placeholder="Search">
                               <button type="submit" class="searchButton">
                                 <i class="fa fa-search"></i>
                              </button>
                            </div>
                            <div class="search-ul search-ul-hide">
                                <ul id="servicesearch" style="padding:0 13px;">
                                    <li></li>
                                </ul>
                            </div>
                         {{-- </div> --}}
                           
                    </div>
                    <div class="col-md-4"></div>
                        <!-- <ul class="row">
                            <li>Child-care workers / Homework Tutoring </li>
                            <li>Home Delivery</li>
                            <li> Domestic Helpers</li>
                            <li>Elderly Care </li>
                            <li>Errands</li>
                            <li>Handyman </li>
                            <li>Chef</li>
                            <li>Home healthcare providers / Housemaids</li>
                            <li>House-sitter</li>
                            <li> Laundry</li>
                            <li>Lawn and garden care </li>
                            <li>Property Maintenance </li>
                            <li>Nurse assistants </li>
                            <li>Transportation</li>
                        </ul> -->
                    </div>
                    <!-- <div class="col-md-6">
                        <h3>Professional Services:</h3>
                        <ul class="row">
                            <li>Professional Services</li>
                            <li>Auto mechanic</li>
                            <li>Carpenter </li>
                            <li>Electrician / Electronics repair technician </li>
                            <li>ELV Engineer </li>
                            <li>House Renovations and Extensions </li>
                            <li> Masonry</li>
                            <li>Painters </li>
                            <li>Pest control </li>
                            <li>Plumber </li>
                            <li>Pool Maintenance</li>
                            <li>Property Inspector </li>
                            <li>Roofing Roofing </li>
                            <li>Welder</li>
                            <li>Veranda and Window enclosures</li>
                            <li>Security fences</li>
                        </ul>
                    </div> -->
                </div>
                <br>
                <br>
                <br>
                <div class="row pt-5">
                   
                    <div class="col-md-12">
                        <ul>
                            @foreach ($Category as $Categories)
                            <li style="list-style: none">
                                <a href="{{ route('service-type',$Categories->id) }}">
                              <h5><i class="fa fa-plus"></i>
                                 {{$Categories->name}}</h5></a>
                            </li>                
                            @endforeach
                        {{-- <li><a href="{{ url('services-provider/generalservices') }}"><h3>General Services</h3></a></li>
                        <li><a href="{{ url('services-provider/professionalservices') }}"><h3>Professional Services</h3></a></li>
                        <li><a href="{{ url('generalservices/skilledtradesman') }}"><h3>Skilled Tradesman</h3></a></li> --}}
                    </ul>
                    </div>
                        <!-- <h3>Benefits to clients of using our service:</h3> -->
                        <!-- <ul class="row">
                            <li>We assist clients to obtain multiple quotes and secure the best price</li>
                            <li>We refer only trained professionals, who are experts in their respective disciplines as well
                                as experts in customer care</li>
                            <li>All of our service providers are trustworthy and are duty bound to abide by our professional
                                code of conduct while working under our banner</li>
                            <li>We guarantee your safety and the safety of your property will not be compromised by our
                                service providers and the work they perform on your property</li>
                            <li>We provide a secure platform to make payments and to conduct business with confidence</li>
                            <li>We assign service providers to suit your schedule, making sure they show up and depart when
                                they should</li>
                            <li>Our service providers treat our clients with respect</li>
                            <li>Clients can raise a complaint at any time for timely intervention </li>
                            <li>We reward customers for doing business with us by providing discounts on future purchases
                                via our loyalty program</li>
                        </ul> -->
                        <!-- <h6>Benefits to Service Providers of using our platform
                            Our platform is also of benefit to our Services Providers and helps many Service Providers to
                            grow and develop their businesses and reach a wider market beyond their local environment.
                        </h6> -->
                  
                </div>




            </div> <!--  end blog-single -->
        </div>
    </div>
    <div class="vh-100 bg-white" style="margin-top: 77px;margin-bottom: 41px;">
        <div class="container">
            <div class="row align-items-center vh-100">

                <div class="py-5 bg-white">
                    <div class="container">
                        <div class="row d-flex align-items-center">
                            <div class="col-md-12">
                                <section class="pro-content">
                                    <!-- PRO SECTION -->
                                    <div class="container-fluid">
                                        <div class="row">

                                            <!-- PRO TEXT -->
                                            <div class="col-md-6 pro-inside">
                                                <div class="position-center-center col-md-9">
                                                    <h1>
                                                        Collaborate on a project </h1>
                                                    <p> “Do you require other Services that are not listed above? Get it
                                                        intouch and we will help you to find the right Service Providers to
                                                        suit your needs”.</p>
                                                </div>
                                            </div>

                                            <!-- PRO BACKGROUND -->
                                            <div class="col-md-6 pro-inside"
                                                style="background:url({{ asset('assets/web/images/pro-img-2.jpg') }}) center center no-repeat;">
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
<script>
    $(document).ready(function(){
        $('#searchprovider').on('keyup',function(){
            var searchval = $(this).val();
            // console.log(searchval.val !== "");
            if(!searchval){
                $('.search-ul').addClass('search-ul-hide');
            }else{
            $.ajax({
                url:'{{route("searchservice")}}',
                type:'post',
                data:{
                    searchval:searchval,"_token":"{{csrf_token()}}"
                },success:function(data){
                   
                    console.log(data)
                    if(data == 0){
                       
                      console.log("data");
                      $('.search-ul').addClass('search-ul-hide');
                        
                      }else{
                          console.log('else working');
                          $('.search-ul').removeClass('search-ul-hide');
                        var searchli = '';
                        $.each(data,function(key,value)
                         {
                            var url = '{{ url("/servicecategory/detail".'/'. ":id/:id2") }}';
                                url = url.replace(':id', value.id);

                                url = url.replace(':id2', value.name);
                                searchli += '<li style="list-style:none"><a href="'+url+'">'+value.name+'</a></li>';
                         });
                         $('#servicesearch').html(searchli);   
                      }
                }
            });
               
            }
        });
    });
</script>
<script>
    $(document).ready(function(){

    var ul = $('.random-text'),
    lis = ul.find('p').detach(),
    used = [];

    var new_lis = [];
    while (true) {
      var li = lis[Math.floor(Math.random() * lis.length)];
      if (used.indexOf(li) === -1 && new_lis.indexOf(li) === -1) new_lis.push(li);
      if (new_lis.length === 1) break;
    }
    used = new_lis;
    ul.html(new_lis);

    });
</script>
@endsection