@extends('demo.template')
@section('content')
@include('demo.homebanner')

<div class="opportunity-section section" style="background-color: var(--light-grey-3);">
    <div class="container">
      <div class="row d-flex align-items-center">
        <div class="col-12 col-md-12 content">
        <h2 class="margin-top-20 margin-bottom-20 d-flex justify-content-md-center">Whould like to become a instructor?</h2>
        </div>
            <div class="col-12 col-md-2 margin-bottom-20">
            <select class="form-control" name="course_country_id" id="country" >
                <option value="0">Country - All</option>
                @if(count($countriess)>0)
                @foreach($countriess as $country)
                <option value="{{$country->country_id}}" >{{$country->country_name}}</option>
                @endforeach
                @endif
            </select>
             </div>
             <div class="col-12 col-md-2 margin-bottom-20">
            <select class="form-control" name="course_university_id" id="university" >
                <option value="0">University - All</option>                                                   
            </select>
        </div>
        <div class="col-12 col-md-2 margin-bottom-20">
            <select class="form-control" name="course_subject_id" id="subject" >
                <option value="0">Subject - All</option>
                </select>
        </div>
        <div class="col-12 col-md-2 margin-bottom-20">
            <select class="form-control" name="course_level_id" id="level">
                <option value="0">Level - All</option> 
                @if(count($levels)>0)
                @foreach($levels as $level)
                <option value="{{$level->level_id}}" >{{$level->level_name}}</option>
                @endforeach
                @endif
            </select>
        </div>
        <div class="col-12 col-md-1 d-flex btn margin-bottom-20">
            <div class="main-btn">Go</div>
          </div>
        <div class="col-12 col-md-2 margin-bottom-20">
            <input type="text" name="coursename" class="form-control" value="" placeholder="Course name..">
        </div>
        
        <div class="col-12 col-md-1  btn margin-bottom-20">
          <div class="main-btn">Go</div>
        </div>
      </div>
    </div>
  </div>

<!-- Learning Object -->
<div class="learning-object section">
    <div class="fixed-right side-form-icons">
        <i class="fas fa-phone icon" id="open-opening-popup"></i>
        <i class="fas fa-map-marker-alt icon" id="open-location-popup"></i>
        <i class="fas fa-envelope icon" id="open-form-popup"></i>
    </div>
    <div class="container">
        <div class="heading text-center">
            <h2>Learning objectives</h2>
            <p class="hide-md-and-down">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus augue nibh, at ullamcorper orci
                ullamcorper ut. Integer vehicula iaculis risus, non consequat eros tincidunt ac.</p>
        </div>

        <div class="row objects">
            <div class="col-12 col-lg-6">
                <div class="row">
                    <div class="col-12 col-md-2 media">
                        <img src="assetss/img/University/Homepage_4/Path_1.png" alt="about" class="img-fluid">
                    </div>
                    <div class="col-12 col-md-10 content">
                        <h5>About the course</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus imperdiet metus at
                            congue. Praesent cursus a ante ut facilisis. Morbi iaculis dolor purus, auctor porta dolor
                            gravida ac.</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="row">
                    <div class="col-12 col-md-2 media">
                        <img src="assetss/img/University/Homepage_4/Path_2.png" alt="about" class="img-fluid">
                    </div>
                    <div class="col-12 col-md-10 content">
                        <h5>About the course</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus imperdiet metus at
                            congue. Praesent cursus a ante ut facilisis. Morbi iaculis dolor purus, auctor porta dolor
                            gravida ac.</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="row">
                    <div class="col-12 col-md-2 media">
                        <img src="assetss/img/University/Homepage_4/Path_3.png" alt="about" class="img-fluid">
                    </div>
                    <div class="col-12 col-md-10 content">
                        <h5>About the course</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus imperdiet metus at
                            congue. Praesent cursus a ante ut facilisis. Morbi iaculis dolor purus, auctor porta dolor
                            gravida ac.</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="row">
                    <div class="col-12 col-md-2 media">
                        <img src="assetss/img/University/Homepage_4/Path_4.png" alt="about" class="img-fluid">
                    </div>
                    <div class="col-12 col-md-10 content">
                        <h5>About the course</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus imperdiet metus at
                            congue. Praesent cursus a ante ut facilisis. Morbi iaculis dolor purus, auctor porta dolor
                            gravida ac.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 <!-- Popup -->
 <div class="side-form-popup">
    <div class="popup-wrapper">
        <div class="center-popup">
                <div class="opening-popup">
                        <div class="close-popup">
                            <i class="fas fa-times"></i>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-lg-8 media">
                                <img src="assetss/img/University/students/adolescent-adorable-alone.png" alt="media"
                                    class="img-fluid">
                            </div>
                            <div class="col-md-6 col-lg-4 content">
                                <h5>Opening hours</h5>
                                <div class="openings">
                                    <div class="opening opening-days">
                                        <p class="day">Monday</p>
                                        <div class="divider"></div>
                                        <p class="day">Friday</p>
                                    </div>
                                    <div class="opening opening-time">
                                        <p class="time">08.00 am</p>
                                        <div class="divider"></div>
                                        <p class="time">16.00 pm</p>
                                    </div>
                                </div>
                                <p class="num">+24 45 15 62 129</p>
                            </div>
                        </div>
                    </div>
                    <div class="location-popup">
                        <div class="close-popup">
                            <i class="fas fa-times"></i>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-6 col-lg-8 media">
                                <div id="location-map"></div>
                            </div>
                            <div class="col-12 col-md-6 col-lg-4 content">
                                <h5>Address</h5>
                                <p class="address">2, Ave Manchester, Lorem ipsum St, Rio Danubin</p>
                                <button class="main-btn">Open in Maps</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-popup">
                        <div class="close-popup">
                            <i class="fas fa-times"></i>
                        </div>
                        <div class="row">
                            <div class="col-12 col-lg-7 content">
                                <h4>You have a question for us?</h4>
                                <p>leave your message below or email us at info@bantinguniversity.com</p>
                                <form class="text-left form-style-2">
                                    <div class="form-group required">
                                        <label for="email">Email address</label>
                                        <input type="email" id="email" class="form-control" name="email"
                                            placeholder="johnLP12@gmail.com" />
                                    </div>
                                    <div class="form-group">
                                        <label for="message">Message</label>
                                        <input type="text" id="message" class="form-control" name="name"
                                            placeholder="Hello, I wanted to know about this particular course called..." />
                                        <span class="small-text">120 characters left</span>
                                    </div>
                                    <button class="main-btn" type="submit">Send message</button>
                                </form>
                            </div>
                            <div class="d-none d-lg-block col-lg-5 media">
                                <img src="assetss/img/University/Coming_soon/ambar-simpang.png"
                                    alt="media image" class="img-fluid" />
                            </div>
                        </div>
                    </div>
        </div>
    </div>
