@extends('master')

@section('content')

@if(session('message'))
    <div class="alert-message">
        {{ session('message') }}
    </div>
@endif
<div class="new_row">
    <div class="column-20 top_space_tutors">
        <div class="large_top_icon_tutors">
            <div class="large_top_text">Payment</div>

        </div>
    </div>
    
    <div class="new_row row-fixed">
        <div class="column-20">
            <img src="{{ URL::asset('images/girl2.jpg') }}" alt="">
        </div>
    </div>

    <div class="new_row top-payment">
        <div class="column-5"></div>
        <div class="column-12 payments-wrap">
            <div class="payments">
                <!-- <div class="paypal"><a href="#"><img src="{{ URL::asset('images/cards/american-express.png') }}" alt=""></a></div>
                <div class="visa"><a href="#"><img src="{{ URL::asset('images/cards/visa-logo.png') }}" alt=""></a></div>
                <div class="discover"><a href="#"><img src="{{ URL::asset('images/cards/discover-card.jpg') }}" alt=""></a></div>
                <div class="jcb"><a href="#"><img src="{{ URL::asset('images/cards/jcb.png') }}" alt=""></a></div> -->
                <div class="cards"><img src="{{ URL::asset('images/payment/info.png') }}" alt=""></div>
            </div>
            <form id="checkout" method="post" action="{{ URL::to('/payment') }}">
                <div id="payment-form">
                    <span class="field-name">Card Number</span>
                @if(! Auth::check())
                    <h3>Personal Information</h3>

                    <div class="form_pay form_left">
                        <label for="first_name">Student First Name</label>
                        <input type="text" name="first_name" placeholder="Student First Name" value="{{ \Input::get('first_name') }}">

                        <label for="last_name">Student Last Name</label>
                        <input type="text" name="last_name" placeholder="Student Last Name" value="{{ Input::get('last_name') }}">

                        <label for="email">Student Email</label>
                        <input type="email" name="email" placeholder="Student Email" value="{{ Input::get('email') }}">

                        <label for="username">Student Username</label>
                        <input type="text" name="username" placeholder="Student Username" value="{{ Input::get('username') }}">

                        <label for="password">Choose Password</label>
                        <input type="password" name="password" placeholder="Choose Password">
                        
                        <label for="password_confirmation">Repeat Password</label>
                        <input type="password" name="password_confirmation" placeholder="Repeat Password">
                    </div>

                    <div class="form_pay form_right">
                        <label for="parent_email">Parent First Name</label>
                        <input type="text" name="parent_name" placeholder="Parent First Name" value="{{ Input::get('parent_name') }}">

                        <label for="parent_email">Parent Last Name</label>
                        <input type="text" name="parent_last_name" placeholder="Parent Last Name" value="{{ Input::get('parent_last_name') }}"> 

                        <label for="parent_email">Parent Email</label>
                        <input type="text" name="parent_email" placeholder="Parent Email" value="{{ Input::get('parent_email') }}">

                        <label for="parent_phone">Parent Phone Number</label>
                        <input type="text" name="parent_phone" placeholder="Parent Phone Number" value="{{ Input::get('parent_phone') }}">
                    </div>

                @endif
                    <input type="hidden" name="program" value="{{ $_GET['program'] }}">

                    <div class="column-14 credit-info">
                        <h3 class="payment_green">Credit Card Information</h3>
                        <div class="payments">
                            <div class="cards"><img src="{{ URL::asset('images/payment/cards.png') }}" alt=""></div>
                        </div>
                    </div>

                    <div class="form_pay card_form form_left">

                        <label for="cc-name">Cardholder Name</label>
                        <input type="text" name="cc-name" id="cc-name" placeholder="Cardholder Name">

                        <label for="cc-number">Card number</label>
                        <input type="text" name="cc-number" id="cc-number" placeholder="Card Number" inputmode="numeric">

                        <label for="exp-date">Expiration date</label>
                        <input type="text" name="exp-date" id="exp-date" placeholder="Expiration Date" maxlength="7">
                        
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    </div>

                    <div class="form_pay card_form form_right">

                        <label for="cc-address">Billing Address</label>
                        <input type="text" name="cc-address" id="cc-address" placeholder="Billing Address">

                        <label for="zip-num">Zip Number</label>
                        <input type="text" name="zip-num" id="zip-num" placeholder="Zip Number" inputmode="numeric">

                        <label for="state">State</label>
                            <div class="custom-drop">
                            <select name="state" id="state" placeholder="State">
                                <option value=" ">State</option>
                                <option value="AL">Alabama</option>
                                <option value="AK">Alaska</option>
                                <option value="AZ">Arizona</option>
                                <option value="AR">Arkansas</option>
                                <option value="CA">California</option>
                                <option value="CO">Colorado</option>
                                <option value="CT">Connecticut</option>
                                <option value="DE">Delaware</option>
                                <option value="DC">District Of Columbia</option>
                                <option value="FL">Florida</option>
                                <option value="GA">Georgia</option>
                                <option value="HI">Hawaii</option>
                                <option value="ID">Idaho</option>
                                <option value="IL">Illinois</option>
                                <option value="IN">Indiana</option>
                                <option value="IA">Iowa</option>
                                <option value="KS">Kansas</option>
                                <option value="KY">Kentucky</option>
                                <option value="LA">Louisiana</option>
                                <option value="ME">Maine</option>
                                <option value="MD">Maryland</option>
                                <option value="MA">Massachusetts</option>
                                <option value="MI">Michigan</option>
                                <option value="MN">Minnesota</option>
                                <option value="MS">Mississippi</option>
                                <option value="MO">Missouri</option>
                                <option value="MT">Montana</option>
                                <option value="NE">Nebraska</option>
                                <option value="NV">Nevada</option>
                                <option value="NH">New Hampshire</option>
                                <option value="NJ">New Jersey</option>
                                <option value="NM">New Mexico</option>
                                <option value="NY">New York</option>
                                <option value="NC">North Carolina</option>
                                <option value="ND">North Dakota</option>
                                <option value="OH">Ohio</option>
                                <option value="OK">Oklahoma</option>
                                <option value="OR">Oregon</option>
                                <option value="PA">Pennsylvania</option>
                                <option value="RI">Rhode Island</option>
                                <option value="SC">South Carolina</option>
                                <option value="SD">South Dakota</option>
                                <option value="TN">Tennessee</option>
                                <option value="TX">Texas</option>
                                <option value="UT">Utah</option>
                                <option value="VT">Vermont</option>
                                <option value="VA">Virginia</option>
                                <option value="WA">Washington</option>
                                <option value="WV">West Virginia</option>
                                <option value="WI">Wisconsin</option>
                                <option value="WY">Wyoming</option>
                            </select>
                            </div>
                        <label for="cc-city">City</label>
                        <input type="text" name="cc-city" id="cc-city" placeholder="City">

                    </div>
                </div> <!-- //payment-form -->

                 <div class="clearfix"></div>
                
                <input type="submit" value="Purchase">
            </form>
        </div>
    </div>
    
      @include('partials.findtutorprogram')
