@extends('frontend.layout.app')

@section('section')
<div class="page-content">

    <!-- INNER PAGE BANNER -->
    <div class="wt-bnr-inr overlay-wraper bg-center" style="background-image:url(images/banner/1.jpg);">
        <div class="overlay-main site-bg-white opacity-01"></div>
        <div class="container">
            <div class="wt-bnr-inr-entry">
                <div class="banner-title-outer">
                    <div class="banner-title-name">
                        <h2 class="wt-title">The Most Exciting Jobs</h2>
                    </div>
                </div>
                <!-- BREADCRUMB ROW -->
                <div>
                    <ul class="wt-breadcrumb breadcrumb-style-2">
                        <li><a href="index.html">Home</a></li>
                        <li>Jobs List</li>
                    </ul>
                </div>
                <!-- BREADCRUMB ROW END -->
            </div>
        </div>
    </div>
    <!-- INNER PAGE BANNER END -->


    <!-- OUR BLOG START -->
    <div class="section-full p-t120  p-b90 site-bg-white">
        <div class="section-full pt-5  pb-5 site-bg-white">
            <div class="container">
                <div class="row">

                    <!-- Job Sidebar Filter -->
                    <div class="col-lg-3 col-md-3 col-sm-12 rightSidebar">
                        <div class="side-bar">
                            <div class="sidebar-elements search-bx">
                                <form method="POST">
                                    <h4 class="mb-4">Search By</h4>
                                    <div class="form-group mb-4">
                                        <h4 class="section-head-small mb-4">Location</h4>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Search location">
                                            <button class="btn" type="button"><i class="feather-map-pin"></i></button>
                                        </div>
                                    </div>

                                    <div class="form-group mb-4">
                                        <h4 class="section-head-small mb-4">Skills</h4>
                                        <select class="wt-select-bar-large selectpicker" multiple data-live-search="true"
                                            data-bv-field="size">
                                            <option>All Category</option>
                                            <option>Web Designer</option>
                                            <option>Developer</option>
                                            <option>Acountant</option>
                                        </select>
                                    </div>

                                    <div class="form-group mb-4">
                                        <h4 class="section-head-small mb-4">Education</h4>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Qualification">
                                            <button class="btn" type="button"><i class="feather-search"></i></button>
                                        </div>
                                    </div>

                                    <div class="twm-sidebar-ele-filter">
                                        <h4 class="section-head-small mb-4">Job Type</h4>
                                        <ul>
                                            <li>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="freelance" value="Freelance">
                                                    <label class="form-check-label" for="freelance">Freelance</label>
                                                </div>
                                                <span class="twm-job-type-count" id="freelance-count">0</span>
                                            </li>
                                    
                                            <li>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="fulltime" value="Full Time">
                                                    <label class="form-check-label" for="fulltime">Full Time</label>
                                                </div>
                                                <span class="twm-job-type-count" id="fulltime-count">0</span>
                                            </li>
                                    
                                            <li>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="internship" value="Internship">
                                                    <label class="form-check-label" for="internship">Internship</label>
                                                </div>
                                                <span class="twm-job-type-count" id="internship-count">0</span>
                                            </li>
                                    
                                            <li>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="parttime" value="Part Time">
                                                    <label class="form-check-label" for="parttime">Part Time</label>
                                                </div>
                                                <span class="twm-job-type-count" id="parttime-count">0</span>
                                            </li>
                                    
                                            <li>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="temporary" value="Temporary">
                                                    <label class="form-check-label" for="temporary">Temporary</label>
                                                </div>
                                                <span class="twm-job-type-count" id="temporary-count">0</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="twm-sidebar-ele-filter">
                                        <h4 class="section-head-small mb-4">Experience</h4>
                                        <ul>
                                            <li>
                                                <div class="form-check">
                                                    <input type="radio" class="form-check-input"
                                                        id="exampleradio2">
                                                    <label class="form-check-label" for="exampleradio2">Fresher</label>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="form-check">
                                                    <input type="radio" class="form-check-input"
                                                        id="exampleradio3">
                                                    <label class="form-check-label" for="exampleradio3">6 Month - 1 Year</label>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="form-check">
                                                    <input type="radio" class="form-check-input"
                                                        id="exampleradio4">
                                                    <label class="form-check-label" for="exampleradio4">1 - 3 Years</label>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="form-check">
                                                    <input type="radio" class="form-check-input"
                                                        id="exampleradio5">
                                                    <label class="form-check-label" for="exampleradio5">3 - 5 Years</label>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="form-check">
                                                    <input type="radio" class="form-check-input"
                                                        id="exampleradio6">
                                                    <label class="form-check-label"
                                                        for="exampleradio6">Above 5 Years</label>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Job Display Area -->
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <div class="product-filter-wrap d-flex justify-content-between align-items-center m-b30">
                            <span class="woocommerce-result-count-left">Showing 2,150 jobs</span>

                            <form class="woocommerce-ordering twm-filter-select" method="get">
                                <span class="woocommerce-result-count">Short By</span>
                                <select class="wt-select-bar-2 selectpicker" data-live-search="false"
                                    data-bv-field="size" id="jobType">
                                    <option>Most Recent</option>
                                    <option value="Freelance">Freelance</option>
                                    <option value="Full Time">Full Time</option>
                                    <option value="Internship">Internship</option>
                                    <option value="Part Time">Part Time</option>
                                    <option value="Temporary">Temporary</option>
                                </select>
                                <select class="wt-select-bar-2 selectpicker" id="viewCountJob" data-live-search="false"
                                    data-bv-field="size">
                                    <option value="5">Show 5</option>
                                    <option value="10">Show 10</option>
                                    <option value="20">Show 20</option>
                                    <option value="30">Show 30</option>
                                    <option value="40">Show 40</option>
                                </select>
                            </form>
                        </div>

                        <div class="twm-jobs-list-wrap">                                
                            <ul class="jobListView" id="totalJobs">

                            </ul>
                        </div>

                        <div class="pagination-outer">
                            <div class="pagination-style1" id="pagination">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- OUR BLOG END -->
</div>
@endsection