@extends('layouts.app')
@section('page_description')
    Dashboard
@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="card-header">Dashboard</div>

        <section class="course_details_block">
            <div class="site_container">
                <div class="site_row">
                <div class="site_full_col">
                    <h2>Our Courses</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam risus leo, tristique nec posuere sed,
                    congue ac augue. </p>
                </div>
                </div>
                <div class="course_row">
                <div class="course_col">
                    <div class="course_col_inner">
                    <div class="img_block">
                        <img src="{{ asset('image/course_1.jpg') }}" alt="">
                    </div>
                    <div class="course_caption" onclick="window.open('https://show.zohopublic.com/publish/0rudm688b4ee314c340fca8819cafd2c06b72', '_blank');"> 
                        <p>Courses 1</p>
                    </div>
                    </div>
                </div>
                <div class="course_col">
                    <div class="course_col_inner">
                    <div class="img_block">
                        <img src="{{ asset('image/course_2.jpg') }}" alt="">
                    </div>
                    <div class="course_caption drill_cursor">
                        <p>Courses 2</p>
                    </div>
                    </div>
                </div>
                <div class="course_col">
                    <div class="course_col_inner">
                    <div class="img_block">
                        <img src="{{ asset('image/course_3.jpg') }}" alt="">
                    </div>
                    <div class="course_caption drill_cursor">
                        <p>Courses 3</p>
                    </div>
                    </div>
                </div>
                <div class="course_col">
                    <div class="course_col_inner">
                    <div class="img_block">
                        <img src="{{ asset('image/course_4.jpg') }}" alt="">
                    </div>
                    <div class="course_caption drill_cursor">
                        <p>Courses 4</p>
                    </div>
                    </div>
                </div>
                <div class="course_col">
                    <div class="course_col_inner">
                    <div class="img_block">
                        <img src="{{ asset('image/course_5.jpg') }}" alt="">
                    </div>
                    <div class="course_caption drill_cursor">
                        <p>Courses 5</p>
                    </div>
                    </div>
                </div>
                <div class="course_col">
                    <div class="course_col_inner">
                    <div class="img_block">
                        <img src="{{ asset('image/course_5.jpg') }}" alt="">
                    </div>
                    <div class="course_caption drill_cursor">
                        <p>Courses 6</p>
                    </div>
                    </div>
                </div>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection

@push('scripts')
    <script type="text/javascript">
        $(".drill_cursor").click(function(){
	        alert('Please buy subscription for the Courses!');
        });
    </script>    
@endpush