@extends('layouts.student-dashboard-app')

@section('title')
    Password Change
@endsection

@push('custom-css')
    <style>
        .invalid-feedback {
            display: block !important;
        }
    </style>
@endpush

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <div class=" pull-left">
                    </div>
                    <div style="margin-bottom: 0 !important;" class="page-title">Change Password</div>
                </div>
            </div>
            @if (session('success'))
                <div class="alert alert-success col-md-6 col-sm-6 alert-dismissible show" role="alert">
                    {{ session('success') }}<a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @elseif(session('error'))
                <div class="alert alert-danger col-md-6 col-sm-6 alert-dismissible show" role="alert">
                    {{ session('error') }}<a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @endif
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <div class="card card-box">
                        <div class="card-body " id="bar-parent">
                            <form action="{{ route('password-change') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="Current Password" class="col-form-label">Current Password</label>
                                    <input type="password" name="current_password" class="form-control" id="currentPassword" style="border-color: @error('current_password') red @enderror" >
                                    @error('current_password')
                                       <div class="invalid-feedback">
                                        {{ $message }}</div> 
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="New Password" class="col-form-label">New Password</label>
                                    <div class="input-group">
                                        <input type="password" name="new_password" id="passwordField" class="form-control" style="border-color: @error('new_password') red @enderror" >
                                        <span style="border-color: @error('new_password') red @enderror; cursor: pointer !important;" class="input-group-addon" id="togglePasswordVisibility"
                                            ><i class="fa fa-eye"></i></span>
                                    </div>
                                    @error('new_password')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('custom-js')
<script>
    let visibilityToggle = document.getElementById('togglePasswordVisibility')
    let passwordField = document.getElementById('passwordField')
    visibilityToggle.addEventListener('click', ()=>{
        if(passwordField.getAttribute('type') == 'password'){
            passwordField.setAttribute('type', 'text')
        }else{
            passwordField.setAttribute('type', 'password')
        }
    })
</script>
@endpush