@extends('User.layout')

@section('content')


<h4>Reset Pin</h4>

<div class="row justify-content-center">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <form id="resetPinForm" method="POST" action="{{ route('user.reset_pin_form') }}">
                    @csrf
                    <div class="mb-6 form-password-toggle fv-plugins-icon-container">
                        <div class="input-group input-group-merge has-validation">
                            <span class="input-group-text">
                                <span class="lock-icon menu-icon icon-base ti tabler-lock me-2"></span>
                            </span>

                            <input type="password" id="password" class="form-control p-3" name="oldpin"
                                placeholder="Current Pin" aria-describedby="password" value="{{ old('oldpin') }}" required>
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>
                        </div>
                        @error('oldpin')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mb-6 form-password-toggle fv-plugins-icon-container">
                        <div class="input-group input-group-merge has-validation">
                            <span class="input-group-text">
                                <span class="lock-icon menu-icon icon-base ti tabler-lock me-2"></span>
                            </span>
                            <input type="password" id="password" class="form-control p-3" name="newpin"
                                placeholder="New Pin" aria-describedby="password" value="{{ old('newpin') }}" required>
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>
                        </div>
                        @error('newpin')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mb-6 form-password-toggle fv-plugins-icon-container">
                        <div class="input-group input-group-merge has-validation">
                            <span class="input-group-text">
                                <span class="lock-icon menu-icon icon-base ti tabler-lock me-2"></span>
                            </span>

                            <input type="password" id="password" class="form-control p-3" name="confirmpin"
                                placeholder="Confirm Pin" aria-describedby="password" value="{{ old('confirmpin') }}" required>
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>
                        @error('confirmpin')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <button type="button" id="submit_btn"
                        class="btn btn-primary d-grid w-100 waves-effect waves-light mt-6">Reset Pin</button>
                </form>
            </div>

        </div>


    </div>
</div>
<script>
    document.getElementById('submit_btn').addEventListener('click', function() {
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('resetPinForm').submit();
    });
</script>
@endsection