</div>

<!-- testimonial carousel area -->
<section class="testimonial-carousel-area padding-45">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">

                <div class="testimonial-style-1 white-bg">
                    <div class="section-title with-icon">
                        <h3 class="title">Study abroad destinations</h3>
                    </div>
                    <div class="testimonial-slider-arrows"></div>
                    <div class="testimonial-slider-dots d-none d-md-block"></div>
                    <div class="row justify-content-center">
                        <div class="col-lg-6 text-center">
                            <div class="testimonial-thumbnail-slider">

                                @foreach($countries as $countrie) 
                                <div class="single-testimonial-thumb">
                                    <div class="img-wrap">
                                        <div class="img"
                                            style="background-image: url({{url('filesimg/country/'.$countrie->country_image)}})"></div>
                                    </div>
                                </div>
                                @endforeach

                             

                            </div>
                        </div>
                    </div>
                    <div class="testimonial-description-slider">
                        @foreach($countries as $countri) 
                        <div class="single-testimonial-item">
                            <p><h3>{{$countri->country_name}}</h3>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus augue nibh, at
                                ullamcorper orci ullamcorper ut. Integer vehicula iaculis risus, non consequat eros
                                tincidunt ac. Morbi a aliquam tortor. Nam convallis vestibulum nisi, sit amet
                                fermentum libero scelerisque id. Integer iaculis mollis justo, sed interdum ligula
                                auctor in.
                            </p>
                    
                        </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>




<!-- Features Section -->
<section class="features-section section">
    <div class="container text-center">
        <h2>Why choose us?</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe qui iusto sapiente laudantium
            inventore
            vel aliquam iste culpa id optio, labore, ut illo praesentium voluptatibus doloremque atque autem.
            Facilis debitis perspiciatis rerum, reiciendis, cumque minus temporibus, magnam atque quam similique
            nisi dolores? Optio earum quis quam perferendis culpa, dolor veritatis!</p>
        <div class="row d-flex justify-content-between">
            <div class="col-12 col-lg-6 media">
                <img src="assetss/img/University/students/naassom-azevedo.png" alt="feature image" class="img-fluid">
            </div>
            <div class="col-12 col-lg-6 content">
                <div class="accordion-wrapper">
                    <div id="accordion">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h5 class="mb-0">
                                    <a role="button" data-toggle="collapse" data-target="#collapseOne"
                                        aria-expanded="true" aria-controls="collapseOne">
                                        Learn at your own pace
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                data-parent="#accordion">
                                <div class="card-body">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in velit odio. Morbi
                                    sodales nisi nec tortor commodo
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <h5 class="mb-0">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                        data-target="#collapseTwo" aria-expanded="false"
                                        aria-controls="collapseTwo">
                                        Online instructors easily accessible
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                data-parent="#accordion">
                                <div class="card-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit itaque, blanditiis
                                    animi dignissimos distinctio temporibus?
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <h5 class="mb-0">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                        data-target="#collapseThree" aria-expanded="false"
                                        aria-controls="collapseThree">
                                        Get certified awards
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                data-parent="#accordion">
                                <div class="card-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit itaque, blanditiis
                                    animi dignissimos distinctio temporibus?
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingFour">
                                <h5 class="mb-0">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                        data-target="#collapseFour" aria-expanded="false"
                                        aria-controls="collapseFour">
                                        More than 300+ courses available
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseFour" class="collapse" aria-labelledby="headingFour"
                                data-parent="#accordion">
                                <div class="card-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit itaque, blanditiis
                                    animi dignissimos distinctio temporibus?
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header" id="headingFive">
                                <h5 class="mb-0">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                        data-target="#collapseFive" aria-expanded="false"
                                        aria-controls="collapseFive">
                                        Certified lecturers
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseFive" class="collapse" aria-labelledby="headingFive"
                                data-parent="#accordion">
                                <div class="card-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit itaque, blanditiis
                                    animi dignissimos distinctio temporibus?
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingSix">
                                <h5 class="mb-0">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                        data-target="#collapseSix" aria-expanded="false"
                                        aria-controls="collapseSix">
                                        Online instructors easily accessible
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseSix" class="collapse" aria-labelledby="headingSix"
                                data-parent="#accordion">
                                <div class="card-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit itaque, blanditiis
                                    animi dignissimos distinctio temporibus?
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>





@endsection