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

@section('subhead')
    <title>Atarud MIS - Teachers List</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection
<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">Leave List</h2>
         
    </div>

    <ul class="nav nav-tabs" role="tablist">
        <li id="example-1-tab" class="nav-item flex-1" role="presentation">
            <button class="nav-link w-full py-2 active" data-tw-toggle="pill" data-tw-target="#example-tab-1" type="button"
                role="tab" aria-controls="example-tab-1" aria-selected="true">
               Student
            </button>
        </li>
        <li id="example-2-tab" class="nav-item flex-1" role="presentation">
            <button class="nav-link w-full py-2" data-tw-toggle="pill" data-tw-target="#example-tab-2" type="button"
                role="tab" aria-controls="example-tab-2" aria-selected="false">
                Employees Teachers
            </button>
        </li>
    </ul>
    <div class="tab-content border-l border-r border-b">
        
        <div id="example-tab-1" class="tab-pane leading-relaxed p-5 active box" role="tabpanel" aria-labelledby="example-1-tab">
            <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-student_leave" class="btn btn-primary w-24 ml-auto mb-4 mr-2" style="float:right;">
                <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
            </a>
            <div class="container">
                <div class="row">
                    <div class="col-12 table-responsive">
                        <table class="table table-bordered student_datatable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Progam</th>
                                    <th>Class</th>
                                    <th>Student</th>
                                    <th>From Date</th>
                                    <th>To Date</th>
                                    <th>Days</th>
                                    <th>Reason</th>
                                    <th width="100px">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id="example-tab-2" class="tab-pane leading-relaxed p-5 box" role="tabpanel" aria-labelledby="example-2-tab">
            <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-emp_tea_leave" class="btn btn-primary w-24 ml-auto mb-4 mr-2" style="float:right;">
                <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
            </a>
            <div class="container">
                <div class="row">
                    <div class="col-12 table-responsive">
                        <table class="table table-bordered emp_tea_datatable" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Employee</th>
                                    <th>Teacher</th>
                                    <th>From Date</th>
                                    <th>To Date</th>
                                    <th>Reason</th>
                                    <th width="100px">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('../pages/leave/create_student_leave')
    @include('../pages/leave/create_emp_tea_leave')
@endsection


@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.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 type="text/javascript">
        $(function() {
            var table = $('.student_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('stleave') }}",
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'program_id', name: 'program_id' },
                    { data: 'course_id', name: 'course_id' },
                    { data: 'student_id',name: 'student_id' },
                    { data: 'date',name: 'date' },
                    { data: 'to_date',name: 'to_date' },
                    { data: 'reason',name: 'reason'},
                    { data: 'days',name: 'days' },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
        });

        $(function() {
            var table = $('.emp_tea_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('emptealeave') }}",
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'employee_id', name: 'employee_id' },
                    { data: 'teacher_id', name: 'teacher_id' },
                    { data: 'date', name: 'date' },
                    { data: 'to_date', name: 'to_date' },
                    { data: 'reason', name: 'reason' },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
        });
    </script>

<script>
      jQuery('#teacher').hide();
        jQuery('#employee').hide();
    function get_class_semesters(program_id) {
        $.ajax({
            method: 'GET',
            url: "{{ url('/get/program/semester/') }}",
            data: {
                p_id: program_id,
            },

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

            }
        });
        
    }

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

            success: function(response) {
                jQuery('#section_selector_holder').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 get_section_students(course_id) {
        $.ajax({
            method: 'GET',
            url: "{{ url('/get/section/students') }}",
            data: {
                course_id: course_id,
            },
            success: function(response) {
                jQuery('#student_selector_holder').html(response);
            }
        });
    }

    function get_stu_tea(ele) {
       if(ele == 'employee'){
        jQuery('#employee').show();
        jQuery('#teacher').hide();

       }
       else{
        jQuery('#teacher').show();
        jQuery('#employee').hide();
       }
    }


</script>

@endsection