@extends('layouts.app')
@section('content')
    <div class="m-sm-5 m-1">
        <div class="fs-4 fw-bolder mb-3 text-p">تفاصيل الطالب</div>
        <div class="d-flex justify-content-between">
            <div class="d-flex gap-3">
                <div class="">
                    <img style="width: 100px;height:100px;" src="{{ $student->image }}" alt="" class="rounded-circle">
                </div>
                <div class="">
                    <div class="fs-6  text-p">{{ $student->username }}</div>
                    <div class="text-s">{{ $student->education_level->title ?? null }}</div>
                    <div class="mt-3">
                        <span class="text-p3 "><i class="fa-solid fa-phone"></i></span><span class="text-s ms-2">رقم الهاتف
                            : </span><span class="text-b">{{ $student->phone }}</span>

                    </div>
                    <div class="mt-1">

                        <span class="text-p3 "><i class="fa-solid fa-phone"></i></span><span class="text-s ms-2">رقم ولى
                            الأمر : </span><span class="text-b">{{ $student->parent_phone }}</span>
                    </div>

                </div>
            </div>
            <div class="d-flex gap-3">
                <a href="{{route('students.edit',$student->id)}}" class="btn-p"><i class="fas fa-pencil-alt me-1"></i> تعديل  </a>
                <a data-url="{{route("students.active",$student->id)}}" data-active="{{($student->active ? 0 : 1)}}"  href="javascript:;" class="btn-d active-request ">
                    @if($student->active )
                    حظر الحساب
                    @else
                        تفعيل الحساب
                    @endif
                </a>
            </div>
        </div>
        <div class="d-flex justify-content-between align-items-center">

            <ul class="nav nav-tabs mt-5" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ request()->tab == 'courses' ? 'active' : null }}" id="profile-tab"
                        onclick="window.location.href='{{ route('students.show', $student->id) }}?tab=courses'"
                        data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab"
                        aria-controls="profile-tab-pane" aria-selected="false"> الأنضمامات

                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ request()->tab == 'exam' ? 'show active' : null }}" id="contact-tab"
                        onclick="window.location.href='{{ route('students.show', $student->id) }}?tab=exam'"
                        data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab"
                        aria-controls="contact-tab-pane" aria-selected="false"> الأمتحانات

                    </button>
                </li>
            </ul>
            <a href="{{route("students.requests",$student->id)}}" class="px-4 py-2 btn-custom-1">طلبات الأنضمام</a>
        </div>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane p-5 fade {{ request()->tab == 'courses' || request()->tab == null ? 'show active' : null }}"
                id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<div class="overflow-scroll">

    <table class="table table-bordered data-table" id="join-table">
         <thead>
             <tr>
                 <th>#</th>
                 <th>اسم المنهج</th>
                 <th>نوع الشهر </th>
                 <th> المادة </th>
                 <th>المبلغ</th>
                 <th>الدورة</th>
                 <th>تاريخ الأنضمام</th>
                 {{-- <th  width="100px">الحالة</th> --}}
             </tr>
         </thead>
         <tbody>
         </tbody>
     </table>
</div>







            </div>
            <div class="tab-pane p-5 fade {{ request()->tab == 'exam' ? 'show active' : null }}" id="profile-tab-pane"
                role="tabpanel" aria-labelledby="profile-tab" tabindex="0">

                <div class="overflow-scroll">

                    <table class="table table-bordered data-table2 " id="courses-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>العنوان</th>
                                <th>اسم المدرس</th>
                                <th> الدورة </th>
                                <th width="70px">النتيجة </th>
                                <th width="70px">عرض </th>

                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>



                {{-- {{ $dataTable->table() }} --}}
            </div>
        </div>

    </div>
@endsection
@section('js')
<script type="text/javascript">
  $(function () {

    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        dom:'<"text-left"B>frtip',
        ajax: "{{ route('students.show',$student->id) }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            {data: 'join', name: 'join'},
            {data: 'type', name: 'type'},
            {data: 'course.subject.name', name: 'course.subject.name'},
            {data: 'price', name: 'price'},
            {data: 'course.title', name: 'course.title'},
            {data: 'created_at', name: 'created_at'},
            // {data: 'status', name: 'status'},
            // {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });




    var table2 = $('.data-table2').DataTable({
        processing: true,
        serverSide: true,
        dom:'<"text-left"B>frtip',
        ajax: "{{ route('students.show',$student->id) }}?tab=exam",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            {data: 'title', name: 'title'},
            {data: 'teacher_name', name: 'teacher_name'},
            {data: 'course_id', name: 'course_id'},
            // {data: 'status', name: 'status'},
            {data: 'result', name: 'result'},
            {data: 'show', name: 'show'},

        ]
    });

  });
</script>




    {{-- {{ $dataTable->scripts(attributes: ['type' => 'module']) }} --}}
@endsection