@extends('layouts.payrollapp')

@section('content')
<div class="row">&nbsp;</div>
<div class="row">
    <div class="col-md-6" >
        <table class=" table table-responsive table-striped">
            <thead>
                <tr>
                    <th>Month</th><th>PNRD Report</th><th>Bank Report</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                   <th>{{$monthName}}</th><td><button type="button" class="btn btn-outline-warning waves-effect month-report" data-program="0" data-program_name=""><i class="fa fa-download" aria-hidden="true"></i></button>
                        
                       </td>
                    <td><a href="{{url('monthly_report_text')}}/0" type="button" class="btn btn-outline-primary waves-effect sanction" ><i class="fa fa-download" aria-hidden="true"></i></a>
                        
                       </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-6">
        <table class=" table table-responsive table-striped">
            <thead>
                <tr>
                    <th>SL No.</th><th>Programs</th><th>PNRD Report</th><th>Bank Report</th>
                </tr>
            </thead>
        @php
            $i = 1;
        @endphp
        @foreach($programs AS $value)
        <tr>
        <td>{{$i}}</td><th>{{$value['program_name']}}</th><td><button type="button" class="btn btn-outline-warning waves-effect month-report" data-program="{{$value['program_id']}}" data-program_name="{{$value['program_name']}}"><i class="fa fa-download" aria-hidden="true"></i></button>
            
           </td>
        <td><a href="{{url('monthly_report_text')}}/{{$value['program_id']}}" type="button" class="btn btn-outline-primary waves-effect sanction" data-program="{{$value['program_id']}}"><i class="fa fa-download" aria-hidden="true"></i></a>
            
           </td>
        </tr>
        @php
            $i++;
        @endphp
        @endforeach
        </table>
                 
          
        
    </div>
    
</div>
<div class="row">
    <div class="col-md-12" >
        <table id="myTable" hidden>
            
            
            <thead>

                <tr>
                    <th><b>Account No.</b></th>
                    <th><b>Value Dt.</b></th>
                    <th><b>Amount</b></th>
                    <th><b>Ifsc Code</b></th>
                    <th><b>Beneficiary A/C</b></th>
                    <th><b>Name</b></th>
                    <th><b>District</b></th>
                    <th><b>Employee Id</b></th>
                    <th><b>Unique Id No.</b></th>
                    <th><b>Mobile No.</b></th>
                    <th><b>Email</b></th>
                </tr>

            </thead>
            <tbody id="table-body">
               
            </tbody>

        </table>

        <table id="bankTable">
            <tr>
                <th><b>Sl No.</b></th>
                <th><b>Sender Account No.</b></th>
                <th><b>Beneficiary Name</b></th>
                <th><b>Beneficiary A/c No.</b></th>
                <th><b>IFSC</b></th>
                <th><b>Amount</b></th>
                <th><b>Beneficiary A/C Type(SB/CA/OD/CC)</b></th>
                
            </tr>

            </thead>
            <tbody id="bank-table-body">
            
            </tbody>
        </table>
    </div>
</div>
@endsection
@section('scripts')
<script src="https://unpkg.com/docx@5.0.2/build/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<script>
    $(document).on("click",'.month-report',function(){
        var programName = $(this).data("program_name");
        $.get("{{route('month_report')}}",{
            program_id:$(this).data('program')
        },function(j){
            var tr = "";
            var bankTr = "";
            for(var i = 1; i < j.length; i++){
                tr += "<tr>"+
                "<td>"+i+"</td>"+
                "<td></td>"+
                "<td></td>"+
                "<td>"+j[i].amount+"</td>"+
                "<td>"+j[i].ifsc_code+"</td>"+
                "<td>'"+j[i].account_no+"'</td>"+
                "<td>"+j[i].name+"</td>"+
                "<td>"+j[i].district+"</td>"+
                "<td>"+j[i].employee_code+"</td>"+
                "<td></td>"+
                "<td>"+j[i].mobile_no+"</td>"+
                "<td>"+j[i].email+"</td>"+
                "</tr>"
                
                bankTr += "<tr>"+
                "<td>"+i+"</td>"+
                "<td>'78720100000677'</td>"+
                "<td>"+j[i].name+"</td>"+
                "<td>'"+j[i].account_no+"'</td>"+
                "<td>"+j[i].ifsc_code+"</td>"+
                "<td>"+j[i].amount+"</td>"+
                "<td>SB</td>"+
                "</tr>"

            }
            $('#table-body').html(tr);
            $('#bank-table-body').html(bankTr);
            $("#myTable").table2excel({ 
          name: "Backup file for HTML content", 

          //  include extension also 
          filename: programName+"_{{$monthName}}bank_report.xls", 

// 'True' is set if background and font colors preserved 
          preserveColors: false  
        });    

        $("#bankTable").table2excel({ 
          name: "Backup file for HTML content", 

          //  include extension also 
          filename: programName+"_{{$monthName}}bank_report_excel.xls", 

// 'True' is set if background and font colors preserved 
          preserveColors: false  
        });    

        });
    });
</script>
    
@endsection