@extends('layouts.main', ['title' => 'Giáo Viên Online | Profile', 'isTeacher' => true])
@php
  $certificate = explode('/', $teacherData->certificate);
  $certificateName = end($certificate);
@endphp
@push('style')
  @vite('resources/css/teachers/regist_infor.css')
  @vite('resources/css/tutor.css')
@endpush
@section('content')
  <section class="teacher-wrap px-md-0 px-1">
    <div class="breadcrumb-main pb-2 pt-3">
      <nav aria-label="breadcrumb-container">
        <ol class="breadcrumb-group d-flex align-items-center gap-2">
          <li class="breadcrumb-item">
            <a href="{{ route('teachers.dashboard') }}"
              class="breadcrumb-link text-capitalize text-decoration-none text-neutral-06 fs-14 ms-4">Dashboard</a>
          </li>
          <span class="breadcrumb-separation fw-light">/</span>
          <li class="breadcrumb-item active fw-semibold text-capitalize text-decoration-none text-neutral-05 fs-14"
            aria-current="page">
            Hồ sơ cá nhân
          </li>
        </ol>
      </nav>
    </div>
    <section class="teacher-group bg-white">
      <div class="teacher-container">
        <div class="row mx-4 bg-white px-3">
          <div class="col-xl-3 profile-card-group px-0">
            @include('teachers.profile_card')
          </div>
          <div class="col-xl-9 pt-3">
            <section class="register-infor container pt-5">
              <div>
                <form action="{{ route('teachers.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>
                    @include('custom_errors.session-errors')
                    <div>
                      <div class="row personal-row">
                        <div class="col-md-6 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-md-6 personal-item">
                          <label>Ngày sinh</label>
                          <input type="date" name="date_birth" placeholder="01/01/1991"
                            class="@error('date_birth') invalid @enderror" value="{{ $teacherData->date_birth }}">
                          @error('date_birth')
                            <span class="error_text">{{ $message }}</span>
                          @enderror
                        </div>
                      </div>

                      <div class="row personal-row">
                        <div class="col-6 personal-item">
                          <label>Giới tính</label>
                          <select name="gender">
                            <option value="" selected>Choose</option>
                            <option value="1" {{ $teacherData->gender === 1 ? 'selected' : '' }}>
                              Nam
                            </option>
                            <option value="0" {{ $teacherData->gender === 0 ? 'selected' : '' }}>
                              Nữ
                            </option>
                          </select>
                          @error('gender')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-md-6 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="{{ $teacherData->phone }}">
                          @error('phone')
                            <span class="error_text">{{ $message }}</span>
                          @enderror
                        </div>
                      </div>

                      <div class="row personal-row">
                        <div class="col-md-6 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') ?? $teacherData->citizen_identification }}">
                          @error('citizen_identification')
                            <span class="error_text">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-6 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 }}"
                                {{ $teacherData->province_id == $province->id ? 'selected' : '' }}>
                                {{ $province->name }}
                              </option>
                            @endforeach
                          </select>
                          @error('province_id')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                      </div>

                      <div class="row personal-row">
                        <div class="col-6 personal-item">
                          <label>Quận/ Huyện <span class="requireStar"> *</span></label>
                          <select name="district_id" id="districtSelect">
                            <option value="{{ $teacherData->district_id }}" selected>Choose</option>
                          </select>
                          @error('district_id')
                            <span class="text-danger">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-6 personal-item">
                          <label>Phường/ Xã <span class="requireStar"> *</span></label>
                          <select name="ward_id" id="wardSelect">
                            <option value="{{ $teacherData->ward_id }}" 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-md-6 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') ?? $teacherData->current_job }}">
                          @error('current_job')
                            <span class="error_text">{{ $message }}</span>
                          @enderror
                        </div>
                        <div class="col-md-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?"
                            class="@error('work_place') invalid @enderror"
                            value="{{ old('work_place') ?? $teacherData->work_place }}">
                          @error('work_place')
                            <span class="error_text">{{ $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"
                            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 value="{{ $bank->id }}"
                                  {{ $teacherData->bank_id == $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') ?? $teacherData->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') ?? $teacherData->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">
                    <button class="btn-fill-primary">
                      Xác Nhận
                    </button>
                  </div>
                </form>
              </div>
            </section>
          </div>
        </div>
      </div>
    </section>
    @include('modals.crop-image')
  </section>
@endsection

@push('script')
  @vite('resources/js/register-information.js')
  @vite('resources/js/register-information-edit-profile.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 = "";
      }
    }

    function validateInputFields() {
      const personalInfoInput = document.querySelector('.personal-infor input[type="text"]');
      const personalSkillInput = document.querySelector('.personal-skill input[type="text"]');
      const personalBankingInput = document.querySelector('.personal-banking input[type="number"]');

      const personalInfoValue = personalInfoInput.value.trim();
      const personalSkillValue = personalSkillInput.value.trim();
      const personalBankingValue = personalBankingInput.value.trim();

      if ((personalInfoValue !== "" || personalSkillValue !== "" || personalBankingValue !== "") &&
        (personalInfoValue === "" || personalSkillValue === "" || personalBankingValue === "")) {
        // Validation failed: at least one field has a value, but not all of them
        alert("If you fill in any of the three fields, you must fill in all three fields.");
        return false; // Or prevent form submission
      }
      // Validation passed: either all fields are empty, or all fields have values
      return true; // Or allow form submission
    }

    // Example usage:
    const form = document.querySelector('form');
    form.addEventListener('submit', (event) => {
      if (!validateInputFields()) {
        event.preventDefault(); // Prevent form submission if validation fails
      }
    });
  </script>
@endpush