@extends('layouts.main', ['title' => 'Gia sư | Profile'])

@push('style')
  @vite(['resources/css/layout/tutor/breadcrumb.css', 'resources/css/tutor.css'])
@endpush

@php
  function getSubjectGradeId(array $data, string $fieldName)
  {
      $ids = array_unique(
          array_map(function ($item) use ($fieldName) {
              return $item[$fieldName];
          }, $data),
      );
      return implode(',', $ids);
  }
  function checkInTutorSpecializes(array $data, string $fieldName, int $id)
  {
      $filteredData = array_filter($data, function ($item) use ($id, $fieldName) {
          return isset($item[$fieldName]) && $item[$fieldName] == $id;
      });
      return !empty($filteredData);
  }
  // $check = checkInTutorSpecializes($tutorSpecializes, 'grade_id', 77);
  $certificate = explode('/', $tutorData->certificate);
  $certificateName = end($certificate);
@endphp
@section('content')
  <section class="tutor-wrap">
    <div class="breadcrumb-tutor-wrap pb-2 pt-3">
      <nav aria-label="breadcrumb-tutor">
        <ol class="breadcrumb-tutor d-flex">
          <li class="breadcrumb-tutor-item">
            <a href="{{ route('tutors.dashboard') }}"
              class="breadcrumb-tutor-link text-capitalize text-decoration-none ms-4">Dashboard</a>
          </li>
          <span class="breadcrumb-tutor-separation fw-light">/</span>
          <li class="breadcrumb-tutor-item active fw-semibold text-capitalize text-decoration-none text-neutral-05"
            aria-current="page">
            Hồ sơ cá nhân
          </li>
        </ol>
      </nav>
    </div>
    <section class="tutor-content-wrap">
      <div class="tutor-container">
        <div class="row bg-white">
          <div class="col-xl-3 profile-card-group px-0">
            @include('tutors.tutor_profile_card')
          </div>
          <div class="col-xl-9">
            <section class="register-infor container pt-5">
              <div>
                @include('custom_errors.session-errors')
                <form action="{{ route('tutors.edit') }}" method="post" enctype="multipart/form-data">
                  @method('PATCH')
                  @csrf
                  <div class="personal-infor">
                    <label class="regisLabel regisLabelFs20">Thông tin cá nhân</label>
                    <div>
                      <div class="row personal-row">
                        <div class="col-6 col-xl-3 personal-item">
                          <label>Họ tên đầy đủ <span class="requireStar">*</span></label>
                          <input type="text" name="fullname" placeholder="Ho ten"
                            value="{{ auth()->user()->fullname }}">
                          @error('fullname')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-6 col-xl-3 personal-item">
                          <label>Ngày sinh</label>
                          <input type="date" name="date_birth" placeholder="01/01/1991"
                            value="{{ $tutorData->date_birth }}">
                          @error('date_birth')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-6 col-xl-3 personal-item">
                          <label>Giới tính</label>
                          <select name="gender">
                            <option value="" selected>Choose</option>
                            <option value="1" {{ $tutorData->gender === 1 ? 'selected' : '' }}>
                              Nam
                            </option>
                            <option value="0" {{ $tutorData->gender === 0 ? 'selected' : '' }}>
                              Nữ
                            </option>
                          </select>
                          @error('gender')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-6 col-xl-3 personal-item">
                          <label>Số điện thoại <span class="requireStar">*</span></label>
                          <input type="number" name="phone" placeholder="0969696969" value="{{ $tutorData->phone }}">
                          @error('phone')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                      </div>
                      <div class="row personal-row">
                        <div class="col-6 col-xl-3 personal-item">
                          <label>Số CCCD <span class="requireStar">*</span></label>
                          <input type="number" name="citizen_identification" placeholder="Số CCCD"
                            value="{{ $tutorData->user->citizen_identification }}">
                          @error('citizen_identification')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-6 col-xl-3 personal-item">
                          <label>Tỉnh/ Thành phố <span class="requireStar">*</span></label>
                          <select name="province_id" id="provinceSelect">
                            <option value="" selected>Choose</option>
                            @foreach ($provinces as $province)
                              <option value="{{ $province->id }}"
                                {{ $tutorData->province_id == $province->id ? 'selected' : '' }}>
                                {{ $province->name }}
                              </option>
                            @endforeach
                          </select>
                          @error('province_id')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-6 col-xl-3 personal-item">
                          <label>Quận/ Huyện <span class="requireStar">*</span></label>
                          <select name="district_id" id="districtSelect">
                            <option value="{{ $tutorData->district_id }}" selected>Choose</option>
                          </select>
                          @error('district_id')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-6 col-xl-3 personal-item">
                          <label>Phường/ Xã <span class="requireStar">*</span></label>
                          <select name="ward_id" id="wardSelect">
                            <option value="{{ $tutorData->ward_id }}" selected>Choose</option>
                          </select>
                          @error('ward_id')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="personal-infor mt-4">
                    <label class="regisLabel regisLabelFs20">lớp giảng dạy <span class="requireStar">*</span></label>
                    @include('tutors.register_info_more', ['tutor_info' => $tutorData->tutor_info])
                  </div>
                  <div class="row grade">
                    <div class="d-flex flex-column col">
                      <label class="regisLabel">Khả năng dạy chương trình du học<span class="requireStar">
                          *</span></label>
                      <div class="">
                        <input type="hidden" name="teach_by_en" id="teach_by_en" value="{{ $tutorData->teach_by_en }}">
                        <div class="me-5 mb-1">
                          <input type="radio" name="radio_teach" id="teachByEnYes" onclick="handleRadioClick(this)"
                            {{ $tutorData->teach_by_en == 1 ? 'checked' : '' }}>
                          <label for="teachByEnYes" class="fw-500 fs-18 text-neutral-04 ms-2">Có khả năng</label>
                        </div>
                        <div>
                          <input type="radio" name="radio_teach" id="teachByEnNo" onclick="handleRadioClick(this)"
                            {{ $tutorData->teach_by_en == 0 ? 'checked' : '' }}>
                          <label for="teachByEnNo" class="fw-500 fs-18 text-neutral-04 ms-2">Không có khả năng</label>
                        </div>
                      </div>
                      @error('teachByEnNo')
                        <br>
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                    <div class="d-flex flex-column col">
                      <label class="regisLabel">Hình thức dạy <span class="requireStar">*</span></label>
                      <div class="d-flex flex-column">
                        <input type="hidden" id="selectedTutorType" name="tutor_type" value="0">
                        <div class="mb-1">
                          <input type="checkbox" class="teachTutorType" value="1" name="type_tutor_online"
                            {{ $tutorData && json_decode($tutorData->is_teach_online, true)['online'] == 1 ? 'checked' : '' }}>
                          <label class="fw-500 fs-18 text-neutral-04 ms-2">Gia sư Online</label>
                        </div>
                        <div>
                          <input type="checkbox" class="teachTutorType" value="1" name="type_tutor_offline"
                            {{ $tutorData && json_decode($tutorData->is_teach_online, true)['offline'] == 1 ? 'checked' : '' }}>
                          <label class="fw-500 fs-18 text-neutral-04 ms-2">Gia Sư Tại Nhà</label>
                        </div>
                        @error('tutor_type')
                          <span class="text-danger">{{ $message }}</span>
                        @enderror
                      </div>
                    </div>
                  </div>


                  <div class="personal-skill">
                    <label class="regisLabel regisLabelFs20">Thông tin học vấn/Kinh nghiệm</label>
                    <div>
                      <div class="row personal-row">
                        <div class="col-6 personal-item">
                          <label>Hiện là</label>
                          <input type="text" name="current_job" placeholder="Bạn đang làm gì?"
                            value="{{ $tutorData->current_job }}">
                          @error('current_job')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-6 personal-item">
                          <label>Đơn vị công tác</label>
                          <input type="text" name="work_place" placeholder="Bạn học tập/ làm việc ở đâu?"
                            value="{{ $tutorData->work_place }}">
                          @error('work_place')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                      </div>

                      <div class="row personal-row">
                        <div class="col-12 personal-item">
                          <label for="upload-file-input">Bằng cấp</label>
                          <div class="d-flex align-items-center">
                            <label for="upload-file-input" class="custom-file-input">Tải file</label>
                            <span class="upload-file-name ms-3">{{ $certificateName }}</span>
                          </div>
                          <input type="file" name="certificate" class="upfile-btn" id="upload-file-input">
                          <span class="fs-12 text-neutral-04">file: pdf, doc</span>
                          @error('certificate')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="personal-skill">
                    <label class="regisLabel regisLabelFs20">Thông Tin Tài Khoản Ngân Hàng</label>
                    <div>
                      <div class="row personal-row">
                        <div class="col-4 personal-item">
                          <label>Ngân Hàng <span class="requireStar">*</span></label>
                          <select name="bank_id" id="bankSelect">
                            <option value="" selected>Chọn ngân hàng</option>
                            @foreach ($banks as $bank)
                              <option value="{{ $bank->id }}"
                                {{ $tutorData->bank_id == $bank->id ? 'selected' : '' }}>
                                {{ $bank->short_name }}
                              </option>
                            @endforeach
                          </select>
                          @error('bank_id')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-4 personal-item">
                          <label>Số Tài Khoản <span class="requireStar">*</span></label>
                          <input type="number" name="account_number" value="{{ $tutorData->account_number }}">
                          @error('account_number')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-4 personal-item">
                          <label>Tên Tài Khoản <span class="requireStar">*</span></label>
                          <input type="text" name="account_name" value="{{ $tutorData->account_name }}">
                          @error('account_name')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="d-flex justify-content-center">
                    <button class="btn-submit btn-edit-profile btn-fill-primary fw-500" type="submit">
                      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"
                        fill="none">
                        <path
                          d="M19.5003 20.0008H5.5003C5.23508 20.0008 4.98073 20.1062 4.79319 20.2937C4.60565 20.4813 4.5003 20.7356 4.5003 21.0008C4.5003 21.2661 4.60565 21.5204 4.79319 21.7079C4.98073 21.8955 5.23508 22.0008 5.5003 22.0008H19.5003C19.7655 22.0008 20.0199 21.8955 20.2074 21.7079C20.3949 21.5204 20.5003 21.2661 20.5003 21.0008C20.5003 20.7356 20.3949 20.4813 20.2074 20.2937C20.0199 20.1062 19.7655 20.0008 19.5003 20.0008ZM5.5003 18.0008H5.5903L9.7603 17.6208C10.2171 17.5753 10.6443 17.3741 10.9703 17.0508L19.9703 8.05083C20.3196 7.6818 20.5084 7.18934 20.4953 6.68137C20.4822 6.1734 20.2682 5.69134 19.9003 5.34083L17.1603 2.60083C16.8027 2.26493 16.3341 2.07219 15.8436 2.05929C15.3532 2.04638 14.8751 2.2142 14.5003 2.53083L5.5003 11.5308C5.17706 11.8568 4.9758 12.284 4.9303 12.7408L4.5003 16.9108C4.48683 17.0573 4.50583 17.2049 4.55596 17.3432C4.60608 17.4815 4.6861 17.607 4.7903 17.7108C4.88374 17.8035 4.99455 17.8768 5.11639 17.9266C5.23823 17.9764 5.36869 18.0016 5.5003 18.0008ZM15.7703 4.00083L18.5003 6.73083L16.5003 8.68083L13.8203 6.00083L15.7703 4.00083ZM6.8703 12.9108L12.5003 7.32083L15.2003 10.0208L9.6003 15.6208L6.6003 15.9008L6.8703 12.9108Z"
                          fill="white" />
                      </svg>
                      <span class="ms-1">
                        Sửa thông tin
                      </span>
                    </button>
                  </div>
                </form>
              </div>
            </section>
          </div>
        </div>
      </div>
    </section>
    @include('modals.crop-image')
  </section>
@endsection

@push('script')
  @vite('resources/js/tutor.js')
  @vite('resources/js/register-information.js')
  @vite('resources/js/register-information-edit-profile.js')
  <script>
    function handleRadioClick(clickedRadio) {
      const radios = document.getElementsByName("radio_teach");
      // Uncheck all radios
      radios.forEach(radio => {
        radio.checked = false;
      });

      // Check the clicked radio
      clickedRadio.checked = true;
      // set value for name=teach_by_en
      const teachByEnInput = document.getElementById('teach_by_en');
      if (clickedRadio.id === 'teachByEnYes') {
        teachByEnInput.value = '1';
      } else if (clickedRadio.id === 'teachByEnNo') {
        teachByEnInput.value = '0';
      }
    }
  </script>
@endpush