@extends('web.layout.master')
@section('title', 'Welcome! | House Runs For Me')
@section('content')
@section('recommend-active','active')
@include('web.pages.navbar')
    {{-- <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 active"> <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"> <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('regionsserved') }}"><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>
       
    </div> --}}
    
    <div class="vh-100 bg-white home-pro" style="margin-top: 77px;margin-bottom: 41px;">
        <div class="container">
        @if (Session::get('message'))
        <div class="alert alert-primary" role="alert">
            <b style="color: green;font-size: 46px;">{{ Session::get('message') }}</b>
        </div>
    @endif
            <div class="row blog-content pt60">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <h4>Recommend a Service Provider</h4>
                    <br>
                    <p>92% of people trust recommendations from friends and family above all forms of advertising. This
                        means your recommendations will help a lot of people and you earn free loyalty points for each valid
                        recommendation.</p>
                    <p>Clicks <a href="#"><span style="color: #6d0000;font-size:16px;font-weight:700;">Here</span></a> to Recommend a Service Provider</p>
                </div>
                <div class="col-md-2"></div>
            </div>
            <div class="row blog-content pt60">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <form action="{{route('recommend.store')}}" id="recommended" hidden method="post">
                    @csrf
                        <div class="form-row">
                            <div class="col">
                                <div class="form-group mb-4">
                                    <label class="mb-1">NAME OF SERVICE PROVIDER <small class="text-danger">*</small></label>
                                    <div class="position-relative icon-form-control">
                                        <i class="feather-user position-absolute"></i>
                                        <input placeholder="Enter Name of Service Provider" name="service_provider_name" type="text" class="form-control" id="service_provider_name" value="{{old('service_provider_name')}}">
                                        <span class="text-danger" style="color: red">@error('service_provider_name'){{$message}}@enderror</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group mb-4">
                                    <label class="mb-1">SERVICE PROVIDER PHONE NUMBER <small class="text-danger">*</small></label>
                                    <div class="position-relative icon-form-control">
                                        <i class="feather-user position-absolute"></i>
                                        <input placeholder="Enter Service Provider Phone Number" name="service_provider_phone" type="text"
                                            class="form-control" value="{{old('service_provider_phone')}}">
                                        <span class="text-danger" style="color: red">{{ $errors->first('service_provider_phone') }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group mb-4">
                                    <label class="mb-1">SERVICE PROVIDER EMAIL <small class="text-danger">*</small></label>
                                    <div class="position-relative icon-form-control">
                                        <i class="feather-user position-absolute"></i>
                                        <input placeholder="Enter Service Provider Phone Number" name="service_provider_email" type="text"
                                            class="form-control" value="{{old('service_provider_email')}}">
                                        <span class="text-danger" style="color: red">{{ $errors->first('service_provider_email') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col">
                                <div class="form-group mb-4">
                                    <label class="mb-1">The top 3 services they provide  <small class="text-danger">*</small></label>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="position-relative icon-form-control">
                                                <i class="feather-edit-2 position-absolute"></i>
                                                <input placeholder="Primary Service" type="text" name="service_primary"
                                                    class="form-control" value="{{old('service_primary')}}">
                                        <span class="text-danger" style="color: red">{{ $errors->first('service_primary') }}</span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="position-relative icon-form-control">
                                                <i class="feather-edit-2 position-absolute"></i>
                                                <input placeholder="Secondary Service" type="text" name="service_secondary"
                                                    class="form-control" value="{{old('service_secondary')}}">
                                        <span class="text-danger" style="color: red">{{ $errors->first('service_secondary') }}</span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="position-relative icon-form-control">
                                                <i class="feather-edit-2 position-absolute"></i>
                                                <input placeholder="Other Service" type="text" name="service_other"
                                                    class="form-control" value="{{old('service_other')}}">
                                        <span class="text-danger" style="color: red">{{ $errors->first('service_other') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-4">
                            <label class="mb-1">Tell us why you recommend this person  <small class="text-danger">*</small></label>
                            <div class="position-relative">
                                <textarea class="form-control" rows="4" name="why_recommend_message"
                                    placeholder="Your Message">{{old('why_recommend_message')}}</textarea>
                                <span class="text-danger" style="color: red">{{ $errors->first('why_recommend_message') }}</span>

                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col">
                                <div class="form-group mb-4">
                                    <label class="mb-1">YOUR NAME <small class="text-danger">*</small></label>
                                    <div class="position-relative icon-form-control">
                                        <i class="feather-user position-absolute"></i>
                                        <input placeholder="Enter Your Full Name" name="full_name" type="text"
                                            class="form-control" value="{{old('full_name')}}">
                                        <span class="text-danger" style="color: red">{{ $errors->first('full_name') }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group mb-4">
                                    <label class="mb-1">YOUR PHONE NUMBER <small class="text-danger">*</small></label>
                                    <div class="position-relative icon-form-control">
                                        <i class="feather-phone position-absolute"></i>
                                        <input placeholder="Enter Your Phone Number" name="Phone_number" type="text"
                                            class="form-control" value="{{old('Phone_number')}}">
                                        <span class="text-danger" style="color: red">@error('Phone_number'){{$message}}@enderror</span>

                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group mb-4">
                                    <label class="mb-1">YOUR EMAIL ADDRESS <small class="text-danger">*</small></label>
                                    <div class="position-relative icon-form-control">
                                        <i class="feather-mail position-absolute"></i>
                                        <input placeholder="Enter Your Email" type="email" value="{{old('email')}}" name="email"
                                            class="form-control">
                                        <span class="text-danger" style="color: red">@error('email'){{$message}}@enderror</span>

                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="form-row">
                            <div class="col">
                                <div class="form-group mb-4">
                                    <label class="mb-1">The top 3 services they provide <small
                                            class="text-danger">*</small></label>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="position-relative icon-form-control">
                                                <i class="feather-edit-2 position-absolute"></i>
                                                <input placeholder="Enter Your Service" type="text" name="service"
                                                    class="form-control" value="">
                                                <span class="text-danger" style="color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="position-relative icon-form-control">
                                                <i class="feather-edit-2 position-absolute"></i>
                                                <input placeholder="Enter Your Service" type="text" name="service"
                                                    class="form-control" value="">
                                                <span class="text-danger" style="color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="position-relative icon-form-control">
                                                <i class="feather-edit-2 position-absolute"></i>
                                                <input placeholder="Enter Your Service" type="text" name="service"
                                                    class="form-control" value="">
                                                <span class="text-danger" style="color: red"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        <div class="form-group mb-4">
                            <label class="mb-1">YOUR PERSONAL MESSAGE <small class="text-danger">*</small></label>
                            <div class="position-relative">
                                <textarea class="form-control" rows="4" name="message"
                                    placeholder="Your Message">{{old('message')}}</textarea>
                                        <span class="text-danger" style="color: red">@error('message'){{$message}}@enderror</span>

                            </div>
                        </div>

                        <div class="d-flex align-items-center">
                            <button class="btn btn-primary text-uppercase btn-lg" type="submit"> Submit </button>
                            {{-- <label class="m-0 pl-4 text-black-50">We'll get back to you in 1-2 business days.
                            </label> --}}
                        </div>
                    </form>
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>
@endsection