@extends('payroll.employee_frontend.layouts.employee')
@section('custom_style')
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.time.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.date.css" rel="stylesheet"/>
    <link rel="stylesheet" href="{{ asset('/') }}treeview/tree_view.css"/>
@endsection
<style>
    @media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}
</style>
@section('content')

    <section>
        <div class="col-12 mt-4">
            <h2 class="page-title text-center">Salary Statement</h2>
            <div class="mb-2 heading-border"></div>
        </div>
    </section>
    <section class="px-3  pt-3 pt-lg-5 row no-print">
        <div class="col-12 mb-4">
            <div class="blu-card d-flex flex-wrap">
                <div class="col-12">
                    @if (session('success'))
                        <div class="alert alert-success" id="hide-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger" id="hide-alert">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
                <form class="leave-form col-12 col-md-12 border-right" action="{{route('employee.salary_statement')}}"
                      method="get">
                    {{-- @csrf --}}
                    <div class="row flex-wrap">
                        <div class="form-group col-12 col-md-3">
                            <label for="exampleInputEmail1">From Date</label>
                            <input required id="date_from" name="date_from" class="form-control datepicker" value="{{ request()->get('date_from') }}"
                                   placeholder="Date From" type="text">
                        </div>
                        <div class="form-group col-12 col-md-3">
                            <label for="exampleInputEmail1">To Date</label>
                            <input required id="date_to" name="date_to" class="form-control datepicker" value="{{ request()->get('date_to') }}"
                                   placeholder="Date To" type="text">
                        </div>
                        <div class="form-group col-12 col-md-3 mt-2">
                            <input class="btn btn-primary px-4 mt-4" type="submit" value="Search">
                        </div>
                        <div class="form-group col-12 col-md-3 mt-4">
                            <div class="col-12 text-right"><button type="button" class="btn btn-md btn-danger" onclick="window.print()">Print</button></div>
                        </div>
                    </div>
                </form>
               
            </div>
        </div>
    </section>
    @if($salary_statement)
  
    <section class="px-3  pt-3 pt-lg-5 row">
        <div class="col-12 mb-4">
            @foreach ($salary_statement as  $employee_id=>$data)
                @foreach ($data as  $employee)
                    <div class="row" >
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body m-5">
                                    <h3  style="text-align: center">TO WHOM IT MAY CONCERN</h3>
                                    <div class="m-5">
                                        <h5  style="text-justify: inter-word; text-align: justify">
                                            This is to certify that, {{$employee['name']}},  {{$employee['designation']}} of  {{ware_info()->name_eng}}, has been given 
                                            Taka {{$employee['total_amount']}} ({{convert_number($employee['total_amount'])}}) as salary/remuneration 
                                            for the period from {{carbon()->parse(request()->get('date_from'))->format('d-F-Y')}} to  {{carbon()->parse(request()->get('date_to'))->format('d-F-Y')}}. His salary/remuneration statement is as 
                                            follows:
                                        </h5>
                                    </div>
                                
                                    <div class="col-lg-12 col-md-12 col-sm-12 " style="padding:0 150px">
                                        <table class="table table-stripped table-bordered text-center" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th class="text-left" style="width:30%">Particulars</th>
                                                    <th style="width:30%">Taka</th>
                                                </tr>
                                                <tr>
                                                    <td class="text-left">Basic</td>
                                                    <td>{{$employee['basic_salary']}}</td>
                                                </tr>
                                                @foreach ($employee['allowances'] as $allowance)
                                            
                                                <tr>
                                                    <td class="text-left">{{$allowance['name']}}</td>
                                                    <td>{{$allowance['amount']}}</td>
                                                </tr>
                                                @endforeach
        
                                                <tr>
                                                    <td class="text-left">Festival Bonus </td>
                                                    <td>{{$employee['festival_bonus']}} </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-left">Overtime Allowance</td>
                                                    <td>{{$employee['over_time_allowance']}}  </td>
                                                </tr>
        
                                                <tr>
                                                    <td class="text-left"><h4>Total</h4> </td>
                                                    <td><h4>{{$employee['total_amount']}}</h4> </td>
                                                </tr>
        
                                            </thead>
                                        </table>
                                    </div>
                                  
                                    <div class="col-md-6 text-left m-5">
                                        <h4 class="">{{ware_info()->name_eng}}</h4>
                                        <h4 class="mb-3" style="border:dashed 1px black; margin:50px 200px 10px 0"></h4>
                                        <h5 class="">Manager - HR Development & Administration</h5>
                                        <h5 class="">Company Secretary</h5>
                                    </div>
                                    <div class="col-md-6">
                                   </div>
                                </div>
                             </div>
                            </div>
                        </div>
                        @endforeach
                        @endforeach
            </div>
    </section>
   @else
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="text-center"> No Data Found</h4>
                </div>
           </div>
        </div>
    </div>
    @endif
@endsection

@section('script')

    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/legacy.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.time.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.date.js"></script>
    <script src="{{ asset('/') }}assets/plugins/bootstrap-material-datetimepicker/js/moment.min.js"></script>

    <script>
        
        today = new Date();
        days = 86400000; //number of milliseconds in a day;

        $('.datepicker').pickadate({ // this is used in the system
            selectMonths: true,
            selectYears: 100,
            format: 'dd-mm-yyyy',
            firstDay: 0
        });

        $('.datepicker_month').pickadate({ // this is used in the system
            selectMonths: true,
            selectYears: true,
            format: 'mm-yyyy'
        });
        $('.timepicker').pickatime()
    </script>

    <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("attendance_table").innerHTML;
            printWindow.document.write('<style>@page{size:landscape;}#print{font-size: 9px !important;}\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: 1px;\n' +
                '        line-height: 1.428571;\n' +
                '        font-size: 11px !important;\n' +
                '        vertical-align: top;\n' +
                '        border: 1px solid black !important;\n' +
                '        text-align: center !important;\n' +
                '    }\n' +
                '    .sign{ width: 30%!important;}' +
                '    .table>thead>tr>th{ text-align: center !important;}' +
                '    .center_id{ text-align: center !important;}' +
                '</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>

@endsection