@extends('hr_main')
@section('title', '| Monthly Dismiss 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">
                    <div class="panel-title">
                        {{ $d->pageTitle }}
                    </div>
                    <div class="panel-options pull-right">

                        <button class="btn btn-primary pull-left doPrint">
                            <i class="fa fa-print doPrint">Print</i>
                        </button>
                        <button id="btnExportExcel" class="btn btn-primary" target="_blank" style="">
                            <i class="fa-file-excel-o fa-lg" aria-hidden="true"> Excel</i>
                        </button>

                        <button id="btnExportPdf" class="btn btn-primary" target="_blank" style="">
                            <i class="fa-file-pdf-o" aria-hidden="true"> Pdf</i>
                        </button>
                    </div>
                </div>

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

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


                            {{-- Table --}}
                            <div class="row">
                                @include('hr.report.monthly_contract_conclude_staff_report._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>
                                        Checked 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>
    </div>
    {{-- ./row --}}
@endsection

@section('footerAssets')
    <script type="text/javascript">
        $(document).ready(function() {
            $('.start_date, .end_date').datepicker({
                format: 'dd-mm-yyyy',
                autoclose: true,
                todayHighlight: true
            });


            $(document).on('click', '.doPrint', 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