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


@section('content')
<style>
    .select2-container .select2-selection--single {height: 37px !important;}
</style>
<div class="container">
    <div class="row">
        <div class="col-md-6">       
            <div class="form-group" >
                {!! Form::select('reportType', $reports,'', ['class' => 'form-control', 'id' => 'report-type','placeholder'=>'Select Report', 'style'=>"height:37px"]) !!}
            </div>

        </div>
        <div class="col-md-6">
            <div id="report-disc"></div>
        </div>
        <div class="col-md-12">
            <div id="report-card"></div>
        </div>
        <div class="col-md-12">
            <div id="report-output"></div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    
   var baseUrl ="{{ url('resultReports') }}"; 
   $('#report-type').select2();
    $('#report-type').change(function() {
        var selectedReport = $(this).val();
        $(document).off('change','#class, #exam-type, #session');
        if(!selectedReport){return}

        // formdata = $('#report-form').serialize();
        if($('#report-form')){
            var formData = new FormData($('#report-form')[0]);
            formData.delete('_token');
            formData.delete('report_type');
            var queryString = new URLSearchParams(formData).toString();
        }else{
            var queryString ="";
        }
        // console.log(formdata);
        $.ajax({
            url: baseUrl+'/get-report-template?report_type='+selectedReport+"&"+queryString,
            type: 'GET',
            // data: { report_type: selectedReport },
            success: function(response) {
                $('#report-card').html(response.html);
                $('#report-disc').html(response.report.description);
            },
            error: function(error) {
                      alert(error.responseJSON.message??'Something went wrong');
            }
        });
    });



</script>
@endsection