@extends('layout.auth_layout', ['title' => 'Thông tin cá nhân học sinh'])

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

@section('content')
  <section class="student-information h-100 d-flex align-content-center py-4">
    <div class="student-information-wrap mx-auto bg-white">
      @include('custom_errors.session-errors')
      <div class="student-information-header d-flex flex-column mb-5">
        <h2 class="student-information-title text-red-main mb-3 text-center">Thông tin cá nhân</h2>
        <p class="student-information-description mb-0 text-center">Điền đầy đủ thông tin cá nhân tạo điều kiện thuận lợi
          cho SIEUHOC trong việc giao tiếp và hỗ trợ các bạn</p>
      </div>
      <div class="student-information-content">
        <form action="{{ route('students.storeRegister') }}" method="POST" enctype="multipart/form-data">
          @csrf
          <div class="input-item-wrap">
            <label for="fullname">Họ Tên đầy đủ <span class="requireStar"> *</span></label>
            <input type="text" name="fullname" id="fullname" class="w-100" placeholder="Nhập họ và tên đầy đủ"
              value="{{ auth()->user()->fullname }}">
            @error('fullname')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>
          <div class="input-item-wrap d-flex">
            <div class="col-6 pe-3">
              <div class="input-item-wrap">
                <label for="birthday">Ngày sinh</label>
                <input type="date" name="date_birth" id="birthday" class="w-100" placeholder="Chọn ngày sinh"
                  value="{{ old('date_birth') ?? auth()->user()->date_birth }}">
              </div>
            </div>
            <div class="col-6 ps-3">
              <div class="input-item-wrap">
                <label for="gender">Giới tính</label>
                <select name="gender" id="gender" class="w-100 bg-white">
                  <option value="" selected>Choose</option>
                  <option value="1" {{ old('gender') === '1' ? 'selected' : '' }}>Nam</option>
                  <option value="0" {{ old('gender') === '0' ? 'selected' : '' }}>Nữ</option>
                </select>
              </div>
            </div>
          </div>
          <div class="input-item-wrap d-flex">
            <div class="col-6 pe-3">
              <div class="input-item-wrap">
                <label for="phone">Số điện thoại</label>
                <input type="number" name="phone" id="phone" class="w-100" placeholder="Nhập số điện thoại"
                  value="{{ old('phone') ?? auth()->user()->phone }}">
                @error('phone')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>
            <div class="col-6 ps-3">
              <div class="input-item-wrap">
                <label for="email">Email <span class="requireStar"> *</span></label>
                <input type="text" name="email" id="email" class="w-100" placeholder="Nhập email"
                  value="{{ auth()->user()->email }}" {{ auth()->user()->email ? 'readonly' : '' }}>
                @error('email')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>
          </div>
          <div class="input-item-wrap d-flex">
            <div class="col-6 pe-3">
              <div class="input-item-wrap">
                <label for="province">Tỉnh/ Thành Phố <span class="requireStar">*</span></label>
                <select name="province_id" id="provinceSelect" class="w-100 bg-white">
                  <option value="" selected>Choose</option>
                  @foreach ($provinces as $province)
                    <option value="{{ $province->id }}" {{ old('province_id') == $province->id ? 'selected' : '' }}>
                      {{ $province->full_name }}
                    </option>
                  @endforeach
                </select>
                @error('province_id')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>
            <div class="col-6 ps-3">
              <div class="input-item-wrap">
                <label for="district">Quận Huyện<span class="requireStar"> *</span></label>
                <select name="district_id" id="districtSelect" class="w-100 bg-white">
                  <option value="" selected>Choose</option>
                </select>
                @error('district_id')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>
          </div>
          <div class="input-item-wrap d-flex">
            <div class="col-6 pe-3">
              <div class="input-item-wrap">
                <label>Phường/ Xã <span class="requireStar">*</span></label>
                <select name="ward_id" id="wardSelect" class="w-100 bg-white">
                  <option value="" selected>Choose</option>
                </select>
                @error('ward_id')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>
          </div>
          <div class="input-item-wrap d-flex">
            <div class="col-6 pe-3">
              <div class="input-item-wrap">
                <label for="school_name">Tên Trường</label>
                <input type="text" name="school_name" id="school_name" class="w-100" placeholder="Nhập tên trường">
              </div>
            </div>
            <div class="col-6 ps-3">
              <div class="input-item-wrap">
                <label for="grade">Lớp Học<span class="requireStar"> *</span></label>
                <select name="grade_id" id="gradeSelect" class="w-100 bg-white">
                  <option value="" selected>Choose</option>
                  @foreach ($grades as $grade)
                    <option value="{{ $grade->id }}" {{ old('grade_id') == $grade->id ? 'selected' : '' }}>
                      {{ $grade->name }}
                    </option>
                  @endforeach
                </select>
                @error('grade_id')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>

          </div>
          <div class="input-item-wrap d-flex">
            <div class="col-4 pe-3">
              <div class="input-item-wrap">
                <label for="parent_fullName">Họ Tên Phụ Huynh</label>
                <input type="text" name="parent_fullName" id="parent_fullName" class="w-100"
                  placeholder="Nhập tên" value="{{ old('parent_fullName') }}">
              </div>
            </div>
            <div class="col-4">
              <div class="input-item-wrap">
                <label for="parent_phone">Số điện thoại pH</label>
                <input type="number" name="parent_phone" id="parent_phone" class="w-100"
                  placeholder="Nhập số điện thoại" value="{{ old('parent_phone') }}">
                @error('parent_phone')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>
            <div class="col-4 ps-3">
              <div class="input-item-wrap">
                <label for="parent_fullName">Email pH</label>
                <input type="email" name="parent_email" id="parent_email" class="w-100" placeholder="Nhập Email"
                  value="{{ old('parent_email') }}">
                @error('parent_email')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>
            </div>
          </div>
          <button type="submit" class="btn-fill-primary w-100 btn-save-infomation border-0">
            Xác nhận
          </button>
        </form>
      </div>
    </div>
  </section>
@endsection

@push('script')
  @vite('resources/js/register-information.js')
@endpush