@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 Module</h1>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h5 class="m-0 font-weight-bold text-primary">Current Modules
                @can('create_modules', App\Models\Module::class)
                <a href="/module/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 Module </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>Module Title</td>
                            <td>Menu Name</td>
                            <td>Belongs To Course</td>
                            <td width="10%" class="text-center">Actions</td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($modules as $value)
                        <tr>
                            <td>{{ $value->id }}</td>
                            <td>{{ $value->name }}</td>
                            <td>{{ $value->menu_name }}</td>

                            <td width="10%" class="text-center">
                                @if($value->course_id)
                                <a href="/course/{{ $value->course_id }}">{{ $value->course->menu_name }}</a>
                                @else
                                <a href="/module/{{ $value->id }}/edit">No assign course</a>
                                @endif
                            </td>


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

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

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

                                <!-- delete the module (uses the destroy method DESTROY /module/{id} -->
                                <!-- we will add this later since its a little more complicated than the first two buttons -->
                  
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>


</div>


@stop

@section('scripts')

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

@stop