@extends('hr_main')
@section('title', '| Consolited Staff Report')
@section('content')
@include('convert_word')

@include('hr/totalStaffList/totalStaffListAjax')

<!-- Start of the Dropdown form -->
<div class="row">
  <div class="col-md-12">
    <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;">
          Total Staff List
        </h3>
        <hr>
      </div>

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

          <div class="row">
            {{-- Start of Branch Name --}}
            <div class="col-md-12">
              <div class="col-md-1" id="categoryDiv">
                <div class="form-group">
                  <div class="col-md-12">
                    <select name="searchCategory" class="form-control input-sm" id="searchCategory" style="color: black;" required>
                        <option value=""> -- Category -- </option>
                        <option value="Branch"> Branch </option>
                        <option value="Area"> Area </option>
                        <option value="Zone"> Zone </option>
                    </select>
                  </div>
                </div>
              </div>
              {{-- End of Category Name --}}

              <div class="col-md-1" id="bazDiv">
                <div class="form-group">
                  <div class="col-md-12">
                    <select name="searchBAZ" class="form-control input-sm" id="searchBAZ" style="color: black;" required>

                    </select>
                  </div>
                </div>
              </div>
              {{-- End of Branch/Area/Zone --}}

              <div class="col-md-1" id="yearDiv">
                <div class="form-group">
                  <div class="col-md-12">
                    <select name="searchYear" class="form-control input-sm" id="searchYear" style="color: black;">
                        <option value=""> -- Year -- </option>
                        @foreach ($yearList as $key => $year)
                            <option value="{{$year}}">{{$year}}</option>
                        @endforeach
                    </select>
                  </div>
                </div>
              </div>
              {{-- End of Year --}}

              <div class="col-md-1" id="monthDiv">
                <div class="form-group">
                  <div class="col-md-12">
                    <select name="searchMonth" class="form-control input-sm" id="searchMonth" style="color: black;">
                        <option value=""> -- Month -- </option>
                        <option value="01"> January </option>
                        <option value="02"> February </option>
                        <option value="03"> March </option>
                        <option value="04"> April </option>
                        <option value="05"> May </option>
                        <option value="06"> June </option>
                        <option value="07"> July </option>
                        <option value="08"> August </option>
                        <option value="09"> September </option>
                        <option value="10"> October </option>
                        <option value="11"> Novomber </option>
                        <option value="12"> December </option>
                    </select>
                  </div>
                </div>
              </div>
              {{-- End of Month --}}

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

      {{-- Start of the table --}}
      <div class="row" id="reportingDiv">
      </div>
      {{-- End of the table --}}
    </div>      {{-- panel-body panelBodyView DIV --}}
  </div>
</div>
<!-- End of Dropdown form -->

<script type="text/javascript">
    $("form").submit(function( event ) {
       event.preventDefault();

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

       $("#reportingDiv").load('{{URL::to("./hr/report/totalStafflistTable")}}'+'?'+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;}</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 footerContents = "<div class='row' style='font-size:12px; padding-left:5px; padding-top:20px;'>Prepared By: <span style='display:inline-block; width: 30%; padding-top:40px;'></span> Reviewed By: <span style='display:inline-block; width: 34%; padding-right:15px; padding-top:40px;'></span>Approved By:</div>";

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

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

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

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

@endsection