@extends('main')

@section('css')
    <link rel="stylesheet" href="{{url('public/assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{url('public/assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}">
@endsection
@section('content')
    <div id="main-content">
        <div class="container-fluid">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-6 col-md-8 col-sm-12">
                        <h2><a href="javascript:void(0);" class="btn btn-xs btn-link btn-toggle-fullwidth"><i class="fa fa-arrow-left"></i></a>Payroll Details</h2>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#"><i class="icon-home"></i></a></li>
                            <li class="breadcrumb-item">Team</li>
                            <li class="breadcrumb-item active">Salary Details</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="header">
                            <h2>Salary Main Sheet</h2>
                        </div>
                        <form action=" {{route('generateMonthlySalarySetup')}} " method="get">
                            @csrf

                            <p>start date</p><input type="date" name="startdate" class="form-control" >
                            <p>end date</p><input type="date" name="enddate" class="form-control" >
                            <br/>
                            <button type="submit" class="btn btn-warning">generate</button>
                        </form>



                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <script src="{{url('public/assets/js/pages/tables/jquery-datatable.js')}}"></script>
    <script src="{{url('public/assets/bundles/datatablescripts.bundle.js')}}"></script>
    <script src="{{url('public/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>

    <script>

        $(document).ready( function () {
            table = $('#generateSalary').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                "ordering": false,
                // type:"POST",
                "ajax":{
                    "url": "{!! route('salary-details') !!}",
                    "type": "POST",
                    data:function (d){
                        d._token="{{csrf_token()}}";
                        // alert(d.orderstatusId);
                    }
                },
                columns: [
                    { data: 'salaryYear', name: 'salaryYear'},
                    { data: 'salaryMonthName', name: 'salaryMonthName'},
                    { data: 'userName', name: 'userName'},
                    { data: 'preparedDate', name: 'preparedDate'},
                    { "data": function(data){


                            return '<a class="btn btn-sm btn-outline-secondary" title="download" data-panel-id="' + data.salaryYear + '" data-panel-id2="' + data.salaryMonth + '" onclick="downloadSalarySheet(this)"><i class="fa fa-download"></i></a>'

                                ;},
                        "orderable": false, "searchable":false, "name":"selected_rows" },


                    // { title: 'Action', data: 'action', orderable: false, searchable:false },
                ]
            });
        });
        function excel(x) {
            var id=$(x).data('panel-id');
            alert(id);
            // var products=selecteds;
            //alert(products);
                $.ajax({
                    type: 'POST',
                    url: "{!!route('generate.excelExport') !!}",
                    cache: false,
                    data: {'id': id},
                    success: function (data) {
                        var link = document.createElement("a");
                        link.download = data.fileName+".xls";
                        var uri = '{{url("public/excel")}}'+"/"+data.fileName+".xls";
                        link.href = uri;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        // delete link;
                        // table.ajax.reload();  //just reload table
                    }
                });
        }
    </script>
    <script>
        function downloadSalarySheet(x) {

            var year=$(x).data('panel-id');
            var month=$(x).data('panel-id2');
            alert(year);
            alert(month);
            $.ajax({
                url: '{{route('salary-sheet-download')}}',
                method: 'GET',
                data:{year: year, month:month},
                responseType: 'blob',
                // xhrFields: {
                //     responseType: 'blob'
                // },
                success: function (data) {
                    var a = document.createElement('a');
                    var url = '{{ url('storage/app/public') }}'+'/'+data + '.xlsx';
                    a.href = url;
                    a.download = data + '.xlsx';
                    document.body.appendChild(a);
                    a.click();
                    a.removeChild();
                    window.URL.revokeObjectURL(url);
                }
            });
        }
    </script>
@endsection