@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">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

    <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">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
{{ 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">Build Course</h1>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h5 class="m-0 font-weight-bold text-primary">Current Courses
            @can('create', App\Course::class)
            <a href="/course/create" class="float-right btn btn-primary btn-icon-split">
                    <span class="icon text-white-50">
                      <i class="fas fa-plus"></i>
                    </span>
                    <span class="text">Create New Course </span>
                  </a>
            @endcan
            </h5>
        </div>
        
        <div class="card-body">
       
                <div id="dataTable_wrapper" class="table-responsive dataTables_wrapper dt-bootstrap4">
                    <table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
                        <thead>
                            <tr>
                                <td>ID</td>
                                <td>Course Title</td>
                                <td>Menu Name</td>
                                <td width="10%" class="text-center">Actions</td>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($courses as $value)
                            <tr>
                                <td>{{ $value->id }}</td>
                                <td>{{ $value->name }}</td>
                                <td>{{ $value->menu_name }}</td>
          

                                <!-- we will also add show, edit, and delete buttons -->
                                <td class="text-center">

                                    <!-- show the course (uses the show method found at GET /course/{id} -->
                                    <a class="btn btn-primary btn-circle" href="{{ URL::to('course/' . $value->id) }}">
                                        <i class="fas fa-eye"></i>
                                    </a>


                                    <!-- edit this course (uses the edit method found at GET /course/{id}/edit -->
                                    <a class="btn btn-primary btn-circle" href="{{ URL::to('course/' . $value->id . '/edit') }}"><i class="fas fa-edit"></i></a>

                                    <!-- delete the course (uses the destroy method DESTROY /course/{id} -->
                                    <!-- we will add this later since its a little more complicated than the first two buttons -->
                                    <!---
                                    {{ Form::open(array('url' => 'course/' . $value->id, 'style' => 'display: inline-block')) }}
                                    {{ Form::hidden('_method', 'DELETE') }}
                                    <button type="submit" class="btn btn-danger btn-circle"> <i class="fas fa-trash"></i></button>
                                    {{ Form::close() }}
                                        -->
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
       
        </div>
    </div>


</div>


@stop

@section('scripts')

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

@stop