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

@section('subhead')
    <title>Atarud MIS - Courses List</title>
@endsection
<style>
    .form-control {
        margin-bottom: 20px;
    }
</style>
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />
@section('subcontent')
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Courses List</h2>
        <a href="{{ route('new-course') }}" 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">End Time</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();
                                $section =  App\Models\Section::where('id', $course->section_id)->first();
                                $end_date = '';
                                $end_time = '';
                                if($section != null){
                                        $date = Morilog\Jalali\Jalalian::fromFormat('Y-m-d', $course->start_date)->addDays($section->duration);                                     
                                        $end_date = $date;
                                        $startTime = \Carbon\Carbon::createFromFormat('H:i', $course->time_start);
                                        $endTime = $startTime->addMinutes($section->time_duration);
                                        $end_time = $endTime->format('H:i');
                                }

                                $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>{{ $end_date }}</td>
                            <td>{{ $end_time }}</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="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.show', $course) }}">
                                                    <i data-lucide="settings" class="w-7 h-7 mr-1"></i> Show
                                                </a>
                                            </li>
                                            <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="settings" 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 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 src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
<script>
    $(function () {

        $(".pdpF2").persianDatepicker({
            months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
            dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
            shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
            showGregorianDate: !1,
            persianNumbers: !0,
            formatDate: "YYYY/MM/DD",
            selectedBefore: !1,
            selectedDate: null,
            startDate: null,
            endDate: null,
            prevArrow: '\u25c4',
            nextArrow: '\u25ba',
            theme: 'default',
            alwaysShow: !1,
            selectableYears: null,
            selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            cellWidth: 25, // by px
            cellHeight: 20, // by px
            fontSize: 13, // by px
            isRTL: !1,
            calendarPosition: {
                x: 0,
                y: 0,
            },
            onShow: function () {},
            onHide: function () {},
            onSelect: function () {},
            onRender: function () {}
    });


    });
</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