@extends('hr_main')
@section('title', '| Monthly New Resigned Staff Report')
@section('content')
<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="row" style="display:flex; align-items:center; border-bottom: 1px solid #fff; margin-bottom: 15px; ">
                    <div class="col-md-6" style="padding:10px 0; color: #fff;">
                        <span style="font-size: 25px;">{{ $d->pageTitle }}</span>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary pull-right doPrint">
                            <i class="fa fa-print">Print</i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="panel-body panelBodyView" >
                <div class="row">
                    @include('hr.monthlyNewIncrementStaffReport._filterForm')
                </div>

                <div id="print-content">    
                    
                    {{-- Header --}}
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div style="font-size: 1.8em;">{{ $d->companyName }}</div>
                            <div>{{ $d->companyAddress }}</div>
                            <div style="text-decoration:underline;">{{ $d->reportLabel }}</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <span>Date: {{ !empty($d->endDate) ? $d->endDate : '' }}</span>
                        </div>
                    </div>
                    
                    {{-- Table --}}
                    <div class="row">
                        @include('hr.monthlyNewIncrementStaffReport._table')
                    </div>

                    {{-- Footer --}}
                    <div style="display: flex; justify-content: space-between; margin: 60px 0 0;">
                        <div>
                            <div>
                                Prepared By
                            </div>
                            <div>
                                Date........
                            </div>
                        </div>
                        <div>
                            <div>
                                Received By
                            </div>
                            <div>
                                Date........
                            </div>
                        </div>
                        <div>
                            <div>
                                Approved By
                            </div>
                            <div>
                                Date........
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>      
        {{-- ./panel --}}
   </div>
   {{-- ./col-md-12 --}}
</div>
{{-- ./row --}}
@endsection

@section('footerAssets')
<script type="text/javascript">
   
    $('.year').datepicker({
        minViewMode: 2,
        format: 'yyyy'
    });
    $(".month").datepicker( {
        format: "mm",
        startView: "months", 
        minViewMode: "months"
    });

    
    $(".doPrint").click(function(){
        var mainContents = document.getElementById("print-content").innerHTML ;   
        var win = window.open('','printwindow');
        var printStyle = `<style>
            .report-header{ text-align:center; font-family:arial; }
            .report-header h3{ margin:0px;}
            .report-header p{ margin:0px;}
            .report-header .report-month{ margin-bottom:20px;}
            .employee-information h5{ margin-bottom: 0;}
            .fund-information h5{ margin-bottom: 0;}
            .loan-information h5{ margin-bottom: 0;}
        
            html,body{
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            }

            table {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
                margin: 0px;
            }

            td,  th {
                border: 1px solid #000;
                padding: 5px;
            }

            th {
                padding-top: 12px;
                padding-bottom: 12px;
                text-align: left;
                color: #000;
            }
            .text-right{
                text-align: right;
            }
            .text-center{
                text-align: center;
            }
            .page {
                page-break-after: always;
                page-break-inside: avoid;
            }
            .signature{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 60px;
                font-family: arial;
            }
        </style>`;
        var printContent = '<div>' + printStyle + mainContents +'</div>';
        win.document.write(printContent);
        win.print();
        win.close();

    });
</script>
@endsection