@extends('_inc/base')

@section('content')
    <style>
        body{
            background-color: white !important;
        }
    </style>
    <div class="position-relative">
        <!-- shape Hero -->
        <section class="section section-lg section-shaped pb-100">
            <div class="shape shape-style-1 shape-default">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="container py-lg-md d-flex">
                <div class="col px-0">
                    <div class="row">
                        <div class="col-lg-8">
                            <h1 class="display-3">Grow with the Times
                                <span>learn from industry experts</span>
                            </h1>
                            <div class="form-group">
                                <div class="input-group input-group-alternative mb-4">
                                    <input class="form-control" placeholder="What are you interested in?" type="text">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- SVG separator -->
            <div class="separator separator-bottom separator-skew">
                <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon>
                </svg>
            </div>
        </section>
        <!-- 1st Hero Variation -->
    </div>
    <section class="section section-lg pt-lg-0 p--7">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <h2 class="text-center"><b>Learn on your schedule</b></h2>
                    <h5 class="text-center">Whether on the go, or while sipping a cup of coffee on your favorite couch, <br>learn anything, at anytime and anywhere</h5>
                    <div class="row row-grid courses-slide">
                       @foreach($courses as $course)
                           <a href="{{ site_url().'course/'.$course['permlink'] }}">
                               <div class="course-card">
                                   <img src="{{ base_url(). 'img/courses/covers/'.$course['meta_data']['cover_img'] }}" class="card-img-top">
                                   <div class="card-body p-3">
                                       <h6 class="font-weight-bold">{{ $course['title'] }}</h6>
                                       @if($course['category'] == 'business')
                                           <span class="badge badge-pill badge-warning">{{ $course['category'] }}</span>
                                       @elseif($course['category'] == 'programming')
                                           <span class="badge badge-pill badge-primary">{{ $course['category'] }}</span>
                                       @elseif($course['category'] == 'design')
                                           <span class="badge badge-pill badge-success">{{ $course['category'] }}</span>
                                       @endif
                                       <div style="display: inline-block;" class="star-rating small-star">
                                           <span class="fa fa-star-o" data-rating="1"></span>
                                           <span class="fa fa-star-o" data-rating="2"></span>
                                           <span class="fa fa-star-o" data-rating="3"></span>
                                           <span class="fa fa-star-o" data-rating="4"></span>
                                           <span class="fa fa-star-o" data-rating="5"></span>
                                           <input type="hidden" class="rating-value" value="{{ $course['meta_data']['rating'] }}">
                                       </div>
                                       <p class="description mt-3">{{ $course['description'] }}</p>
                                       <small><i class="fa fa-dot-circle-o text-muted"></i> {{ $course['meta_data']['videos_count'] }} Videos</small>&nbsp;&nbsp;&nbsp;&nbsp;
                                       <small><i class="fa fa-dot-circle-o text-muted"></i> {{ $course['meta_data']['examples_count'] }} Examples</small>
                                   </div>
                               </div>
                           </a>
                       @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section pb-0 bg-gradient-warning">
        <div class="container">
            <div class="row row-grid align-items-center">
                <div class="col-md-6 order-lg-2 ml-lg-auto">
                    <div class="position-relative pl-md-5">
                        <img src="../public/assets/img/teacher.png" class="img-center">
                    </div>
                </div>
                <div class="col-lg-6 order-lg-1">
                    <div class="d-flex px-3">
                        <div>
                            <div class="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
                                <i class="ni ni-building text-primary"></i>
                            </div>
                        </div>
                        <div class="pl-4">
                            <h4 class="display-3 text-white">Crafted by the best</h4>
                            <p class="text-white">All our class teachers are carefully selected, top influencers in their industry, we only work with the best.</p>
                        </div>
                    </div>
                    <div class="card shadow shadow-lg--hover mt-5">
                        <div class="card-body">
                            <div class="d-flex px-3">
                                <div>
                                    <div class="icon icon-shape bg-gradient-success rounded-circle text-white">
                                        <i class="ni ni-planet"></i>
                                    </div>
                                </div>
                                <div class="pl-4">
                                    <h5 class="title text-success">Real Life Examples</h5>
                                    <p>Get taught using real life scenarios, start solving life's problems directly from each class.</p>
                                    <a href="#" class="text-success">Learn more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card shadow shadow-lg--hover mt-5">
                        <div class="card-body">
                            <div class="d-flex px-3">
                                <div>
                                    <div class="icon icon-shape bg-gradient-warning rounded-circle text-white">
                                        <i class="ni ni-bullet-list-67"></i>
                                    </div>
                                </div>
                                <div class="pl-4">
                                    <h5 class="title text-warning">Modular Resources</h5>
                                    <p>Each class is segmented into smaller modules for better understanding, viewable on any device.</p>
                                    <a href="#" class="text-warning">Learn more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- SVG separator -->
        <div class="separator separator-bottom separator-skew zindex-100">
            <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon>
            </svg>
        </div>
    </section>
    <section class="section section-lg">
        <div class="container">
            <div class="row justify-content-center">
                <h2 class="text-center"><b>Take on the world, be a hero</b></h2>
                <h5 class="text-center">Join students from fortune 500 companies, all learning and sharing knowledge seamlessly.</h5>
                <div class="row justify-content-center p-5">
                    <div class="col-lg-3 col-4">
                        <a href="#" target="_blank">
                            <img src="../public/assets/img/mercedes.svg" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-lg-3 col-4">
                        <a href="#">
                            <img src="../public/assets/img/uber.svg" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-lg-3 col-4">
                        <a href="#" target="_blank">
                            <img src="../public/assets/img/google.svg" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-lg-3 col-4">
                        <a href="#" target="_blank">
                            <img src="../public/assets/img/facebook.svg" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section bg-secondary">
        <div class="container">
            <div class="row row-grid align-items-center">
                <div class="card bg-gradient-warning shadow-lg border-0" style="width:100%">
                    <div class="p-5">
                        <div class="row align-items-center">
                            <div class="col-lg-8">
                                <h3 class="text-white"><b>Ready to Begin?</b></h3>
                                <p class="lead text-white mt-3">Enroll in a program and build your best future, today.</p>
                            </div>
                            <div class="col-lg-3 ml-lg-auto">
                                <a href="{{ site_url().'signup' }}" class="btn btn-lg btn-block btn-white">Sign Up</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection