@extends('layouts.main')
@push('styles')
<link href="{{asset('css/redtrack.css')}}" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min_1.css')}}"/>
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-datetimepicker.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/dataTables.checkboxes.css')}}"/>

<style>
    
    table.dataTable thead th {
       border-bottom: 0;
    }
    table.dataTable tfoot th {
       border-top: 0;
    }

    /*--[  This does the job of making the table rows appear as cards ]----------------*/
    .card  {
        box-shadow: 3px 3px 6px rgba(0,0,0,0.25);
        background-color: white;
    }

    .calendar-card  {
        float: left;
        margin: 10px;
        max-width: 255px;
        box-shadow: 3px 3px 6px rgba(0,0,0,0.25);
        background-color: white;
    }
    

</style>
@endpush
@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="calendar-card p-4">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <span class="h4 d-block font-weight-normal mb-2"><script>document.write(moment.utc("{{$calendar->date_time ?? ''}}").local().format('HH:mm'))</script></span>
                    <span class="font-weight-light"><script>document.write(moment.utc("{{$calendar->date_time ?? ''}}").local().format('Y-MM-DD'))</script></span>
                    <span class="d-block text-muted small">{{$calendar->alias ?? ''}}</span>
                    <span class="d-block text-muted small">{{$calendar->comments ?? ''}}</span>
                </div>

                <div class="h2 text-muted">
                    <i class="icon icon-clock"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-block">
                <div class="col-md-12">
                    <div class="panel-heading">
                        <h1>
                            {{ __('strings.employees_directory') }} 
                        </h1>
                    </div>                
                    <div class="table-responsive mb-4" style="height: 500px;">
                        <table id="employees-table" class="table hover">
                            <thead class="thead-ligth">
                                <tr>
                                    <th></th>
                                    <th>{{__('strings.employee_number')}}</th>
                                    <th>{{__('strings.name')}}</th>
                                    <th>{{__('strings.department')}}</th>
                                    <th>{{__('strings.address')}}</th>
                                    <th>{{__('strings.phone')}}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <form id="form_employee_directory" action="{{route('attach_employees_calendar', ['calendar_id' => $calendar->id])}}" method="post">
                        {{ csrf_field() }}
                        <input type="hidden" id="user_token" name="user_token" value="{{Auth::user()->SECURE_TOKEN}}" >
                        <input type="hidden" id="nip" name="nip" value="">
                        <button type="button" class="btn btn-primary" onclick="nipRequest()"> {{ __('strings.attach_employees_to_datatime') }} </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-1 align-self-center"><i class="fas fa-long-arrow-alt-down fa-3x" ></i><i class="fas fa-long-arrow-alt-up fa-3x" ></i></div>
    <div class="col-md-12">  
        <div class="card">
            <div class="card-block">
                <div class="col-md-12">  
                    <div class="panel-heading">
                        <h1>
                            {{ __('strings.employees_on_calendar_item') }} 
                        </h1>
                    </div>                             
                    <div class="table-responsive mb-4" style="height: 500px;">
                        <table id="calendar-employees-table" class="table hover">
                            <thead class="thead-ligth">
                                <tr>
                                    <th>{{__('strings.employee_number')}}</th>
                                    <th>{{__('strings.name')}}</th>
                                    <th>{{__('strings.department')}}</th>
                                    <th>{{__('strings.address')}}</th>
                                    <th>{{__('strings.phone')}}</th>
                                    <th></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <a href="{{route('employees_optimal_route_view', ['calendar_id' => $calendar->id])}}" class="btn btn-primary"> {{ __('strings.preroutes_generation') }} </a>
                    <a href="{{route('employees_clustering_view', ['calendar_id' => $calendar->id])}}" class="btn btn-info"> {{ __('strings.clustering_view') }} </a>
                    <a href="{{route('employees_optimal_stations_route_view', ['calendar_id' => $calendar->id])}}" class="btn btn-success"   target="_blank"> {{ __('strings.employees_optimal_stations_route_view') }} </a>


                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('datatables/datatables.min_1.js')}}" type="text/javascript"></script>
<script src="{{asset('js/bootstrap-datetimepicker.min.js')}}"></script>
<script src="{{asset('js/dataTables.checkboxes.min.js')}}" type="text/javascript"></script>

