@extends('layouts.instructor')

@section('breadcrumb')
    <div class="page-banner-content text-center">
        <h3 class="page-banner-heading text-white pb-15"> {{__('app.all_students')}} </h3>

        <!-- Breadcrumb Start-->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item font-14"><a href="{{route('instructor.dashboard')}}">{{__('app.dashboard')}}</a></li>
                <li class="breadcrumb-item font-14 active" aria-current="page">{{__('app.all_students')}}</li>
            </ol>
        </nav>
    </div>
@endsection

@section('content')
    <div class="instructor-profile-right-part">
        <div class="instructor-quiz-list-page instructor-all-student-page">

            <div class="instructor-my-courses-title d-flex justify-content-between align-items-center">
                <h6>{{__('app.all_students')}}</h6>

                <div class="dropdown all-student-filter-dropdown">
                    <button class="all-student-filter-dropdown-btn color-heading font-18 font-medium d-inline-flex align-items-center" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="iconify" data-icon="bx:filter-alt"></span>Filter
                    </button>
                    <div class="dropdown-menu  {{selectedLanguage()->rtl == 1 ? 'dropdown-menu-start' : 'dropdown-menu-end' }}" aria-labelledby="dropdownMenuButton1">
                      <form action="{{ route('instructor.all-student') }}" name="get">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <div class="label-text-title color-heading font-medium font-16 mb-2">{{__('app.search_by_name')}}</div>

                                <input type="search" name="search_name" class="form-control" placeholder="Search by Name" value="{{ app('request')->search_name }}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="label-text-title color-heading font-medium font-16 mb-2">{{__('app.search_by_course')}}</label>
                                <select class="form-select" name="course_id">
                                    <option value="">{{__('app.select_course')}}</option>
                                    @foreach($courses as $course)
                                    <option value="{{ $course->id }}" @if(app('request')->course_id == $course->id) selected @endif>{{ $course->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <button type="submit" class="theme-btn default-hover-btn theme-button1">{{__('app.search')}}</button>
                      </form>
                    </div>
                </div>

            </div>

            <div class="row">
                @if(count($orderItems) > 0)
                <div class="col-12">
                    <div class="table-responsive table-responsive-xl">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">{{__('app.image')}}</th>
                                <th scope="col">{{__('app.name')}}</th>
                                <th scope="col">{{__('app.email')}}</th>
                                <th scope="col">{{__('app.course_name')}}</th>
                                <th scope="col">{{__('app.purchase_date')}}</th>
                                <th scope="col">{{__('app.action')}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($orderItems as $orderItem)
                                <tr>
                                    <td><div class="all-student-img-wrap"><img src="{{ getImageFile(@$orderItem->order->user->image_path) }}" alt="img" class="img-fluid"></div></td>
                                    <td>{{ @$orderItem->order->user->name }}</td>
                                    <td>{{ @$orderItem->order->user->email }}</td>
                                    <td>{{ @$orderItem->course->title }}</td>
                                    <td>{{ @$orderItem->created_at->format('d/m/Y') }}
                                    </td>
                                    <td>
                                        <div class="red-blue-action-btns">
                                            <button type="button" data-country="{{@$orderItem->user->student->country->country_name}}" data-image="{{ getImageFile($orderItem->user->image) }}" data-item="{{ $orderItem }}"
                                                    data-purchase_date="{{ @$orderItem->created_at->format('d/m/Y') }}" data-bs-toggle="modal" data-bs-target="#allStudentViewModal"
                                                    class="theme-btn theme-button1 green-theme-btn default-hover-btn viewStudent">View</button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Pagination Start -->
                    @if(@$orderItems->hasPages())
                        {{ @$orderItems->links('frontend.paginate.paginate') }}
                    @endif
                <!-- Pagination End -->
                @else
                    <!-- If there is no data Show Empty Design Start -->
                    <div class="empty-data">
                        <img src="{{ asset('frontend/assets/img/empty-data-img.png') }}" alt="img" class="img-fluid">
                        <h5 class="my-3">{{__('app.empty_student')}}</h5>
                    </div>
                    <!-- If there is no data Show Empty Design End -->
                @endif
            </div>

        </div>
    </div>

@endsection

@section('modal')

<!--All Student View Modal Start-->
<div class="modal fade viewStudentModal" id="allStudentViewModal" tabindex="-1" aria-labelledby="allStudentViewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="allStudentViewModalLabel">{{__('app.student_information')}}</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="all-student-modal-img d-flex align-items-center">
                                <div class="all-student-img-wrap "><img src="" alt="img" class="img-fluid user_image"></div><span class="user_name"></span>
                            </div>
                            <div class="student-detail-info-row">
                                <div class="all-student-modal-inner row">
                                    <div class="all-student-info-title col-sm-6 col-md-6 col-lg-4">Course Name <span>:</span></div><div class="all-student-info-value col-sm-6 col-md-6 col-lg-8 course_name"></div>
                                </div>
                                <div class="all-student-modal-inner row">
                                    <div class="all-student-info-title col-sm-6 col-md-6 col-lg-4">Course Join Date <span>:</span></div><div class="all-student-info-value col-sm-6 col-md-6 col-lg-8 purchase_date"></div>
                                </div>
                                <div class="all-student-modal-inner row">
                                    <div class="all-student-info-title col-sm-6 col-md-6 col-lg-4">Email <span>:</span></div><div class="all-student-info-value col-sm-6 col-md-6 col-lg-8 email"></div>
                                </div>
                                <div class="all-student-modal-inner row">
                                    <div class="all-student-info-title col-sm-6 col-md-6 col-lg-4">Phone <span>:</span></div><div class="all-student-info-value col-sm-6 col-md-6 col-lg-8 phone"></div>
                                </div>

                                <div class="all-student-modal-inner row">
                                    <div class="all-student-info-title col-sm-6 col-md-6 col-lg-4">Country <span>:</span></div><div class="all-student-info-value col-sm-6 col-md-6 col-lg-8 country"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer d-flex justify-content-between align-items-center">
                <button type="button" class="theme-btn theme-button1 default-hover-btn default-back-btn" data-bs-dismiss="modal">Back</button>
            </div>
        </div>
    </div>
</div>
<!--All Student View Modal End-->
@endsection

@push('script')
    <script src="{{ asset('frontend/assets/js/instructor/view-student.js') }}"></script>
@endpush