@extends('layouts.app')

@section('title', 'Change PIN')
@section('breadcrumb', 'Manage Profile')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}


    <a class="kt-subheader__breadcrumbs-link">
        Change PIN
    </a>

@endsection
@section('content')
    <div class="kt-portlet">

        <div class="kt-portlet__body">
            @include('layouts.notification')
           {{-- begin: Search form --}}
            <div class="col-md-6 offset-md-3">
                <form action="{{route('profile.storereset')}}" id="createBrand" method="POST">
                    @csrf
                    <div class="form-group">
                        <label>Current PIN</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-key"></i></span></div>
                            <input id="current_pin" type="password" placeholder="Current PIN" class="form-control m-input" name="current_pin"  required autocomplete="new-password">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>New PIN</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-key"></i></span></div>
                            <input id="pin" type="password" placeholder="New PIN" class="form-control m-input" name="new_pin"  required autocomplete="new-password">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Confirm New PIN</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-key"></i></span></div>
                            <input id="pin_confirmation" type="password" placeholder="Confirm New PIN" class="form-control m-input" name="pin_confirmation"  required autocomplete="new-password">
                        </div>
                    </div>

                
                <div class="pull-right">
                    <button class="btn btn-secondary reset" type="reset">Reset</button>
                    <button class="btn btn-warning  text-black" type="submit" id="create"><i class="fa fa-edit"></i> Change</button>
                </div>
            </form>
            </div>
           {{-- end: Search form --}}

        </div>
    </div>
@endsection

@section('custom-script')
<script>
    $(document).ready(function(){
        $('.js-example-basic-single').select2();
    })

    $(".btn-back").on("click", function(){
        window.history.back();
    });

    // $('#create').click(function (event) {
    //     event.preventDefault();
    //     $('#loading').show();
    //     var form = $('#createBrand'),
    //         url = form.attr('action'),
    //         method = 'POST';

    //     form.find('.help-block').remove();
    //     form.find('.form-group input').removeClass('is-invalid');

    //     $.ajax({
    //         url : url,
    //         method: method,
    //         data : form.serialize(),
    //         success: function (response) {
    //             $('#loading').hide();
    //             // console.log(response);
    //             /*if (response.status == "fail") {
    //                 swal.fire({
    //                     type: 'error',
    //                     title: 'Oops...',
    //                     text: 'PIN Not Match!'
    //                 });
    //             }*/

    //             if (response.status == "success") {
    //                 swal.fire({
    //                     type : 'success',
    //                     title : 'Success!',
    //                     timer: 5000,
    //                     text : 'Data has been saved!'
    //                 }).then((result) => {
    //                     if (result.value) {
    //                         $(location).attr('href', "{{route('admin.franchisee.index')}}");
    //                     }
    //                         $(location).attr('href', "{{route('admin.franchisee.index')}}");
    //                 });
    //             }
    //             else if (response.status == "fail") {
    //                 $('.form-group input').removeClass('is-invalid');
    //                 $.each(response.messages, function (key, value) {
    //                     $('#' + key)
    //                         .closest('.form-group input')
    //                         .addClass('is-invalid')
    //                         .append('<span class="help-block"><strong>' + value + '</strong></span>');
    //                     $('#' + key)
    //                         .closest('.form-group')
    //                         .append('<span class="help-block"><strong>' + value + '</strong></span>');
    //                 });
    //             }
    //         },
    //         error : function (xhr) {
    //             $('#loading').hide();
    //             // console.log(xhr);
    //             swal.fire({
    //                 type : 'error',
    //                 title : 'Failed!',
    //                 text : 'An error Occured!'
    //             });

    //         }
    //     })
    // });

    $(document).on('click', '.reset', function(){
        $('.m-input').val('');
        })

    $('.m-input').on('keyup input change', function(e) {
            var value = $(this).val();
            value = value.replace(/[^0-9]/g, '');
            // check: accept number only
            var check = /^\d+$/.test(value)
            if (!check || value.length > 6) {
                e.preventDefault();
                value = value.substring(0,6);
            }
            $(this).val(value);
        });

    window.onload = function() {
    const myInput = document.querySelector('.m-input');
    myInput.onpaste = function(e) {
    e.preventDefault();
        }
    const inputConfirm = document.querySelector('.m-input');
    inputConfirm.onpaste = function(f){
        f.preventDefault();
    }
    }
</script>
@endsection