@extends('admin.layouts.index')


@section('content')

<section id="main-content">
<script src="https://cdn.ckeditor.com/4.20.0/standard-all/ckeditor.js"></script>
	<section class="wrapper">
    <div class="panel-heading">
     
    </div>

    <div class="sidebar-main sidebar-menu-one sidebar-expand-md sidebar-color">
            <div class="dashboard-content-one">
                <div class="card height-auto">
                    <div class="card-body p-b-0">
                        <div class="container">
                        <table class="table table-striped">
                            <tr><td>Name</td><td></td></tr>
                            <tr><td>Class</td><td></td></tr>
                            <tr><td>Category</td><td>{{ $_GET['STYPE'] }}</td></tr>
                            <tr><td colspan="2"><a class="btn btn-block btn-primary" href="view_for_fees">BACK</a></td></tr>
                        </table>
                        </div>

                        
                    </div>
                    <hr>
                </div>
            </div>
        </div>

    {{-- <div class="save_button">
    	<a href="#" id="save_btn">Save</a>
    </div> --}}
  </div>
                           
   
 <div class="panel panel-default" style="margin-top:15px;">
    <div class="panel-heading">
     <h2 style="padding-top: 15px;">Fee Chart</h2>
    </div>
    <div class="table-responsive">
      <table class="table" ui-jq="footable" ui-options='{
        "paging": {
          "enabled": true
        },
        "filtering": {
          "enabled": true
        },
        "sorting": {
          "enabled": true
        }}'>
       
        <thead>
          <tr>
            <th class ="text-center">#</th>
            <th >Fee Head</th>
            <th>Cls</th>
            <th>Cat</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
            <th>Jen</th>
            <th>Feb</th>
            <th>Mar</th>
          </tr>
        </thead>
        <tbody>
           
            @foreach ($feeassigns as $feeassign)
          <tr data-expanded="true">
            <td>{{$loop->index+1}}</td>
            <td> 


                @foreach($meta['feeassigndetail'][$feeassign->category][$feeassign->class_id] as $detailss)
                    {{ $meta['fees']['name'][$detailss] }} ,
                @endforeach

            </td>
            <td>{{ $meta['classes']['name'][$feeassign->class_id] }}</td>
            <!-- <td>B</td> -->
            <td>  {{ $feeassign->category }}	</td>
            @if($feeassign->frequency == 'Monthly')

                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
                           
             <td> {{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button onclick="payfee({{ $feeassign->amount }},{{ $k}})" id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark btn bg-transparent" >PayFee   </button>

            </td>
            
            
            @endif
               @if($feeassign->frequency == 'Annually')
             <td>{{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark" data-toggle="modal" data-target=".bd-example-modal-lg">PayFee</button>

            </td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            @endif
               @if($feeassign->frequency == 'Quaterly')
             <td>{{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark" data-toggle="modal" data-target=".bd-example-modal-lg">PayFee</button>

            </td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
             <td>{{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark" data-toggle="modal" data-target=".bd-example-modal-lg">PayFee</button>

            </td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
             <td>{{ config('app.CURRENCY') }} {{ $feeassign->amount }}
            
<button id="edit_btn" type="button" class="fa fa-search btn-fill-md radius-4 text-light bg-dark-pastel-green mr-2 btn-hover-bluedark" data-toggle="modal" data-target=".bd-example-modal-lg">PayFee</button>

            </td>
            <td>0</td>
            <td>0</td>
            <td>0</td>

            @endif
           
          </tr>
          @endforeach

          
        </tbody>
      </table>
    
   
  </div>
</div>
</section>
<!--main content end-->
<div id="modalnewmain" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
        <form class="modal-content" action="fees/pay/now" method="post" style="padding:20px;">
        @csrf
        <style type="text/css">
        #receipts_frame{border: 1px solid #000;margin: 0px -15px;    margin: 10 20px;    padding: 15px;}
        .receipt h5{padding:10px 0px;}
    </style>
        <div class="banner_fees" style="text-align: center;">
            <h1>{{ config('app.name') }}</h1>
            <h3>{{ config('app.ADDRESS') }}</h3>
            <h3>Phone:{{ config('app.PHONE') }},{{ config('app.PHONE1') }}</h3>
        </div>
        <div class="fee-recipt" style="text-align:center;border: 1px solid #000;margin: 10px 20px;">
            <h1>FEES RECEIPT</h1>
        </div>
        <div class="row" id="receipts_frame">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6">
                        Receipt No.
                    </div>
                    <div class="col-md-6">
                        asdadasd
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Month.
                    </div>
                    <div class="col-md-6">
                        <span class="Month"></span>
                    </div>
                </div>


               
              
                
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6">
                        Date.
                    </div>
                    <div class="col-md-6">
                       {{ date('m-d-y') }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Amount
                    </div>
                    <div class="col-md-6">
                        {{ config('app.CURRENCY') }}<span class="Amount"></span>
                    </div>
                </div>


               
              
                
            </div>
           
            
        </div>
        <button type="submit" style="margin-top: 30px;margin-left: 20px;" class="btn btn-danger">pay now</button>
        <input type="hidden" name="amount"  id="Amount" >
        <input type="hidden"  name="month" id="Month" >
        <input type="hidden"  name="SID" value="{{ $_GET['SID'] }}" >
        <input type="hidden"  name="STYPE" value="{{ $_GET['STYPE'] }}" >
        <input type="hidden"  name="CID" value="{{ $_GET['CID'] }}" >
    </form>
  </div>
</div>


<!--main content end-->
<div id="invoice_modal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
        <div class="box-body" id="toprint">
                    
                    
            <div class="box"> 
			<h5 style="text-align:center; border:1px solid; padding:5px;">PAYMENT INVOICE </h5>
      <img src="{{ config('app.LOGO')}}" class="img-circle img-fluid" width="20%" alt="User Image" style="margin-left:132px;">	
<hr style="    border-top: 1px solid #000000; margin-bottom: 0px;">	
<h6 style="text-align:center; margin-top:10px; line-height: 1.5;">{{config('app.name')}}</h6>
<h6 style="text-align:left; ">DATE:
2023-01-14 18:59:40

<strong style="margin-left:74px; font-weight: 100;"> RECEIPT NO:
RX78

</strong></h6>
			<hr style="    border-top: 1px solid #000000; margin-bottom: 0px; margin-top:1px;">
			<h6 style="text-align:center; margin-top:10px; line-height: 1.5;"><strong>PAYMENT RECEIPT</strong></h6>
			<hr style="    border-top: 1px solid #000000; margin-bottom: 0px; margin-top:1px;">
			<table style="width: 87%;">
			<tbody>
			<tr>
			<td>
			<h6 style="line-height: 0.2;">PURPOSE OF PAYMENT:	</h6>			
			</td>
			<td style="font-size:9px;">
			<span id="pop"></span>

			</td>

		<td style="vertical-align: text-top; " rowspan="3">
			<h6>AMOUNT<p style="font-size:10px; margin-top:-10px; text-align:center; line-height: 2.7;; " id="invoice_amount"> </p></h6>
			</td> 
			</tr>
			<tr>
			<td>
			<h6 style="line-height: 0.2;">STUDENT NAME:	</h6>			
			</td>
			<td style="font-size:9px;" id="invoice_name"> 
            TEST TEST TEST			</td>
			
			</tr>
			<tr>
			<td>
			<h6 style="line-height: 0.2;">ADMISSION NO:	</h6>			
			</td>
			<td style="font-size:9px;" id="invoice_adno">
            testno			</td>
			</tr>
			{{-- <tr>
			<td>
			<h6 style="line-height: 0.2;">TOTAL FEE	</h6>				
			</td>
			<td style="font-size:9px;">

            100000

			</td>
			</tr> --}}
			
			{{-- <tr>
			<td>
			<h6 style="line-height: 0.2;">PAID FEE:		</h6>			
			</td>
			<td style="font-size:9px;">
            5000
			</td>
			</tr> --}}
			
			<tr>
			<td>
			<h6 style="line-height: 0.2;">Month For:		</h6>			
			</td>
			<td style="font-size:9px;" id="invoice_month">
             95000


			</td>
			</tr>
			
			
			
			</tbody>
			</table>
			<hr style="    border-top: 1px solid #000000; margin-bottom: 0px; margin-top:1px;">
			<hr style="    border-top: 1px solid #000000; margin-bottom: 2px; margin-top:7px;">
			<h6 style="text-align:left; ">AMOUNT IN WORD: 
            <span id="inword">Five Thousand</span>
        
        
        
        
        
        
        
        
        
        
        
        </h6>
			{{-- <h6 style="text-align:center; background-color:#e1e1e1;">POWERED BY EDRIC TECH </h6> --}}
		     </div>
			 
                   <div class="to_print" style="">
        <button onclick="print();">Print</button>
      </div>  
                    
			</div>
  </div>
</div>
<script>
    var a = ['','one ','two ','three ','four ', 'five ','six ','seven ','eight ','nine ','ten ','eleven ','twelve ','thirteen ','fourteen ','fifteen ','sixteen ','seventeen ','eighteen ','nineteen '];
var b = ['', '', 'twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety'];

function inWords (num) {
    if ((num = num.toString()).length > 9) return 'overflow';
    n = ('000000000' + num).substr(-9).match(/^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
    if (!n) return; var str = '';
    str += (n[1] != 0) ? (a[Number(n[1])] || b[n[1][0]] + ' ' + a[n[1][1]]) + 'crore ' : '';
    str += (n[2] != 0) ? (a[Number(n[2])] || b[n[2][0]] + ' ' + a[n[2][1]]) + 'lakh ' : '';
    str += (n[3] != 0) ? (a[Number(n[3])] || b[n[3][0]] + ' ' + a[n[3][1]]) + 'thousand ' : '';
    str += (n[4] != 0) ? (a[Number(n[4])] || b[n[4][0]] + ' ' + a[n[4][1]]) + 'hundred ' : '';
    str += (n[5] != 0) ? ((str != '') ? 'and ' : '') + (a[Number(n[5])] || b[n[5][0]] + ' ' + a[n[5][1]]) + 'only ' : '';
    return str;
}
function invoice(Amount,Month){
    inword =  inWords(Amount);
$('#inword').html(inword);
$('#invoice_amount').html(Amount);
$('#invoice_month').html(Month);
// $('#inword').html(inword);
$('#invoice_modal').modal('show');

}
function payfee(Amount,Month){
    // console.log(Amount);
    // console.log(Month);

    
    $('.Amount').html(Amount);
    $('.Month').html(Month);
    $('#Amount').val(Amount);
    $('#Month').val(Month);
    $('#modalnewmain').modal('show');
}
    </script>
<style type="text/css">


table, td,th{
    text-align: center;
}

    .f-s-16 {
  font-size: 16px !important;
  color: #fff;
}

.all-datalist{padding: 5px;border: 1px solid #ddd;}

.month-list li {
  float: left;
  width: 8%;
  padding-right: 13px;
}

.month-list{list-style: none;}

.text-white i{padding-top: 1px;}

	.add-new-icon{color: #fff;}

	.add-new-icon:hover{color: #00c853;}

	#pluse_icon{font-size: 25px;}

	.plus-icon{float: right;
margin-right: 15px;
margin-top: -4px;}


	.check_inner_body{padding: 10px 15px;height: 150px;
overflow-x: hidden;}

input[type="checkbox"]{height: 20px;width: 20px;}

label{margin-left: 10px;font-size: 20px;
font-weight: 300;}

#save_btn{border: 1px solid;
padding: 10px 15px;
border-radius: 10px;border: 1px solid #8b5c7e;
background: #8b5c7e;
color: #fff;
}
#save_btn:hover{border: 1px solid;
padding: 10px 15px;
border-radius: 10px;border: 1px solid #f0bcb4;
background: #f0bcb4;
color: #fff;
}

.save_button{text-align: right;
margin: 40px 0;}

	#toggle ,#toggle2 ,#toggle3 ,#toggle4{padding: 0px;
background: transparent;
border: none;}

	.fee-heading {
  background: #f0f1f3;
  margin-bottom: 0;
  padding: 8px 15px;
  color: #333;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: #042954;
}
.f-w-500 {
  font-weight: 500 !important;
}
.f-s-16 {
  font-size: 16px !important;
}
.pull-right {
  float: right;
}
.p2x {
  padding: 0px 5px;
  margin-top: 3px;
}
.text-light {
  color: #ffffff !important;
}
.font-normal {
  font-weight: 400;
}
.bg-dark-pastel-green {
  background-color: #00c853;
  margin-top: 0px;
}
.text-white {
  color: #fff !important;
}

/* ////////////to print/////////
 */
 .box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}
.box-header:before, .box-body:before, .box-footer:before, .box-header:after, .box-body:after, .box-footer:after {
    content: " ";
    display: table;
}
.box {
    width: 383px!important;
    height: 495px;
    border: 2px black solid;
    margin: 0 auto;
    padding: 10px;
    margin-top: 30px!important;
}
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.img-circle {
    border-radius: 50%;
}
.box-header:after, .box-body:after, .box-footer:after {
    clear: both;
}
</style>
<script src="http://yelwa.247pos.ng/js/html2pdf.bundle.min.js"></script>
<script type="text/javascript">
     function print(){
    // $("#toprint").css('margin-top', '50px');
    // $("#toprint").css('margin-left', '50px');
    // $(".thank").css('margin-top', '10px');
    // $(".inner_padding").css('padding', '8px 0px');
    // $(".invoice .table-row-body div").css('height', '34px');
    // $(".invoice .table-row-body div").css('padding', '8px 0px');
    // $(".invoice .table-row-body div").css('font-size', '12px');

    $(".to_print").hide();
    var element = document.getElementById('toprint');
    html2pdf(element);
    // html2pdf(document.body);
    setTimeout(function(){
    //     $(".mar-top").css('margin-top', '50px');
    // $(".thank").css('margin-top', '60px');
    // $(".inner_padding").css('padding', '14px 0px');
    // $(".invoice .table-row-body div").css('height', '40px');
    // $(".invoice .table-row-body div").css('padding', '14px 0px');
    // $(".invoice .table-row-body div").css('font-size', '16px');
    $(".to_print").show();
    }, 300);


}
</script>
@endsection