@extends('backend.layouts.app')
 @section('content')

    <div class="content-page">
        <div class="content">

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <a href="#" class="btn btn-sm btn-dark waves-effect">
                                        <i class="mdi mdi-plus me-1"></i> All  Forms
                                    </a>
                                </ol>
                            </div>
                            <h4 class="page-title">All Registration Forms</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title -->

               {{-- <div class="row">
                    <div class="card">
                        <div class="card-body">

                            <div class="row">

                                <div class="col-md-3">
                                    <label class="form-label">Select School</label>
                                    <select class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Select School ..." data-live-search="true" name="school_name" id="school_name" title="School" onchange="filter_data()">
                                        <option value="">Select School</option>
                                            @foreach ($registrationform as $svyscs )
                                                <option value="{{ $svyscs->school_name }}" >{{  $svyscs->school_name  }}</option>
                                            @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Select School</label>
                                    <select class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Select State ..." data-live-search="true" name="state" id="state" title="State" onchange="filter_data()">
                                        <option value="">Select State</option>
                                            @foreach ($registrationform as $svyscs )
                                                <option value="{{ $svyscs->state }}" >{{  $svyscs->state  }}</option>
                                            @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Select District</label>
                                    <select class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Select District ..." data-live-search="true" name="district" id="district" title="District" onchange="filter_data()">
                                        <option value="">Select District</option>
                                            @foreach ($registrationform as $svyscs )
                                                <option value="{{ $svyscs->district }}" >{{  $svyscs->district  }}</option>
                                            @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Select Education Board</label>
                                    <select id="education_board" class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Select Education Board ..." data-live-search="true" name="education_board" onchange="filter_data()" >
                                        <option value="">Select Education Board</option>
                                        <option value="cbse">C.B.S.E Board</option>
                                        <option value="icse">I.C.S.E Board</option>
                                        <option value="cisce">C.I.S.C.E Board</option>
                                        <option value="up_board">U.P Board</option>
                                        <option value="bihar_board">Bihar Board</option>
                                        <option value="mp_board">M.P Board</option>
                                        <option value="nios_board">N.I.O.S Board</option>
                                        <option value="other_state_board">Other State Board</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mt-2">
                                    <label class="form-label">Select Class</label>
                                    <select id="which_class" class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Select Class ..." data-live-search="true" name="which_class" onchange="filter_data()" >
                                        <option value="">Select Class</option>
                                        <option value="11 (Bio)">11 (Bio)</option>
                                        <option value="11 (Maths)">11 (Maths)</option>
                                        <option value="12 (Bio)">12 (Bio)</option>
                                        <option value="12 (Maths)">12 (Maths)</option>
                                        <option value="12 (Maths)">12 Passed (Maths)</option>
                                        <option value="12 (Maths)">12 Passed (Bio)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mt-2">
                                    <label class="form-label">Select Career Choice</label>
                                    <select id="career_choice"  class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Select Career Choice ..." data-live-search="true" name="career_choice" onchange="filter_data()" >
                                        <option value="">Select Career Choice</option>
                                        <option value="b_tech">B.Tech.</option>
                                        <option value="b_sc">B.Sc.</option>
                                        <option value="bams">B.A.M.S.</option>
                                        <option value="mbbs">M.B.B.S.</option>
                                        <option value="bca">B.C.A.</option>
                                        <option value="other">Other</option>
                                        <option value="not_decided">Not Decided</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mt-2">
                                    <label class="form-label">Select Gender</label>
                                    <select  class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Select Gender ..."  name="gender" id="gender" title="Gender" onchange="filter_data()">
                                        <option value="" >Select Gender</option>
                                        <option value="male" >Male</option>
                                        <option value="female" >Female</option>
                                        <option value="other" >Other</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mt-2">
                                    <label class="form-label">Search With Name Or Phone</label>
                                    <div class="input-group input-group-sm">
                                       <input type="text" class="form-control filter" id="search" name="search" placeholder="{{('Search With Name Or Phone') }}" onkeyup="filter_data()">
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div> --}}

                <div class="row">
                    <div class="card">
                        <div class="card-body" id="svysc_table">
                            @include('backend.registration-form.table')
                        </div>
                    </div>
                </div>

            </div>
            <!-- container -->

        </div>
        <!-- content -->

     </div>

    </div>
    <!-- END wrapper -->
    @endsection
    @section('script')
        <script>

    $(document).on('click', '.page-link', function(event) {
        event.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        fetch_data(page);
     });

        function fetch_data(page) {
        var school_name = $('#school_name').val();
        var state = $('#state').val();
        var district = $('#district').val();
        var education_board = $('#education_board').val();
        var which_class = $('#which_class').val();
        var gender = $('#gender').val();
        var career_choice=$('#career_choice').val();
        var search = $('#search').val();


        $.ajax({
            beforeSend: function() {
                $('.ajax-loader').css("visibility", "visible");
            },
            url: "registration_forms?school_name="+school_name+"&state="+state +"&district="+district+"&education_board="+education_board+"&which_class="+which_class+"&gender="+gender+"&career_choice="+career_choice+"&search="+search+"&page="+page,
            success: function(data) {
                $('#svysc_table').html(data);

                        },
            complete: function() {
                $('.ajax-loader').css("visibility", "hidden");
            }
        });

        }

        function filter_data(){
            var page=$('#current_page_number').val();
            fetch_data(page);
        }
        </script>
    @endsection