@extends('layouts.welcome')

@section('title')
    Online Application
@endsection

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            
            <div class="page-bar">
                <div class="page-title-breadcrumb">                    
                    <ol class="breadcrumb page-breadcrumb pull-center">
                        {{-- <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="index.html">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li> --}}
                        <li class="">Personal Details<i class="fa fa-angle-right"></i></li>
                        <li class="">Education Background <i class="fa fa-angle-right"></i></li>
                        <li class="">Programme <i class="fa fa-angle-right"></i></li>                        
                        <li class="">Payments</li>
                    </ol>
                </div>
            </div>

            <!-- The Modal -->
            <div id="myModal" class="modal">
                <!-- Modal content -->
                <div style="width:60%" class="modal-content">
                    <span class="close">X</span>
                    
                    <form method="post" action="{{ url('applicant-payment') }}" enctype="multipart/form-data" id="form_sample_1" class="form-horizontal">
                        <div style="display:flex; justify-content:center; height:auto" id="personalDet" class="row">                                    
                            {{-- column1 --}}
                            <div style="margin-top:80px" class="col-md-3 col-sm-6">
                                <label>Enter Payment Number</label>
                                <input type="hidden" name="applicant_id" value="{{$applicant->id}}">
                                <input type="hidden" name="method" value="momo">
                                <input type="text" name="momo_number" class="form-control" placeholder="MoMo Number"><br>
                                <div style="display: flex;justify-content: center;" class="col-md-12 col-sm-6">
                                    <button type="submit" class="btn btn-info m-r-20">SUBMIT PAYMENT</button>
                                    <span id="close" class="btn btn-grey m-r-20">CLOSE</span>
                                </div>
                            </div>                        
                        </div>
                    </form>
                </div>
            </div>

            <!-- The Modal -->
            <div id="rModal" class="modal">
                <!-- Modal content -->
                <div style="width:60%" class="modal-content">
                    <span class="close">X</span>
                    
                    <form method="post" action="{{ url('applicant-payment') }}" enctype="multipart/form-data" id="form_sample_1" class="form-horizontal">
                        <div style="display:flex; justify-content:center; height:auto" id="personalDet" class="row">                                    
                            {{-- column1 --}}
                            <div style="margin-top:80px" class="col-md-3 col-sm-6">
                                <label>Upload Bank Receipt</label>
                                <input type="hidden" name="applicant_id" value="{{$applicant->id}}">
                                <input type="hidden" name="method" value="bank_receipt">
                                <input type="file" name="receipt_file_path" class="form-control" placeholder=""><br>
                                <div style="display: flex;justify-content: center;" class="col-md-12 col-sm-6">
                                    <button type="submit" class="btn btn-info m-r-20">SUBMIT PAYMENT</button>
                                    <span id="closeR" class="btn btn-grey m-r-20">CLOSE</span>
                                </div>
                            </div>                        
                        </div>
                    </form>
                </div>
            </div>

            <!-- The Modal -->
            <div id="vModal" class="modal">
                <!-- Modal content -->
                <div style="width:60%" class="modal-content">
                    <span class="close">&times;</span>
                    
                    <form method="post" action="{{ url('applicant-payment') }}" enctype="multipart/form-data" id="form_sample_1" class="form-horizontal">
                        <div style="display:flex; justify-content:center; height:auto" id="personalDet" class="row">                                    
                            
                            <input type="hidden" name="applicant_id" value="{{$applicant->id}}">
                            <input type="hidden" name="method" value="card">

                            <div style="margin-top:80px" class="col-md-3 col-sm-6">
                                <label>Name on Card</label>
                                <input type="text" name="name_on_card" class="form-control" placeholder="Jane Doe"><br>                            
                            </div>

                            <div style="margin-top:80px" class="col-md-3 col-sm-6">
                                <label>CVV</label>
                                <input type="text" name="cvv" class="form-control" placeholder="e.g 111"><br>                            
                            </div>
                        </div>

                        <div style="display:flex; justify-content:center; height:auto" id="personalDet" class="row">                                    
                            {{-- column1 --}}
                            <div style="margin-top:10px" class="col-md-4 col-sm-6">
                                <label>Card Number</label>
                                <input type="text" name="card_number" class="form-control" placeholder="e.g 41111100000000"><br>                            
                            </div>

                            <div style="margin-top:10px" class="col-md-1 col-sm-6">
                                <label>Exp Month</label>
                                <select name="exp_month" class="form-control">
                                    <option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
                                </select>                                                        
                            </div> 
                            <div style="margin-top:10px" class="col-md-1 col-sm-6">
                                <label>Ex Year</label>                                
                                <select name="exp_year" class="form-select">
                                    @foreach($years as $year)
                                        <option value="{{$year}}">{{$year}}</option>
                                    @endforeach                                             
                                </select><br>                            
                            </div>                      
                        </div>

                        <div style="display: flex;justify-content: center;" class="col-md-12 col-sm-6">
                            <button type="submit" class="btn btn-info m-r-20">SUBMIT PAYMENT</button>
                        </div>
                    </form>

                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card card-box">
                        <div class="card-head">
                            <header>Payments</header>                            
                        </div>
                        <div class="card-body " id="bar-parent2">
                            <form method="post" action="{{ url('applicant-payment') }}" enctype="multipart/form-data" id="form_sample_1" class="form-horizontal">
                               
                                <div id="personalDet" class="row">
                                    
                                    {{-- column1 --}}
                                    <div class="col-md-2 col-sm-6">
                                        <!-- text input -->
                                        <div class="form-group">
                                            <b><header>Application Fee : K160</header></b>                                            
                                        </div><br>
                                    </div>
                                </div>

                                <div style="display: flex;justify-content: center;" id="personalDet" class="row">
                                    
                                    {{-- column1 --}}
                                    <div class="col-md-2 col-sm-6">
                                     
                                        <div class="form-group">
                                            <a id="mtn">                                          
                                                <img style="width:30%;height:30%" src="../assets/img/mtn_logo.png" 
                                                alt="payment_logo" />
                                            </a> 
                                        </div><br>

                                    </div>
                                    {{-- column1 --}}
                                    <div class="col-md-2 col-sm-6">
                                        <!-- text input -->
                                        <div class="form-group">
                                            <a id="airtel">
                                                <img style="width:30%;height:30%" src="../assets/img/airtel_logo.png" 
                                                alt="payment_logo" />
                                            </a> 
                                        </div><br>

                                    </div>
                                    {{-- column3 --}}
                                    <div class="col-md-2 col-sm-6">
                                        <!-- textarea -->
                                        <div class="form-group">
                                            <a id="zamtel">                                          
                                                <img style="width:30%;height:30%" src="../assets/img/zamtel_logo.png" 
                                                alt="payment_logo" />
                                            </a> 
                                        </div><br>
                                                                                
                                    </div>
                                    
                                    <div class="col-md-2 col-sm-6">
                                        <!-- textarea -->
                                        <div class="form-group">
                                            <a id="visa">                                          
                                                <img style="width:30%;height:30%" src="../assets/img/visa_logo.png" 
                                                alt="payment_logo" />
                                            </a> 
                                        </div><br>
                                                                                
                                    </div>

                                    <div class="col-md-2 col-sm-6">
                                        <!-- textarea -->
                                        <div class="form-group">
                                            <a id="receipt">                                          
                                                <img style="width:30%;height:30%" src="../assets/img/receipt_logo.png" 
                                                alt="payment_logo" />
                                            </a> 
                                        </div><br>
                                                                                
                                    </div>                            
                                    
                                </div>
                                
                                {{-- <span id="previous" class="btn btn-grey m-r-20">Previous</span> --}}
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
	<!-- end page content -->
<script>
// Get the modal
var modal = document.getElementById("myModal");
var vmodal = document.getElementById("vModal");
var rmodal = document.getElementById("rModal");
// Get the button that opens the modal
var mtn = document.getElementById("mtn");
var airtel = document.getElementById("airtel");
var zamtel = document.getElementById("zamtel");
var visa = document.getElementById("visa");
var receipt = document.getElementById("receipt");

var close = document.getElementById("close");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
mtn.onclick = function() {
  modal.style.display = "block";
}

airtel.onclick = function() {
  modal.style.display = "block";
}

zamtel.onclick = function() {
  modal.style.display = "block";
}

visa.onclick = function() {
  vmodal.style.display = "block";
}


receipt.onclick = function() {
  rmodal.style.display = "block";
}

close.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
closeR.onclick = function() {
  rmodal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {
  if (event.target == vmodal) {
    vmodal.style.display = "none";
  }
}
</script>

@endsection