@extends('layouts.main', ['title' => 'Giáo Viên Online | Đổi mật khẩu', 'isTeacher' => true])

@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">
            Đổi mật khẩu
          </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="teacher-action container-fluid mt-3 px-4">
              <div class="teacher-action-header px-2">
                <h4 class="teacher-action-title fw-semibold mb-3">Đổi mật khẩu</h4>
              </div>
              <div class="teacher-action-content row px-2 pt-3">
                <form action="{{ route('teachers.updateChangePass') }}" method="POST" class="col-xl-6">
                  @csrf
                  @if (session()->has('error'))
                    <div class="alert alert-danger alert-dismissible">
                      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                      <h5><i class="icon fas fa-ban"></i>Đổi mật khẩu không thành công</h5>
                      <p>{{ session('error') }}</p>
                    </div>
                  @endif
                  @if (session()->has('message'))
                    <div class="alert alert-success alert-dismissible">
                      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                      <h5><i class="icon fas fa-check"></i>Đổi mật khẩu thành công</h5>
                    </div>
                  @endif
                  <div class="form-group d-flex flex-column mb-4">
                    <label for="password" class="text-blue fw-500">Mật khẩu cũ</label>
                    <input id="password" type="password" name="password"
                      class="form-control @error('password') is-invalid @enderror">
                    @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">Mật khẩu mới</label>
                    <input id="npassword" type="password" name="npassword"
                      class="form-control @error('npassword') is-invalid @enderror">
                    @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">Xác nhận mật khẩu</label>
                    <input id="cpassword" type="password" name="cpassword"
                      class="form-control @error('cpassword') is-invalid @enderror">
                    @error('cpassword')
                      <span class="error invalid-feedback">{{ $message }}</span>
                    @enderror
                  </div>
                  <div class="pt-2">
                    <button class="prevent-submit btn btn-fill-primary fw-600 text-capitalize fs-18 border-0"
                      type="submit">đổi mật
                      khẩu</button>
                  </div>
                </form>
              </div>
            </section>
          </div>
        </div>
      </div>
    </section>
  </section>
@endsection

@push('script')
@endpush