@extends('layout.app', ['title' => 'Học sinh | Báo cáo chi tiết kết quả học tập'])

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/landing.css', 'resources/css/animate.css', 'resources/css/students/student_report_learning.css', 'resources/css/students/student.css'])
  <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" />
@endpush

@php
  use App\Enums\CourseType;
@endphp

@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    <section class="banner-main position-relative w-100">
      <div class="banner-unit">
        <img src="{{ asset('img/promotion/banner_class.png') }}" alt="" class="w-100">
      </div>
      <div class="banner-main-wrap position-absolute mt-2">
        <div class="banner-main-content text-white">
          <div class="banner-main-header text-uppercase">
            <h2>báo cáo chi tiết học tập</h2>
          </div>
          <div class="banner-main-text fs-17">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item breadcrumb-unit"><a href="/">Trang chủ</a></li>
                <li class="breadcrumb-item breadcrumb-unit"><a href="{{ route('students.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item breadcrumb-unit capitalize-first active" aria-current="page">Báo cáo chi tiết
                  học tập</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>
    <div class="container-fluid">
      <div class="row my-5 px-5">
        <div class="col-xl-12">
          @include('custom_errors.session-errors')
          <div class="d-flex flex-column gap-5">
            <div class="student-action-header d-flex justify-content-between">
              <select class="fw-bold text-uppercase fs-5 study-history-select-title bg-white" name="option-history-select"
                id="option-history-select">
                <option class="fw-bold text-uppercase fs-5 border-0" value="">Tất cả</option>
                <option class="fw-bold text-uppercase fs-5 border-0" value="week"
                  {{ Request::query('option') == 'week' ? 'selected' : '' }}>Tuần này
                </option>
                <option class="fw-bold text-uppercase fs-5 border-0" value="month"
                  {{ Request::query('option') == 'month' ? 'selected' : '' }}>Tháng này
                </option>
                <option class="fw-bold text-uppercase fs-5 border-0" value="year"
                  {{ Request::query('option') == 'year' ? 'selected' : '' }}>Năm này
                </option>
              </select>
              <button data-href="{{ route('students.sendEmailToStudentParent') }}"
                class="prevent-button btn-report btn-fill-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path
                    d="M2.66671 2.66602H13.3334C14.0667 2.66602 14.6667 3.26602 14.6667 3.99935V11.9993C14.6667 12.7327 14.0667 13.3327 13.3334 13.3327H2.66671C1.93337 13.3327 1.33337 12.7327 1.33337 11.9993V3.99935C1.33337 3.26602 1.93337 2.66602 2.66671 2.66602Z"
                    stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M14.6667 4L8.00004 8.66667L1.33337 4" stroke="white" stroke-linecap="round"
                    stroke-linejoin="round" />
                </svg>
                Gửi về mail
              </button>
            </div>
            @if ($levelTestHistoryData)
              <div class="table-reponsive box">
                <table id="levelTestHistoryData" class="table-striped table-bordered table" style="width:100%">
                  <h4 class="fw-600 text-center">Các Bài Kiểm Tra Trình Độ</h4>
                  <thead>
                    <tr>
                      <th>
                        <span class="justify-content-start table-row">Hình thức</span>
                      </th>
                      <th>
                        <span class="table-row">Nội dung kiểm tra</span>
                      </th>
                      <th>
                        <span class="table-row">Kết quả</span>
                      </th>
                      <th>
                        <span class="table-row">Thời gian</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($levelTestHistoryData as $data)
                      <tr>
                        <td class="">
                          <span
                            class="fw-700">{{ $data['test_type'] == 0 ? 'Đánh giá năng lực' : 'Kiểm tra theo yêu cầu' }}</span>
                        </td>
                        <td class="text-center">
                          @if ($data['test_type'] == 0)
                            <span class="text-capitalize">{{ $data['subject_name'] ?? '' }}</span>
                          @else
                            <span
                              class="fw-700">{{ \App\Enums\Subject::tryFrom($data['from_subject_id'])?->name() ?? '' }}
                              -
                              {{ \App\Enums\Grades::tryFrom($data['from_grade_id'])?->name() ?? '' }}</span>
                            <span class="text-neutral-04">Chương {{ $data['from_chapter_number'] }} - Chương
                              {{ $data['to_chapter_number'] }}</span>
                          @endif
                        </td>
                        <td class="text-center">
                          <span class="fw-700">{{ $data['right_answer'] . '/' . $data['total_question'] }}</span>
                        </td>
                        <td class="text-center">
                          <span>{{ \Carbon\Carbon::parse($data['date'])->format('d/m/Y') }}</span>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @endif
            @if ($studyProgressHistoryData)
              <div class="table-reponsive box">
                <table id="studyProgressHistoryData" class="table-striped table-bordered table" style="width:100%">
                  <h4 class="fw-600 text-center">Khóa học</h4>
                  <thead>
                    <tr>
                      <th>
                        <span class="justify-content-start table-row">Khóa học</span>
                      </th>
                      <th>
                        <span class="table-row">Bạn đang học đến</span>
                      </th>
                      <th>
                        <span class="table-row">Tỷ lệ hoàn thành</span>
                      </th>
                      <th>
                        <span class="table-row">Thời gian học</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($studyProgressHistoryData as $data)
                      <tr>
                        <td>
                          @if ($data['type'] == CourseType::COURSE_SELF_STUDY->value)
                            <p class="mb-0">
                              <span
                                class="fw-700">{{ \App\Enums\Subject::tryFrom($data['subject_id'])?->name() ?? '' }}</span>
                              -
                              <span>{{ \App\Enums\Grades::tryFrom($data['grade_id'])?->name() ?? '' }}</span>
                            </p>
                          @elseif($data['type'] == CourseType::ABROAD_PROGRAM_STUDY->value)
                            <span class="fw-700">{{ $data['course_name'] }}</span>
                          @endif
                        </td>
                        <td>
                          @if ($data['type'] == CourseType::COURSE_SELF_STUDY->value)
                            <p class="mb-0">
                              <span
                                class="fw-700">{{ 'Chương ' . $data['chapter_number'] . ': ' }}</span>{{ $data['chapter_name'] }}
                            </p>
                            <p class="mb-0">
                              <span
                                class="fw-700">{{ 'Bài ' . $data['unit_number'] . ': ' }}</span>{{ $data['unit_name'] }}
                            </p>
                          @elseif ($data['type'] == CourseType::ABROAD_PROGRAM_STUDY->value)
                            <p class="mb-0">
                              <span
                                class="fw-700">{{ 'Unit ' . $data['chapter_number'] . ': ' }}</span>{{ $data['chapter_name'] }}
                            </p>
                            <p class="mb-0">
                              <span
                                class="fw-700">{{ 'Topic ' . $data['unit_number'] . ': ' }}</span>{{ $data['unit_name'] }}
                            </p>
                          @endif
                        </td>
                        <td class="text-center">
                          @if ($data['type'] == CourseType::COURSE_SELF_STUDY->value)
                            <span
                              class="fw-700">{{ getPercentageLearningResult(Auth::user()->id, $data['unit_id'], CourseType::COURSE_SELF_STUDY->value) }}%</span>
                          @elseif ($data['type'] == CourseType::ABROAD_PROGRAM_STUDY->value)
                            <span
                              class="fw-700">{{ getPercentageLearningResult(Auth::user()->id, $data['unit_id'], CourseType::ABROAD_PROGRAM_STUDY->value) }}%</span>
                          @endif
                        </td>
                        <td class="text-center">
                          <span>{{ \Carbon\Carbon::parse($data['time_start'])->format('d/m/Y') }} -
                            {{ \Carbon\Carbon::parse($data['time_end'])->format('d/m/Y') }}
                          </span>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @endif

            @if ($tutorStudyHistoryData)
              <div class="table-reponsive box">
                <table id="tutorStudyHistoryData" class="table-striped table-bordered table" style="width:100%">
                  <h4 class="fw-600 text-center">Lớp Gia Sư</h4>
                  <thead>
                    <tr>
                      <th>
                        <span class="table-row">Gia sư</span>
                      </th>
                      <th>
                        <span class="table-row">Môn học</span>
                      </th>
                      <th>
                        <span class="table-row">Buổi dạy</span>
                      </th>
                      <th>
                        <span class="table-row">Nhận xét của gia sư</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($tutorStudyHistoryData as $data)
                      <tr>
                        <td class="text-center">
                          <span class="fw-700">{{ $data['fullname'] }}</span>
                          <span
                            class="fs-14">{{ $data['teach_online'] == 1 ? 'Gia sư online' : 'Gia sư tại nhà' }}</span>
                        </td>
                        <td class="text-center">
                          <span class="text-capitalize">{{ getTutorInfoSkill($data['tutor_info']) }}</span>
                        </td>
                        <td class="text-center">
                          <span class="fw-700">{{ \Carbon\Carbon::parse($data['date'])->format('d-m-Y') }}</span>
                          {{-- <span class="fs-14 fst-italic fw-normal text-nowrap">{{ \Carbon\Carbon::parse($data['time_from'])->format('h:i a') . ' - ' . \Carbon\Carbon::parse($data['time_to'])->format('h:i a') }}</span> --}}
                        </td>
                        <td class="text-center">
                          <span>{!! $data['feedback'] !!}</span>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @endif

            @if ($teacherClassStudyHistoryData)
              <div class="table-reponsive box">
                <table id="teacherClassStudyHistoryData" class="table table-striped table-bordered" style="width:100%">
                  <h4 class="text-center fw-600">Khóa học online - offline</h4>
                  <thead>
                    <tr>
                      <th>
                        <span class="table-row">Giáo viên</span>
                      </th>
                      <th>
                        <span class="table-row">Môn học</span>
                      </th>
                      <th>
                        <span class="table-row">Buổi dạy</span>
                      </th>
                      <th>
                        <span class="table-row">Thời gian khóa học</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($teacherClassStudyHistoryData as $data)
                      <tr>
                        <td class="text-center">
                          <span class="fw-700">{{ $data['teacher_name'] }}</span>
                        </td>
                        <td class="text-center">
                          <span>{{ $data['name'] }}</span>
                        </td>
                        <td class="text-center">
                          {{ $data['count_teaching'] }}
                        </td>
                        <td class="text-center">
                          <span>{{ \Carbon\Carbon::parse($data['start_day'])->format('d/m/Y') . ' - ' . \Carbon\Carbon::parse($data['end_day'])->format('d/m/Y') }}</span>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection
