@extends('student.layouts.app')
@section('titlePage', 'Update Password')
@section('content')

<style>
    .form-group .eye{
        position: absolute;
        right:5px;
    }
</style>

<div class="container-fluid flex-grow-1 container-p-y">
    <div class="breadcrumb-header justify-content-between mt-1">
    <h4 class="breadcrumb-item active font-weight-bold">Change <span class="text-secondary">Password</span></h4>
        <div class="justify-content-center">
            <ol class="breadcrumb breadcrumb-style3">
                <li class="breadcrumb-item tx-15"><a href="{{ _route('student.dashboard') }}"><i class="feather icon-home"></i></a></li>
                <li class="breadcrumb-item active">Back</a></li>
            </ol>
        </div>
    </div>
    <!-- <h4 class="font-weight-bold py-3 mb-0 text-primary">
        {{-- <span class="float-right">
            <a href=""><i class="fas fa-arrow-left"></i> BACK</a>
        </span> --}}
        Change Password
    </h4> -->
    <hr class="title-bottom">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"></h5>
                </div>
				<div class="card-body">
                    @include('common.alert')
					<form method="POST" class="" action="{{ _route('student.update-password') }}">
						@csrf
                        <div class="col-md-6">
                            <div class="form-group"> 
                                <label for="">Old Password</label>
                                <div class="d-flex align-items-center" style="position:relative">
                                    <input type="password" class="form-control" name="old_password" placeholder="Old Password" required>
                                    <i class="eye shows-password fa fa-fw fa-eye-slash"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="">New Password</label>
                                <div class="d-flex align-items-center" style="position:relative">
                                    <input type="password" class="form-control" name="password" placeholder="New Password" required>
                                    <i class="eye shows-password fa fa-fw fa-eye-slash"></i>
                                </div>
                            </div>
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <div class="form-group">
                                <label for="">Confirm Password</label>
                                <div class="d-flex align-items-center" style="position:relative">
                                    <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required>
                                    <i class="eye shows-password fa fa-fw fa-eye-slash"></i>
                                </div>
                            </div>
                            @error('password_confirmation')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <button type="submit" class="btn btn-primary mt-2">Change Password</button>
                        </div>
					</form>
				</div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script>

$(".show-password").click(function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    input = $(this).parent().find("input");
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }
});
$(".shows-password").click(function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    input = $(this).parent().find("input");
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }
});
</script>
@endpush