@extends('layout.app', ['title' => 'Học sinh | Trang cá nhân'])

@push('style')
  @vite(['resources/css/register.css', 'resources/css/students/student.css'])
@endpush

@php
  $breadcrumbs = [
      ['active' => false, 'title' => 'Trang Chủ', 'href' => '#'],
      ['active' => true, 'title' => 'Hồ Sơ Cá Nhân'],
  ];
@endphp

@section('content')
  <section class="student-wrap col-8 col-md-9 col-xl-10 flex-grow-1 ps-sm-2 px-0">
    <div class="breadcrumb-wrap">
      @include('students.breadcrumb', ['breadcrumbs' => $breadcrumbs])
    </div>
    <section class="student-profile">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xl-3 px-0">
            @include('students.profile_card')
          </div>
          <div class="col-xl-9">
            @include('custom_errors.session-errors')
            @if (isset($studentData))
              <div class="student-information-content p-4">
                <div class="student-action-header">
                  <h4 class="student-action-title fw-bold text-uppercase fs-4">Thông tin cá nhân</h4>
                </div>
                <form action="{{ route('students.updateProfile') }}" method="POST" enctype="multipart/form-data">
                  @method('PATCH')
                  @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="{{ $studentData->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>
                          @foreach ([\App\Enums\UserGender::MALE, \App\Enums\UserGender::FEMALE] as $gender)
                            <option value="{{ $gender->value }}"
                              {{ $studentData->gender === $gender->value ? 'selected' : '' }}>
                              {{ $gender->name() }}
                            </option>
                          @endforeach
                        </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="{{ $studentData->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 }}">
                        @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 }}"
                              {{ $studentData->province_id == $province->id ? 'selected' : '' }}>
                              {{ $province->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="{{ $studentData->district_id }}" 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="{{ $studentData->ward_id }}" 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" value="{{ $studentData->school_name }}">
                      </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 }}"
                              {{ $studentData->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="{{ $studentData->parent_name }}">
                      </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="{{ $studentData->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="{{ $studentData->parent_email }}">
                        @error('parent_email')
                          <span class="text-danger">{{ $message }}</span>
                        @enderror
                      </div>
                    </div>
                  </div>
                  <input type="hidden" name="student_id" value="{{ $studentData->id }}">
                  <input type="hidden" name="parent_id" value="{{ $studentData->parent_id }}">
                  <div class="d-flex justify-content-center mb-2">
                    <button class="btn-edit-profile fw-500 text-capitalize" type="submit">
                      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"
                        fill="none">
                        <path
                          d="M19.4998 20.0008H5.49981C5.23459 20.0008 4.98024 20.1062 4.7927 20.2937C4.60517 20.4813 4.49981 20.7356 4.49981 21.0008C4.49981 21.2661 4.60517 21.5204 4.7927 21.7079C4.98024 21.8955 5.23459 22.0008 5.49981 22.0008H19.4998C19.765 22.0008 20.0194 21.8955 20.2069 21.7079C20.3945 21.5204 20.4998 21.2661 20.4998 21.0008C20.4998 20.7356 20.3945 20.4813 20.2069 20.2937C20.0194 20.1062 19.765 20.0008 19.4998 20.0008ZM5.49981 18.0008H5.58981L9.75981 17.6208C10.2166 17.5753 10.6438 17.3741 10.9698 17.0508L19.9698 8.05083C20.3191 7.6818 20.5079 7.18934 20.4948 6.68137C20.4817 6.1734 20.2677 5.69134 19.8998 5.34083L17.1598 2.60083C16.8022 2.26493 16.3336 2.07219 15.8431 2.05929C15.3527 2.04638 14.8746 2.2142 14.4998 2.53083L5.49981 11.5308C5.17657 11.8568 4.97531 12.284 4.92981 12.7408L4.49981 16.9108C4.48634 17.0573 4.50534 17.2049 4.55547 17.3432C4.6056 17.4815 4.68561 17.607 4.78981 17.7108C4.88325 17.8035 4.99406 17.8768 5.1159 17.9266C5.23774 17.9764 5.3682 18.0016 5.49981 18.0008ZM15.7698 4.00083L18.4998 6.73083L16.4998 8.68083L13.8198 6.00083L15.7698 4.00083ZM6.86981 12.9108L12.4998 7.32083L15.1998 10.0208L9.59981 15.6208L6.59981 15.9008L6.86981 12.9108Z"
                          fill="#CC3A3D" />
                      </svg>
                      <span class="ms-1">
                        Sửa thông tin
                      </span>
                    </button>
                  </div>
                </form>
              </div>
            @endif
          </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')
@endpush