@push('script')
  @vite('resources/js/student_history.js')
  <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
  <script>
    $(document).ready(function() {
      $('#levelTestHistoryData').DataTable({
        "lengthChange": false,
        "pageLength": 5,
        "searching": false,
        "ordering": false,
        "responsive": true,
        "autoWidth": false,
        "language": {
          "emptyTable": "Không có dữ liệu",
          "zeroRecords": "Không tìm thấy dữ liệu",
          "info": "Hiển thị _START_ - _END_ trong _TOTAL_",
          "infoEmpty": "Không có bản ghi nào",
        },
        'columnDefs': [{
            'targets': 0,
            'width': '16.67%'
          }, // col-2
          {
            'targets': 1,
            'width': '41.67%'
          }, // col-5
          {
            'targets': 2,
            'width': '16.67%'
          }, // col-2
          {
            'targets': 3,
            'width': '25%'
          } // col-3
        ]
      });
      $('#studyProgressHistoryData').DataTable({
        "lengthChange": false,
        "pageLength": 5,
        "searching": false,
        "ordering": false,
        "responsive": true,
        "autoWidth": false,
        "language": {
          "emptyTable": "Không có dữ liệu",
          "zeroRecords": "Không tìm thấy dữ liệu",
          "info": "Hiển thị _START_ - _END_ trong _TOTAL_",
          "infoEmpty": "Không có bản ghi nào",
        },
        'columnDefs': [{
            'targets': 0,
            'width': '16.67%'
          }, // col-2
          {
            'targets': 1,
            'width': '41.67%'
          }, // col-5
          {
            'targets': 2,
            'width': '16.67%'
          }, // col-2
          {
            'targets': 3,
            'width': '25%'
          } // col-3
        ]
      });
      $('#tutorStudyHistoryData').DataTable({
        "lengthChange": false,
        "pageLength": 5,
        "searching": false,
        "ordering": false,
        "responsive": true,
        "autoWidth": false,
        "language": {
          "emptyTable": "Không có dữ liệu",
          "zeroRecords": "Không tìm thấy dữ liệu",
          "info": "Hiển thị _START_ - _END_ trong _TOTAL_",
          "infoEmpty": "Không có bản ghi nào",
        },
        'columnDefs': [{
            'targets': 0,
            'width': '25%'
          }, // col-3
          {
            'targets': 1,
            'width': '25%'
          }, // col-3
          {
            'targets': 2,
            'width': '16.67%'
          }, // col-2
          {
            'targets': 3,
            'width': '41.67%'
          } // col-5
        ]
      });
      $('#teacherClassStudyHistoryData').DataTable({
        "lengthChange": false,
        "pageLength": 10,
        "searching": false,
        "ordering": false,
        "responsive": true,
        "autoWidth": false,
        "language": {
          "emptyTable": "Không có dữ liệu",
          "zeroRecords": "Không tìm thấy dữ liệu",
          "info": "Hiển thị _START_ - _END_ trong _TOTAL_",
          "infoEmpty": "Không có bản ghi nào",
        },
        'columnDefs': [{
            'targets': 0,
            'width': '25%'
          }, // col-3
          {
            'targets': 1,
            'width': '25%'
          }, // col-3
          {
            'targets': 2,
            'width': '25%'
          }, // col-3
          {
            'targets': 3,
            'width': '25%'
          } // col-3
        ]
      });
    });
  </script>
@endpush