@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <style>
        .password-reset{
            padding-left: 30px !important;
            padding-right:30px !important;
        }
        @media(max-width: 600px)
        {
            .password-reset{
                padding-left: 15px !important;
                padding-right:15px !important;
            }
        }
    </style>
@endsection
@extends("layouts.app")
@section('main-content')
    @include('layouts.sub_banner',['title'=>'Reset Pin',
    'image'=>asset('assets/img/reset_password.jpg')])
    <!-- Content ================================================== -->
    <div class="container margin_60_35">
        <div class="row" id="order-summary">
            <div class="col-md-3"></div>
            <div class="col-md-6">

                <form action="" id="reset-form" method="POST">
                    @if(session('error'))
                        <div class="alert alert-danger msg" role="alert">
                            {{session('error')}}
                        </div>
                    @endif
                    <div class="box_style_2" id="order_process">
                        <h2 style="background: #332C20;;" class="inner2">Reset Transaction Pin</h2>
                        <p style="text-align: center">Enter your new pin
                       </p><br>

                       <div class="alert alert-success msg" id="msg" role="alert">
                            {{$response->message}}
                        </div>

                        <div class="password-reset">

                            <input type="password" class="form-control form-white" style="margin-bottom:10px;"
                            placeholder="Enter new pin" id="pin" required name="pin">

                            <input type="hidden" id="token" name="token"
                            value="{{$response->reset_pin->Token}}">
                            <input type="password" class="form-control form-white" style="margin-bottom:10px;"
                            placeholder="Confirm your new pin"
                            id="pin_confirmation" required name="pin_confirmation">
                            <div class="alert success-msg alert-success"  role="alert">
                                <p><b>Pin changed successfully</b></p>
                            </div>
                            <div class="alert alert-danger error-msg" id="error-msg" role="alert">
                                <b>Invalid token</b>
                            </div>
                            <button type="submit" id="submit-btn" class="btn btn-submit"
                            style="background: #AE996E;margin-top:0;">Change Pin</button>
                        </div>

                    </div><!-- End box_style_1 -->
                </form>
            </div><!-- End col-md-6 -->

            <div class="col-md-3"></div>
        </div><!-- End row -->
    </div><!-- End container -->
    <!-- End Content =============================================== -->
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script type="text/javascript">
        $('.form-white').keyup(function(){
            $('.error-msg').fadeOut();
            $('.msg').fadeOut();
        })
        $('#reset-form').submit(function(e){
            e.preventDefault();
            let pin = $('#pin').val();
            let pin_confirmation = $('#pin_confirmation').val();
            let token = $('#token').val();

            if(pin !="",pin_confirmation!="",token!="")
            {
                if(pin != pin_confirmation)
                {
                    $('#error-msg').html("Your pins do not match")
                    $('#error-msg').fadeIn(500)
                }else{
                    $('#submit-btn').attr("disabled",true);
                    $('#submit-btn').html("Changing...");
                    $.ajax({
                        type:'POST',
                        url:"{{route('pin.update')}}",
                        data:{pin,pin_confirmation,token},
                        success:function(data){
                            if(data.status === 1)
                            {
                                $('#submit-btn').attr("disabled",false);
                                $('#submit-btn').html("Change Pin");
                                toastr.success("Your pin has been reset successfully", 'Success Alert', {timeOut: 5000})
                                window.location.href = "{{route('profile')}}";
                            }else
                            {
                                $('#submit-btn').attr("disabled",false);
                                $('#submit-btn').html("Change Pin");
                                toastr.error(data.message, 'Error Alert', {timeOut: 5000})
                            }
                        }
                    })
                }

            }else{
                $('#error-msg').html("All the fields are required")
                $('#error-msg').fadeIn(500)
            }

        })
    </script>
@endsection