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

<div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $module->course->name }}">Project - {{ substr($module->course->name, 0, 80) }}...</h1> 
    </div>
    <div class="border-bottom"><p> {{ $course->description }}</p></div>
    

    <div class="d-sm-flex align-items-center justify-content-between mb-4 mt-4">
        <h5 class="h5 mb-0 text-gray-800">Modules</h5>
    </div>

    <div class="row">

        @foreach($course->modules->sortBy('name') as $key => $module)

        <!-- Content Column -->
        <div class="col-lg-4 mb-4" >
            <!-- Course Card Example -->
            <div class="card shadow mb-4 border-bottom-primary" style="min-height: 400px;">

                <div class="card-header py-3 d-flex flex-row justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{ substr($module->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>
                        
                    </h6>
                </div>
                <div class="card-body">
                    <p>{{ $module->description }}</p>

                    @foreach($module->worksheets as $worksheet)
                    <p>
                        <hr>
                        <a
                            href="/course/{{ $module->course_id }}/module/{{ $module->id }}/worksheets/{{ $worksheet->id }} ">
                            {{ $worksheet->menu_name }} </a>
                        @if( App\Http\Controllers\EnrollmentController::getStatus($worksheet->id) == 'completed')
                        <i class="fas fa-check btn-success p-1 float-right"></i>
                        @endif

                    </p>
                    @endforeach

                </div>
                <div class="card-footer">
                    <span>{{ count($module->worksheets) }} Worksheets</span>
                    @if(count($module->worksheets) != 0)
                        @if( $module->enrollment_status_id(Auth::id(), $module->id) === null)
                        <a href="/enroll-in-module/{{ $course->id }}/{{ $module->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">Start</span>
                        </a>
                        @else
                        <a href="/course/{{ $course->id }}/module/{{ $module->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">Continue</span>
                        </a>
                        @endif
                    @else
                        <a href="/worksheet/create" class="btn btn-sm btn-primary btn-icon-split float-right isDisabled">
                            <span class="icon text-white-50">
                                <i class="fas fa-play"></i>
                            </span>
                            <span class="text">Add Worksheet</span>
                        </a>
                    @endif
                </div>
            </div>
        </div>

        @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="module">
                <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>

</div>


@stop