search-course/resources/views/admin/courses/list.blade.php

@extends('admin.layout.index')
@push('css-head')
@endpush
@section('content')
<!-- Page header -->
<div class="page-header page-header-light">
    <div class="breadcrumb-line breadcrumb-line-light header-elements-md-inline">
        <div class="d-flex">
            <div class="breadcrumb">
                <a href="{{url('/admin')}}" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Dashboard</a>
                <span class="breadcrumb-item active">Courses</span>
            </div>
        </div>
        <div class="header-elements pull-right d-none">
            <div class="breadcrumb justify-content-center">
                <a href="{{ url('admin/courses/bulk-entry') }}" class="breadcrumb-elements-item">
                    <i class="icon-file-excel mr-1"></i>
                    Bulk Entry
                </a>

                <a href="{{ url('admin/courses/create') }}" class="breadcrumb-elements-item">
                    <i class="icon-googleplus5 mr-1"></i>
                    Create One
                </a>
            </div>
        </div>
    </div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">
    <div class="card" style="padding:15px;">
        <div class="row">
            <div class="col-md-3">
                <select class="form-control" id="institute"> 
                    <option disabled="" selected="" value="0">All Institutes</option>
                    @foreach($institutes as $row)
                    <option value="{{$row->id}}">{{$row->name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-7">
                <input type="text" class="form-control" id="search" placeholder="Search Course">
            </div>
            <div class="col-md-2" style="display:grid;">
                <button type="submit" class="btn btn-primary" id="searchButton">Search <i class="icon-folder-search ml-2"></i></button>
            </div>
        </div>
    </div>
    <div id="loadData"></div>
</div>
<!-- /content area -->
@endsection

@push('scripts')
    <script src="{{ asset('/assets/global/js/plugins/notifications/sweet_alert.min.js') }}"></script>
    <script src="{{ asset('/assets/global/js/plugins/forms/styling/switchery.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
            get_data();
        });
  
        $('#searchButton').on('click', function(){
          get_data();
        });
  
        function get_data(){
          var base = '{{url('/')}}';
          var institute = $('#institute').find('option:selected').val();
          var search = $('#search').val();
  
          $.ajax({
              method: 'GET', 
              url: base+'/admin/courses/load', 
              data: {'institute' : institute,'search' : search}, 
              success: function(response){ // What to do if we succeed
                  //console.log(response); 
                  $('#loadData').html(response);
              },
              error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
                  console.log(JSON.stringify(jqXHR));
                  console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
              }
          });
        }
    </script>
@endpush