@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')}}">

<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  {
        min-width: 250px;
        max-width: 250px;
        float: left;
        margin: 10px;
        box-shadow: 3px 3px 6px rgba(0,0,0,0.25);
        background-color: white;
    }
    
    .calendar-card  {
        min-width: 250px;
        float: left;
        margin: 10px;
        box-shadow: 3px 3px 6px rgba(0,0,0,0.25);
        background-color: white;
    }

</style>
@endpush
@section('content')
                  
<div class="panel-heading">
    <h1>
        {{ __('strings.employees_calendar') }}
        <span class="float-sm-right"> <button  class="btn btn-primary" onclick="toggleCreateCalendarView()">{{__('strings.add_new')}}</button></span>
    </h1>
</div> 
<div id="calendar_add_view" class="col-md-12" style="display: none;">
    <div class="calendar-card">
            <div class="card-body">                
                <div class="row">
                <div class="col-md-6">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="alias" class="form-control-label" >Alias</label>
                            <input type="text" id="alias" class="form-control" name="alias" required maxlength="32">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="comments" class="form-control-label" >Comentarios</label>
                            <textarea id="comments" class="form-control" name="comments" required maxlength="255">
                            </textarea>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                        <div class="form-group">
                            <div id="date_time"></div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <input type="button" class="btn btn-primary" value="{{__('strings.save')}}" onclick="nipRequest()" >
                    </div>

                </div>
            </div>
    </div>
</div>
<hr>
<table id="calendar-table" class="cards" style="width:100%">
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
@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 type="text/javascript">
    var table;
    $(document).ready(function() {
        //setting language for moment.js
        moment.locale('es');
        

        //initialize datetable
        table = $('#calendar-table').DataTable({
                                paging: true,	
                                ordering: false,
                                searching: false,
                                serverSide: true,
                                processing: true,
                                dom: 'Bfrtip',
                                ajax: {
                                    url: "{{route('calendar_datatable')}}",
                                    type: "POST",
                                    data: {
                                        user_token: "{{Auth::user()->SECURE_TOKEN}}"
                                    }
                                },
                                columns: [
                                        { data: 'id', render: function(data, type, row, meta){
                                                return '<div class="card-body d-flex justify-content-between align-items-center">'
                                                        + '            <div>'
                                                        + '                <span class="h4 d-block font-weight-normal mb-2">' + moment.utc(row.date_time).local().format('HH:mm') + '</span>'
                                                        + '                <span class="font-weight-light">' + moment.utc(row.date_time).local().format('Y-MM-DD') + '</span>'
                                                        + '                <span class="d-block text-muted small">' + row.alias + '</span>'
                                                        + '                <span class="d-block text-muted small">' + row.comments + '</span>'
                                                        + '            </div>'
                                                        + '            <div class="h2 text-muted">'
                                                        + '                <i class="icon icon-clock"></i>'
                                                        + '            </div>'                        
                                                        + '        </div>'
                                                        + '    <span class="float-sm-left"> <a href="#" class="btn btn-warning btn-rounded" onclick="nipCandelRequest(\'' + row.id + '\')">{{__("strings.cancel")}}</a></span>&nbsp;'
                                                        + '    <span class="float-sm-right"> <a href="{{URL::to("/")}}/employees/calendar/' + row.id + '/view" class="btn btn-primary btn-rounded" >{{__("strings.processing")}}</a></span>';
                                            },
                                          defaultContent: ""
                                        }
                                ],
                                createdRow: function( row, data, dataIndex ) {
                                    $(row).addClass('card p-4');
                                },
                                buttons: [
                                'pageLength'
                                ],
                                lengthMenu: [[10, 100, 1000], [10, 100, 1000]],
                                order: [],
                                "language" : {
                                        url: "{{ asset('datatables/languages/spanish.json') }}"
                                }
                });
        
         $('#date_time').datetimepicker({
                format: 'YYYY-MM-DD HH:mm',
                stepping: 5,
                inline: true,
                sideBySide: true,
                icons:{
                    time: 'far fa-clock',
                    date: 'far fa-calendar-alt',
                    up: 'fas fa-chevron-up',
                    down: 'fas fa-chevron-down',
                    previous: 'fas fa-chevron-left',
                    next: 'fas fa-chevron-right',
                    clear: 'far fa-trash-alt',
                    close: 'fas fa-times'
                }
        });
    });
    
    
    function toggleCreateCalendarView(){
        $('#calendar_add_view').slideToggle();
    }

    function nipRequest() {
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) {      
                    apiCalendarRequest(nip);
                }
            }
        });
    } 
    
    function nipCandelRequest(calendarId) {
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) {      
                    apiCancelCalendarRequest(nip, calendarId);
                }
            }
        });
    }
    
    function apiCalendarRequest(nip) {
        $.showPreloader("{{__('strings.processing_request')}}");
        $.post("{{route('add_employees_calendar')}}",{
            user_token: '{{Auth::user()->SECURE_TOKEN}}',
            date_time: $('#date_time').data("DateTimePicker").date().utc().format('YYYY-MM-DD HH:mm'),
            nip: nip,
            alias: $("#alias").val(),
            comments: $("#comments").val()
            },
        function(data) {
            if(socket){ 
                socket.emit('message', {to:'{{Auth::user()->EMAIL}}', code: 2});
            }
            $.hidePreloader();
            $("#alias").val('');
            $("#comments").val('');
            $('#calendar_add_view').slideUp();
            table.ajax.reload();
        })
        .fail(function(err) {
            console.log(err);
            $.hidePreloader();
            if(err.responseJSON) {
                $.alert(err.responseJSON.message);
            } else {
                $.alert("{{__('strings.error_message')}}");  
            }
        });
    }
    
    function apiCancelCalendarRequest(nip, calendarId) {
        $.showPreloader("{{__('strings.processing_request')}}");
        $.post("{{route('cancel_calendar')}}",{
            user_token: '{{Auth::user()->SECURE_TOKEN}}',
            nip: nip,
            calendar_id: calendarId
            },
        function(data) {
            console.log(data);
            $.hidePreloader();
            table.ajax.reload();
            if(socket){ 
                socket.emit('message', {to:'{{Auth::user()->EMAIL}}', code: 2});
            }
        })
        .fail(function(err) {
            console.log(err);
            $.hidePreloader();
            if(err.responseJSON) {
                $.alert(err.responseJSON.message);
            } else {
                $.alert("{{__('strings.error_message')}}");  
            }
        });
    }
    
function onSocketioMessage(data) {
    if(data.code === 2) {
        console.log('reloading table data...')
        table.ajax.reload();
    }
}
</script>
@endpush