@extends('admin.layout.master')
@section('home')
    <style>
        label {
            margin-bottom: 1px;
        }

        .form-group {
            margin-bottom: 9px;
        }

        .table-responsive {
            height: calc(100vh - 200px);
        }

        th {
            background: #007bff;
            color: white !important;
            position: sticky;
            top: 0;
        }

        table {
            position: relative;
        }

        .table-bordered td, .table-bordered th {
            border: 1px solid #aaabab;
        }

        td {
            text-align: center;
        }
    </style>
    <section class="container">
        <div class="row">
            <button class="btn btn-md btn-info text-right" onclick="PrintTable();">Print</button>
        </div>
        <div class="table-responsive" id="print">
            <div style="width: 100%;">
                <div style="width: 20%; float: left;">
                    &nbsp;
                </div>
                <div style="width: 60%; float: left; text-align: center;">
                    <h2>CURSOR Ltd.</h2>
                    <p>11/11 Jobeda Villa, Panchlaish,<br>
                        Chittagong, Bangladesh
                    </p>
                    <h4>Pay Slip for the period
                        of @if(!empty($salary_info)){{date('F-Y',strtotime('01-'.$salary_info->month))}}@endif</h4>
                </div>
                <div style="width: 20%; float: left;">
                    &nbsp;
                </div>
                <div style="clear: both;"></div>
            </div>


            <div style="width: 100%;">
                <div style="width: 25%; float: left;">
                    <p>Employee ID</p>
                    <p>Department</p>
                    <p>Date of Joining</p>
                </div>
                <div style="width: 25%; float: left;">
                    <p>: @if(!empty($salary_info)){{$salary_info->get_emp_info->emp_code}}@endif</p>
                    <p>: @if(!empty($salary_info)){{$salary_info->get_emp_info->fetch_department->name}}@endif</p>
                    <p>
                        : @if(!empty($salary_info)){{date('d-m-Y',strtotime($salary_info->get_emp_info->joining_date))}}@endif</p>
                </div>
                <div style="width: 25%; float: left;">
                    <p>Name</p>
                    <p>Designation</p>
                </div>
                <div style="width: 25%; float: left;">
                    <p>: @if(!empty($salary_info)){{$salary_info->get_emp_info->emp_name}}@endif</p>
                    <p>: @if(!empty($salary_info)){{$salary_info->get_emp_info->fetch_designation->name}}@endif</p>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div class="table-responsive" id="print">
                <table class="table table-bordered table-hover" id="salary_table">
                    <tr>
                        <th class="text-center" style="width: 25%;">Earnings</th>
                        <th class="text-center" style="width: 25%;">Amount</th>
                        <th class="text-center" style="width: 25%;">Deductions</th>
                        <th class="text-center" style="width: 25%;">Amount</th>
                    </tr>
                    <tr>
                        <td>Gross Salary</td>
                        <td>@if(!empty($salary_info)){{$salary_info->gross_salary}}@endif</td>
                        <td>Absent Amount</td>
                        <td>@if(!empty($salary_info)){{$salary_info->absent_amount}}@endif</td>
                    </tr>
                    <tr>
                        <td>Basic Salary</td>
                        <td>@if(!empty($salary_info)){{$salary_info->basic_salary}}@endif</td>
                        <td>Late Amount</td>
                        <td>@if(!empty($salary_info)){{$salary_info->late_amount}}@endif</td>
                    </tr>
                    <tr>
                        <td>OT Amount</td>
                        <td>@if(!empty($salary_info)){{$salary_info->ot_hour_amount}}@endif</td>
                        <td>Leave Amount</td>
                        <td>@if(!empty($salary_info)){{$salary_info->leave_amount}}@endif</td>
                    </tr>
                    <tr>
                        <td>OT Day Amount</td>
                        <td>@if(!empty($salary_info)){{$salary_info->ot_day_amount}}@endif</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td><b>Total Salary</b></td>
                        <td><b>@if(!empty($salary_info)){{$salary_info->total_salary}}@endif</b></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>Adv Amount</td>
                        <td>@if(!empty($salary_info)){{$salary_info->advance_amount}}@endif</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>Loan Amount</td>
                        <td>@if(!empty($salary_info)){{$salary_info->loan_amount}}@endif</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>Pf Amount</td>
                        <td>@if(!empty($salary_info)){{$salary_info->pf_amount}}@endif</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td><b>Net Payable</b></td>
                        <td><b>@if(!empty($salary_info)){{$salary_info->net_amount}}@endif</b></td>
                    </tr>
                </table>
            </div>
            <div style="width: 100%; margin-top: 60px;;">
                <div style="width: 25%; float: left; border-top: 1px solid black; text-align: center;">
                    <h6>Employer's Signature</h6>
                </div>
                <div style="width: 50%; float: left;">
                    &nbsp;
                </div>
                <div style="width: 25%; float: left; border-top: 1px solid black; text-align: center;">
                    <h6>Employee's Signature</h6>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <script type="text/javascript">
            function PrintTable() {
                var printWindow = window.open('', '', 'height=200,width=400');
                printWindow.document.write('<html><head><title>Table Contents</title><link href="{{ asset('/') }}assets/css/bootstrap.min.css" rel="stylesheet">');

                //Print the Table CSS.
                var table_style = document.getElementById("salary_table").innerHTML;
                printWindow.document.write('<style>\n' +
                    '    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {\n' +
                    '        padding: 2px;\n' +
                    '        line-height: 1.428571;\n' +
                    '        font-size: 12px !important;\n' +
                    '        vertical-align: top;\n' +
                    '        border: 1px solid black !important;\n' +
                    '    }\n' + '</style>');
                printWindow.document.write('</head>');

                //Print the DIV contents i.e. the HTML Table.
                printWindow.document.write('<body>');
                var divContents = document.getElementById("print").innerHTML;
                printWindow.document.write(divContents);
                printWindow.document.write('</body>');

                printWindow.document.write('</html>');
                printWindow.document.close();
                printWindow.print();
            }
        </script>
    </section>
@endsection