@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Courses List</title>
@endsection
<style>
    .form-control {
        margin-bottom: 20px;
    }
</style>
@section('subcontent')
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Courses List</h2>
        <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-course" class="btn btn-primary w-24 ml-auto">
            <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
        </a>
    </div>
    <div class="dropdown">
        <button class="dropdown-toggle btn px-2 box" aria-expanded="false" data-tw-toggle="dropdown">
           Select Program
          
          
        </button>

        <div class="dropdown-menu w-40">
            <ul class="dropdown-content">
                @foreach ($programs as $program )
                <li>
                    <a href="{{ url('/course?type='. $program->id) }}" class="dropdown-item">
                      {{ $program->title }}
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
    <div class="grid grid-cols-12 gap-6 mt-5">
        <!-- BEGIN: Data List -->
        <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">
            <h1 class="text-4xl font-medium leading-none text-center py-3 ">Program: {{ $pr->title }}</h1>
            <div class="overflow-x-auto">
                <table class="table table-hover">
                    <thead>
                        <tr class="bg-primary text-white">
                            <th class="whitespace-nowrap">#</th>
                            <th class="whitespace-nowrap">Course ID</th>
                            <th class="whitespace-nowrap">Time</th>
                            <th class="whitespace-nowrap">Course</th>
                            <th class="whitespace-nowrap">Category</th>
                            <th class="whitespace-nowrap">Shift</th>
                            <th class="whitespace-nowrap">Unit</th>
                            <th class="whitespace-nowrap">Starting Date</th>
                            <th class="whitespace-nowrap">Ending Target</th>
                            <th class="whitespace-nowrap">A Lingua Instructor</th>
                            <th class="whitespace-nowrap">Grammar Instructor</th>
                            <th class="whitespace-nowrap">ST#</th>
                            <th class="whitespace-nowrap">Statistics</th>
                            <th class="whitespace-nowrap" style="text-align: center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($courses as $course)
                        @php
                           $sts =  App\Models\Student::where('section_id', $course->id)->count();
                           $grammar =  App\Models\Teacher::where('id', $course->grammer_teacher_id)->first();
                           $lingua =  App\Models\Teacher::where('id', $course->conversation_teacher_id)->first();
                        @endphp
                        <tr>
                            <td>{{ ++$loop->index }}</td>
                            <td>{{ $course->id }}</td>
                            <td>{{ $course->time_start }}</td>
                            <td>{{ $course->title }}</td>
                            <td>{{ $course->category }}</td>
                            <td>{{ $course->shift }}</td>
                            <td>{{ $course->unit }}</td>
                            <td>{{ $course->start_date }}</td>
                            <td>{{ $course->end_date }}</td>
                            <td>{{ $lingua->name }}</td>
                            <td>{{ $grammar->name }}</td>
                            <td>{{ $sts }}</td>
                           
                            <td>
                                @php
                                    $percentage = 0;
                                    $bg = 'warning';

                                    if($course->status == 'finished'){
                                        $percentage = 100;
                                        $bg = 'success';
                                    }

                                    else if($course->status == 'active'){
                                        $percentage = \Carbon\Carbon::parse($course->start_date)?->diffInDays();
                                        if($percentage > 100) $percentage = 100;
                                        $bg = 'primary';
                                    }
                                @endphp
                                <div>
                                    <div class="flex">
                                        <div class="mr-auto">
                                            <span class="text-xs font-semibold py-1 px-2 rounded-full uppercase text-{{ $bg }} bg-{{ $bg }}/{{ ($bg == 'primary') ? 10 : 20 }}">
                                                {{ $course->status }}
                                            </span>
                                        </div>
                                        <div>{{ $percentage }}%</div>
                                    </div>
                                    <div class="progress h-1 mt-2">
                                        <div role="progressbar" class="progress-bar bg-{{ $bg }}" style="width:{{ $percentage }}%"></div>
                                    </div>
                                </div>
                            </td>
                            {{-- <td class="table-report__action w-56">
                                <div class="flex justify-center items-center">
                                    <a class="flex items-center mr-3" href="{{ route('course.edit', $course->id) }}"  data-tw-toggle="modal" data-tw-target="#edit-course">
                                        <i data-lucide="check-square" class="w-4 h-4 mr-1"></i> Edit
                                    </a>
                                    <a data-id="{{ $course->id }}" onclick="return deleteCourse({{ $course->id }})" class="flex items-center text-danger" href="javascript:;" data-tw-toggle="modal" data-tw-target="#delete-confirmation-modal">
                                        <i data-lucide="trash-2" class="w-4 h-4 mr-1"></i> Delete
                                    </a>
                                </div>
                            </td> --}}
                            <td class="table-report__action w-56">
                                
                                <div class="dropdown">
                                    <button class="dropdown-toggle btn btn-primary" aria-expanded="false"
                                        data-tw-toggle="dropdown">Action</button>
                                    <div class="dropdown-menu w-42">
                                        <ul class="dropdown-content">
                                            <li class="mr-8 h-8 pr-10 pl-4">
                                                <a class="flex items-center mr-3"href="{{ route('course.edit', $course->id) }}"  data-tw-toggle="modal" data-tw-target="#edit-course">
                                                    <i data-lucide="check-square" class="w-7 h-7 mr-1"></i> Edit
                                                </a>
                                            </li>
                                            <li class="mr-8 h-8 pr-10 pl-4">
                                                <a class="flex items-center mr-3 text-success" href="{{ route('course.students.promote', $course->id) }}">
                                                    <i data-lucide="user" class="w-7 h-7 mr-1"></i> Promote
                                                </a>
                                            </li>
                                            <li class="mr-8 h-8 pr-10 pl-4">
                                                <a class="flex items-center text-danger" data-id="{{ $course->id }}" onclick="return deleteCourse({{ $course->id }})" href="javascript:;" data-tw-toggle="modal" data-tw-target="#delete-confirmation-modal">
                                                    <i data-lucide="trash-2" class="w-7 h-7 mr-1"></i> Delete
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                {{ $courses->links() }}
            </div>
        </div>
        <!-- END: Data List -->
    </div>
    @include('../pages/course/delete')
    @include('../pages/course/create')
@endsection
@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
 
    <script>
        function deleteCourse(id){
            
            $('#courseId').val(id);
        }

        var books = [];
        jQuery('#books').hide();
        // print invoice function
       

        function get_program_semesters(program_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/program/semester/') }}",
                data: {
                    p_id: program_id,
                },

                success: function(response) {
                    jQuery('#semester_id').html(response);

                }
            });
          
        }
        

        function getSection(semester_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/semester/section/') }}",
                data: {
                    s_id: semester_id,
                },

                success: function(response) {
                    jQuery('#section_id').html(response);

                }
            });

           
        }
        function setTitle(section_id){
            $.ajax({
                method: 'GET',
                url: "{{ url('/course/title/') }}",
                data: {
                    s_id: section_id,
                },

                success: function(response) {
                    jQuery('#title').val(response);
                }
            });
        }
        
       

    </script>
@endsection