@extends('layouts.default')
@section('content')
<div class="container">
    <div class="p-t-25">
        <!-- Bootstrap inspired Braintree Hosted Fields example -->
    <div>
    
    <form class="needs-validation" novalidate="" enctype="multipart/form-data" method="post" action="{{url('/payment/proceed')}}">
        <input name="_token" type="hidden" value="{{ csrf_token() }}"/>
        <div class="col-xs-12 col-md-12">
            <!-- CREDIT CARD FORM STARTS HERE -->
            <div style="display:none;">
                <div class="form-group">
                    <input type="text" class="form-control" value="{{$request->first_name}}" name="first_name" placeholder="First Name">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" value="{{$request->last_name}}" name="last_name" placeholder="Last Name">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" value="{{$request->email}}" name="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" value="{{$request->contact_no}}" name="contact_no" placeholder="Phone">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" value="{{$request->city}}" name="city" placeholder="City">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" value="{{$request->visit_type}}" name="visit_type" placeholder="City">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" value="{{$request->preferred_start_date}}" name="preferred_start_date" >
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" value="{{$request->preferred_end_date}}" name="preferred_end_date" placeholder="City">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" value="{{$request->preferred_start_time}}" name="preferred_start_time" placeholder="City">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" value="{{$request->preferred_end_time}}" name="preferred_end_time" placeholder="City">
                </div>
                
            </div>
            <div class="panel credit-card-box panel-body gray-background">
                <div class="panel-heading display-table" >
                    <div class="row display-tr" >
                        <h3 class="panel-title display-td" >Payment Details</h3>
                        <div class="display-td" >                            
                            <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
                        </div>
                    </div>                    
                </div>
                <div class="panel-body">
                    <form role="form" id="payment-form" method="POST" action="javascript:void(0);">
                    <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label for="cardNumber">CARD HOLDER NAME</label>
                                    <div class="input-group">
                                        <input 
                                            type="text"
                                            class="form-control"
                                            name="cardName"
                                            placeholder="Card Holder Name"
                                            
                                            required autofocus 
                                        />
                                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                    </div>
                                </div>                            
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label for="cardNumber">CARD NUMBER</label>
                                    <div class="input-group">
                                        <input 
                                            type="tel"
                                            class="form-control"
                                            name="cardNumber"
                                            placeholder="Valid Card Number"
                                            autocomplete="cc-number"
                                            required autofocus 
                                        />
                                        <span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
                                    </div>
                                </div>                            
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-7 col-md-7">
                                <div class="form-group">
                                    <label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-inline">EXP</span> DATE</label>
                                    <input 
                              
                                        class="form-control cardExpiry" 
                                        name="cardExpiry"
                                        placeholder="MM / YY"
                                        type="month"
                                        required 
                                        
                                    />
                                </div>
                            </div>
                            <div class="col-xs-5 col-md-5 pull-right">
                                <div class="form-group">
                                    <label for="cardCVC">CV CODE</label>
                                    <input 
                                        type="tel" 
                                        class="form-control"
                                        name="cardCVV"
                                        placeholder="CVV"
                                        autocomplete="cc-csc"
                                        required
                                    />
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-xs-12">
                                <button type="submit" class="subscribe btn btn-primary" type="button" style="width:auto;">Proceed</button>
                            </div>
                        </div>
                        <div class="row" style="display:none;">
                            <div class="col-xs-12">
                                <p class="payment-errors"></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>            
            <!-- CREDIT CARD FORM ENDS HERE -->
            
            
        </div>            

    </form>
    </div>
    

    <!-- Load the required client component. -->
    
    </div>
</div>

    
  @endsection