@extends('layouts/microfin_layout')
@section('title', '| Credit Officer Report (Samity & Component Wise)')
@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: 15px;
        height: 30px;
    }
</style>
<script type="text/javascript">
    $("#loadingModal").show();
    $(document).keydown(function(e) {
        if (e.keyCode == 27) return false;
    });
</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="printIcon" class="btn btn-info pull-right print-icon"  target="_blank" style="">
                        <i class="fa fa-print fa-lg" aria-hidden="true"> Print </i>
                    </button>
                </div>
                <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Credit Staff Report</h3>
            </div>

            <div class="panel-body panelBodyView" >
                @php
                    $searchElements = [
                        ['element' => 'mfn_branchId','col' => '1','attributes' =>['required' => 'true']],
                        ['element' => 'mfn_creditOfficerId','attributes' =>['required' => 'true']],
                        ['element' => 'mfn_productCategoryId','col' => '1'],
                        ['element' => 'mfn_serviceChanrgeId','col' => '1'],
                        ['element' => 'mfn_samityActive','col' => '1'],
                        ['element' => 'dateRange','attributes' =>['required' => 'true']],
                    ];
                @endphp
                @include('partials.searchPanel.main', ['searchElements' => $searchElements])
                <div class="row">
                    <div class="col-md-12"  id="reportingDiv">

                    </div>
                </div>


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

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

    $("#searchForm").submit(function( event ) {
        event.preventDefault();
        var serializeValue=$(this).serializeArray();
        var url = "{{$url}}";
        console.log('',url);
        var filDateFrom = $('#fillDateFrom').datepicker('getDate');
        var filDateTo = $('#fillDateTo').datepicker('getDate');
        if(filDateFrom == "" || filDateTo == "" ){
            alert("Please select date");
            return false;
        }
        if(url == "dynCreditOfficerReport"){

            var d = filDateFrom.getDate();
            var m = filDateFrom.getMonth()+1;
            var y = filDateFrom.getFullYear();
            var filDateFrom = y+'-' + (m <= 9 ? '0' + m : m)+'-'+(d <= 9 ? '0' + d : d);
            var d = filDateTo.getDate();
            var m = filDateTo.getMonth()+1;
            var y = filDateTo.getFullYear();
            var filDateTo = y+'-' + (m <= 9 ? '0' + m : m)+'-'+(d <= 9 ? '0' + d : d);
            var Week = filDateFrom+","+filDateTo;
            serializeValue.push({name: "fillWeek", value: Week});
            }
        serializeValue = $.param(serializeValue);
        $('#loadingModal').show();
        $("#reportingDiv").load('{{URL::to("mfn/regularNgeneral/creditOfficerReport/getReport")}}'+'?'+serializeValue);
    });

    /*filtering*/
    /*get filed officer list on change branch*/
    $("#fillBranchId").change(function(event) {
        var branchId = $(this).val();
        $("#fillFieldOfficer option:gt(0)").remove();
        $.ajax({
            url: '{{URL::to("mfn/branchWiseFieldOfficerList")}}',
            type: 'POST',
            dataType: 'json',
            data: {branchId: branchId},
        })
        .done(function(data) {
            $.each(data, function(index, val) {
                 $("#fillFieldOfficer").append("<option value='"+index+"'>"+val+"</option>");
            });
        })
        .fail(function() {
            alert("error");
        });

    });
    /*end getting filed officer list on change branch*/

    /*get week on change year and month*/
    $("#fillYear,#fillMonth").change(function(event) {
        var year = $("#fillYear").val();
        var month = $("#fillMonth").val();
        $("#fillWeek option:gt(0)").remove();

        if(year>0 && month>0){
            $.ajax({
                url: './../../getMfnWorkingWeeksBaseOnYearNMonth',
                type: 'POST',
                dataType: 'json',
                data: {year: year, month: month},
            })
            .done(function(data) {
                $.each(data, function(index, val) {
                     $("#fillWeek").append("<option value='"+index+"'>"+val+"</option>");
                });
            })
            .fail(function() {
                alert("error");
            });
        }
    });
    /*end getting week on change year and month*/

    /*get product on change category*/
    $("#fillProductCategory").change(function(event) {
        var categoryId = $(this).val();
        $("#fillLoanProduct option:gt(0)").remove();

        if(categoryId>0){
            $.ajax({
                url: './../../getMfnCategoryWiseProductList',
                type: 'POST',
                dataType: 'json',
                data: {categoryId: categoryId},
            })
            .done(function(data) {
                $.each(data, function(index, val) {
                     $("#fillLoanProduct").append("<option value='"+index+"'>"+val+"</option>");
                });
            })
            .fail(function() {
                alert("error");
            });
        }
    });
    /*end getting product on change category*/

    /*end filtering*/


}); /*ready*/


</script>

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

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

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

        var printStyle = '<style>thead tr th{text-align:center;vertical-align: middle;padding:3px;font-size:11px}  tr{ page-break-inside:avoid; page-break-after:auto } </style><style media="print">@page{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 printContents = '<div id="order-details-wrapper">' + headerContents +printStyle+ mainContents +'</div>';

        var win = window.open('','printwindow');
        win.document.write(printContents);
        win.print();
        win.close();
    });

  $('#fillDateFrom').datepicker({
      dateFormat: 'dd-mm-yy',
      changeYear: true,
      changeMonth: true,
      onSelect: function(){
          thisDate = $("#fillDateFrom").datepicker('getDate');
          $('#fillDateTo').datepicker('option','minDate',thisDate);
      }
  });

  $('#fillDateTo').datepicker({
      dateFormat: 'dd-mm-yy',
      changeYear: true,
      changeMonth: true,
      onSelect: function(){
          thisDate = $("#fillDateTo").datepicker('getDate');
          $('#fillDateFrom').datepicker('option','maxDate',thisDate);
      }
  });

  $('#fillDate, #ffillDateFrom,#fillDateTo').click(function(event) {
      this.value = '';
  });
    $("#loadingModal").hide();
});
</script>

@endsection