@extends('layouts/microfin_layout')
@section('title', '| Monthly Loan & Savings Collection Sheet')
@section('content')

<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;
    }

    .ui-datepicker-calendar {
        display: none;
    }
</style>

<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;">Monthly Loan & Savings Collection Sheet</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">

                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('filBranch', 'Branch:*', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filBranch', [''=>'--Select Branch--']+$branchList, null ,['id'=>'filBranch','class'=>'form-control input-sm','autocomplete'=>'off', 'autofocus']) !!}
                                        <p id='filBranchE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('filMonth', 'Select Month:*', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::text('filMonth', null,['id'=>'filMonth','class'=>'form-control input-sm', 'autocomplete'=>'off',  'readonly','style'=>'cursor:pointer']) !!}
                                        <p id='filMonthE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>

                            
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Select  Month Segment:*', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filRange',['0' => 'Full Month', '1' => 'First Fortnight', '2' => 'Last Fortnight'], null,['id'=>'filRange','class'=>'form-control input-sm', 'autocomplete'=>'off']) !!}
                                        <p id='filSamityDayE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>   

                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Samity Day:*', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filSamityDay',[''=>'--Select Samity Day--']+$samityDay, null,['id'=>'filSamityDay','class'=>'form-control input-sm', 'autocomplete'=>'off']) !!}
                                        <p id='filSamityDayE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>   
                            
                            <div class="col-md-2">
                                <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('filSamity',[''=>'--Select Samity--'], null,['id'=>'filSamity','class'=>'form-control input-sm', 'autocomplete'=>'off']) !!}
                                        <p id='filSamityE' style="max-height:3px; color:red;"></p>

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

                            
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Product Category:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filProductCategory', ['0'=>'--All--']+$productCategory, null,['id'=>'filProductCategory','class'=>'form-control input-sm', 'autocomplete'=>'off', 'required']) !!}
                                        <p id='filProductCategoryE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Product:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filProduct',['0'=>'--All--'], null,['id'=>'filProduct','class'=>'form-control input-sm', 'autocomplete'=>'off', 'required']) !!}
                                        <p id='filProductE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Show Column:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('showColumn[]',['1'=>'Spouse', '1'=>'Spouse','2'=>'Share Code','3'=>'NID', '4'=>'Mobile', '5'=>'Savings Mature/Final Schedule', '6' => 'Cooperative Code'], null,['id'=>'showColumn','class'=>'form-control input-sm', 'multiple']) !!}
                                    </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>



<script type="text/javascript">

    var errMsg = "*Select First";
    var csrf = "{{csrf_token()}}";

    $("#filMonth").datepicker({
        dateFormat: 'mm-yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        onClose: function(dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).val($.datepicker.formatDate('mm-yy', new Date(year, month, 1)));
        }
    });

    $('#filBranch').on('change', function(){
        filSamityDay = $('#filSamityDay').val();
        if(filSamityDay) $('#filSamityDay').trigger('change');
    });
    $('#filSamityDay').change(function(event) {
        var filBranch=$('#filBranch').val();        
        if(filBranch){$('#filBranchE').hide();}else{$('#filBranchE').show();$('#filBranchE').html(errMsg);$('#filSamityDay').val('');return false;}
        
        var filMonth=$('#filMonth').val();
        if(filMonth){$('#filMonthE').hide();}else{$('#filMonthE').show();$('#filMonthE').html(errMsg);$('#filSamityDay').val('');return false;}
        var filSamityDay= $(this).val();
        
        $.ajax({
            type: 'post',
            url: "{{url('getSamityByDay')}}",
            data: { branchValue: filBranch, samityDayValue: filSamityDay, _token: csrf},
            dataType: 'json',
        })
        .done(function(samityOption) {
            $("#filSamity").empty();
            $("#filSamity").prepend('<option value="">--Select Samity--</option>');
            $.each(samityOption, function( id, nameWithCode){
                $('#filSamity').append("<option value='"+id+"'>"+nameWithCode+"</option>");
            });
            
        })
        .fail(function(error) {
            // console.log("error");
        });
        
    });

    $('#filProductCategory').change(function(event) {
        var productCategory = $(this).val();
        var filProduct = $('#filProduct').val();     
        $.ajax({
            type: 'post',
            url: "{{url('getLoanProductsByProductCategory')}}",
            data: { productCategoryValue: productCategory, _token: csrf},
            dataType: 'json',
        })
        .done(function(loanProductsOption) {
            $("#filProduct").empty();
            $("#filProduct").prepend('<option value="0">--All--</option>');
            $.each(loanProductsOption, function( id, nameWithCode){
                $('#filProduct').append("<option value='"+id+"'>"+nameWithCode+"</option>");
            });
            
        })
        .fail(function(error) {
            // console.log("error");
        });
    });


        $('#filMonth').click(function(event) {
            this.value = '';
        });        

        $(document).ready(function() {
            $("#printIcon").click(function(event) {
                var mainContents = document.getElementById("printDiv").innerHTML;
                var headerContents = "";
                // 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;}  .ver_text {-ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl;     -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;}</style>';
                var printStyle = '<style>table {float:left;height:auto;margin:10px 0px !important;width:100% !important;font-size:11px;border:1pt ash;page-break-inside:auto;font-family:Arial;} .tableHead td{text-align:center;vertical-align: top;padding:3px;font-size:11px} table 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{table tbody tr:nth-of-type(10n){page-break-after: always;}} .ver_text{-ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl;     -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;}</style><style>#note3totalTable tbody tr td:nth-child(1){width: 205px !important}</style>';
                
                // var printContents = '<div id="order-details-wrapper">' + headerContents +printStyle+ mainContents +'</div>';
                var printContents = '<div id="order-details-wrapper">' + headerContents +printStyle+ mainContents +'</div>';
               
                var win = window.open('','printwindow');
                win.document.write(printContents);
                win.print();
                win.close();
            });

            $("form").submit(function( event ) {
                event.preventDefault();
                var serializeValue=$(this).serialize();

                var filBranch = $('#filBranch').val();
                if(!filBranch){
                    toastr.warning("Please select branch", "Message");
                    return false;
                }

                var filMonth = $('#filMonth').val();
                if(!filMonth){
                    toastr.warning("Please select month", "Message");
                    return false;
                }

                var filSamityDay = $('#filSamityDay').val();
                if(!filSamityDay){
                    toastr.warning("Please select samity day", "Message");
                    return false;
                }

                var filSamity = $('#filSamity').val();
                if(!filSamity){
                    toastr.warning("Please select samity", "Message");
                    return false;
                }
                $('#loadingModal').show();
                $("#reportingDiv").load('{{URL::to("collectionSheet/report")}}'+'?'+serializeValue);
            });
        });
    </script>
@endsection