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

@php
  $breadcrumbs = [
      ['active' => false, 'title' => 'Trang Chủ', 'href' => '#'],
      ['active' => true, 'title' => 'Đổi mật khẩu'],
  ];
@endphp

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

@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-group">
      <div class="student-container">
        <div class="row mx-0">
          <div class="col-xl-3 profile-card-group px-0 py-3">
            @include('students.profile_card')
          </div>
          <div class="col-xl-9 pt-3">
            <section class="student-action container-fluid mt-3 px-4">
              @include('custom_errors.session-errors')
              <div class="student-action-header px-2">
                <h4 class="student-action-title text-uppercase fs-4 fw-bold mb-3">Đổi mật khẩu</h4>
              </div>
              <div class="student-change-pass px-2 pt-3">
                <form action="{{ route('students.changePassword') }}" method="POST">
                  @csrf
                  <div class="form-group d-flex flex-column mb-4">
                    <label for="password" class="text-blue fw-500 text-capitalize">Mật khẩu cũ</label>
                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror"
                      name="password">
                    @error('password')
                      <span class="error invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>
                  <div class="form-group d-flex flex-column mb-4">
                    <label for="npassword" class="text-blue fw-500 text-capitalize">Mật khẩu mới</label>
                    <input id="npassword" type="password" class="form-control @error('npassword') is-invalid @enderror"
                      name="npassword">
                    @error('npassword')
                      <span class="error invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>
                  <div class="form-group d-flex flex-column mb-4">
                    <label for="cpassword" class="text-blue fw-500 text-capitalize">Xác nhận mật khẩu</label>
                    <input id="cpassword" type="password" class="form-control @error('cpassword') is-invalid @enderror"
                      name="cpassword">
                    @error('cpassword')
                      <span class="error invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>
                  <div class="d-flex justify-content-center align-items-center">
                    <button class="prevent-submit btn btn-fill-primary fw-500 text-capitalize" type="submit">
                      <span>
                        Đổi mật khẩu
                      </span>
                    </button>
                  </div>
                </form>
              </div>
            </section>
          </div>
        </div>
      </div>
    </section>
  </section>
@endsection

@push('script')
  @vite(['resources/js/students.js'])
@endpush