@extends('layout.auth_layout', ['title' => 'Tutor | Điền thông tin'])

@push('style')
  @vite('resources/css/tutor.css')
@endpush

@section('content')
  <section class="register-infor container-lg pt-5">
    <div>
      <div class="d-flex flex-column justify-content-center align-items-center">
        <span class="text-red-main fs-4 fw-600">
          Xin Chào,
          <span>
            {{ auth()->user()->fullname }}
          </span>
        </span>
        <span class="fs-14 text-neutral-04 fw-500">
          Vui lòng điền thông tin của bạn
        </span>
        @include('custom_errors.session-errors')
      </div>

      <form action="" method="POST" enctype="multipart/form-data">
        @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-4 personal-item">
                <label>Họ tên đầy đủ <span class="requireStar">*</span></label>
                <input type="text" name="fullname" placeholder="Họ tên" value="{{ auth()->user()->fullname }}"
                  required="required">
                @error('fullname')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-4 personal-item">
                <label>Email <span class="requireStar">*</span></label>
                <input type="text" name="email" placeholder="Email" value="{{ auth()->user()->email }}"
                  {{ auth()->user()->email ? 'readonly' : '' }} required="required">
                @error('email')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-4 personal-item">
                <label>Số điện thoại <span class="requireStar">*</span></label>
                <input type="number" name="phone" placeholder="0969696969" value="{{ old('phone') }}">
                @error('phone')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>

            <div class="row personal-row">
              <div class="col-4 personal-item">
                <label>Ngày sinh</label>
                <input type="date" name="date_birth" placeholder="01/01/1991" value="">
                @error('date_birth')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-4 personal-item">
                <label>Giới tính</label>
                <select name="gender">
                  <option value="" selected>Choose</option>
                  <option value="1" {{ old('gender') !== null && old('gender') == 1 ? 'selected' : '' }}>Nam
                  </option>
                  <option value="0" {{ old('gender') !== null && old('gender') == 0 ? 'selected' : '' }}>Nữ
                  </option>
                </select>
                @error('gender')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-4 personal-item">
                <label>Số CCCD <span class="requireStar">*</span></label>
                <input type="number" name="citizen_identification" placeholder="Số CCCD"
                  value="{{ old('citizen_identification') }}">
                @error('citizen_identification')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>

            <div class="row personal-row">
              <div class="col-4 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 }}" {{ $province->id == old('province_id') ? 'selected' : '' }}>
                      {{ $province->full_name }}
                    </option>
                  @endforeach
                </select>
                @error('province_id')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-4 personal-item">
                <label>Quận/ Huyện <span class="requireStar">*</span></label>
                <select name="district_id" id="districtSelect">
                  <option value="{{ old('district_id') }}" selected>Choose</option>
                </select>
                @error('district_id')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-4 personal-item">
                <label>Phường/ Xã <span class="requireStar">*</span></label>
                <select name="ward_id" id="wardSelect">
                  <option value="{{ old('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')
        </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="my-1">
              <input type="hidden" name="teach_by_en" id="teach_by_en" value="0">
              <div class="me-5 mb-1">
                <input type="radio" name="radio_teach" id="teachByEnYes" onclick="handleRadioClick(this)">
                <label for="teachByEnYes" class="fw-500 text-neutral-04 ms-2">Có khả năng</label>
              </div>
              <div>
                <input type="radio" name="radio_teach" id="teachByEnNo" onclick="handleRadioClick(this)" checked>
                <label for="teachByEnNo" class="fw-500 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 my-1">
              <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">
                <label class="fw-500 text-neutral-04 ms-2">Gia sư Online</label>
              </div>
              <div>
                <input type="checkbox" class="teachTutorType" value="1" name="type_tutor_offline">
                <label class="fw-500 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="{{ old('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="{{ old('work_place') }}">
                @error('work_place')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>

            <div class="row personal-row">
              <div class="col-6 personal-item">
                <label for="upload-file-input">Bằng cấp <span class="requireStar">*</span></label>
                <div>
                  <label for="upload-file-input" class="custom-file-input">Tải file</label>
                  <span class="upload-file-name ms-3"></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 }}" {{ $bank->id == old('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="{{ old('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="{{ old('account_name') }}">
                @error('account_name')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>
          </div>
        </div>

        <div class="d-flex justify-content-center  align-items-center submit-btn-register">
          <a href="{{ route('landingpage') }}" class="btn btn-primary mx-3" style="padding: 12px 44px;">
            Back
          </a>
          <button class="btn-fill-primary">
            Xác Nhận
          </button>
        </div>
      </form>
    </div>
  </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("teach_by_en");
      // 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