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

@section('subhead')
    <title>Atarud MIS - Course Teachers Setting</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }

    .fileBtn:hover {
        cursor: progress;
        color: red;
    }
</style>
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />
@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Course Teachers Setting</h2>
    </div>
    <div class="box ">

        <div class="col-span-12 lg:col-span-8 2xl:col-span-9 ">
          
                <!-- BEGIN: Display Information -->

                <div class="intro-y box lg:mt-5">
                    <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                        style="background-color: #292727; border-radius: 4px;">
                        <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Student Courses</h2>
                    </div>

                    <div class="p-5  ">
                        <div class="flex flex-col-reverse xl:flex-row flex-col">
                            <div class="flex-1 mt-6 xl:mt-0">

                                <div class="overflow-x-auto">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th class="whitespace-nowrap">#</th>
                                                <th class="whitespace-nowrap">Teacher Name</th>
                                                <th class="whitespace-nowrap">Subject</th>
                                                <th class="whitespace-nowrap">Percentage</th>
                                                <th class="whitespace-nowrap">Status</th>
                                                <th class="whitespace-nowrap">From</th>
                                                <th class="whitespace-nowrap">To</th>
                                                <th class="whitespace-nowrap">Setting</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $c = 0;
                                            @endphp
                                            @foreach ( $subjectTeach as $row)
                                            @php
                                                $teacher = App\Models\Teacher::where('id', $row->teacher_id)->first();
                                            @endphp
                                            <tr>
                                                <td>{{ ++$c }}</td>
                                                <td>{{ $teacher->name }}</td>
                                                <td>{{ $row->subject }}</td>
                                                <td>{{ $row->percentage }}</td>
                                                <td>{{ $row->status }}</td>
                                                <td>{{ $row->from_date }}</td>
                                                <td>{{ $row->to_date }}</td>
                                                <td>
                                                    <a href="javascript:;" data-teacherid="{{$row->teacher_id}}" data-courseid="{{$row->course_id}}" data-tw-toggle="modal" data-tw-target="#datepicker-modal-preview" class="btn btn-primary setting">Completion</a>
                                                </td>
                                          </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!--End of Course Display-->
                    <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                        style="background-color: #292727; border-radius: 4px;">
                        <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Courses</h2>
                    </div>

                    <div class="p-5 box bg-primary/10">
                        <div class="flex flex-col-reverse xl:flex-row flex-col">
                            <div class="flex-1 mt-6 xl:mt-0">
                                <form id="studentForm" action="{{ route('course.assign.teacher') }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    @method('post')
                                    <input type="hidden" name="course_id" value="{{ $course->id }}">
                                <div class="grid grid-cols-12 gap-2">
                                    <div class="form-control col-span-3">
                                        <label for="field-2" class="control-label"> Teacher </label>
                                        <select name="teacher_id" class="form-control" id="teacher">
                                            <option value="">Select</option>
                                        </select>
                                    </div>

                                    <div class="form-control col-span-3">
                                        <label for="field-2" class="control-label">From </label>
                                        <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="dateFrom" >
                                    </div>

                                    <div class="form-control col-span-3">
                                        <label for="field-2" class="control-label">To </label>
                                        <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="dateTo" >
                                    </div>

                                    <div class="form-control col-span-3">
                                        <label for="field-2" class="control-label">Percentage </label>
                                        <input name="percentage" placeholder="Salary Percentage" type="number"  class="form-control" >
                                    </div>
                                    <div class="form-control col-span-3">
                                        <label for="field-2" class="control-label">Select Subject </label>
                                        <select name="subject" class="form-control">
                                            <option value="">Select Subject</option>
                                            <option value="grammer">Grammer</option>
                                            <option value="conversation">Coversation</option>
                                        </select>

                                    </div>

                                    <button type="submit" class="btn btn-primary mt-5 float-right">Save</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
        </div>
    </div>
    </form>
    </div>
    @include('../pages/course/teachingComplete')

@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>
        $(document).ready(function(){
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/all-teachers') }}",
                success: function(response) {
                    jQuery('#teacher').html(response);
                }
            });
        });
 
        $('.setting').on('click',function(){
            let teacherId = $(this).data('teacherid');
            let courseId = $(this).data('courseid');

            $('#teacher_id').val(teacherId);
            $('#course_id').val(courseId);
        });
        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);
                }
            });
        }
         
    </script>
@endsection