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

@section('subhead')
<title>Atarud MIS - Create Course</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">Create Course </h2> --}}
</div>
<div class="box ">

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

        <form action="{{ route('course.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            @method('post')
            <!-- BEGIN: Display Information -->

            <div class="intro-y box lg:mt-5">

                <div class="flex box 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;">Create Course</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">

                            <div class="grid grid-cols-12 gap-2">
                                <div class="form-control col-span-4 mt-2" >
                                    <label class="control-label"> Program</label>
                                    <select name="program_id" class="form-control" onchange="get_program_semesters(this.value)">
                                        <option value="">Select </option>
                                        @foreach ($programs as $row)
                                            <option value="{{ $row->id }}">
                                                {{ $row->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-control col-span-4 mt-2" >
                                    <label class="control-label"> Semester </label>
                                    <select name="semester_id" id="semester_id" onchange="getSection(this.value)" class="form-control">
                                        <option value="">Select Semester</option>
                                    </select>
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Section</label>
                                    <select name="section_id" id="section_id" onchange="setTitle(this.value)" class="form-control">
                                        <option value="">Select Section</option>
                                    </select>
                                </div>

                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Title</label>
                                    <input type="text" class="form-control" id="title" name="title">

                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Classrooms </label>
                                    <select name="classroom_id" class="form-control">
                                        <option value="">Select Classroom </option>

                                        @foreach ($classes as $row)
                                            <option value="{{ $row->id }}">
                                                {{ $row->name }}
                                            </option>
                                        @endforeach

                                    </select>
                                </div>

                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Category</label>
                                    <select name="category" class="form-control" data-size="7">
                                        <option value="">Select</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                    </select>
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Shift</label>
                                    <select name="shift" class="form-control" >
                                        <option value="">Select</option>
                                        <option value="morning">Morning</option>
                                        <option value="afternoon">Afternoon</option>
                                    </select>
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Unit</label>
                                    <input type="text" class="form-control" name="unit" >
                                </div>

                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Start Date</label>
                                    <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="start_date" data-start-view="1">

                                </div>
                                {{-- <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> End Date</label>
                                    <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="end_date" data-start-view="1">

                                </div> --}}
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label">Starting Time</label>
                                    <input name="time_start" type="time" class="form-control" />

                                    <div class="input-group-addon">
                                        <a href="#"><i class="entypo-clock"></i></a>
                                    </div>
                                </div>

                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label">End Time</label>
                                    <input type="time" name="time_end" class="form-control"/>

                                    <div class="input-group-addon">
                                        <a href="#"><i class="entypo-clock"></i></a>
                                    </div>
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="  control-label">Grammer Teacher</label>
                                    <select name="grammer_teacher_id" class="form-control" onchange="return teacherContractType(this,'gra')">
                                        <option value="">Select Teacher</option>
                                        @foreach ($teachers as $row)
                                            <option value="{{ $row->id }}">
                                                {{ $row->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-control col-span-4 mt-2" id="gra_percentage">
                                    <label class="control-label">Percentage</label>
                                    <input type="text" class="form-control" name="grammer_teacher_percent">

                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="  control-label">A Lingua Teacher</label>
                                    <select name="conversation_teacher_id" class="form-control" onchange="return teacherContractType(this,'con')">
                                        <option value="">Select Teacher</option>
                                        @foreach ($teachers as $row)
                                            <option value="{{ $row->id }}">
                                                {{ $row->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-control col-span-4 mt-2" id="con_percentage">
                                    <label class="control-label">Percentage</label>
                                    <input type="text" class="form-control" name="conversation_teacher_percent" >
                                </div>

                            </div>

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

                        </div>

                    </div>
                </div>
            </div>
    </div>

</div>
<!-- END: Display Information -->

</form>
</div>
@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 () {}
    });


    });
 function teacherContractType(teacher,type){
     $.ajax({
        method: 'GET',
        url: "{{ url('/get/teacher/contract/') }}",
        data: {
            id: teacher.value,
        },

        success: function(response) {
            if(type == 'gra'){
                (response.salary_type == 'fixed') ?  $('#gra_percentage').hide():  $('#gra_percentage').show();
            }
            if(type == 'con'){
                (response.salary_type == 'fixed') ?  $('#con_percentage').hide():  $('#con_percentage').show();
            }
        }
    });
 }
        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);
                }
            });
        }

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

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

    </script>
@endsection