@extends('admin::layouts.master')

@section('title')
@lang('translation.Universities') / Courses / Add
@endsection

@section('content')
@component('admin::components.breadcrumb')
@slot('li_1')
<a href="{{ route('admin.university.index') }}">Universities</a>
@endslot
@slot('li_2')
<a href="{{ route('admin.university.course.index', $university->id) }}">Courses</a>
@endslot
@slot('title')
Add Course
@endslot
@endcomponent

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form class="repeater" id="university" action="{{ route('admin.university.course.store', $university->id) }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="course_id">Course</label> <span class="required">*</span>
                                <select class="form-control" name="course_id" id="course_id">
                                    <option value="">-- Select Course --</option>
                                    @foreach($courses as $course)
                                    <option value="{{ $course->id }}">{{ $course->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="duration">Duration</label> <span class="required">*</span>
                                <input type="text" name="duration" class="form-control" id="duration" placeholder="Enter Duration">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="fee">Fee</label> <span class="required">*</span>
                                <input type="text" name="fee" class="form-control" id="fee" placeholder="Enter Fee">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="intake">Intake</label> <span class="required">*</span>
                                <input type="text" name="intake" class="form-control" id="intake" placeholder="Enter Intake">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <h5>Degrees Requirements</h5>
                            <div id="row">
                                <div class="row">
                                    <div class="mb-3 col-md-3">
                                        <label for="degree_id">Degree</label>
                                        <select class="form-control" name="degree[degree_id][]" id="degree_id">
                                            <option value="">-- Select Degree --</option>
                                            @foreach($degrees as $degree)
                                            <option value="{{ $degree->id }}">{{ $degree->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label for="score">Score</label>
                                        <input type="text" name="degree[score][]" id="score" class="form-control" placeholder="Enter Minimum Score Requirement" />
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label for="score_type">Score Type</label>
                                        <select class="form-control" name="degree[score_type][]" id="score_type">
                                            <option value="">-- Select Score Type --</option>
                                            @foreach(getScoreType() as $type)
                                            <option value="{{ $type }}">{{ $type}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3 col-md-3">
                                        <button class="btn btn-danger" id="DeleteRow" type="button">
                                            <i class="bi bi-trash"></i>
                                            Delete
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div id="newinput"></div>
                            <button id="rowAdder" type="button" class="btn btn-dark">
                                <span class="bi bi-plus-square-dotted">
                                </span> ADD Degree
                            </button>
                        </div>
                        <p>
                        </p>
                        <div class="col-md-12">
                            <h5>Tests Requirements</h5>
                            <div id="newinputTest">
                                <div id="rowTest">
                                    <div class="row">
                                        <div class="mb-3 col-md-3">
                                            <label for="test_id">Test</label>
                                            <select class="form-control" name="test[test_id][]" id="test_id_1" onchange="changeTestScore('1')">
                                                <option value="">-- Select Test --</option>
                                                @foreach($tests as $test)
                                                <option value="{{ $test->id }}">{{ $test->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mb-3 col-md-3">
                                            <button class="btn btn-danger" id="DeleteRowTest" type="button">
                                                <i class="bi bi-trash"></i>
                                                Delete
                                            </button>
                                        </div>
                                    </div>

                                    <!-- row test end -->
                                    <div id="selectedTestScore_1" class="row">
                                    </div>
                                </div>
                            </div>
                            <button id="rowAdderTest" type="button" class="btn btn-dark">
                                <span class="bi bi-plus-square-dotted">
                                </span> ADD Test
                            </button>
                        </div>
                        <p>
                        </p>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status">Status</label> <span class="required">*</span>
                                <select name="status" class="form-control">
                                    <option value="1" selected>Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div>
                        <button class="btn btn-primary" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<!-- jquery-validation -->
<script src="{{ asset('themes/backend/custom/build/libs/jquery-validation/jquery.validate.min.js') }}"></script>

<script>
    var testRowCount = 1;
    $(function() {
        $('#university').validate({
            rules: {
                duration: {
                    required: true,
                },
                course_id: {
                    required: true,
                },
                fee: {
                    required: true,
                },
                intake: {
                    required: true,
                },
                status: {
                    required: true
                },
            },
            messages: {
                duration: "Please enter duration",
                course_id: "Please choose one course",
                fee: "Please enter fee",
                intake: "Please enter intake",
                status: "Please select one status",
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.mb-3').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });

    $('#course_id').change(function() {
        var id = $(this).val();
        url = "{{url('admin/university/course/duration/detail')}}?id=" + id,
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'json',
                success: function(response) {
                    if (response != null) {
                        $('#duration').val(response.duration);
                    }
                }
            });
    });

    $("#rowAdder").click(function() {
        newRowAdd =
            '<div id="row">' +
            '<div class="row">' +
            '<div class="mb-3 col-md-3">' +
            '<label for="degree_id">Degree</label>' +
            '<select class="form-control" name="degree[degree_id][]" id="degree_id">' +
            '<option value="">-- Select Degree --</option>' +
            '@foreach($degrees as $degree)' +
            '<option value="{{ $degree->id }}">{{ $degree->name }}</option>' +
            '@endforeach' +
            '</select>' +
            '</div>' +
            '<div class="mb-3 col-md-3">' +
            '<label for="score">Score</label>' +
            '<input type="text" name="degree[score][]" id="score" class="form-control" placeholder="Enter Minimum Score Requirement" />' +
            '</div>' +
            '<div class="mb-3 col-md-3">' +
            '<label for="score_type">Score Type</label>' +
            '<select class="form-control" name="degree[score_type][]" id="score_type">' +
            '<option value="">-- Select Score Type --</option>' +
            '@foreach(getScoreType() as $type)' +
            '<option value="{{ $type }}">{{ $type}}</option>' +
            '@endforeach' +
            '</select>' +
            '</div>' +
            '<div class="mb-3 col-md-3">' +
            '<button class="btn btn-danger" id="DeleteRow" type="button">' +
            '<i class="bi bi-trash"></i> Delete</button> </div> </div> </div>'

        $('#newinput').append(newRowAdd);
    });

    $("body").on("click", "#DeleteRow", function() {
        console.log('delete degree row');
        $(this).parents("#row").remove();
    })

    $("#rowAdderTest").click(function() {
        testRowCount = testRowCount + 1;
        newRowAddTest =
            '<div id="rowTest">' +
            '<div class="row">' +
            '<div class="mb-3 col-md-3">' +
            '<label for="test_id">Test</label>' +
            '<select class="form-control" name="test[test_id][]" id="test_id_' + testRowCount + '" onchange="changeTestScore(' + testRowCount + ')" >' +
            '<option value="">-- Select Test --</option>' +
            '@foreach($tests as $test)' +
            '<option value="{{ $test->id }}">{{ $test->name }}</option>' +
            '@endforeach' +
            '</select>' +
            '</div>' +
            '<div class="mb-3 col-md-3">' +
            '<button class="btn btn-danger" id="DeleteRowTest" type="button">' +
            '<i class="bi bi-trash"></i> Delete</button> </div> </div>' +
            '<div id="selectedTestScore_' + testRowCount + '" class="row"> </div> </div>'
        $('#newinputTest').append(newRowAddTest);
    });

    $("body").on("click", "#DeleteRowTest", function() {
        console.log('delete test row');
        $(this).parents("#rowTest").remove();
    })

    function changeTestScore(newValue) {
        console.log("Selected test number: ", newValue);
        let selectedTestScoreID = '#selectedTestScore_' + newValue;
        let testID = '#test_id_' + newValue;
        console.log("selectedTestScore div id: ", selectedTestScoreID);
        var testScoreID = $(testID).val();
        console.log("testScoreID: ", testScoreID);
        if (testScoreID) {
            $.ajax({
                type: "GET",
                url: "{{url('admin/university/course/test/detail')}}?id=" + testScoreID,
                success: function(res) {
                    if (res) {
                        console.log(res);
                        $('#selectedTestScore_' + newValue).empty();
                        var newTestScores = ''; // Initialize newTestScores variable
                        for (var key in res) { // Iterate over properties of the res object
                            if (res.hasOwnProperty(key)) { // Check if the property is own property of the object
                                console.log(res[key]);
                                newTestScores +=
                                    '<div class="col-md-3">' +
                                    '<div class="mb-3">' +
                                    '<label for="' + res[key].name + '">' + res[key].name + '</label>' +
                                    '<input type="hidden" name="test_score[' + res[key].test_id + '][test_score_id][]" id="reading_id_" value="' + res[key].id + '">' +
                                    '<input type="text" class="form-control" placeholder="Score *" name="test_score[' + res[key].test_id + '][score][]" id="reading_id_">' +
                                    '<label for="' + res[key].name + '"></label>' +
                                    '<input type="text" class="form-control" placeholder="Rank" name="test_score[' + res[key].test_id + '][rank][]" id="reading_id_">' +
                                    '</input> </div> </div>';
                            }
                        }
                        $('#selectedTestScore_' + newValue).append(newTestScores);
                    } else {
                        $('#selectedTestScore_' + newValue).empty();
                    }
                }
            });
        } else {
            $('#selectedTestScore_' + newValue).empty();
        }
    }
</script>
@endsection