@extends('layouts.app')
@section('title', 'Recharge')

@section('content')
<style>
.nav-tabs-custom > .tab-content {
    background: #ffffff;
    padding: 1.25rem;
    border-radius: 0;
    min-height: 100px;
}  
@media (max-width: 576px) {
    .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .d-flex a {
        margin-top: 10px;
    }
}

  </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <section class="content">
            <div class="box">
            <div class="box-body">
                <div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
    <h4 class="box-title text-info mb-0">
        <i class="fa fa-edit me-15"></i> Add Payment Method
    </h4>
    <a href="{{ url('sms-ai-payment-method') }}" 
       type="button" 
       class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm">
        <i class="fa fa-eye"></i> Payment Method
    </a>
</div>

								<!-- <h4 class="box-title text-info mb-0"><i class="fa fa-edit me-15"></i> Add Payment Method</h4> 
                                <a href="{{ url('sms-ai-payment-method') }}" type="button" style="float:right" class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5"><i class="fa fa-eye"></i>Payment Method</a> -->

								<hr class="my-15">
                                <form id="stripeForm" class="form-horizontal" method="post">
                                @csrf
            <div class="row">
                        <div class="col-md-6">
                            <!-- <h4 class="box-title">Billing Info</h4> -->                           
                            <div class="box-body">
                        	<div class="row">
									<div class="col-lg-12 col-md-6 col-12">									                                       
                                            <div class="row">
                                                <div class="form-group col-sm-6">
                                                    <label class="form-label">Card Holder Name <span style="color:red;">*</span> </label>
                                                    <input type="text" maxlength="50" class="form-control"
                                                                name="name" value="" id="name"
                                                                placeholder="Card Holder Name">
                                                </div>
                                                <div class="form-group col-sm-6">
                                                    <label class="form-label">Card Number <span style="color:red;">*</span> </label>
                                                    <div class="controls">
                                                    <input type="text" class="form-control" id="creditcard"name="number">

                                                            <!-- <input type="text"  class="form-control"
                                                                name="number" value="" id=""
                                                                placeholder="Card Number"data-validation-containsnumber-regex="(\d)+" data-validation-containsnumber-message="No Characters Allowed, Only Numbers"> -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row ">
                                                <div class="form-group col-sm-4">
                                                    <label class="form-label">Ex. Month <span style="color:red;">*</span> </label>
                                                    <select id="exp_month" name="exp_month" class="form-select">
                                                        <option value="-">--</option>
                                                        @for($i=1;$i<=12;$i++)
                                                            <option value="{{sprintf("%02d", $i)}}">{{sprintf("%02d", $i)}}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                                <div class="form-group col-sm-4">
                                                    <label class="form-label">Ex. Year<span style="color:red;">*</span> </label>
                                                    <select id="exp_year" name="exp_year" class="form-select">
                                                        <option value="-">----</option>
                                                        @for($i=date("Y");$i<=date("Y")+20;$i++)
                                                            <option value="{{$i}}">{{sprintf("%02d", $i)}}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                                <div class="form-group col-sm-4">
                                                    <div class="form-group @error('cvc') has-error @enderror">
                                                        <label class="form-label">CVV<span style="color:red;">*</span> </label>
                                                        <div class="controls">
                                                                <input type="text" class="form-control" name="cvc" placeholder="CVV" required=""id="cvc"  minlength="3"maxlength="4"data-validation-containsnumber-regex="(\d)+" data-validation-containsnumber-message="No Characters Allowed, Only Numbers"> 
                                                        </div>
                                                    </div>
                                                </div>
    
                                            </div>
                                            <h3 class="box-title mt-10">General Info</h3>
										<h2><i class="fa fa-cc-visa text-info"></i>
											<i class="fa fa-cc-mastercard text-danger"></i>
											<i class="fa fa-cc-discover text-success"></i>
											<i class="fa fa-cc-amex text-warning"></i>
										</h2>						
									</div>
									<!-- <div class="col-lg-4 col-md-6 col-12">
										

									</div> -->
								</div>
                                                              
                            </div>                                       
                        </div>             
                    <div class="col-md-6">               
                        <!-- <h4 class="box-title">Payment Method </h4> -->
                        <div class="box-body">                                                                   
                        <div class="row">                           
                                                    <div class=" form-group col-sm-6">
                                                        <label class="form-label">Address<span style="color:red;">*</span> </label>
                                                        <input type="text" maxlength="100" class="form-control address_info" name="line1"
                                                            value=""
                                                            id="line1" placeholder="Address">
                                                        <span id="message"></span>
                                                    </div>                                                                                    
                                                    <div class="form-group col-sm-6">
                                                        <label class="form-label">Country<span style="color:red;">*</span> </label>
                                                        <select class="form-select address_info" name="country" id="country">
                                                            <option>Select Country</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-sm-6">
                                                        <label class="form-label">State <span style="color:red;">*</span></label>
                                                        <span id="state-code"><input class="form-control address_info" type="text" id="state" name="state"></span>

                                                    </div>                                                                                    
                                                    <div class="form-group col-sm-6">
                                                        <label class="form-label">City<span style="color:red;">*</span> </label>
                                                        <input type="text" maxlength="50" class="form-control address_info" name="city"
                                                            value="" id="city"
                                                            placeholder="City">
                                                    </div>
                                                    <div class="form-group col-sm-6">
                                                        <label class="form-label">ZIP <span style="color:red;">*</span>  </label>
                                                        <input type="text" maxlength="6" class="form-control address_info"
                                                            name="postal_code" value=""
                                                            id="postal_code" placeholder="Zip">
                                                    </div>                                                
                                                </div>
							</div>                                    
                        </div>                            
                    </div>
                    <div class="row">
                                                <div class="form-group col-sm-12">                                                
                                                        <div class="col-md-12 text-end">
                                                            <button type="submit" class="btn btn-success " data-request="recharge">Save</button>
                                                            <a href="{{url('sms-ai-payment-method')}}" type="button" class="btn btn-primary" >Cancel</a> 
                                                        </div>                                                
                                                </div>
                                            </div>	
                    </div>
                </div>
