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

@section('subhead')
<title>Atarud MIS - Exit Exam</title>
@endsection

@section('subcontent')
<div class="flex items-center mt-8">
    <h2 class="intro-y text-lg font-medium mr-auto">Exit Exam</h2>
    <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-exam" 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="grid grid-cols-12 gap-6 mt-6">

    <!-- BEGIN: Data List -->
    <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

        <div class="overflow-x-auto">

            <form method="get" action="{{ route('exitexam.store') }}">
                @csrf
                <table class="table">
                    <thead class="table-light">
                        <tr>
                            <th>Select Program</th>
                            <th>Select Semester</th>
                            <th>Select Section</th>
                            <th>Select Course</th>
                            <th>Select Date</th>
                            <th>Select Year</th>
                            <th>&nbsp;</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>

                            <td>

                                <select name="program_id" class="form-control" id="program_id"
                                    onchange="get_class_semesters(this.value)">
                                    <option value="">Select Progarm</option>

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

                                </select>
                            </td>
                            <td>
                                <select name="semester_id" class="form-control" id="semester_id"
                                    onchange="getSection(this.value) ">
                                    <option value="">Select Semester</option>
                                </select>
                            </td>
                            <td>
                                <select name="section_id" class="form-control" id="section_id"
                                    onchange="get_section_courses(this.value)">
                                    <option value="">Select Section</option>
                                </select>
                            </td>
                            <td>

                                <select name="course_id" class="form-control" id="section_selector_holder">
                                    <option value="">Select Class</option>
                                </select>
                            </td>
                            <td>
                                <input type="date" name="date" id="date" class="form-control" style="display: inline;">
                            </td>
                            <td>
                                <select name="exam_year" id="exam_year" class="form-control">
                                   @for($i = 1400; $i < 1440; $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </td>
                            <td>
                                <input type="button" onclick="return getStudents();" value="Get Students"
                                    class="btn btn-sm btn-primary" style="display: inline;">
                            </td>
                        </tr>
                    </tbody>
                </form>
                </table>

        </div>
        <div class="overflow-x-auto" style="border-radius:5px; border:1px solid #e5e7eb;">
            <form method="post" action="{{ route('exitexam.store') }}">
                @csrf
                @method('post')
                <div id="details">

                </div>
            </form>

        </div>

        <!-- END: Data List -->


    </div>

    {{-- @include('../pages/exam/create') --}}
    @endsection
    @section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>

    <script>
        function getStudents() {
    var program = document.getElementById('program_id').value;
    var semester = document.getElementById('semester_id').value;
    var section = document.getElementById('section_id').value;
    var course = document.getElementById('section_selector_holder').value;
    var date = document.getElementById('date').value;
    var exam_year = document.getElementById('exam_year').value;

    $.ajax({
        method: 'get',
        url: "{{ route('exitexam.get.students') }}",
        data: {
            program_id: program,
            semester_id: semester,
            section_id: section,
            course_id: course,
            date: date,
            exam_year: exam_year,

        },
        success: function(response) {
            console.log(response);
            jQuery('#details').html(response);
        }
    });
}

    function get_class_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 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 getExams(course_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/course/exams') }}",
                data: {
                    course_id: course_id,
                },
                success: function(response) {
                    console.log(response);
                    jQuery('#exam_id').html(response);
                }
            });
        }
    </script>
    @endsection