@extends('backend.admin_backend.admin_dashboard')

@section('admin')

<div class="container-fluid">

<form

method="POST"

action="{{ route('admin.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">

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

<label>

Class

</label>

<select

class="form-control"

id="class_id"

name="class_id">

<option value="">

Select Class

</option>

@foreach($classes as $class)

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

{{ $class->class_name }}

</option>

@endforeach

</select>

</div>



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

<label>

Session

</label>

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

<option value="">Select Session</option>

@foreach($sessions as $session)

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

@endforeach

</select>
</div>




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

<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>

<h5>

Subjects To Skip

</h5>

<div

id="subjectsArea"

class="row">

</div>



<div class="mt-4">

<button

type="submit"

class="btn btn-success">

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

Generate Broadsheet

</button>

</div>

</div>

</div>

</div>
</form>

<script>

    $(document).ready(function(){

/*
|--------------------------------------------------------------------------
| Load Subjects
|--------------------------------------------------------------------------
*/

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

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

$('#subjectsArea').html(

'Loading Subjects...'

);

$.ajax({

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

    type: "GET",

    success: function(data){

        let html = '';

        $.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 subjects.</span>'

        );

    }

});
});


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

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

$('.term').prop(

'checked',

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

);

});

});

</script>


@endsection