@extends("estudiante.layout.layout")
@section("styles")
    @php
        $titulo = "Cambiar contraseña";
        $modulo = "Perfil";
        $vista="Cambiar contraseña";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>
@endsection

@section("contenido")
    <div class="row g-5">
        @if ($errors->any())
            <div class="alert alert-danger">
                <h4>El registro tiene los siguientes errores.</h4>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ session('success') }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <a class="btn btn-secondary" href="{{route("estudiante::logout")}}">Cerrar sesion ahora e iniciar con mi nueva contraseña</a>

            @endif

        <form action="{{route("estudiante::actualizarPassword")}}" method="post" id="frm_cambio_pass" >
            @csrf
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label required" for="password">Contraseña actual</label>
                    <input class="form-control form-control-lg" type="password" placeholder="Contraseña" name="current_password" id="current_password" autocomplete="off" required />
                </div>

                <div class="col-12 mt-20">
                    <div class="text-muted">Combina 8 o más caracteres entre letras, números y símbolos.</div>
                </div>
            </div>

            <div class="fv-row mb-4" data-kt-password-meter="true">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-1">
                            <div class="position-relative">
                                <label class="form-label required" for="password">Contraseña</label>
                                <input class="form-control form-control-lg" type="password" placeholder="Contraseña" name="new_password" id="new_password" autocomplete="off" />
                                <span class="btn btn-sm btn-icon position-absolute translate-middle top-68 end-0 me-n2" data-kt-password-meter-control="visibility">
												<i class="ki-outline ki-eye-slash fs-2"></i>
												<i class="ki-outline ki-eye fs-2 d-none"></i>
											</span>
                            </div>
                            <div class="d-flex align-items-center" data-kt-password-meter-control="highlight">
                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label required" for="password_confirmation">Repita la contraseña</label>
                        <input placeholder="Repita la contraseña" name="new_password_confirmation" id="new_password_confirmation" type="password" autocomplete="off" class="form-control form-control-lg" />
                    </div>
                    <div class="col-12">
                        <div class="text-muted">Combina 8 o más caracteres entre letras, números y símbolos.</div>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <button id="btnSubmit" type="submit" class="btn btn-sm btn-success">
                    Cambiar contraseña ahora
                </button>
            </div>

        </form>
    </div>
@endsection

@section("scripts")
    @vite(['resources/js/estudiante/auth/cambio_pass.js'])


@endsection