@include('includes.main.header')
<link rel="stylesheet" href="/lightbox/ekko-lightbox.css" />
<script src="/lightbox/ekko-lightbox.js"></script>
<style>
    .editable-text-border
    {
        width : 100%;
    }
</style>
<!--Work-Starts-Here-->
    <!-- content-section-starts -->
    <div class="gallery-content">
        <div class="container" style="background-color:white; opacity:0.9;">
            <div class="gallery-content-head text-center">
                <h3>Obtine voturi</h3>
                @include('includes.main.top-header')
                        
                        
                        
                        
            </div>
            <div class="section group" id="main-body-container">
                <div class="col-xs-12 no-padding margin-t-5">
                    <div class="col-xs-12 margin-t-10 ">
                        <div class="col-xs-12 error1" style="margin-bottom:5px;display: none">

                        </div>
                        <div class="col-xs-12">
                            <small>Introdu numarul de voturi dorite</small>
                            <input type="number" class="form-control" id="no_of_votes" placeholder="Numarul de voturi pe care doresti sa le obtii" style="margin-bottom:15px; background-color:#fff7f4;" value="1"/>
                        </div>
                        <a style="cursor:pointer" data-href="/votes/pay/5" class="col-xs-12 col-sm-6 payment-container">
                            <div class="col-xs-12 each-vote-container">
                                <div class="col-xs-12 vote-container-header" >40 lei</div>
                                <div class="col-xs-12">1 drept de vot valabil 1 luna</div>
                            </div>
                        </a>
                        <a style="cursor:pointer" data-href="/votes/pay/3" class="col-xs-12 col-sm-6 payment-container">
                            <div class="col-xs-12 each-vote-container">
                                <div class="col-xs-12 vote-container-header" >120 lei</div>
                                <div class="col-xs-12">1 drept de vot valabil 3 luni</div>
                            </div>
                        </a>
                        <a style="cursor:pointer" data-href="/votes/pay/2" class="col-xs-12 col-sm-6 payment-container">
                            <div class="col-xs-12 each-vote-container">
                                <div class="col-xs-12 vote-container-header">220 lei</div>
                                <div class="col-xs-12">1 drept de vot valabil 6 luni</div>
                            </div>
                        </a>
                        <a style="cursor:pointer" data-href="/votes/pay/1" class="col-xs-12 col-sm-6 payment-container">
                            <div class="col-xs-12 each-vote-container">
                                <div class="col-xs-12 vote-container-header">400 lei</div>
                                <div class="col-xs-12">1 drept de vot valabil 1 an</div>
                            </div>
                        </a>
                        
                        
                        
                        @if ($votes > 0)
                        <a style="cursor:pointer" data-href="/votes/pay/4" class="col-xs-12 col-sm-6 payment-container">
                            <div class="col-xs-12 each-vote-container">
                                <div class="col-xs-12 vote-container-header">39 lei</div>
                                <div class="col-xs-12">prelungire valabilitate cu 1 luna</div>
                            </div>
                        </a>
                        @endif
<!--                                        <div class="col-xs-12 top-margin hcenter no-padding">
                                            <label class='col-xs-6 col-sm-4 col-sm-offset-2'>
                                                No. of Votes
                                            </label>
                                            <label class='col-xs-6 col-sm-4 '>
                                                Payment Amount
                                            </label>
                                        </div>
                                        <div class="col-xs-12 top-margin hcenter no-padding">
                                            
                                            <div class="col-xs-6 col-sm-4 col-sm-offset-2">
                                                <input type="number" class="form-control" name="votes" id='votes' placeholder="No. of Votes" value="1"/>
                                            </div>
                                            <div class="col-xs-6 col-sm-4 ">
                                                <input type="text" class="form-control" id='payment_amount' placeholder="No. of Votes" value="100" readonly style="background-color:lightgray"/>
                                            </div>
                                        </div>-->
                                        
                    </div>
                             <img alt="" src="http://www.realclubmanager.com/images/netopia.jpg" style=" width:auto" />
                             <br>
                    
                           
				
				<br>
				<br>
                                  
				
				
				


				
				</div>
				
			</div> 	
			
   </div>
</div>
         <!-- Modal -->

<script>
    $(document).ready(function(){
        $('.payment-container').click(function(){
            var noOfVotes = $('#no_of_votes').val();
            var href = $(this).attr('data-href');
//            if(href != '/votes/pay/4')
//            {
                if(isNaN(noOfVotes) || noOfVotes == '')
                {
                    alert("Please enter a numeric value for No of Votes");
                    return;
                }
//            }
//            else
//            {
//                noOfVotes = 1;
//            }
            
            window.location.href = href + '/' + noOfVotes;
        })
        
        
        $('#btn-edit').click(function(){
           $('.editable-text-border1').addClass('editable-text-border');
           $('#account-table tfoot').show();
        });
        
        $('#votes').blur(function(){
            var votes = $(this).val();
            $('#payment_amount').val(votes * 100);
        });
        
//        $('#paypal-submit').click(function(){
//            $.post('/api/v1/vote/post/one',{"_token": "{{ csrf_token() }}"}, function(){
//                $('.error1').html('<div class="alert alert-success">Vote Submitted Successfully</div>').show();
//                window.location.href = '#main-body-container';
//                window.location.href = '/';
//            },'json').fail(function(xhr) {
//                var html = '';
//                var res = xhr.responseJSON;
//                
//                $('.error1').html('<div class="alert alert-danger">' + res + '</div>').show();
//                $('#btn-submit').html('Submit').removeAttr('disabled');
//                window.location.href = '#main-body-container';
//            },'json');
//        });
    });
</script>


<script>
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
                event.preventDefault();
                $(this).ekkoLightbox({alwaysShowClose:true});
            });
    </script>
	 <!-- content-section-ends -->
@include('includes.main.footer')