@extends('layouts.app')
@section('content')
    
<div class="main-slider">
    <div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="img-fluid w-100" src="{{ asset('assets/web/images/banner.jpg') }}" alt="First slide">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-md-12 text-center">
                                <h2>Ohio School Jobs</h2>
                            </div>
                        </div>
                        <div class="formWrap">
                            <form action="{{ url('job-search') }}" method="GET">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <input type="text" name="keyword" class="form-control" placeholder="job  keywords">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <input type="text" name="city" class="form-control" placeholder="City , State">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <button type="submit" class="themeBtn">Search For Jobs</button>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <button class="themeBtn">Browse by map</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- END: Main Slider -->




<section class="brand_sec">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 class="sec_heading text-center">Featured Employers</h2>
                <div class="brand_slider">
                    <div class="brandIco"><img src="{{ asset('assets/web/images/icon1.png') }}" alt=""></div>
                    <div class="brandIco"><img src="{{ asset('assets/web/images/icon2.png') }}" alt=""></div>
                    <div class="brandIco"><img src="{{ asset('assets/web/images/icon3.png') }}" alt=""></div>
                    <div class="brandIco"><img src="{{ asset('assets/web/images/icon4.png') }}" alt=""></div>
                    <div class="brandIco"><img src="{{ asset('assets/web/images/icon1.png') }}" alt=""></div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="jobs_section">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-12 text-center mb-4">
                    <h2 class="sec_heading">Featured Jobs</h2>
                </div>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img1.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img2.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img3.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img4.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img5.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img6.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img7.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img8.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img9.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img10.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img11.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img12.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img13.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img14.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img15.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img16.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img17.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img18.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img19.jpg') }}" alt="">
                </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="job_card">
                    <img src="{{ asset('assets/web/images/img20.jpg') }}" alt="">
                </a>
            </div>
        </div>
    </div>
</section>

<section class="map_section">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5992571.810919153!2d-103.35647507804093!3d42.82933678112592!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2s!4v1634597664572!5m2!1sen!2s" allowfullscreen="" loading="lazy"></iframe>
</section>


<section class="contact_sec">
    <div class="container">
        <form class="contactForm" action="javascript:void(0)" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <h2 class="sec_heading">Contact us form</h2>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <i class="fas fa-user"></i>
                        <input type="text" name="name" class="form-control" placeholder="Name *">
                    </div>
                    <div class="form-group">
                        <i class="fas fa-envelope"></i>
                        <input type="email" name="email" class="form-control" placeholder="Email *">
                    </div>
                    <div class="form-group">
                        <i class="fas fa-phone-alt"></i>
                        <input type="text" name="phone" class="form-control" placeholder="Phone *">
                    </div>
                    <div class="form-group">
                        <i class="fas fa-map-marker-alt"></i>
                        <input type="text" name="address"  class="form-control" placeholder="School/School District or Company">
                    </div>
                    <div class="text-right">
                        <img src="{{ asset('assets/web/images/recapcha.png') }}" alt="">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <i class="fas fa-comment-alt-lines"></i>
                        <textarea name="message" class="form-control" id="" placeholder="Type your message *" cols="30" rows="10"></textarea>
                    </div>
                    <button type="submit" class="themeBtn" signupBtn>SEND NOW</button>
                    <div id="formResult"></div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </form>
    </div>
</section>
@section('scripts')
    <script src="{{ asset('assets/web/js/contact-form.js') }}" ></script>
@endsection

@endsection