@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Students</x-page.header>
        @include('admin.errors.form-errors')
        {{-- Search Students --}}
        @if(!empty($students))
        <div class="modal fade" id="student-modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content modal-content-demo">
                    <div class="modal-header">
                        <h6 class="modal-title">Students</h6>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @forelse ($students as $student)
                        <div class="card m-b-20">
                            <div class="card-body">
                                <div class="visitor-list">

                                    <div class="media m-0 mt-0">
                                        @if($student->image)
                                        <img class="brround me-3" alt="avatra-img" src="{{$student->getImage($student->image)}}">
                                        @else
                                        <img class="brround me-3" alt="avatra-img" src="{{env('SECURE_ASSETS').'/images/users/user_profile.png'}}">
                                        @endif
                                        <div class="media-body">
                                            <a href="{{route('admin.students.show',$student->id)}}" class="text-default font-weight-semibold">{{$student->first_name .' '.$student->middle_name.' '.$student->last_name}} </a>
                                            <p class="text-muted ">{{$student->username}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <p class="text-center text-danger">There is no data</p>
                        @endforelse
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
                    </div>
                </div>
            </div>
        </div>
        @endif
        <form action="{{ route('admin.students.index') }}" method="get">
            <div class="mb-5">
                <div class="card">
                    <div class="p-5 bg-white">
                        <div class="mt-3 item2-gl-nav">
                            <div class="d-block ">
                                <h5 class="mb-2 mt-0">Search by</h5>
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class=" mt-3 mb-sm-1">Name: </label>
                                        <input type="text" name="nameSearch" id="search"
                                            value="{{ request()->get('nameSearch') }}" class="form-control br-ts-7 br-bs-7">
                                    </div>
                                    <div class="col-md-3">
                                        <label class=" mt-3 mb-sm-1">UserID: </label>
                                        <input type="text" name="userNameSearch" id="search"
                                            value="{{ request()->get('userNameSearch') }}" class="form-control br-ts-7 br-bs-7">
                                    </div>
                                    <div class="col-md-3">
                                        <label class=" mt-3 mb-sm-1">Email: </label>
                                        <input type="email" name="emailSearch" id="search"
                                            value="{{ request()->get('emailSearch') }}" class="form-control br-ts-7 br-bs-7">
                                    </div>
                                    <div class="col-md-3">
                                        <label class=" mt-3 mb-sm-1">Phone: </label>
                                        <input type="tel" name="phoneSearch" id="search"
                                            value="{{ request()->get('phoneSearch') }}" class="form-control br-ts-7 br-bs-7">
                                    </div>
                                </div>
                            </div>
                            <div class="mx-auto d-block">
                                <input type="submit" id="submit" class="btn btn-primary mx-auto d-block mt-6"
                                    value="Search">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Students List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <div class="d-flex justify-content-center align-items-center flex-wrap gap-2 mb-4">
                            <a href="{{ route('admin.students.create')}}" class="btn btn-outline-success btn-sm waves-effect waves-light" data-bs-toggle="tooltip" data-bs-original-title="Add New Student">
                                Add New Student <i class="fa fa-plus pagination-right"></i>
                            </a>

                            <a href="{{ route('admin.students.export') }}"
                            class="btn btn-outline-success btn-sm waves-effect waves-light"
                            data-bs-toggle="tooltip" data-bs-original-title="Export All Students">
                                Export <i class="fa fa-file-excel-o ms-1"></i>
                            </a>
                            </div>
                                <table
                                class="table table-striped table-bordered table-vcenter text-nowrap" id="students_table">
                                <thead>
                                    <tr>
                                        <th style="text-align: center;">Id</th>
                                        <th style="text-align: center;">name</th>
                                        <th style="text-align: center;">user name</th>
                                        <th>email</th>
                                        <th>phone</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $count=0
                                    @endphp
                                    @foreach ($students_list as $student)
                                      <tr>
                                          <td>{{++$count}}</td>
                                          <td>{{$student->first_name.' '.$student->middle_name.' '.$student->last_name}}</td>
                                          <td>{{$student->username}}</td>
                                          <td>{{$student->email}} {!! $student->email_verified_at?  '<i class="text-green las la-check"></i>':'<i class="text-danger las la-times"></i>'!!}</td>
                                          <td>{{$student->phone}} {!! $student->is_phone_active?  '<i class="text-green las la-check"></i>':'<i class="text-danger las la-times"></i>'!!}</td>
                                          <td><a class="badge badge-primary" href="{{route('admin.students.show',$student->id)}}" target="_blank">View</a></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="mt-4">
                                {{ $students_list->appends(Request::except('page'))->render('inc.paginate') }}
                            </div>
                            <p class="mt-3">
                                Displaying {{$students_list->count()}} of {{ $students_list->total() }} student(s).
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection
@section('admin-js')
<!-- Register form validation -->
<script>

$('.only_english').bind('keyup blur',function() {
        $(this).val($(this).val().replace(/[^A-Za-z0-9]/g,''))
    });

</script>

@if(!empty($students))
<script type="text/javascript">
    $(window).on('load', function() {
        $('#student-modal').modal('show');
    });
</script>
@endif

<script>
     $(document).ready(function(){

        $('#students_table').dataTable( {
            "drawCallback": function( settings ) {},
            "bPaginate": false,
            "searching": true,
            "ordering": true,
            "info": false,
        })
	})
</script>

@endsection