@extends('layouts/microfin_layout')
@section('title', '| Loan & Savings Adjustment Report')
@section('content')
<script type="text/javaScript">         
    var sFileName = 'ngophi';
    function ExportXLSX(){
        $('#reportingDiv').tableExport({fileName: sFileName,
            type: 'xlsx'
        });
    }
</script>

<style type="text/css">
.form-group, .form-control{
    font-size: 11px !important;
    color: black !important;
}
.form-control{
    padding: 5px !important;
}
#reportSubmit{
    font-size: 12px;
    margin-top: 20px;
}
</style>
<script type="text/javascript">
    $("#loadingModal").show();
    $(document).keydown(function(e) {
        if (e.keyCode == 27) return false;
    });
</script>



<script type="text/javascript">

    function demoFromHTML() {
        var pdf = new jsPDF('landscape', 'pt', 'legal');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#printDiv')[0];

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 30,
        bottom: 30,
        left: 30,
        width: '100%'
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {

        pdf.save('Test.pdf');
    }, margins);
}

</script>

<div class="row">
    <div class="col-md-12">
        <div class="" style="">
            <div class="">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-options">

                            {{--     <button id="btnExportExcel">Xls</button>  --}}
                            {{--   <li><a href="#" onClick="doExport('#printDiv', {type: 'xlsx'});">.XLSX</a></li> --}}
                            <button id="printIcon" class="btn btn-info pull-left print-icon"  target="_blank" style="">
                                <i class="fa fa-print fa-lg" aria-hidden="true">Print</i>
                            </button>
                            <button id="btnExportExcel" class="btn btn-info pull-center print-icon"  target="_blank" style="">
                                <i class="fa-file-excel-o fa-lg" aria-hidden="true"> Excel</i>
                            </button>

                            <button  id="btnExportPdf" class="btn btn-info pull-right print-icon"  target="_blank" style="">
                                <i class="fa-file-excel-o fa-lg" aria-hidden="true"> Pdf</i>
                            </button>

                            {{-- <a id="download_link" download="my_exported_file.pdf" href=”” >Download as Text File</a> --}}
                            {{--  <button onclick="javascript:demoFromHTML();">Generate Pdf</button> --}}
                          {{--   <div class="download" style="width:90%;margin:30px auto ;max-width: 800px;background:#ededed;">
                               <div style="padding-top:1%;padding-left:1%;"><button class="btn btn-info" id="downloadButton" >Download</button></div>
                           </div> --}}
                           <div id="editor"></div>

                           {{--            <button id="cmd">Download Survey Report</button> --}}

                           {{--  <button onclick="javascript:demoFromHTML();">PDF</button> --}}

                       </div>
                       <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Loan & Savings Adjustment Report </h3>
                   </div>

                   <div class="panel-body panelBodyView" >

                    <!-- Filtering Start-->
                    {!! Form::open(array('url' => '', 'role' => 'form', 'class'=>'form-horizontal form-groups', 'id' => 'filterFormId', 'method'=>'get')) !!}
                    <div class="row">
                        <div class="col-md-12">

                            @if(!in_array($userRoleId, Config('services.branch_level_user_roles')))
                            <div class="col-md-1">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Report Level:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filReportLevel',$reportLevelList, null ,['id'=>'filReportLevel','class'=>'form-control input-sm','autocomplete'=>'off', 'autofocus']) !!}
                                    </div>
                                </div>
                            </div>                            

                            <div class="col-md-1" id="areaDiv" style="display: none;">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Area:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">                                  
                                        <select id="filArea" name="filArea" class="form-control input-sm">
                                            <option value="">--Select Area--</option>
                                            @foreach ($areaList as $area)
                                            <option value="{{$area->id}}">{{$area->name}}</option>
                                            @php
                                            $barnchIds = str_replace(['"','[',']'], '', $area->branchId);
                                            $barnchIds = explode(',', $barnchIds);
                                            $branches = DB::table('gnr_branch')
                                            ->whereIn('id',$barnchIds)
                                            ->select(DB::raw("CONCAT ( LPAD(branchCode,3,0) ,' - ', name ) AS name"))
                                            ->get();
                                            @endphp
                                            @foreach ($branches as $branch)
                                            <option value="" disabled="disabled">&nbsp {{$branch->name}}</option>
                                            @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1" id="zoneDiv" style="display: none;">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Zone:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">                                  
                                        <select id="filZone" name="filZone" class="form-control input-sm">
                                            <option value="">--Select Zone--</option>
                                            @foreach ($zoneList as $zone)
                                            <option value="{{$zone->id}}">{{$zone->name}}</option>
                                            @php
                                            $areaIds = str_replace(['"','[',']'], '', $zone->areaId);
                                            $areaIds = explode(',', $areaIds);
                                            $areas = DB::table('gnr_area')
                                            ->whereIn('id',$areaIds)
                                            ->select(DB::raw("CONCAT ( LPAD(code,3,0) ,' - ', name ) AS name"))
                                            ->get();
                                            @endphp
                                            @foreach ($areas as $area)
                                            <option value="" disabled="disabled">&nbsp {{$area->name}}</option>
                                            @endforeach
                                            @endforeach
                                        </select>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1" id="regionDiv" style="display: none;">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Division:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">                                  
                                        <select id="filRegion" name="filRegion" class="form-control input-sm">
                                            <option value="">--Select Division--</option>
                                            @foreach ($regionList as $region)
                                            <option value="{{$region->id}}">{{$region->name}}</option>
                                            @php
                                            $zoneIds = str_replace(['"','[',']'], '', $region->zoneId);
                                            $zoneIds = explode(',', $zoneIds);
                                            $zones = DB::table('gnr_zone')
                                            ->whereIn('id',$zoneIds)
                                            ->select(DB::raw("CONCAT ( LPAD(code,3,0) ,' - ', name ) AS name"))
                                            ->get();
                                            @endphp
                                            @foreach ($zones as $zone)
                                            <option value="" disabled="disabled">&nbsp {{$zone->name}}</option>
                                            @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1" id="branchDiv">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Branch:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filBranch', [''=>'--All--']+$branchList, null ,['id'=>'filBranch','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                                        <p id='filBranchE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>
                            @endif

                            @if(in_array($userRoleId, Config('services.branch_level_user_roles')))
                            <div class="col-md-1" id="branchDiv">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Branch:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filBranch', $branchList, null ,['id'=>'filBranch','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                                        <p id='filBranchE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>
                            @endif

                

                            <div class="col-md-1">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Samity:*', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('samityId',array('' => 'All'), null,['id'=>'samityId','class'=>'form-control input-sm', 'autocomplete'=>'off']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-1">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('report option', 'Report Option:*', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('optioId',array('0' => 'Summary', '1' => 'Details'), null,['id'=>'optioId','class'=>'form-control input-sm', 'autocomplete'=>'off']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-1">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('report option', 'Report Option:*', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('optioId',array('0' => 'Summary', '1' => 'Details'), null,['id'=>'optioId','class'=>'form-control input-sm', 'autocomplete'=>'off']) !!}
                                    </div>
                                </div>
                            </div>
                           

                            <div class="col-md-1">
                                <div class="form-group">
                                    {!! Form::label('', '', ['class' => 'control-label col-md-12']) !!}
                                    <div class="col-md-12">                                    
                                        {!! Form::submit('Show Report', ['id' => 'reportSubmit', 'class' => 'btn btn-primary btn-xs']) !!}
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    {!! Form::close()  !!}
                    <!-- filtering end-->


                    <div class="row">
                        <div class="col-md-12"  id="reportingDiv">

                        </div>
                    </div>


                </div>		{{-- panel-body panelBodyView DIV --}}
            </div>
        </div>
    </div>
