@extends('layouts.main')

    @push('styles')
    
    @endpush()
    
    

    @section('content')
    <div class="row">
      <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="card-block">

                    <div class="col-md-2"></div>
                    
                    <div class="col-md-8">
                        <div id="error-alert" class="alert alert-danger collapse">
                            {{__('strings.empty_values')}}
                        </div>
                        
                        <form id="card-form" class="form" action="#" method="post">
                        {{ csrf_field() }}
                        
                        <div class="card-wrapper"></div>
                        
                        
                        <div class="form-body">                           
                            <div class="form-group  col-md-12">
                                <hr>
                                <div class="input-group">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="far fa-credit-card"></i></span>
                                    </div>
                                    <input placeholder="Card number" type="tel" name="number" id="number" class="form-control" required="required">
                                </div>
                            </div>
                            <div class="form-group  col-md-6">
                                <div class="input-group">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="far fa-user"></i></span>
                                    </div>
                                    <input type="text" class="form-control" name="first-name" id="first-name" placeholder="{{__('strings.name')}}" required="required">
                                </div>
                            </div>
                            <div class="form-group  col-md-6">
                                <div class="input-group">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="far fa-user"></i></span>
                                    </div>
                                    <input type="text" class="form-control" name="last-name" id="last-name" placeholder="{{__('strings.last_name')}}" required="required">
                                </div>
                            </div>
                            <div class="form-group  col-md-6">
                                <div class="input-group">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="far fa-calendar-minus"></i></span>
                                    </div>
                                    <input placeholder="MM/YY" type="tel" name="expiry" id="expiry" class="form-control" required="required">
                                </div>
                            </div>
                            <div class="form-group  col-md-6">
                                <div class="input-group">
                                    <div class="input-group-append">
                                        <span class="input-group-text">CVV</i></span>
                                    </div>
                                    <input placeholder="***" type="password" name="cvc" id="cvc" class="form-control" required="required">
                                </div>
                            </div>
                            
                            <div class="form-group  col-md-12">
                                <hr>
                                    <label for="email" class="form-control-label">Email</label>
                                    <input placeholder="email@example.com" type="text" name="email" id="email" class="form-control" required="required">
                            </div> 
                            <div class="form-group  col-md-12">
                                    <label for="street" class="form-control-label">{{__('strings.street')}}</label>
                                    <input placeholder="{{__('strings.street')}}" type="text" name="street" id="street" class="form-control">
                            </div> 
                            <div class="form-group  col-md-12">
                                    <label for="suburb" class="form-control-label">{{__('strings.suburb')}}</label>
                                    <input placeholder="{{__('strings.suburb')}}" type="text" name="suburb" id="suburb" class="form-control">
                            </div>
                            <div class="form-group  col-md-12">
                                    <label for="city" class="form-control-label">{{__('strings.city')}}</label>
                                    <input placeholder="{{__('strings.city')}}" type="text" name="city" id="city" class="form-control">
                            </div>
                            <div class="form-group  col-md-12">
                                    <label for="state" class="form-control-label">{{__('strings.state')}}</label>
                                    <input placeholder="{{__('strings.state')}}" type="text" name="state" id="state" class="form-control">
                            </div>
                            <div class="form-group  col-md-12">
                                    <label for="postal_code" class="form-control-label">{{__('strings.postal_code')}}</label>
                                    <input placeholder="{{__('strings.postal_code')}}" type="text" name="postal_code" id="postal_code" class="form-control">
                            </div>

                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-block btn-primary" onclick="saveCard()">
                                {{ __('strings.save') }}
                            </button>
                        </div>

                    </form>
                    </div>
                    
                    <div class="col-md-2"></div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src='{{asset('card/card.js')}}'></script>
<script src='https://js.srpago.com/v1/srpago.min.js'></script>
<script src='https://js.srpago.com/v1/srpago.encryption.min.js'></script>

<script>
var card;
$( document ).ready(function() {
    // sandbox mode
    SrPago.setLiveMode(true);
    SrPago.setPublishableKey("pk_live_59e7add125324HLR4W");
    card = new Card({
            form: document.querySelector('#card-form'),
            container: '.card-wrapper',
            formSelectors: {
                nameInput: 'input[name="first-name"], input[name="last-name"]'
            }
        });
});