<script type="text/javascript">
    var tableEmployees;
    var calendarTable;
    $(document).ready(function() {
        //setting language for moment.js
        moment.locale('es');
        //initialize datetable
        tableEmployees = $('#employees-table').DataTable({
                                responsive: false,
                                paging: false,	
                                searching: true,
                                serverSide: false,
                                ordering: false,
                                ajax: {
                                    url: "{{route('employee_calendar_direcory')}}",
                                    type: "POST",
                                    data: {
                                        user_token: "{{Auth::user()->SECURE_TOKEN}}",
                                        calendar_id: '{{$calendar->id}}'
                                    }
                                },
                                columns: [
                                        { data: 'id',  checkboxes: true },
                                        { data: 'employee_number', defaultContent:"---"},
                                        { data: 'name', defaultContent:"---"},
                                        { data: 'department', defaultContent:"---"},
                                        { data: 'address', defaultContent:"---"},
                                        { data: 'phone', defaultContent:"---"},
                                ],
                                select: {
                                    style: '<"top"i>multi'
                                },
                                dom: 'frtip',
                                "language" : {
                                        url: "{!! asset('datatables/languages/spanish.json') !!}"
                                }
                });

        calendarTable = $('#calendar-employees-table').DataTable({
                                responsive: false,
                                paging: false,	
                                searching: true,
                                serverSide: false,
                                ordering: false,
                                ajax: {
                                    url: "{{route('employee_calendar_datatable')}}",
                                    type: "POST",
                                    data: {
                                        user_token: "{{Auth::user()->SECURE_TOKEN}}",
                                        calendar_id: '{{$calendar->id}}'
                                    }
                                },
                                columns: [
                                        { data: 'employee_number', defaultContent:"---"},
                                        { data: 'name', defaultContent:"---"},
                                        { data: 'department', defaultContent:"---"},
                                        { data: 'address', defaultContent:"---"},
                                        { data: 'phone', defaultContent:"---"},
                                        { data: 'id', render: function(data, type, row, meta) {
                                            return '<button class="btn btn-sm btn-rounded btn-outline-danger" onclick="nipDetachRequest(' + data + ')"> <i class="fas fa-times"></i></button>';
                                        }},
                                ],
                                select: {
                                    style: '<"top"i>multi'
                                },
                                dom: 'frtip',
                                "language" : {
                                        url: "{!! asset('datatables/languages/spanish.json') !!}"
                                }
                });
                
        
        setTimeout(function() {
            if(socket){ 
                socket.emit('message', {to:'{{Auth::user()->EMAIL}}', code: 1, calendar_id: '{{$calendar->id}}'});
            }
        }, 500);
    });
    
    
    function nipRequest() {
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) { 
                    $("#nip").val(nip);
                    $("#form_employee_directory").submit();
                }
            }
        });
    } 
    
    function nipDetachRequest(employeeId) {
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) { 
                    console.log(nip, employeeId);
                    $.post("{{route('detach_employee_calendar')}}", {
                        user_token: '{{Auth::user()->SECURE_TOKEN}}',
                        calendar_id: '{{$calendar->id}}',
                        nip: nip,
                        employee_id: employeeId
                    }, function(response){
                        if(socket){ 
                            socket.emit('message', {to:'{{Auth::user()->EMAIL}}', code: 1, calendar_id: '{{$calendar->id}}'});
                        }
                        onSocketioMessage({code: 1});
                    })
                    .fail(function(err){
                        console.log(err);
                        if(err.responseJSON) {
                            $.alert(err.responseJSON.message);
                        } else {
                            $.alert("{{__('strings.error_message')}}");  
                        }
                    });
                }
            }
        });
    } 
    
    
    
$("#form_employee_directory").on('submit', function(e) {
    var form = this;
    var rows_selected = tableEmployees.column(0).checkboxes.selected();
    
    if(!rows_selected.length) {
        $.alert("{{__('strings.no_employees_selected')}}");
        return false;
    }
    // Iterate over all selected checkboxes
    $.each(rows_selected, function(index, rowId){
         // Create a hidden element
         $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'employees[]')
                .val(rowId)
         );
    });
});

function onSocketioMessage(data) {
    if(data.code === 1){
        console.log('reloading table data...')
        tableEmployees.ajax.reload();
        calendarTable.ajax.reload();
    }
}
</script>
@endpush