@extends('vendor.adminlte.includes.hr-create-report')
@section('content')
    <?php Fun::lang() ?>
    <?php $rand_id = rand(1, 1000) . time() . rand(1, 1000);?>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div id="page" class="page">
        <form class="form" role="form" method="POST" action="">
            @csrf
            <div class="row">

                <div class="col-xs-12 col-sm-3 col-md-3 ">
                    <div class="form-group">
                        <label class="">Employee Name</label>
                        <select id="select2_ajax_emp_id" class=" form-control"
                                name="select2_ajax_emp_id[]" multiple></select>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-3 col-md-3 ">
                    <div class="form-group">
                        <label class="">Form date</label>
                        <input type="text" name="from_date" class="form-control date_picker" placeholder="From date"
                               value="{{ date('Y-m-d')}}">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-3 col-md-3 ">
                    <div class="form-group">
                        <label class="">To date</label>
                        <input type="text" name="to_date" class="form-control date_picker" placeholder="To date"
                                value="{{date('Y-m-d')}}">
                    </div>
                </div>
            </div>
        </form>


        <br>
        <div style="text-align: center">
            <button type="button" class="btn btn-app search-data">
                <i class="fa fa-search"></i> Search
            </button>
            <button type="button" class="btn btn-app print-data" onclick="printDiv();">
                <i class="fa fa-print"></i> Print
            </button>
            <button type="button" class="btn btn-app" id="btn-excel"
                    {{-- onclick="exportTableToExcel('table-data', 'Data-{{date('Y-m-d')}}')"--}}
            >
                <i class="fa fa-file-excel-o"></i> Excel
            </button>
        </div>
        <br>
        <div class="show-report"></div>

    </div>

@endsection


@section('js')
    <script type="text/javascript">
        jQuery(document).ready(function($) {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#select2_ajax_emp_id').select2({
                placeholder: 'Select Employee',
                ajax: {
                    url: '{{url('api/employee')}}',
                    dataType: 'json',
                    delay: 0,
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.user_firstname + ' ' + item.user_lastname,
                                    id: item.id
                                }
                            })
                        };
                    },
                    cache: true
                },
                minimumInputLength: 0,
                autoClear: false,
                autoclose: true,
            });

            var report_url = '';

            $('body').on('click', '.report-url', function (e) {
                e.preventDefault();
                report_url = $(this).data('href');
                $('.report-url').each(function () {
                    $(this).parent().removeClass('active')
                });
                $(this).parent().addClass('active');
            });

            $('.search-data').on('click', function (e) {
                e.preventDefault();

                var from_date = $('[name="from_date"]').val();
                var to_date = $('[name="to_date"]').val();
                var emp_id = $('[name="select2_ajax_emp_id[]"]').val();
                var eid = $('#select2_ajax_emp_id').val();

                if (report_url != '') {

                    $.ajax({
                        url: report_url,
                        type: 'POST',
                        async: false,
                        dataType: 'html',
                        data: {
                            from_date: from_date,
                            to_date: to_date,
                            emp_id: emp_id,
                        },
                        success: function (d) {
                            $('.show-report').html(d);
                        },
                        error: function (d) {
                        }
                    });

                } else {
                    alert('Please click the report type');
                }
            });


        });
        function printDiv() {

            var divToPrint = document.getElementById('DivIdToPrint');

            var newWin = window.open('', 'Print-Window');

            newWin.document.open();

            newWin.document.write(`
                <html>
                <head>

                </head>
                <body onload="window.print()">${divToPrint.innerHTML}</body>
                </html>
            `);

            newWin.document.close();

            setTimeout(function () {
                newWin.close();
            }, 10);

        }

    </script>


@stop