@extends('core::public.psim')

@section('title', $model->meta_title)
@section('ogTitle', $model->meta_title)
@section('description', $model->meta_description)
@section('keywords', $page->meta_keywords)
@section('ogImage', $model->present()->ogImage())
@section('bodyClass', 'body-chapters body-chapter-' . $model->id . ' body-page body-page-' . $page->id)

@section('content')
	<div class="beaddumtitlechapters">
        <div class="container breadum-container">
            <div class="pagetitle">
                <h3 class="title-heading">Chapters</h3>
                <div class="divider gallery-background-image-heading-divider"></div>
            </div>
            <div class="breadummenu">
                <a href="/">Home</a> &nbsp; > &nbsp; <a href="{{url('chapters')}}">{{htmlspecialchars("Chapters")}}</a>
            </div>
        </div>
    </div>
	
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <section class="chapter-section m-0">
        <div class="container">
                <div class="col-12">
                    <div class="Midsummer_Title model-title-main">
                        <div class="Midsummer_maintitle text-center">{{ $model->title }}</div>
                        <div class="Midsummer_divider"></div>
                    </div>
                </div>
        </div>
    </section>
	@if($model->staffs && is_array($model->staffs))
    @php
        $validStaffIds = array_filter($model->staffs, fn($id) => !is_null($id) && $id !== '');
    @endphp
	@endif
	@if(!empty($validStaffIds))
	@if($head = TypiCMS\Modules\Teams\Models\Team::whereIn('id',$model->staffs)->orderByRaw("FIELD(id, " . implode(',', $model->staffs) . ")")->get() and $head->count() > 0)
	
    <section class="chapter-section pb-5"> 
    <div class="container">
        <div class="row">
            <!-- First column - Featured team member (full width on mobile) -->
            <div class="col-12 col-md-6 col-lg-4 mb-4">
                @foreach ($head as $i => $item)
                    @if ($loop->first)
                        <div class="overflow" data-toggle="modal" data-target="#teamModal{{$i}}">
                            <div class="card team-card1 visible card-down">
                                <img src="{{ $item->present()->image() }}" class="card-img-top img-fluid" alt="{{$item->title}}">
                                <div class="card-body5 team-card1-body pb-0">
                                    <p class="team-card1-body-text1"><b>{{$item->title}}</b></p>
                                    <div class="team-card1-body-text1-divider-set">
                                        <div class="divider team-card1-body-text1-divider"></div>
                                    </div>
                                    <p class="team-card1-body-text2">{{$item->psim_designation}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="modal fade team-model" id="teamModal{{$i}}" tabindex="-1" role="dialog" aria-labelledby="teamModalLabel{{$i}}" aria-hidden="true">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header"> 
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-md-5">
                                            <img src="{{ $item->present()->image() }}" class="img-fluid mb-3" alt="{{$item->title}}">
                                        </div>
                                        <div class="col-12 col-md-7">
                                            <p class="team-block2-card1-p1"><b>{{$item->title}}</b></p>
                                            <div class="divider team-block2-card1-divider"></div>
                                            <p class="team-block2-card1-p2">{{$item->psim_designation}}</p>

                                            <p class="team-block2-card1-p1">Study Information</p>
                                            <div class="divider team-block2-card1-divider"></div>
                                            <p class="team-block2-card1-p2"> 
                                                {!! $item->present()->summary !!}
                                            </p>
                                        </div>
                                        @empty(!$item->body)
                                        <div class="col-12">
                                            <p class="team-block2-card1-p1">Job Description</b></p>
                                            <div class="divider team-block2-card1-divider"></div>
                                            {!! $item->present()->body !!}       
                                        </div>
                                        @endempty
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>

            <!-- Second column - Team members 1-3 -->
            <div class="col-12 col-md-6 col-lg-4 mb-4">
                <div class="team-block2 overflow">
                    @foreach ($head as $i => $item)
                        @if ($loop->index >= 1 && $loop->index <= 3) 
                            <div class="card mb-3 team-block2-card1 visible card-left" data-toggle="modal" data-target="#teamModal{{$i}}">
                                <div class="row g-0">
                                    <div class="col-4 col-sm-5 col-md-5 col-lg-5 px-0">
                                        <img src="{{ $item->present()->image(174, 187) }}" class="img-fluid rounded-start w-100 h-100 object-fit-cover" alt="{{$item->title}}">
                                    </div>
                                    <div class="col-8 col-sm-7 col-md-7 col-lg-7">
                                        <div class="card-body5 px-0 p-2">
                                            <p class="team-block2-card1-p1"><b>{{$item->title}}</b></p>
                                            <div class="divider team-block2-card1-divider"></div>
                                            <p class="team-block2-card1-p2">{{$item->psim_designation}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                            <div class="modal fade team-model" id="teamModal{{$i}}" tabindex="-1" role="dialog" aria-labelledby="teamModalLabel{{$i}}" aria-hidden="true">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header"> 
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-md-5">
                                                <img src="{{ $item->present()->image() }}" class="img-fluid mb-3" alt="{{$item->title}}">
                                            </div>
                                            <div class="col-12 col-md-7">
                                                <p class="team-block2-card1-p1"><b>{{$item->title}}</b></p>
                                                <div class="divider team-block2-card1-divider"></div>
                                                <p class="team-block2-card1-p2">{{$item->psim_designation}}</p>

                                                <p class="team-block2-card1-p1">Study Information</p>
                                                <div class="divider team-block2-card1-divider"></div>
                                                <p class="team-block2-card1-p2">{!! $item->present()->summary !!}</p>
                                            </div>
                                            @empty(!$item->body)
                                            <div class="col-12">
                                                <p class="team-block2-card1-p1">Job Description</b></p>
                                                <div class="divider team-block2-card1-divider"></div>
                                                {!! $item->present()->body !!}       
                                            </div>
                                            @endempty
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>

            <!-- Third column - Team members 4-6 (visible on all screens, not just lg) -->
            <div class="col-12 col-md-6 col-lg-4 mb-4 mx-auto">
                <div class="our-team-container2 overflow">
                    @foreach ($head as $i => $item)
                        @if ($loop->index >= 4 && $loop->index <= 6)
                            <div class="card mb-3 team-block2-card1 visible card-down" data-toggle="modal" data-target="#teamModal{{$i}}">
                                <div class="row g-0">
                                    <div class="col-4 col-sm-5 col-md-5 col-lg-5 px-0">
                                        <img src="{{ $item->present()->image(174, 187) }}" class="img-fluid rounded-start w-100 h-100 object-fit-cover" alt="{{$item->title}}">
                                    </div>
                                    <div class="col-8 col-sm-7 col-md-7 col-lg-7">
                                        <div class="card-body5 px-0 p-2">
                                            <p class="team-block2-card1-p1"><b>{{$item->title}}</b></p>
                                            <div class="divider team-block2-card1-divider"></div>
                                            <p class="team-block2-card1-p2">{{$item->psim_designation}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                            <div class="modal fade team-model" id="teamModal{{$i}}" tabindex="-1" role="dialog" aria-labelledby="teamModalLabel{{$i}}" aria-hidden="true">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header"> 
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-md-5">
                                                <img src="{{ $item->present()->image() }}" class="img-fluid mb-3" alt="{{$item->title}}">
                                            </div>
                                            <div class="col-12 col-md-7">
                                                <p class="team-block2-card1-p1"><b>{{$item->title}}</b></p>
                                                <div class="divider team-block2-card1-divider"></div>
                                                <p class="team-block2-card1-p2">{{$item->psim_designation}}</p>

                                                <p class="team-block2-card1-p1">Job Description</p>
                                                <div class="divider team-block2-card1-divider"></div>
                                                <p class="team-block2-card1-p2">{!! $item->present()->body !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
			@empty(!$model->summary)
			<div class="Midsummer_Overview_prag">
			 
				{!! $model->present()->summary !!}
			</div>
			@endempty
        </div>
    </div>
</section>
	@endif
	@endif
<!-- Activities -->
	@php 
	$counter = 1; 
	$totalSCount = $model->conference->count()+$model->course->count()+$model->academicevent->count();
	@endphp
	@if($totalSCount > 0)
<section class="latestactivity">
        <div class="container">
            <div class="background-image-1-content">
                <div class="background-image-1-part1">
                    <div>
                        <h3 class="background-image-1-heading">ACTIVITIES</h3>
                        <div class="divider background-image-1-heading-divider"></div>
                    </div>
                    
                </div>
            </div>
            <!----------event mobile-->
            <!-- Swiper Slider -->
            <div class="swiper-container d-md-none swiper-initialized swiper-horizontal">
                <div class="swiper-wrapper" id="swiper-wrapper-b7a8f10ad16eeb10d4" aria-live="polite" style="transition-duration: 0ms; transition-delay: 0ms;">
					
                    @if($model->conference->count() > 0)
					@foreach ($model->conference as $i => $item)
                    <div class="swiper-slide" data-swiper-slide-index="{{$i}}" role="group" aria-label="{{$counter}} / {{$totalSCount}}">
                        <div class="card upevent">
                            <img src="{{ $item->present()->image(424,424) }}" class="card-img-top">
                            <div class="card-body5">
                                <h6 class="card-heading">{{ $item->title }}</h6>
                                <p class="card-text">{{ Str::words(strip_tags($item->summary), 10, '...') }}</p>
                                <div class="divider card-text-divider"></div>
                                <pre class="card-text-address"><img src="{{asset('themes/psim/images/Group 34.png')}}" class="card-text-address-icon"><span class="card-text-address2">  {{ $item->dateLocalized()}}  </span><img src="{{asset('themes/psim/images/Group 83.png')}}" class="card-text-address-icon"><span class="card-text-address2">  {{ Str::limit($item->venue, 30, '...')}}</span></pre>
                            </div>
                        </div>
                    </div>
					@php $counter++; @endphp
                    @endforeach
                    @endif
                    @if($model->course->count() > 0)
					@foreach ($model->course as $i => $item)
                    <div class="swiper-slide" data-swiper-slide-index="{{$i}}" role="group" aria-label="{{$counter}} / {{$totalSCount}}">
                        <div class="card upevent">
                            <img src="{{ $item->present()->image(424,424) }}" class="card-img-top">
                            <div class="card-body5">
                                <h6 class="card-heading">{{ $item->title }}</h6>
                                <p class="card-text">{{ Str::words(strip_tags($item->summary), 10, '...') }}</p>
                                <div class="divider card-text-divider"></div>
                                <pre class="card-text-address"><img src="{{asset('themes/psim/images/Group 34.png')}}" class="card-text-address-icon"><span class="card-text-address2">  {{ $item->dateLocalized()}}  </span><img src="{{asset('themes/psim/images/Group 83.png')}}" class="card-text-address-icon"><span class="card-text-address2">  {{ Str::limit($item->venue, 30, '...')}}</span></pre>
                            </div>
                        </div>
                    </div>
					@php $counter++; @endphp
                    @endforeach
                    @endif
					@if($model->academicevent->count() > 0)
					@foreach ($model->academicevent as $i => $item)
                    <div class="swiper-slide" data-swiper-slide-index="{{$i}}" role="group" aria-label="{{$counter}} / {{$totalSCount}}">
                        <div class="card upevent">
                            <img src="{{ $item->present()->image(424,424) }}" class="card-img-top">
                            <div class="card-body5">
                                <h6 class="card-heading">{{ $item->title }}</h6>
                                <p class="card-text">{{ Str::words(strip_tags($item->summary), 10, '...') }}</p>
                                <div class="divider card-text-divider"></div>
                                <pre class="card-text-address"><img src="{{asset('themes/psim/images/Group 34.png')}}" class="card-text-address-icon"><span class="card-text-address2">  {{ $item->dateLocalized()}}  </span><img src="{{asset('themes/psim/images/Group 83.png')}}" class="card-text-address-icon"><span class="card-text-address2">  {{ Str::limit($item->venue, 30, '...')}}</span></pre>
                            </div>
                        </div>
                    </div>
					@php $counter++; @endphp
                    @endforeach
                    @endif
                </div>
                <!-- Pagination -->
                <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
					<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span>
					<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
					<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
				</div>
				<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
			</div>
            <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
            <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>


            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    const swiper = new Swiper('.swiper-container', {
                        slidesPerView: 1,
                        spaceBetween: 20,
                        loop: true,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        breakpoints: {
                            768: {
                                slidesPerView: 2,
                                spaceBetween: 20,
                            },
                            1024: {
                                slidesPerView: 3,
                                spaceBetween: 30,
                            },
                        },
                    });
                });
            </script>
            <!-----------end event mobile -->
            <div class="d-none d-md-block">
                <div class="row background-image-1-part2 desktop-one-slide">
					@php $j=0; @endphp
					@foreach (['conference', 'course', 'academicevent'] as $type)
						@if($model->$type->count() > 0)
                        @foreach ($model->$type as $i => $item)
                            @php $isHidden = $j >= 3 ? 'chhidden-items' : ''; @endphp
                            <div id="Conferences_Box" class="col-6 col-sm-6 col-md-4 col-lg-4 {{ $isHidden }} {{$j}}">
                                <div class="overflow">
                                    <div class="card upevent">
										@if($type=='academicevent')
											<a href="{{ url('psim-academic/' . $item->slug) }}" class="text-dark">
										@else 
										<a href="{{ route($type, ['slug' => $item->slug]) }}" class="text-dark">
										@endif
                                            @if($item->thumb_image_id)
                                                <img src="{{ $item->present()->thumb_image() }}" alt="{{ $item->title }}" class="card-img-top">
                                            @else
                                                <img src="{{ $item->present()->image(424, 424) }}" alt="{{ $item->title }}" class="card-img-top">
                                            @endif
                                            <div class="card-body5">
                                                <h6 class="card-heading">{{ Str::limit($item->title, 30, '..') }}</h6>
                                                <p class="card-text">On {{ $item->formatDateWithSuffix() }} in {{$item->venue}}.</p>
                                                <div class="divider card-text-divider"></div>
                                                <pre class="card-text-address"><div><span class="card-text-address29">@if($item->start_date == $item->end_date){{ \Carbon\Carbon::parse($item->start_date)->format('d/m/Y') }}@else{{ \Carbon\Carbon::parse($item->start_date)->format('d/m/Y') }} to {{ \Carbon\Carbon::parse($item->end_date)->format('d/m/Y') }}@endif</span></div></pre>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
							@php $j++; @endphp
                        @endforeach
						@php $j++; @endphp
					@endif
					@endforeach
				</div>

				@if ($totalSCount > 3)
					<div class="text-center mt-3">
						<button id="loadMoreBtn" class="btn btn-primary">Load More</button>
					</div>
				@endif
            </div>
        </div>
    </section>
	@endif
<!-- ENd Activities -->
<style type="text/css">
.chhidden-items {
    display: none !important;
}
</style>
<!-- UAE Chapters -->
	@if($model->child->count() > 0)
	<section class="latestchapters">
        <div class="container">
            <div class="blogheading">
                <div>
                    <h3 class="latest-blog">UAE CHAPTERS</h3>
                    <div class="divider"></div>
                </div>
                <div class="blog-veiw-more-button">
                    <a href="#">VIEW MORE <i class="bi bi-chevron-right"></i></a>
                </div>
            </div>
            <!--------blog mobile slider--->


            <!-- Swiper Container -->
            <div class="swiper custom-blogs-slider d-md-none swiper-initialized swiper-horizontal">
                <div class="swiper-wrapper" id="swiper-wrapper-a7df984ac94df68c" aria-live="off" style="transition-duration: 300ms;">
					@php $counter=1; @endphp
                    @foreach ($model->child as $i => $item)	
                    <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="{{$i}}" role="group" aria-label="{{$counter}} / {{$model->child->count()}}">
                        <div class="blogs">
                            <img src="{{ $item->present()->image(424, 225) ?? '' }}" alt="{{ $item->title }}">
                            <div class="blog-content">
                                <h6 class="blog-heading"><a href="{{ $item->uri() }}">{{ $item->title }}</a></h6>
                                
                            </div>
                        </div>
                    </div>
					@php $counter++; @endphp
                    @endforeach
                </div>
                <!-- Pagination -->
                <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 2" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div>
				<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>

            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    const swiper = new Swiper('.custom-blogs-slider', {
                        slidesPerView: 1,
                        spaceBetween: 20,
                        loop: true,
                        autoplay: {
                            delay: 3000,
                            disableOnInteraction: false,
                        },
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        breakpoints: {
                            768: {
                                slidesPerView: 2,
                                spaceBetween: 20,
                            },
                            1024: {
                                slidesPerView: 3,
                                spaceBetween: 30,
                            },
                        },
                    });
                });
            </script>



            <!------------------------------->
            <div class="d-none d-md-block">
                <div class="row">
                    @foreach ($model->child as $i => $item)	
						<div class="col-12 col-sm-12 col-md-6 col-lg-4">
							<div class="blogs">
								<img src="{{ $item->present()->image(424, 225) ?? '' }}" alt="{{ $item->title }}">
								<div class="blog-content">
									<h6 class="blog-heading"><a href="{{ $item->uri() }}">{{ $item->title }}</a></h6>
								</div>
							</div>
						</div>
                    @endforeach
                    
                </div>
            </div>
        </div>
    </section>
	@endif
	
	<section id="eligibility-main-container">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row pb-3">
                        <div class="col-sm-6">
                            <div class="tabletitle">
                                <h1 class="maintitle">MEMBERS</h1>
                                <div class="divider"></div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="d-flex">
                                <div class="input-group search-bar">
									 <input type="text" id="searchMember" class="form-control" placeholder="Search for Members">
                                   
                                    <div class="input-group-append">
                                        <button class="btn btn-warning" id="searchBtn" type="button">🔍</button>
                                    </div>
                                </div>

                                <div class="fellowship-accorditon-icon">
                                    <i class="fa fa-angle-left pagination-btn" id="prevPage" aria-hidden="true" style="cursor:pointer;"></i>
                                    <i class="fa fa-angle-right pagination-btn" id="nextPage" aria-hidden="true" style="cursor:pointer;"></i>
                                </div>
                            </div>
							<div class="d-flex justify-content-between">
								<div>
									<p>Total Members: <span id="totalMembers">0</span></p>
								</div>
								<div>
									<p>Page <span id="currentPage">1</span> of <span id="totalPages">1</span></p>
								</div>
							</div>

                        </div>
                    </div>
                    <!--  -->
                    <table class="MidsummerShip-table">
                        <thead>
                            <tr class="MidsummerShip-tr">
                                <th>S.No</th>
                                <th>Full Name</th>
                                <th>Designation</th>
                                <th>Institute</th>
                                <th>Membership Status</th>
                            </tr>
                        </thead>
                        <tbody class="MidsummerShip-tr" id="membersTableBody">
                           
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
<!-- ENd UAE Chapeters -->
<!-- Modal Structure -->
  <div id="imageModal" class="modal fade gallerymodel" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-center">
          <img id="modalImage1" class="img-fluid" alt="Popup Image">
        </div>
      </div>
    </div>
  </div> 
  <script>
	let currentPage = 1;

    function loadMembers(page = 1, search = '') {
        $.ajax({
            url: window.location.origin + "/chapters/members/list?chapter_id={{$model->id}}&page="+page+"&search="+search,
            type: "GET",
            data: { page: page, search: search },
            success: function(response) {
			
                $('#membersTableBody').html(response.html);
                currentPage = page;
				// Update Total Members and Total Pages
				$('#totalMembers').text(response.total_members);
				$('#totalPages').text(response.total_pages);
				$('#currentPage').text(currentPage);

				// Enable/Disable pagination buttons
				$('#prevPage').prop('disabled', currentPage <= 1);
				$('#nextPage').prop('disabled', currentPage >= response.total_pages);
				if(response.total_members==0 && page==1){
					$(".MidsummerShip-table").hide();
				}
            }
        });
    }
    $(document).ready(function () {
      
  // Open modal when clicking on the image or hover text
	$('.img-container').on('click', function () {
		const imageSrc = $(this).data('src'); // Get the image source from data attribute  
		$('#modalImage1').attr('src', imageSrc); // Set the modal image source
		$('#imageModal').modal('show'); // Show the modal
	});
	$("#loadMoreBtn").click(function(){
		$(".chhidden-items").slice(0, 3).removeClass("chhidden-items"); // Show 3 more items
		if ($(".chhidden-items").length == 0) {
			$("#loadMoreBtn").hide(); // Hide button if no more items left
		}
	});
	
	loadMembers();

        // Search function
        $('#searchBtn').click(function () {
            let search = $('#searchMember').val();
            loadMembers(1, search);
        });
		
		$('#searchMember').on('keyup', function () {
			let searchValue = $(this).val();
			loadMembers(1, searchValue); // Trigger search while typing
		});

        // Pagination
        $('#nextPage').click(function () {
            loadMembers(currentPage + 1, $('#searchMember').val());
        });

        $('#prevPage').click(function () {
            if (currentPage > 1) {
                loadMembers(currentPage - 1, $('#searchMember').val());
            }
        });

        // Search on Enter Key
        $('#searchMember').keypress(function (e) {
            if (e.which == 13) {
                loadMembers(1, $(this).val());
            }
        });
});

</script> 


@endsection