@extends('backend.teacher_backend.teacher_dashboard')

@section('teacher')

<div class="container-fluid">

    <form
        method="POST"
        action="{{ route('teacher.result.broadsheet.generate') }}">

        @csrf

        <div class="card shadow">

            <div class="card-header bg-success text-white">

                <h4>

                    <i class="fas fa-table"></i>

                    Student Broadsheet

                </h4>

            </div>


            <div class="card-body">


                <div class="row">


                    {{-- =====================================================
                    CLASS
                    ====================================================== --}}

                    <div class="col-md-4 mb-3">

                        <label>

                            Class

                        </label>

                        <select
                            class="form-control"
                            id="class_id"
                            name="class_id"
                            required>

                            <option value="">

                                Select Class

                            </option>

                            @foreach($classes as $class)

                                <option value="{{ $class->id }}">

                                    {{ $class->class_name }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    {{-- =====================================================
                    SESSION
                    ====================================================== --}}

                    <div class="col-md-4 mb-3">

                        <label>

                            Session

                        </label>

                        <select
                            name="session"
                            class="form-control"
                            required>

                            <option value="">

                                Select Session

                            </option>

                            @foreach($sessions as $session)

                                <option value="{{ $session->name }}">

                                    {{ $session->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    {{-- =====================================================
                    TERMS
                    ====================================================== --}}

                    <div class="col-md-4 mb-3">

                        <label>

                            Select Term(s)

                        </label>

                        <div class="border rounded p-2">

                            <label>

                                <input
                                    type="checkbox"
                                    id="allTerms">

                                All

                            </label>

                            <hr>

                            @foreach($terms as $term)

                                <div>

                                    <label>

                                        <input
                                            type="checkbox"
                                            class="term"
                                            name="terms[]"
                                            value="{{ $term->name }}">

                                        {{ $term->name }}

                                    </label>

                                </div>

                            @endforeach

                        </div>

                    </div>

                </div>


                <hr>


                {{-- =====================================================
                SUBJECTS TO SKIP
                ====================================================== --}}

                <h5>

                    Subjects To Skip

                </h5>

                <div
                    id="subjectsArea"
                    class="row">

                </div>


                {{-- =====================================================
                GENERATE BUTTON
                ====================================================== --}}

                <div class="mt-4">

                    <button
                        type="submit"
                        class="btn btn-success">

                        <i class="fas fa-table"></i>

                        Generate Broadsheet

                    </button>

                </div>


            </div>

        </div>

    </form>


    {{-- ================================================================
    JAVASCRIPT
    ================================================================= --}}

    <script>

        $(document).ready(function(){


            /*
            |--------------------------------------------------------------------------
            | Load Teacher Assigned Subjects
            |--------------------------------------------------------------------------
            */

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

                let classId = $(this).val();


                if(!classId){

                    $('#subjectsArea').html('');

                    return;

                }


                $('#subjectsArea').html(

                    '<span class="text-muted">Loading Subjects...</span>'

                );


                $.ajax({

                    url: "{{ route('teacher.result.broadsheet.subjects', ':id') }}"
                        .replace(':id', classId),

                    type: "GET",


                    success: function(data){

                        let html = '';


                        if(data.length === 0){

                            html = `

                                <div class="col-12">

                                    <span class="text-muted">

                                        No subjects assigned to you for this class.

                                    </span>

                                </div>

                            `;

                        }


                        $.each(data,function(index,item){

                            html += `

                                <div class="col-md-3 mb-2">

                                    <label>

                                        <input

                                            type="checkbox"

                                            name="skip_subjects[]"

                                            value="${item.id}">

                                        ${item.subject_name}

                                    </label>

                                </div>

                            `;

                        });


                        $('#subjectsArea').html(html);

                    },


                    error:function(xhr){

                        console.log(xhr.responseText);


                        $('#subjectsArea').html(

                            '<span class="text-danger">' +

                            'Unable to load your assigned subjects.' +

                            '</span>'

                        );

                    }

                });

            });



            /*
            |--------------------------------------------------------------------------
            | Select All Terms
            |--------------------------------------------------------------------------
            */

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

                $('.term').prop(

                    'checked',

                    $(this).is(':checked')

                );

            });



            /*
            |--------------------------------------------------------------------------
            | Uncheck "All" When Individual Term Is Unchecked
            |--------------------------------------------------------------------------
            */

            $('.term').change(function(){

                if(!$(this).is(':checked')){

                    $('#allTerms').prop('checked', false);

                }

                else if($('.term:checked').length === $('.term').length){

                    $('#allTerms').prop('checked', true);

                }

            });


        });

    </script>


</div>

@endsection