@extends('layouts.master')
@section('title')
{{$title}}
@stop

@section('head')
@parent
    <link rel="stylesheet" type="text/css" href="{{asset('assests/js/select2/select2.css')}}" />

<style>
       .login-body {
          background-color: gray;
            background-size: cover;
            width: 100%;
            height: 100%;
        }  

        #college{
    margin-bottom: 15px;
    height: 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #eaeaea;
    box-shadow: none;
    font-size: 13px;
    color: #767676;
    }   
   </style>    
@endsection 

@section('content')

<!--main content start-->
<section id="container" class="cardd">
   
    <!-- page start-->
        
        <div class="row">
            <div class="col-md-12 offset-md-3 fee"> 
            <form class="form-signin1 interr" id="myform" action="{{route('summer_school.paycheckout')}}" method="post" >
                {{ csrf_field() }}
                <input type="hidden" name="string" value="{{$string}}">
                <div class=" card">
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <img src="{{ asset('jgu_logo_new.png') }}" alt="logo" style="width: 100%">
                        </div>
                    </div>
                </div>
                <div class="container ">
                    <div class="col-md-12 " >
                        <h2 class="intern">Select Payment Mode</h2>
                        <div class="cards">
                            <h3>PAY BY</h3>
                            <div class="row">
                                <div class="col-md-4 in">
                                    <img src="{{ asset('paytmlogo.png') }}" alt="cvv" class="img"><br>
                                    <input  type="radio" name="radio_demo" id="card" value="paytm" class="payment_option" data-md-icheck="" >
                                </div>
                                <div class="col-md-4 in">
                                    <img src="{{ asset('ccavenue.png') }}" alt="cvv" class="img">
                                    <br>
                                    <input  type="radio" name="radio_demo" id="card" value="ccavenue" class="payment_option" data-md-icheck="" >
                                </div>
                                {{--<div class="col-md-4 in">
                                    <img src="{{ asset('payumoney.png') }}" alt="cvv" class="img"><br>
                                    <input  type="radio" name="radio_demo" id="card" value="payumoney" class="payment_option" data-md-icheck="" >
                                </div>--}}
                                
                            </div>
                        </div>
                        <br>
                        <!--<h2 class="intern">INTERNATIONAL CARDS</h2>
                        <div class="cards">
                                <h3>PAY BY</h3>
                            <div class="row">
                                <div class="col-md-4 in">
                                        <img src="{{ asset('payumoney.png') }}" alt="cvv" class="img"><br>
                            <input  type="radio" name="radio_demo" id="card" value="card" class="payment_option" data-md-icheck="" disabled>
                            <br>
                        </div>
                       -->
                    
                    </div>
                </div>
            </form>	
        </div>
   
</section>
  <!--Core js-->
    
<style type="text/css">
    /* second page */
 .international {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    background: black;
}
.interr {
    margin: 0px;
    /*background: #0E4C92;*/
    max-width: 100%;
}   
 .card{
    background: #0E4C92;
    
    
}
 .in{
    padding-left: 50px;
    padding-right: 50px;
}
 .card img{
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;

}
 .intern{
          color: #0E4D95;
    margin-bottom: 20px;
    margin-top: 30px;
    font-size: 24px;
    font-weight: 400;
}
 .cards{
        border: 1px solid #0E4C92;
        padding: 20px;
}
 .cards h3{
    font-size: 23px;
    color: #0E4C92;
    font-weight: 400;
   padding-left: 40px;
}
 .img{
    border: 1px solid #8080806b;
    width: 100%;
    height: 66px;
    padding: 13px;
}
 .cardd{
        padding-bottom: 20px;
        background: #fff;
        

}
  input[type=radio] {
       border: 5px;
       width: 100%;
       height: 20px;
       margin-top: 10px;
       }
       
 @media only screen and (max-width: 600px) {  
    
     .cardd{
        padding-bottom: 20px;
        background: #fff;
        width: 100%;

}
.card{
    background: #0E4C92;
    width: 100%;
    
}
 }   

       
  
</style>
@endsection
@section('js')
<script src="{{asset('frontend/assests/js/jquery.js')}}"></script>
    <script src="{{asset('frontend/assests/bs3/js/bootstrap.min.js')}}"></script>
<script type="text/javascript">
	$(document).ready(function(){
		console.log('working');
        $('input[type=radio]').on('change', function() {
        	console.log('working1');
            $(this).closest("form").submit();
        });
	});
	
</script>
@endsection