@extends('layouts.app')
@section('content')

<div class="container-fluid">




    <!-- if there are creation errors, they will show here -->
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- will be used to show any messages -->
    @if (Session::has('message'))
    <div class="alert alert-info">{{ Session::get('message') }}</div>
    @endif

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">All courses available</h1>
    </div>

    <div class="row">

        @foreach($courses as $course)
        @if( count($course->modules) > 0)
        <!-- Content Column -->
        <div class="col-lg-4 mb-4">
            <!-- Course Card Example -->
            <div class="card shadow mb-4 border-bottom-primary">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ $course->menu_name }}</h6>
                </div>
                <div class="card-body">

                    @if( Helper::isCourseCompleted($course->id) === 'graduated')
                    <p class="text-center">Completed <i class="fas fa-graduation-cap"></i><p>
                    @endif

                    <p>{{ $course->description }}</p>

                </div>
                <div class="card-footer">
                    <span>{{ count($course->modules) }} Modules</span>
                    <a href="/course-modules/{{ $course->id }}"
                        class="btn btn-sm btn-primary btn-icon-split float-right">
                        <span class="icon text-white-50">
                            <i class="fas fa-play"></i>
                        </span>
                        <span class="text">View course modules</span>
                    </a>


                </div>
            </div>
        </div>
        @endif
        @endforeach
    </div>

</div>


@stop

@section('scripts')

<script type="text/javascript">
$(document).ready(function() {
    $('#dataTable').DataTable();
});
</script>

@stop