</div>
<script>
$(document).ready(function(){

jQuery.fn.numericOnly = function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;            
            return (
                key == 8 || 
                key == 9 ||
                key == 46 || 
                (key >= 37 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

    $('.alert-message').fadeIn().delay(5000).fadeOut();

    // show labels
    $('#checkout>input').on('keydown', function(){
        $('label[for='+ $(this).attr("name") + ']').fadeIn();
    });

    // hide labels
    $('#checkout>input').on('keyup', function(){
        if(! $(this).val()) 
        {
            $('label[for='+ $(this).attr("name") + ']').fadeOut();
        }
    });

    // $('#cc-number, #exp-date').numericOnly();

    $("#exp-date").keyup(function(e){
        if ($(this).val().length == 2 && e.keyCode !== 8){
            $(this).val($(this).val() + " / ");
        }else if ($(this).val().length == 5){
            $(this).val($(this).val() + "");
        }
    });

    var hide = true;

    $('#checkout>input').on('click', function(){
        $('#checkout>input').removeClass('active');
        $(this).addClass('active');

        hide = false;
    });

    $('html').on('click', function(){
        if(hide) {
            $('#checkout>input').removeClass('active');
        }
        
        hide = true;
    });

    $('.row-fixed-content').addClass('profile-top-content');

});
</script>

@stop