@extends('admin.layouts.master')
@section('title', 'Dashboard')

@section('content')
    <div class="main">
        @include('auth.partials.error')
        <div class="student mb-60">
            <div class="header mb-30">
                <h1 class="hd">Schools</h1>
                <button
                    id="addschoolBtn"
                    data-modal-target="#add-school"
                    class="start"
                >
                    <span class="material-icons-sharp">add</span> Add new Student
                </button>
            </div>

            <div class="subHeading mb-30">
                <div class="leftsub">
                    <div class="leftsubLinks l-active">
                        <a href="{{route('admin.students')}}">
                            <h4 class="t-active">All Students</h4>
                        </a>
                        <span class="number active">{{$totalStudents}}</span>
                    </div>
                    <div class="leftsubLinks">
                        <a href="{{route('admin.students.invited')}}">
                            <h4>Invited</h4>
                        </a>
                        <span class="number">{{$totalInvitedStudents}}</span>
                    </div>
                    <div class="leftsubLinks">
                        <h4>Student Leaders</h4>
                        <span class="number">29</span>
                    </div>
                </div>
                <div class="rightsub">
                    <div class="search">
                        <form action="{{route("admin.students")}}" method="GET">
                            <input
                                type="search"
                                placeholder=""
                                class="search_input"
                                name="search"
                                value="{{request("search")}}"
                                id=""
                            />
                            <label for="search" class="search_label">Search</label>
                            <span class="material-icons-sharp search-icon">search</span>
                        </form>
                    </div>
                    <div class="ml-10">
                        <button type="submit" class="more">Import List</button>
                        <button type="submit" class="more">Export List</button>
                    </div>
                </div>
            </div>

            <div class="all-schools">
                <table>
                    <thead>
                    <tr>
                        <th>Student Name</th>
                        <th>Contact Email</th>
                        <th>Phone Number</th>
                        <th>Leader</th>
                        <th class="al-right">Date added</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($students as $student)
                        <tr>
                            <td>{{$student->getFullName()}}</td>
                            <td>{{$student->email}}</td>
                            <td>{{$student->phone}}</td>
                            <td>Yes</td>
                            <td class="al-right">{{$student->created_at->format('d/m/y')}}</td>
                        </tr>
                    @empty
                        <p>No Students Yet</p>
                    @endforelse
                    </tbody>
                </table>
            </div>
            @empty(!$students)
                @if($students->previousPageUrl())
                    <a href="{{$students->previousPageUrl()}}">
                        <button type="submit" class="start prev-btn">Load Previous
                        </button>
                    </a>
                @endif

                @if($students->nextPageUrl())
                    <a href="{{$students->nextPageUrl()}}">
                        <button type="submit" class="start all-schools-btn">
                            Load Next
                        </button>
                    </a>
                @endif
            @endempty
        </div>
    </div>

    <div id="add-school" class="Addnew-schools" style="height: 90%">
        <div class="cl">
            <div id="close-school-modal" class="x-cancel">
                <span class="modal-close material-icons-sharp">close</span>
                <h5 style="display: inline">Close</h5>
            </div>
            <h1>Add New Student</h1>
        </div>

        <div class="input mt-30">
            <div></div>
            <form action="{{route("admin.student")}}" method="POST" id="new-student-form">
                @csrf
                <div class="school-details">
                    <div class="intro">
                        <input type="text" class="intro_input" placeholder=" " name="first_name" id="first_name" />
                        <label for="first_name" class="intro_label">Student First Name*</label>
                    </div>
                    <div class="intro">
                        <input type="text" class="intro_input" placeholder=" " name="last_name" id="last_name" />
                        <label for="last_name" class="intro_label">Student Last Name*</label>
                    </div>
                    <div class="intro">
                        <input type="email" class="intro_input" placeholder=" " name="email" id="email" />
                        <label for="email" class="intro_label">Student Email*</label>
                    </div>
                    <div class="intro">
                        <input type="text" class="intro_input" placeholder=" " name="phone" id="phone" />
                        <label for="phone" class="intro_label">Student Phone Number*</label>
                    </div>
                    <div class="intro">
                        <select name="gender_id" id="gender_id" required>
                            <option value="">Student Gender*</option>
                            @foreach($genders as $gender)
                                <option value="{{ $gender->id }}">{{ $gender->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="clear-submit">
                    <button class="edit">Add Student</button>
                    <button class="more">Clear</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section("scripts")
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
            integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
    {!! JsValidator::formRequest('Guildroom\Http\Requests\Admin\AddStudentRequest', '#new-student-form') !!}
@endsection