@extends('layouts.dashboard')


@section('title-content')
    <title>{{ config('app.name') }} | Student Batch Change</title>
@endsection


@section('content')
    <section class="content">
        <div class="boxpane">
            <div class="boxpane-header">
                <h2 class="blue"><i class="fa-fw fa fa-level-up"></i>
                    Student Batch Change
                </h2>

                <div class="boxpane-icon">
                    <ul class="btn-tasks">
                        <li class="dropdown">
                            <a data-toggle="dropdown" href="#">
                                <i class="icon fa fa-tasks" data-placement="left" title="{{ 'Actions' }}"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="boxpane-content">
                <div class="row">
                    <div class="col-lg-12">
                        <p class="introtext">
                            Please provide appropriate data during promotion of the student
                        </p>
                    </div>
                </div>
                {!! Form::open(['route' => 'student-batch-store', 'method' => 'POST']) !!}
                <div class="row col-md-12 ">
                    <input name="student_id" value="{{ $student_data->id }}" type="hidden">
                    <div class="col-md-12">
                        <label>Student Particular</label><span class="text-danger">*</span>
                        <input class="form-control col-md-12"
                            value="{{ $student_data->first_name }} {{ $student_data->middle_name }} {{ $student_data->last_name }} - [ {{ $student_data->program_name }} - {{ $student_data->program_code }} ]"
                            disabled>
                    </div>

                    <div class="col-md-2 mt-4">
                        <label>Select New Batch</label><span class="text-danger">*</span>
                        <select name="batch" id="semester" class="col-md-12" required>
                            <option @if ($student_data->batch_id == 1) selected @endif value="1">March</option>
                            <option @if ($student_data->batch_id == 2) selected @endif value="2">September</option>
                            <option @if ($student_data->batch_id == 3) selected @endif value="3">October</option>
                            <option @if ($student_data->batch_id == 4) selected @endif value="4">Evening</option>
                        </select>
                    </div>
                    <div class="col-md-12 mt-4">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary pull-right">Submit</button>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </section>
@endsection
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/select') }}/select2.min.css" />
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap') }}/fileinput.min.css" />
@endsection
@section('scripts')
    <script src="{{ asset('assets/js/select') }}/select2.min.js"></script>
    <script src="{{ asset('assets/js/bootstrap') }}/fileinput.min.js"></script>
    <script>
        $('#yearOfStudy,#year_id,#program_id,#semester').select2({
            minimumResultsForSearch: -1
        })
        $('#entry_qualification').select2({
            minimumResultsForSearch: -1,
        })
        $('#is_disabled').select2({
            minimumResultsForSearch: -1,
        })
        $('#sponsorship').select2({
            minimumResultsForSearch: -1,
        })
        $('#citizenship').select2({})
        $(document).on('ready', function() {
            $("#avatar").fileinput({
                showUpload: false,
                dropZoneEnabled: false,
                mainClass: "input-group-lg"
            });
        });

        $(document).ready(function() {
            $('#tabMenu a[href="#{{ old('tab') }}"]').tab('show')
        });
    </script>
    <script>
        $('#year_id').change(function() {
            var year_id = $('#year_id').val();
            var data = {
                "year_id": year_id,
                "code": '{{ $student_data->program_code }}',
                "_token": "{{ csrf_token() }}",
                "route": "{{ route('resume-program-json') }}",

            }

            //get programs in specified academic year pase on studen

            $.ajax({
                    method: "GET",
                    // accepts: "application/json; charset=utf-8",
                    url: "{{ route('resume-program-json') }}",
                    data: data
                })

                .done(function(msg) {
                    console.log("working");
                    var result = msg['programs'];

                    if (result != null) {
                        if (msg['programs'].length > 0) {
                            fillPrograms(result);

                        }

                    }




                });

            function fillPrograms(p) {

                $('#program_id').html('');
                $('#program_id').append(
                    ' <option value="">Select Program</option>'
                );

                for (var i = 0; i < p.length; i++) {

                    $('#program_id').append(

                        `<option value="${p[i].id}">${p[i].program_name} [ ${p[i].program_code}] -
                               
                                </option>`

                    )
                }
            }


        });


        $('#program_id').change(function() {

            var program_id = $('#program_id').val();

            if (!isNaN(program_id)) {
                let url = "/dashboard/student-panel/student/resume-years-json/" + program_id;
                $.get(url, function(data, status) {

                    if (status == "success") {
                        var years = $('#yearOfStudy');
                        years.html('');
                        years.append('<option value="">Select Year of Study</option>');
                        let duration = data['duration'];
                        let desc = data['desc'];
                        for (var y = 1; y <= duration; y++) {
                            var row = `<option value="${y}">${desc[y-1]}</option>`;
                            years.append(row);

                        }
                    }




                });


            }



        });

        $('#yearOfStudy').change(function() {
            var year = $(this).val();
            $("#semister").html('');
            if (year.trim() !== "") {
                console.log("year" + year);

                $('#semester').html(
                    `
                 <option value="1">Semester One</option>
                            <option value="2">Semester Two</option>
                            <option value="3">Semester Three</option>
                            <option value="4">Full year</option>
                            `
                );
            }
        })
    </script>
@endsection