@extends('backend.layout.master')
@include('backend.kids.css')
@section('content')


<!--Start Hero-->
    <section class="hero-section business-startup">
       
          <div class="container">
                <div class="row">
                    <div class="col-md-4 student-list">
                      <div class="heading mb-3">
                        <h2>Students <span class="total_students">({{$total_students}})</span></h2>
                        </div>
                    </div>
                    <div class="col-md-8 student-list">
                        <a href="{{route('kids.add')}}">
                            <button type="button" class="btn btn-primary round mr-1 add-student-button">
                                <img src="{!! asset('new_admin_html/app-assets/images/icon/add.png') !!}" class="add-student-button-img"> <span>Add Student</span>
                            </button>
                        </a>
                        
                        <a href="{{route('kids.archive-index')}}">
                            <button type="button" class="btn btn-light-primary round mr-1 archive-student-button">
                                <img src="{!! asset('new_admin_html/app-assets/images/icon/archive.png') !!}" class="archive-student-button-img"> <span>Archive</span> 
                            </button>
                        </a>
                        <span class="live-search">
                            <input type="search" class="form-control form-control-lg round  live-search-box" id="search" ><i class="fa fa-search"></i>
                        </span>

                        

                        @php

                            $dob = $first_name = $last_name = "";
                            if($sortBy == "created_at"){
                                $dob = "selected";
                            }
                            else if($sortBy == "first_name"){
                                $first_name = "selected";
                            }
                            else if($sortBy == "last_name"){
                                $last_name = "selected";
                            }else{
                                $dob = $first_name = $last_name = "";
                            }

                        @endphp
                        <!-- <select class="form-control btn-square" name="short_by" id="short_by" required="">
                            <option value="" disabled selected="" hidden>Short By</option>
                            <option value="created_at" {{$dob}}>Date</option>
                            <option value="first_name" {{$first_name}}>First Name</option>
                            <option value="last_name" {{$last_name}}>Last Name</option>
                        </select> -->

                        <select name="sources" id="short_by" class="order-select sources" placeholder="Sort By">
                            <option value="created_at" {{$dob}}>Date</option>
                            <option value="first_name" {{$first_name}}>First Name</option>
                            <option value="last_name" {{$last_name}}>Last Name</option>
                        </select>

                    </div>
                </div>

            <div class="row justify-content-start" id="kidsList">
                
            </div>

            <div class="text-center">
                <!-- <p class="loadingIcon">  
                    <div class="text-primary" style="width: 3rem; height: 3rem;" role="status" id="spinLoading">
                      <img src="{!! asset('images/loading.gif')!!}">
                    </div>
                </p> -->
                <button class="btn btn-primary round mb-5" id="loadMoreActivityHistory" style="display:none;">Load More</button>
            </div>

         </div>
      </div>
       
    </section>
    <!--End Hero-->


@endsection
@include('backend.kids.js')