@extends('layouts.main')
@push('styles')
<!-- BEGIN DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}"/>
<!-- END DataTables-->
@endpush
@section('content')
<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="panel-heading">
                    <div class="col-md-12">
                        <div class="col-md-8">                                
                            <h1>
                                {{ __('strings.extra_time_header') }}  
                            </h1>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    <div class="col-md-12 mb-3 ml-3"> 
                        <code class="mb-3">{{__('strings.extra_time_import_message')}}</code>
                    </div>
                    
                    <div class="col-md-12">                        
                        <div class="table-responsive" style="height: 450px;">                            
                        <table id="trips-table" class="table hover mb-0">
                            <thead class="thead-inverse">
                                <tr>
                                    <th>Id</th>
                                    <th>{{__('strings.employee_number')}}</th>
                                    <th>{{__('strings.name')}}</th>
                                    <th>{{__('strings.last_name')}}</th>
                                    <th>{{__('strings.department')}}</th>
                                    <th>{{__('strings.phone')}}</th>
                                    <th>{{__('strings.sex')}}</th>
                                    <th>{{__('strings.blood_type')}}</th>
                                    <th>{{__('strings.google_url')}}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    </div>
                </div>
                <div class="col-md-4 mt-4">
                <button id="btn-skipped-employeed"  type="button" class="btn btn-block btn-primary " onclick="nipCalendarRequest()" style="display: none;">
                        {!! __('strings.generate_new_list') !!}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<input id="input" type="file" class="btn btn-primary mr-3 mb-1" hidden="hidden"/>
<form id="form_employee_directory" action="{{route('attach_employees_calendar', ['calendar_id' => -1])}}" method="post" target="_blank">
    {{ csrf_field() }}
    <input type="hidden" id="user_token" name="user_token" value="{{Auth::user()->SECURE_TOKEN}}" >
    <input type="hidden" id="nip" name="nip" value="">
</form>

<hr>

<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="panel-heading">
                    <div class="col-md-12">
                        <div class="col-md-8">                                
                            <h1>
                            Empleados no encontrados 
                            </h1>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    <div class="col-md-12">                        
                        <div class="table-responsive" style="height: 450px;">                            
                        <table id="no-found-table" class="table hover mb-0">
                            <thead class="thead-inverse">
                                <tr>
                                    <th>Numero de Empleado</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<!-- BEGIN DataTables-->
<script src="{{asset('datatables/datatables.min_1.js')}}" type="text/javascript"></script>
<!-- END DataTables-->
<script src="{{asset('js/read-excel-file.min.js')}}" type="text/javascript"></script>


<script type="text/javascript">
    
    var table;
    var noFoundTable;
    var dateTime;
    $(document).ready(function() {
         
        initExcelImport();
    
        //setting language for moment.js
        moment.locale('es');

        //initialize datetable
        //initialize datetable
        table = $('#trips-table').DataTable({
            responsive: false,
            paging: false,	
            searching: true,
            ordering: false,
            columns: [
                    { data: 'id', defaultContent: "---"},
                    { data: 'employee_number', defaultContent:"---"},
                    { data: 'name', defaultContent:"---"},
                    { data: 'last_name', defaultContent:"---"},
                    { data: 'department', defaultContent:"---"},
                    { data: 'phone', defaultContent:"---"},
                    { data: 'sex', defaultContent: "---"},
                    { data: 'blood_type', defaultContent: "---"},
                    { data: 'google_url', render: function(data, type, row, meta){
                        return "<a target='_blank' href=' "  + data + " '>" + data + "</a>";
                    },defaultContent: "---"},
            ],
            dom: 'Bfrtip',
            buttons: [
             
                {
                        text: '{{ __("strings.excel_import") }}',
                        action: function ( e, dt, node, config ) {
                                $( "#input" ).trigger( "click" );                                         
                        },
                        className:'btn-dark',
                        init: function(api, node, config) {
                            $(node).removeClass('btn-secondary')
                        }
                    }
            ],
            "language" : {
                    url: "{!! asset('datatables/languages/spanish.json') !!}"
            }
        });

        noFoundTable = $('#no-found-table').DataTable({
            paging: false,	
            searching: true,
            ordering: false,
            dom: 'Bfrtip',
            buttons: [
                'excel', 'pdf'
            ],
            "language" : {
                    url: "{!! asset('datatables/languages/spanish.json') !!}"
            }
        });
    });
    

    function initExcelImport() {
        var input = document.getElementById('input');
        input.addEventListener('change', function() {
            readXlsxFile(input.files[0]).then(function(data) {
                // `data` is an array of rows
                var employees = [];

                // each row being an array of cells.
                data.forEach(function(item) {
                    employees.push(item[0]);
                    dateTime = item[1] + ' ' + item[2]
                });
                table.clear().rows.add(data).draw();
                apiRequest(employees);
                
            }, (error) => {
                console.error(error)
                $.alert("{{__('strings.error_excel_import')}}")
            });
        });
    }
    


    function apiRequest(employees) {
        $.post("{{route('api_get_employees')}}",{
            token: "{{Auth::user()->SECURE_TOKEN}}",
            employees: employees
        }, function(response){
            $('#btn-skipped-employeed').show('slow');
            table.clear().rows.add(response.data).draw();
            $("input[name='employees[]'").remove();

            response.data.forEach(function(item){
                $("#form_employee_directory").append(
                        $('<input>')
                            .attr('type', 'hidden')
                            .attr('name', 'employees[]')
                            .val(item.id)
                    );
            });
            fillNoFoundTable(employees, response.data);
        });
    }

    function nipCalendarRequest() {
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) {      
                    apiCalendarRequest(nip);
                }
            }
        });
    }

    function apiCalendarRequest(nip) {
        $.showPreloader("{{__('strings.processing_request')}}");
        $.post("{{route('add_employees_calendar')}}",{
            user_token: '{{Auth::user()->SECURE_TOKEN}}',
            date_time: moment(dateTime).utc().format('YYYY-MM-DD HH:mm'),
            nip: nip,
            alias: "Horas-Extra-" + dateTime
            },
        function(data) {
            $.hidePreloader();
            //$.hidePreloader();
            var action = "{{route('attach_employees_calendar', ':id')}}";
            action = action.replace(':id', data.calendar.id);
            $('#nip').val(nip);
            $('#form_employee_directory').attr('action', action);
            $("#form_employee_directory").submit();
        })
        .fail(function(err) {
            console.log(err);
            $.hidePreloader();
            if(err.responseJSON) {
                $.alert(err.responseJSON.message + "<br>{{__('strings.route_generator_message')}}");
            } else {
                $.alert("{{__('strings.error_message')}} <br>{{__('strings.route_generator_message')}}");  
            }
        });
    }

    function fillNoFoundTable(employees, response) {
        var noFoundData = []; 
        employees.forEach(function(item){
            var found = false;
            for(var i = 0; i < response.length; i++) {
                if(response[i].employee_number == item) {
                    found = true;
                    break;
                }
            }
            
            if(!found) {
                noFoundData.push([item]);
            }
        });
        console.log(noFoundData);
        noFoundTable.clear().rows.add(noFoundData).draw();
    }
</script>
@endpush