function saveCard() {
    var crdNumber = $("#number").val();
    crdNumber = crdNumber.replace(/\s/g,'');
    var crdName = $("#first-name").val() + " " + $("#last-name").val();
    var cvv = $("#cvc").val();
    var expiry = $("#expiry").val().replace(/\s/g,"").split("/");
    var expMonth = expiry[0];
    var expYear = expiry[1];
    var crdAlias = "•" + crdNumber.substr(crdNumber.length - 4);
    
    var crdType = "";
    if(card.cardType == 'visa' || card.cardType == 'visaelectron') {
        crdType = 'VISA';
    } else if(card.cardType == 'mastercard') {
        crdType = "MAST";
    } else if(card.cardType == 'amex') {
        crdType = "AMEX";
    } else {
        $.alert("{{__('strings.error_invalid_card')}}");
        window.scrollTo(0, 0);
        return;
    }
    
    var email = $("#email").val();
    var street = $("#street").val();
    var suburb = $("#suburb").val();
    var city = $("#city").val();
    var state = $("#state").val();
    var pCode = $("#postal_code").val();
    
    if(email == '') {
        $('#error-alert').show();
        setTimeout(function(){
            $('#error-alert').slideUp(500);
        }, 3000);
        window.scrollTo(0, 0);
        return;
    }
    
    
    // building SrPago card
    var srCard = {
        number: crdNumber,
        holder_name: crdName,
        cvv: cvv,
        exp_month: expMonth,
        exp_year: expYear
    };
    
    window.scrollTo(0, 0);
    $.showPreloader("{{__('strings.processing_request')}}");
    SrPago.token.create(srCard, function(result){
        console.log("card token" + result.token);
        var crdToken = result.token;
        
        
        
        var billing = {
            'billingEmailAddress': email,
            'billingFirstName-D': $("#first-name").val(),
            'billingMiddleName-D': '',
            'billingLastName-D': $("#last-name").val(),
            'billingAddress-D': street,
            'billingAddress2-D': suburb,
            'billingcity-D': city,
            'billingState-D': state,
            'billingPostalCode-D': pCode,
            'billingCountry-D': 'MX',
            'billingPhoneNumber-D': '{{Auth::user()->PHONE_NUMBER}}',
            'creditCardAuthorizedAmount-D': ''
        };
        
        var member = {
            memberLoggedIn: 'Si',
            memberId: '{{Auth::user()->ID_USER}}',
            membershipDate: '{{Auth::user()->CREATED_AT}}',
            memberFullName: '{{Auth::user()->NAME}}' + ' ' + '{{Auth::user()->LAST_NAME}}',
            memberFirstName: '{{Auth::user()->NAME}}',
            memberMiddleName: '',
            memberLastName: '{{Auth::user()->LAST_NAME}}',
            memberEmailAddress: '{{Auth::user()->EMAIL}}',
            memberAddressLine1: state,
            memberAddressLine2: suburb,
            memberCity: city,
            memberState: state,
            memberCountry: 'MX',
            memberPostalCode: pCode,
            membershipLevel: '1',
            membershipStatus: 'activo',
            latitude: '',
            longitude: '',
            memberPhone: '{{Auth::user()->PHONE_NUMBER}}'
        };
        
        var metadata = {
            billing
        };
        var payload = {
            full_name: crdName,
            email: email,
            token: "{{Auth::user()->SECURE_TOKEN}}",
            card_type: crdType,
            card_tok: crdToken,
            card_alias: crdAlias,
            metadata: {
                billing: billing,
                member: member
            }
        };
        postCard(payload);
        
    }, function(error){
        $.hidePreloader(); 
        if(error.responseJSON) {          
            $.alert(error.responseJSON.message);  
        } else {
            $.alert("{{__('strings.error_message')}}");            
        }
    });   
}

function postCard(payload) {
    $.post("{{Auth::user()->getREST()}}user/cards/add",payload , function(response) {
        $.hidePreloader(); 
        $.alert("{{__('strings.success_registration')}}", function(){            
            window.location.replace("{{route('payments')}}");
        });
    })
    .fail(function(error) {
        console.log(error);
        $.hidePreloader(); 
        if(error.responseJSON) {          
            $.alert(error.responseJSON.message);  
        } else {
            $.alert("{{__('strings.error_message')}}");            
        }
    });
}
</script>
@endpush