@extends('layouts.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')
        console.log(visibilityToggle);
        let passwordField = document.getElementById('passwordField')
        visibilityToggle.addEventListener('click', () => {
            console.log(passwordField);
            if (passwordField.getAttribute('type') == 'password') {
                passwordField.setAttribute('type', 'text')
            } else {
                passwordField.setAttribute('type', 'password')
            }
        })
    </script>
@endpush