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

    <div class="row gap-2">

        @foreach($courses as $key => $course)
            @if( count($course->modules) > 0)
            <!-- Content Column -->
            <div class="col-md-12 col-lg-6 col-xl-4">
                <!-- Course Card Example -->
                <div class="card shadow mb-4 border-bottom-primary"  style="max-height: 480px; height: 100vh">
                    <div class="card-header py-3 d-flex flex-row justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">{{ substr($course->menu_name, 0, 65) }} ...</h6>
                        <div>
                            <a href="#" id="navbarDropdown-{{ $key }}" class="pe-auto p-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa-solid fa-comment"></i>
                            </a>

                            <div class="dropdown-menu dropdown-menu-right shadow-lg p-2" aria-labelledby="navbarDropdown-{{ $key }}">
                                
                                <a class="text-center text-decoration-none d-block d-flex justify-content-between p-1 align-items-center" href="#" data-toggle="modal" data-target="#commentModal" onclick="passCommentData('{{ $course->id }}')">
                                    <i class="fa-solid fa-comment"></i> 
                                    <span class="text-right">Add comment</span>
                                </a>
                                
                                <a class="text-center text-decoration-none d-block d-flex justify-content-between p-1 align-items-center" href="#">
                                    <i class="fa-solid fa-list"></i> 
                                    <span class="text-right">View comments</span>
                                </a>

                            </div>
                        </div>
                    </div>
                    <div class="card-body">

                        <p>
                            @if(strlen($course->description) >= 20)
                            {{ substr($course->description, 0, 500) }}...
                            @else
                            {{ $course->description }}
                            @endif
                        </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 project modules</span>
                        </a>

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


<!-- Comment Modal -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="commentModalLabel">Add comment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Suggest a change and become a contributor. The author will either approve or reject the changes. Remember to be polite and respectful!</p> 
                <textarea name="comment" id="comment" cols="30" rows="10" class="form-control"></textarea>
                <input type="hidden" id="comment_id" name="type">
                <input type="hidden" id="type" name="type" value="course">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div id="message"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="clearFlields()">Close</button>
                <button type="submit" class="btn btn-primary" onclick="addComment()">Save</button>
            </div>
        </div>
    </div>
</div>
</div>


@stop

@section('scripts')

<script type="text/javascript">

$(document).ready(function() {
    $('#dataTable').DataTable();
});

</script>

@stop