@extends('layouts/microfin_layout')
@section('title', '|POMIS-3A Report')
@section('content')

@include('microfin/reports/monthlyReportViews/monthlyTargetsAndAchievementReport/monthlyTargetsAndAchievementReportAjax')

<style media="screen">
.hide {
  display:  none;
}

</style>

<div class="container-fluid">

  <!-- Start of the Dropdown form -->
  <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-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>
             {{--    <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;">
                  Monthly Targets And Achievement Report
                </h3>
              </div>

              <div class="panel-body panelBodyView">
                <!-- Filtering Start-->
                {!! Form::open(array('url' => 'monthlyTargetsAndAchievementReportSubmit', 'role' => 'form', 'class'=>'form-horizontal form-groups', 'id' => 'filterFormId', 'method'=>'get')) !!}

                <div class="row">
                  <div class="col-md-12">
                    @if($userBranchId == 1)
                    <div class="col-md-1" id="branchDiv">
                      <div class="form-group">
                        <div class="col-md-12">
                          {!! Form::label('', 'Level:', ['class' => 'control-label pull-left', 'style' => 'color:black']) !!}
                        </div>

                        <div class="col-md-12">
                          <select name="searchLevel" class="form-control input-sm" id="searchLevel" style="color: black;" required="true">>
                            <option value=""> -- Select Report Level -- </option>
                            <option value="Branch">Branch</option>
                            <option value="Area">Area</option>
                            <option value="Zone">Zone</option>
                            <option value="Regions">Regions</option>
                          </select>
                          {{-- <p id='filBranchE' style="max-height:5px; color:red;"></p> --}}
                        </div>
                      </div>
                    </div>                    

                    <div class="col-md-1">
                      <div class="form-group">
                        <div class="col-md-12">
                          {!! Form::label('', 'Name:', ['class' => 'control-label pull-left', 'style' => 'color:black']) !!}
                        </div>
                        <div class="col-md-12">
                          <select name="searchABZ" class="form-control input-sm" id="searchABZ" style="color: black;" required="true">
                          </select>
                          {{-- <p id='filBranchE' style="max-height:5px; color:red;"></p> --}}
                        </div>
                      </div>
                    </div>

                    @else
                    
                    <div class="col-md-1">
                      <div class="form-group">
                        <div class="col-md-12">
                          {!! Form::label('', 'Branch:', ['class' => 'control-label pull-left', 'style' => 'color:black']) !!}
                        </div>
                        <div class="col-md-12">
                          {!! Form::select('searchABZ', [''=>'--All--']+$branchList, null ,['id'=>'searchABZ','class'=>'form-control input-sm','autocomplete'=>'off', 'required']) !!}
                          {{-- <p id='filBranchE' style="max-height:5px; color:red;"></p> --}}
                        </div>
                      </div>
                    </div>
                    @endif

                    {{-- End of Status --}}

                    {{-- Start of the to date --}}
                    <div class="col-md-1">
                      <div class="form-group">
                        <div class="col-md-12">
                          {!! Form::label('','Year:', ['class' => 'control-label pull-left', 'style' => 'color:black']) !!}
                        </div>
                        <div class="col-md-12">
                          <select name="Year" class="form-control input-sm" id="Year" style="color: black;" required="true">
                            <option value=""> -- Select Year -- </option>
                            @foreach($UniqueLoanYear as $UniqueYear)
                            <option value="{{ $UniqueYear }}"> {{$UniqueYear}} </option>             //Loop for showing the data in the Year selection option
                            @endforeach
                          </select>
                        </div>
                      </div>
                    </div>
                    {{-- End of the to date --}}

                    <div class="col-md-1">
                      <div class="form-group">
                        <div class="col-md-12">
                          {!! Form::label('', 'Month:', ['class' => 'control-label pull-left', 'style' => 'color:black']) !!}
                        </div>
                        <div class="col-md-12">
                          <select name="searchMonth" class="form-control input-sm" id="searchMonth" style="color: black;" required="true">
                            <option value=""> -- Select Month -- </option>
                            @foreach ($monthsOption as $key => $monthsOption1)
                            <option value="{{$monthsOption1}}">{{$monthsOption1}}</option>
                            @endforeach
                          </select>
                          {{-- <p id='filBranchE' style="max-height:5px; color:red;"></p> --}}
                        </div>
                      </div>
                    </div>
                    {{-- End of Type --}}

                    {{-- Start of the Submit Button --}}
                    <div class="col-md-1">
                      <div class="form-group">
                        {!! Form::label('', '', ['class' => 'control-label col-md-12', 'style' => 'color:#708090; padding-top: 25px;']) !!}
                        <div class="col-md-12">
                          {{-- {!! Form::submit('Show Report', ['id' => 'reportSubmit', 'class' => 'btn btn-primary btn-xs']); !!} --}}
                          <input class="btn btn-primary" type="submit" name="Submit" value="Show report" id="reportSubmit">
                        </div>
                      </div>
                    </div>
                    {{-- End of the Submit button --}}
                  </div>

                  {!! Form::close()  !!}
                  <!-- filtering end-->
                </div>
              </div>
              <div class="row" id="reportingDiv">

              </div>
            </div>      {{-- panel-body panelBodyView DIV --}}
          </div>
        </div>
      </div>
    </div>
    <!-- End of Dropdown form -->

    {{-- @include('microfin/reports/mfnFieldOfficerReport/mfnFieldreport1_new_table'); --}}
  </div>

  <script type="text/javascript">

    $("select").on("change",function(){
      var a = $(this).val();
      if (a == 'Y') {
        $(".feel-me").addClass("hide");
      }else if (a == 'N') {
        $(".feel-me").removeClass("hide");
      }
    });

    $(function(){
      $( "#txtDate1" ).datepicker({
       dateFormat: "yy-mm-dd",
       showOtherMonths: true,
       selectOtherMonths: true,
       changeMonth: true,
       changeYear: true,
       yearRange: "-50:+0",
       maxDate: "dateToday"
     }).val();
    })

    $(function(){
      $( "#txtDate2" ).datepicker({
       dateFormat: "yy-mm-dd",
       showOtherMonths: true,
       selectOtherMonths: true,
       changeMonth: true,
       changeYear: true,
       yearRange: "-50:+0",
       maxDate: "dateToday"
     }).val();
    })

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

 var serializeValue=$(this).serialize();
   //alert(serializeValue);

   $('#loadingModal').show();
   $("#reportingDiv").load('{{URL::to("monthlyTargetsAndAchievementReportSubmit")}}'+'?'+serializeValue);
 });

$(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; size: A4 landscape !important;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; } body {transform: scale(1); -moz-transform: scale(1); -moz-transform: rotate(-90deg);}}</style><style>@page:first{tr:nth-of-type(4n){page-break-after: always;}}</style>';

    //transform: scale(0.5);transform-origin: 0 0;
    //-webkit-transform:scale(.8,.8);

    // 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; size: landscape;}</style><style>@media print { body{zoom:60%} .element-that-contains-table { overflow: visible !important; } }</style><style>@page:first{tr:nth-of-type(4n){page-break-after: always;}}</style>';

    // var printStyle = '<style media="print">@media screen and (orientation:landscape){size:auto a4 landscape !important;} tbody tr td {border:1px solid black !important;font-weight:normal;} thead tr th {border:1px solid black !important;color:black !important;background-color:none; font-weight:bold; !important;} @page {size: auto;margin: 10px auto;}</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();
  });

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

}); /* Ready to print */

</script>

@endsection