@extends('admin/layouts/app')

@section('page-title')
    <title>Followers | Simple Admission</title>
@endsection

@section('page-breadcrumb')
    <div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
        <!--begin::Title-->
        <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">Followers</h1>
        <!--end::Title-->
        <!--begin::Separator-->
        <span class="h-20px border-gray-300 border-start mx-4"></span>
        <!--end::Separator-->
        <!--begin::Breadcrumb-->
        <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
            <!--begin::Item-->
            {{--            <li class="breadcrumb-item text-muted">--}}
            {{--                <a href="{{route('student-list.index')}}" class="text-muted text-hover-primary">List</a>--}}
            {{--            </li>--}}
        </ul>
        <!--end::Breadcrumb-->
    </div>
@endsection

@section('main-content')
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl">
            <div class="content flex-column-fluid" id="kt_content">
                <div class="card mb-10">
                    <div class="card-body text-center">
                        <p class="fs-18px fw-400 mb-0"><span class="text--primary fw-500">{{ $followers->count() }}</span> Students are Following your Institute and Activity</p>
                    </div>
                </div>

                <div class="card mb-6">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table text-center">
                                <thead class="border-bottom-1">
                                <tr class="fw-bold fs-6 text-gray-800">
                                    <th class="text-start">SL.</th>
                                    <th>Name</th>
                                    <th>Age</th>
                                    <th>Location</th>
                                </tr>
                                </thead>
                                <tbody class="">
                                @foreach($followers as $key=>$follower)
                                    <tr>
                                        <td class="text-start">{{ $key + $followers->firstItem() }}</td>
                                        <td>
                                            <div class="d-flex align-items-center justify-content-center">
                                                <div class="symbol symbol-25px symbol-lg-35px  p-0 me-2 symbol-fixed position-relative rounded-circle bg-gray-200 overflow-hidden">
                                                    <img alt="Logo" src="{{asset('images/logo-mini.png')}}"/>
                                                </div>
                                                {{@$follower->student->name}}
                                            </div>
                                        </td>
                                        <td>@php
                                                // Get the date of birth
                                                $dob = @$follower->studentbasic->dob;

                                                // Calculate the current age
                                                $currentYear = date('Y');
                                                $birthYear = date('Y', strtotime($dob));
                                                $age = $currentYear - $birthYear;
                                            @endphp
                                            {{ $age }}
                                        </td>
                                        <td>{{ @$follower->studentbasic->present_address }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-end">
                            {{ $followers->links() }}
{{--                            <ul class="pagination pagination-circle pagination-outline ms-auto">--}}
{{--                                <li class="page-item {{ $followers->previousPageUrl() ? '' : 'disabled' }} m-1">--}}
{{--                                    <a href="{{ $followers->previousPageUrl() }}" class="page-link"><i class="previous"></i></a>--}}
{{--                                </li>--}}
{{--                                @foreach(range(1, $followers->lastPage()) as $page)--}}
{{--                                    <li class="page-item {{ $page == $followers->currentPage() ? 'active' : '' }} m-1">--}}
{{--                                        <a href="{{ $followers->url($page) }}" class="page-link">{{ $page }}</a>--}}
{{--                                    </li>--}}
{{--                                @endforeach--}}
{{--                                <li class="page-item {{ $followers->nextPageUrl() ? '' : 'disabled' }} m-1">--}}
{{--                                    <a href="{{ $followers->nextPageUrl() }}" class="page-link"><i class="next"></i></a>--}}
{{--                                </li>--}}
{{--                            </ul>--}}
{{--                            <ul class="pagination pagination-circle pagination-outline ms-auto">--}}
{{--                                <li class="page-item previous disabled m-1"><a href="#" class="page-link"><i class="previous"></i></a></li>--}}
{{--                                <li class="page-item m-1"><a href="#" class="page-link">1</a></li>--}}
{{--                                <li class="page-item active m-1"><a href="#" class="page-link">2</a></li>--}}
{{--                                <li class="page-item m-1"><a href="#" class="page-link">3</a></li>--}}
{{--                                <li class="page-item m-1"><a href="#" class="page-link">4</a></li>--}}
{{--                                <li class="page-item m-1"><a href="#" class="page-link">5</a></li>--}}
{{--                                <li class="page-item m-1"><a href="#" class="page-link">6</a></li>--}}
{{--                                <li class="page-item next m-1"><a href="#" class="page-link"><i class="next"></i></a></li>--}}
{{--                            </ul>--}}
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>

@endsection
@section('extra-css')

@endsection

@section('extra-script')
    <script>
        $(document).ready(function () {
            $('.menu-item-institute-follower').addClass('here');
            $('.menu-item-institute-follower').addClass('show');
            $('.menu-sub-item-institute-follower').addClass('active');
        });
    </script>
    @section('extra-sub-script')
    @show
@endsection