@extends('layouts.master')

@section('css')
<!-- third party css -->
<link href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')

<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <a href="javascript:newTutorial()" class="btn btn-primary btn-rounded">New Tutorial</a>
                </div>
                <h4 class="page-title">My Tutorials</h4>

            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <form id="dataForm" name="dataForm" class="form-horizontal" action="{{ url('/tutorial/create',[$facultyid])}}">
                        @csrf
                        <div class="row">
                            <input type="hidden" id="facultyid" name="facultyid" value="{{$facultyid}}" />
                            <div class="col-sm-3">
                                <label for="courseid" class="control-label">Course</label>
                                <select class="form-control" id="courseid" name="courseid">
                                    <option value="">Select Course</option>
                                    @foreach($courses as $course)
                                    <option value="{{$course->id}}">{{$course->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <label for="batchid" class="control-label">Batch</label>

                                <select type="text" class="form-control" id="batchid" name="batchid" required="">
                                    <option value="">Select Batch</option>
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <label for="semester" class="control-label">Semester/Year</label>

                                <select type="text" class="form-control" id="semester" name="semester" required="">
                                    <option value="">Select Semester</option>
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <label for="subjectid" class="control-label">Subject</label>
                                <select type="text" class="form-control" id="subjectid" name="subjectid" required="">
                                    <option value="">Select Subject</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-10">
                                <h4 class="header-title">List of Tutorials</h4>
                            </div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-12">
                                <table class="table table-bordered data-table">
                                    <thead>
                                        <tr>
                                            <th>Sr</th>
                                            <th>Title</th>
                                            <th>Edit</th>
                                            <th>Delete</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </form>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->



</div> <!-- container -->
@endsection

@section('script')

<!-- third party js -->
<script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
<!-- third party js ends -->

<script>
    function newTutorial() {
        $('#dataForm').submit();
    }

    $(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }


        });

        populateBatchYear();
        saveData();

        $('#batchid').on('change', function() {
            inittable();
            resetSubjectFaculty();

        });

        $('#semester').on('change', function() {

            var facultyid = $('#facultyid').val();
            var batchid = $('#batchid').val();
            var semester = $('#semester').val();
            var url2 = '{{ route("mybatches.showsubjects",":id") }}';
            url2 = url2.replace(':id', facultyid);

            $.ajax({
                url: url2,
                type: "GET",
                data: {
                    semester: semester,
                    batchid: batchid
                },
                dataType: "json",
                success: function(data) {
                    $('select[name="subjectid"]').empty();
                    $('select[name="subjectid"]').append('<option value="">Select Subject</option>');
                    $.each(data, function(i, value) {
                        //console.log(i,value);
                        $('select[name="subjectid"]').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                    inittable();
                }
            });
        });

        $('#subjectid').on('change', function() {
            inittable();
        });

    });

    function resetSubjectFaculty() {

    }

    function saveData() {
        $('#saveBtn').click(function(e) {
            e.preventDefault();
            $(this).html('Sending..');

            $.ajax({
                data: $('#dataForm').serialize(),
                url: "{{ route('teachersubjectallocation.store') }}",
                type: "POST",
                dataType: 'json',
                success: function(data) {
                    $('#saveBtn').html('Saved Changes');
                    inittable();
                    resetSubjectFaculty();
                },
                error: function(data) {
                    console.log('Error:', data);
                    $('#saveBtn').html('Save Changes');
                }
            });
        });
    }

    function populateBatchYear() {
        $('#courseid').on('change', function() {
            resetSubjectFaculty();
            var courseid = $(this).val();

            var url = '{{ route("course.show",":id") }}';
            url = url.replace(':id', courseid);

            var url1 = '{{ route("batch.showbatches",":id") }}';
            url1 = url1.replace(':id', courseid);

            if (courseid) {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('select[name="semester"]').empty();
                        $('select[name="semester"]').append('<option value="">Select Semester</option>');
                        for ($i = 1; $i < data.semester; $i++) {
                            $('select[name="semester"]').append('<option value="' + $i + '">' + $i + '</option>');
                        }

                    }
                });

                $.ajax({
                    url: url1,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('select[name="batchid"]').empty();
                        $('select[name="batchid"]').append('<option value="">Select Batch</option>');
                        $.each(data, function(i, value) {
                            //console.log(i,value);
                            $('select[name="batchid"]').append('<option value="' + value.id + '">' + value.batch + '</option>');
                        });
                    }
                });


            } else {
                $('select[name="batchid"]').empty();
            }
        });
    }


    var table;

    function inittable() {
        var batchid = $("#batchid").val();
        var semester = $("#semester").val();
        var facultyid = $('#facultyid').val();
        var subjectid = $('#subjectid').val();

        if (batchid && semester && subjectid) {
            var url = '{{ route("teachersubjectallocation.showtutorials",[":batchid",":semester",":facultyid",":subjectid"])}}';
            url = url.replace(':batchid', batchid);
            url = url.replace(':semester', semester);
            url = url.replace(':facultyid', facultyid);
            url = url.replace(':subjectid', subjectid);
            table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                ajax: {
                    url: url,
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        sWidth: '5%',
                        className: "text-center"
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'edit',
                        name: 'edit',
                        orderable: false,
                        searchable: false,
                        sWidth: '10%',
                        className: "text-center"
                    },
                    {
                        data: 'delete',
                        name: 'delete',
                        orderable: false,
                        searchable: false,
                        sWidth: '10%',
                        className: "text-center"
                    },
                ]
            });
        }
    }
</script>

@endsection