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

@section('content')
<style>
    .select2-container .select2-selection--single {height: 37px !important;}
</style>
<div class="container">
    <form id="filterForm">
      
        <div class="form-row justify-content-end">
            <div class="form-group col-md-2">
                {!! Form::select('filterSession', $sessions, $current_session, ['class' => 'form-control required', 'id' => 'filterSession','placeholder'=>'Select Session']) !!}
            </div>
            <div class="form-group col-md-2">
                {!! Form::select('filter_result_type', $examTypes, '', ['class' => 'form-control required', 'id' => 'filterResultType','placeholder'=>'Select Result Type']) !!}
            </div>
            <div class="form-group col-md-2">
                {!! Form::select('filter_schools', $schools, '', ['class' => 'form-control required', 'id' => 'filterSchool','placeholder'=>'Select School']) !!}
            </div>
            <div class="form-group col-md-2">
                {!! Form::select('filter_board', $boards, '', ['class' => 'form-control required', 'id' => 'filterBoard','placeholder'=>'Select Board']) !!}
            </div>
            <div class="form-group col-md-1">
                {!! Form::select('filter_class', $classes, '', ['class' => 'form-control required', 'id' => 'filterClass','placeholder'=>'Class -Select']) !!}
            </div>
            <div class="form-group col-md-1">
                {!! Form::select('filter_section', $sections, '', ['class' => 'form-control required', 'id' => 'filterSection','placeholder'=>'Section -Select']) !!}
            </div>
          
            

            <div class="form-group col-md-2 text-start">
                <button  class="btn btn-primary" id="applyFilters" type="button">Apply Filters</button>
            </div>
        </div>
    </form>
</div>
    <div  id="statusView" class="container">
    </div>
    
<script>
var baseUrl ="{{ url('config') }}"; 
  $(document).ready(function() {
    $('#filterSchool').select2();

    $('#applyFilters').on('click', function() {
        var requiredFields = $('#filterForm .required');
        //form validation -- start
        var isFormValid = true;
        requiredFields.each(function() {
            if ($(this).val() === '') {
                alert($(this).attr('name') + ' is required.'); 
                isFormValid = false;
                return false; 
            }
        });
        if(!isFormValid){
            return;
        }
        var formData = $('#filterForm').serialize();
        $.ajax({
            url: "{{ route('result-status-post') }}",
            method: 'POST',
            data: formData,
            dataType: 'json', 
            success: function(response) {
                // console.log(response);
                $('#statusView').html(response.html);
                
            },
            error: function(xhr) {
                // console.log(xhr);
                $('#statusView').html(null);
                alert(xhr.responseJSON.message??'Something Went Wrong');
            }
        });
    });
  });

  </script>
@endsection