</form>
    </section>
    <section class="waiting-section" style="display: none">
        <div class="waiting-box">
            <div class="payment-processing">
                <img src="{{asset ('assets/images/loader-30px.gif')}}"/>
                <p>Your Card is being Saved!</p>
            </div>
        </div>
    </section>

    <style>
        .content-wrapper {
            position: relative;
        }
        section.waiting-section {
            text-align: center;
            background-color: #ffffffbd;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            z-index: 2;
        }
        section.waiting-section div.payment-processing, section.waiting-section div.payment-completed {
            padding-top: 20%;
        }
        section.waiting-section p {
            font-size: 16px;
        }
        section.waiting-section .payment-completed-text, section.waiting-section .redirect-timer {
            font-size: 26px;
        }
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
    
    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
    <script src="{{asset('assets/js/pages/validation.js')}}"></script>
    <script src="{{asset('assets/js/pages/form-validation.js')}}"></script>

    <script>
      $(document).ready(function () {
    $("#stripeForm").submit(function (e) {
        e.preventDefault();
        $("section.waiting-section").show();

        // Add CSRF token to the data
        var formData = $('#stripeForm').serialize();
        formData += '&_token={{ csrf_token() }}';

        $.ajax({
            type: 'POST',
            url: '{{ url('sms-ai/stripe/save-card') }}',
            data: formData,
            success: function (response) {
                console.log(response);
                if (response.success == true || response.success == 'true') {
                    toastr.success(response.message);
                    $("section.waiting-section").hide();
                    // window.location.href = "payment-method-list";
                } else {
                    $("section.waiting-section").hide();
                    $.each(response.errors, function (index, value) {
                        toastr.error(value);
                    });
                }
            },
            error: function (response) {
                $("section.waiting-section").hide();
                toastr.error("There is a problem with adding card");
                console.log(response);
            }
        });
    });
});

    </script>
    <script src="{{ asset('assets/js/country-states.js') }}"></script>



    <script>
(function () {
    //country code for selected option
    let user_country_code = "IN";
    let country_list = country_and_states['country'];
    let states_list = country_and_states['states'];
    // country name drop down
    let option =  '';
    option += '<option>select country</option>';
    for(let country_code in country_list){
        // set selected option user country
        let selected = (country_code == user_country_code) ? ' selected' : '';
        option += '<option value="'+country_code+'"'+selected+'>'+country_list[country_code]+'</option>';
    }
    document.getElementById('country').innerHTML = option;
    // state name drop down
    let text_box = '<input type="text" class="form-control" class="input-text" id="state">';
    let state_code_append_id = document.getElementById("state-code");
    function create_states_dropdown() {
        let country_code = document.getElementById("country").value;
        let states = states_list[country_code];
        // invalid country code or no states add textbox
        if(!states){
            state_code_append_id.innerHTML = text_box;
            return;
        }
        let option = '';
        if (states.length > 0) {
            option = '<select class="form-control" name="state" id="state">\n';
            for (let i = 0; i < states.length; i++) {
                option += '<option value="'+states[i].name+'">'+states[i].name+'</option>';
            }
            option += '</select>';
        } else {
            // create input textbox if no states 
            option = text_box
        }
        state_code_append_id.innerHTML = option;
    }
    // country change event
    const country_select = document.getElementById("country");
    country_select.addEventListener('change', create_states_dropdown);
    create_states_dropdown();
})();
</script>



@endsection