@extends('layout.auth_layout', ['title' => 'Giáo viên online | Điền thông tin'])

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

@section('content')
  <section class="register-infor container 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="{{ route('teachers.registInfor') }}" 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" class="@error('fullname') invalid @enderror"
                  value="{{ auth()->user()->fullname }}" required="required">
                @error('fullname')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-4 personal-item">
                <label>Email<span class="requireStar"> *</span></label>
                <input type="text" name="email" placeholder="Email" class="@error('email') invalid @enderror"
                  value="{{ auth()->user()->email }}" {{ auth()->user()->email ? 'readonly' : '' }} required="required">
                @error('email')
                  <span class="error_text">{{ $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="0987654321" class="@error('phone') invalid @enderror"
                  value="{{ old('phone') }}">
                @error('phone')
                  <span class="error_text">{{ $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"
                  class="@error('date_birth') invalid @enderror" value="{{ old('date_birth') }}">
              </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>
              </div>
              <div class="col-4 personal-item">
                <label>Số CCCD</label>
                <input type="number" name="citizen_identification" placeholder="Số CCCD"
                  class="@error('citizen_identification') invalid @enderror" value="{{ old('citizen_identification') }}">
                @error('citizen_identification')
                  <span class="error_text">{{ $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="" 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="" selected>Choose</option>
                </select>
                @error('ward_id')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </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-4 personal-item">
                <label>Hiện là</label>
                <input type="text" name="current_job" placeholder="Bạn đang làm gì?"
                  class="@error('current_job') invalid @enderror" value="{{ old('current_job') }}">
                @error('current_job')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-4 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?"
                  class="@error('work_place') invalid @enderror" value="{{ old('work_place') }}">
                @error('work_place')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
            </div>

            <div class="row personal-row">
              <div class="col-4 personal-item">
                <label for="upload-file-input">Bằng cấp</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"
                  onchange="updateFileName()">
                <span class="fs-12 text-neutral-04">file: pdf, doc</span>
                @error('certificate')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
            </div>
          </div>
        </div>
        <div class="personal-banking">
          <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-md-4 personal-item">
                <label>Ngân Hàng</label>
                <select name="bank_id" class="@error('bank_id') invalid @enderror">
                  <option value="">Chọn ngân hàng</option>
                  @if (isset($banks))
                    @foreach ($banks as $bank)
                      <option class="bank-select" value="{{ $bank->id }}"
                        {{ old('bank_id') == $bank->id ? 'selected' : '' }}>
                        {{ $bank->short_name }}
                      </option>
                    @endforeach
                  @endif
                </select>
                @error('bank_id')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-md-4 personal-item">
                <label>Số Tài Khoản</label>
                <input type="number" name="bank_account_number"
                  class="@error('bank_account_number') invalid @enderror" value="{{ old('bank_account_number') }}">
                @error('bank_account_number')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
              <div class="col-md-4 personal-item">
                <label>Tên Tài Khoản</label>
                <input type="text" name="bank_account_name" class="@error('bank_account_name') invalid @enderror"
                  value="{{ old('bank_account_name') }}">
                @error('bank_account_name')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
            </div>
          </div>
        </div>

        <div class="d-flex justify-content-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/register-information.js')
  <script>
    function updateFileName() {
      const fileInput = document.getElementById("upload-file-input");
      const fileNameSpan = document.querySelector(".upload-file-name");

      if (fileInput.files.length > 0) {
        fileNameSpan.textContent = fileInput.files[0].name;
      } else {
        fileNameSpan.textContent = "";
      }
    }
  </script>
@endpush