</div>
</div>
{{-- </div> --}}
{{-- </div> --}}



{{-- <style type="text/css">
body {
    font-size: 12pt;
    font-family: Calibri;
    padding : 10px;
}
table {
    border: 1px solid black;
}
th {
    border: 1px solid black;
    padding: 5px;
    background-color:grey;
    color: white;
}
td {
    border: 1px solid black;
    padding: 5px;
}
input {
    font-size: 12pt;
    font-family: Calibri;
}
</style>
</head>
<body>  
    <a href="#" onClick="ExportXLSX();">DownloadXLSX</a> 
    <br/>
    <br/>
    <div id="Event">
        <table>
            <tr>
                <th>Column One</th>
                <th>Column Two</th>
                <th>Column Three</th>
            </tr>
            <tr>
                <td>row1 Col1</td>
                <td>row1 Col2</td>
                <td>row1 Col3</td>
            </tr>
            <tr>
                <td>row2 Col1</td>
                <td>row2 Col2</td>
                <td>row2 Col3</td>
            </tr>
            <tr>
                <td>row3 Col1</td>
                <td>row3 Col2</td>
                <td><a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
                </td>
            </tr>
        </table>
    </div>
    --}}
    <script type="text/javascript">
        $(document).ready(function() {

            $("form").submit(function( event ) {
                event.preventDefault();

                var serializeValue=$(this).serialize();
        //alert(serializeValue);
        
        $('#loadingModal').show();
        $("#reportingDiv").load('{{URL::to("mfn/pksfPomisReport/getpomis1Report")}}'+'?'+serializeValue);
    });



        });


    </script>


    <script type="text/javascript">
        $(document).ready(function() {        

            $("#printIcon").click(function(event) {

        // $("#hiddenTitle").show();
        // $("#hiddenInfo").show();
        // $("#loanNSavingTable1").removeClass('table table-striped table-bordered');

        
        // var printContents = '<div id="order-details-wrapper">' + headerContents + mainContents +'</div>';


        /* var printStyle = '<style>#pomisOne1, #pomisOne2, pomisOne3 {float:left;height:auto;padding:0px;width:100% !important;font-size:11px;page-break-inside:auto;}  thead tr th{text-align:center;vertical-align: middle;padding:3px;font-size:11px}  tr{ page-break-inside:avoid; page-break-after:auto } table tbody tr td.amount{text-align:right !important;}</style><style media="print">@page{size: legal landscape;margin:10mm 10mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{tr:nth-of-type(4n){page-break-after: always;}}</style>';*/

        
        // var printStyle = '<style>#pomisOne1, #pomisOne2, #pomisOne3{float:left;height:auto;padding:0px;width:100% !important;font-size:11px;border:1pt ash;page-break-inside:auto;font-family:Arial;}  thead tr th{text-align:center;vertical-align: top;padding:3px;font-size:11px} #pomisOne1 thead tr th:nth-child(1){ width: 50px;} thead tr th:nth-child(10){ width: 40px;} tbody tr td:nth-child(10){ width: 40px;} tbody tr td.amount {border: 1px solid ash;text-align:right;vertical-align: middle;padding:3px;font-size:11px} tbody tr td {border: 1px solid ash;text-align:center;vertical-align: middle;padding:3px;font-size:11px} td:nth-child(1){text-align:left;} tr{ page-break-inside:avoid; page-break-after:auto } tr:last-child { font-weight: bold;} .name{text-align:left;vertical-align:left;}</style><style media="print">@page{margin:10mm 10mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{#pomisOne1 tr:nth-of-type(10n){page-break-after: always;}} td.name{text-align:left;}</style>';

        var printStyle = `
        <style>
            #pomisOne1, #pomisOne2, #pomisOne3{
                float:left;
                height:auto;
                padding:0px;
                width:100% !important;
                font-size:11px;
                border:1pt ash;
                page-break-inside:auto;
                font-family:Arial;
            }  
            thead tr th{
                text-align:center;
                vertical-align: top;
                padding:3px;
                font-size:11px;
            } 
            #pomisOne1 thead tr th:nth-child(1){
                 width: 50px;
            } 
            thead tr th:nth-child(10){
                 width: 40px;
            } 
            tbody tr td:nth-child(10){
                 width: 40px;
            } 
            tbody tr td.amount {
                border: 1px solid ash;
                text-align:right;
                vertical-align: middle;
                padding:3px;
                font-size:11px;
            } 
            tbody tr td {
                border: 1px solid ash;
                text-align:center;
                vertical-align: middle;
                padding:3px;
                font-size:11px;
            } 
            td:nth-child(1){
                text-align:left;
            } 
            tr{ 
                page-break-inside:avoid; 
                page-break-after:auto ;
            } 
            tr:last-child {
                 font-weight: bold;
            } 
            .name{
                text-align:left;
                vertical-align:left;
            }
        </style>
        <style media="print">
            @page{
                // size: landscape;
                margin:10mm 10mm;
            }
        </style>
        <style>
            @media print {
                .element-that-contains-table {
                    overflow: visible !important; 
                    page-break-inside: auto;

                }
                div {
                    page-break-inside: auto ;
                    // page-break-inside: avoid;
                    // break-inside: avoid;
                }
                #pomisOne1, #pomisOne2, #pomisOne3{
                    float:left;
                    height:auto;
                    padding:0px;
                    width:100% !important;
                    font-size:11px;
                    border:1pt ash;
                    font-family:Arial;
                }  
                thead tr th{
                    text-align:center;
                    vertical-align: top;
                    padding:3px;
                    font-size:11px;
                }
                tbody tr td.amount {
                    border: 1px solid ash;
                    text-align:right;
                    vertical-align: middle;
                    padding:3px;
                    font-size:11px;
                } 
                tbody tr td {
                    border: 1px solid ash !important;
                    text-align:center;
                    vertical-align: middle;
                    padding:3px;
                    font-size:11px;
                } 
                tr{ 
                    page-break-inside:auto; 
                    page-break-after:auto ;
                }
            }
        </style>
        <style>
            @page:first{
                #pomisOne1 tr:nth-of-type(4n){
                    page-break-after: always;
                }
            } 
            td.name{
                text-align:left;
            }
        </style>
        `


        var mainContents = document.getElementById("printDiv").innerHTML;
        var headerContents = '';

        /*tr:nth-of-type(10n){page-break-after: always;}*/
       // @media print {.element-that-contains-table { overflow: visible !important; }}

       var printContents = '<div id="order-details-wrapper">' + headerContents +printStyle+ mainContents +'</div>';


        /*document.body.innerHTML = printStyle + printContents;
        window.print();*/

        var win = window.open('','printwindow');
        win.document.write(printContents);
        win.print();
        // $("#loanNSavingTable1").addClass('table table-striped table-bordered');
        win.close();
    });

            $("#loadingModal").hide();

            /*on change filReportLevel hide/show contents*/
            $("#filReportLevel").change(function(event) {
                if ($(this).val()=="Branch") {
                    $("#branchDiv").show();  
                    $("#areaDiv").hide();  
                    $("#zoneDiv").hide();  
                    $("#regionDiv").hide(); 

                    $("#filArea").prop('required', false);
                    $("#filZone").prop('required', false);
                    $("#filRegion").prop('required', false); 
                }
                else if($(this).val()=="Area"){
                    $("#branchDiv").hide(); 
                    $("#areaDiv").show(); 
                    $("#zoneDiv").hide(); 
                    $("#regionDiv").hide(); 

            //$("#filBranch").prop('required', false);
            $("#filArea").prop('required', true);
            $("#filZone").prop('required', false);
            $("#filRegion").prop('required', false);
        }
        else if($(this).val()=="Zone"){
            $("#branchDiv").hide(); 
            $("#areaDiv").hide(); 
            $("#zoneDiv").show(); 
            $("#regionDiv").hide(); 

            //$("#filBranch").prop('required', false);
            $("#filArea").prop('required', false);
            $("#filZone").prop('required', true);
            $("#filRegion").prop('required', false);
        }
        else if($(this).val()=="Region"){
            $("#branchDiv").hide(); 
            $("#areaDiv").hide(); 
            $("#zoneDiv").hide(); 
            $("#regionDiv").show(); 

            //$("#filBranch").prop('required', false);
            $("#filArea").prop('required', false);
            $("#filZone").prop('required', false);
            $("#filRegion").prop('required', true);
        }        
    });
            /*end on change filReportLevel hide/show contents*/
            $("#filReportLevel").trigger('change');

        }); /* Ready*/
    </script>


    <script type="text/javascript">
       $(document).ready(function() {   
        function getPDFFileButton () {
            console.log($('#printDiv').html());

            // Select which div with id that need to be printed
            // to print body $('body')
            // here printing div with content id $("#content")
            // using html canvas to save as required pdf to image to preserve css
            return html2canvas($('#printDiv'), {
                background: "#ffffff",
                onrendered: function(canvas) {
                    //document.body.appendChild(canvas);

                    // jspdf changes
                    var pdf = new jsPDF('landscape', 'pt', [1380, 2030]);
                    //pdf.addImage(myImage, 'JPEG', 15, 2, imgWidth, imgHeight); // 2: 19
                    pdf.save('Download.pdf');
                }
            });

        }
        $("#downloadButton").on("click", function () {
         //alert('fdf');
         getPDFFileButton ();
     });
    }); /* Ready*/
</script>





@endsection