<!doctype html>
<?php 

use Jackiedo\DotenvEditor\Facades\DotenvEditor;
$editor = DotenvEditor::load(storage_path('app/settings.env'));

?>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Mitarbeiter - {{$editor->getKey('APP_TITLE')['value']}}</title>
    <link rel="icon" type="image/vnd.microsoft.icon" href="/images/bürozeit.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
    
    <!-- JQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/locale/bootstrap-table-de-DE.min.js"></script>

    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Tabulator -->
    <link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.4.3/css/tabulator_bootstrap5.min.css" integrity="sha512-ReR0xAw/cxBF3WctjOmEo8fwOfnjS2x63iyaIoe/Bn3zjBQM9PYSh/Exbj4vcgnAOiqrGMNUKxaXWJeFJrZZQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
   
    <!-- XEditable -->
     <link rel="stylesheet" href="{{url('/css/xeditable.css')}}">
     <script src="{{url('/js/bootstrap.editable.js')}}"></script>
    <script src="{{url('/js/x-editable.js')}}"></script>
    <script src="{{url('/js/bootstrap-table.editable.js')}}"></script>
    
    <link rel="stylesheet" href="{{url('/css/bootstrap/bootstrap.dialogs.css')}}">
    <script src="{{url('/js/bootstrap.dialogs.js')}}"></script>
    <script src="{{url('js/hwplus.js')}}"></script>
    <link rel="stylesheet" href="{{url('css/hwplus.css')}}">
    
    <script>
   
  
  function changeColor(user, color) {
                        
        $('#spinner').removeClass('d-none');
        
        let postData = {
            _token:'{{csrf_token()}}',
            _method: 'PUT',
            data: {}
        }
        
        postData.data['color'] = color;
        
        $.post("../../../api/{{$repository->getConfig()->_service->url}}/ec0fe56720bb943359a29ca5285232208000e928/" + user + '/37bf02d702935e2146d2ae374b5a6cafb2e30562', postData)
            
            .done(function() {
            
                $('#spinner').addClass('d-none');
            
            })
            
            .fail(function(xhr, status, error) {
                    
                $('#spinner').addClass('d-none');
                            
                alertException(xhr);
                
                
    
            });
    };
    
  function edit_account(user) {
  
    dialog = BootstrapDialog.show({
        message: $('<div></div>').load('../37bf02d702935e2146d2ae374b5a6cafb2e30562/ec0fe56720bb943359a29ca5285232208000e928/' + user),
        title:'Mitarbeiter verwalten',
        type:BootstrapDialog.TYPE_LIGHT,
        buttons: [{
            label: 'Speichern',
            cssClass:'btn-success',
            action: function(dialogItself) {

                $('#spinner').removeClass('d-none');
            
                let postData = $('#edit_user_account').serialize();
                
                $.post("../../../api/{{$repository->getConfig()->_service->url}}/ec0fe56720bb943359a29ca5285232208000e928/" + user, postData)
                    
                    .done(function(data) { 

                        $('#spinner').addClass('d-none');
                        dialogItself.close();
                        staff_table.updateRow(data[0].ID, {'email': $('#edit_user_account input[name="data[email]"]').val()});
                        
                    })
                    
                    .fail(function(xhr) {
                    
                        $('#spinner').addClass('d-none');
                    
                    
                        if(422 == xhr.status) {
                        
                            $('#edit_user_account').find('.is-invalid').removeClass('is-invalid');
                            $.each(xhr.responseJSON, function(index, item) {
                                let array = index.split('.');
                                $('#edit_user_account').find('[name="data['+array[1]+']"]').addClass('is-invalid'); 
                            });
                        
                            return;
                        
                        }
                    
                        else alertException(xhr);   
                    
                    });
            
            }
        }, {
            label: 'Abbrechen',
            action: function(dialogItself){
                dialogItself.close();
            }
        }]
    });
  
  }
  
  
  $(function() {
  
        staff_table = new Tabulator("#staff-table", {
            layout:"fitColumns",
            selectable: 1,
            initialSort:[{column:'descriptor', dir:'asc'}],
            index: 'ID',
            columns:[ //set column definitions for imported table data
                {title:"ID", field:'ID', visible:false, sorter:"number"},
                {title:"", formatter:"rowSelection", headerSort:false, width:60},
                {title:"Name", field:'descriptor', visible:true, sorter:'string', editor:"input"},
                {title:"in RG angezeigter Name", field:'naming', visible:true, sorter:"string", editor:"input"},
                {title:"Rolle", field:"flagIsAdmin", sorter:"string", editor:'list', 
                    editable:false, 
                    formatter:"lookup", 
                    editorParams: {
                        values:[{value:1, label:"Admin"}, {value:0, label:"Mitarbeiter"}],
                        clearable:true,
                    },
                    formatterParams:{
                        1:'Admin',0:'Mitarbeiter'
                    }
                },
                {title:"Farbe", field:"color", visible:true, formatter:"html", width:120},
                {title:"Stundensatz", field:'hourly_rate', visible:true, sorter:"number", 
                    editor:"input", 
                    width:150, 
                    hozAlign:"center", 
                    formatter:(cell) => { return parseFloat(cell.getValue()).toFixed(2) + '€' },
                },
                {title:"Login", field:"edit", visible:true, formatter:"html", width:120, hozAlign:"left"}
            ]
        });
        
        $('#add_staff').click(function() {
        
            dialog = BootstrapDialog.show({
                message: $('<div></div>').load('../6f43a2771ac0109de77dfd4972326bbbc616e99f'),
                title:'Mitarbeiter anlegen',
                type:BootstrapDialog.TYPE_LIGHT,
                buttons: [{
                    label: 'Speichern',
                    cssClass:'btn-success',
                    action: function(dialogItself) {
                    
                        $('#spinner').removeClass('d-none');
                    
                        let postData = $('#new_staff').serialize();
                        
                        $.post("../../api/{{$repository->getConfig()->_service->url}}/ec0fe56720bb943359a29ca5285232208000e928/6f43a2771ac0109de77dfd4972326bbbc616e99f", postData)
                            
                            .done(function(data) { 

                                $('#spinner').addClass('d-none');
                                staff_table.addData(data);
                                dialogItself.close(); 
                                
                            })
                            
                            .fail(function(xhr) {
                            
                                $('#spinner').addClass('d-none');
                            
                            
                                if(422 == xhr.status) {
                                
                                    $('#new_staff').find('.is-invalid').removeClass('is-invalid');
                                    $.each(xhr.responseJSON, function(index, item) {
                                        let array = index.split('.');
                                        $('#new_staff').find('[name="data['+array[1]+']"]').addClass('is-invalid'); 
                                    });
                                
                                    return;
                                
                                }
                            
                                else alertException(xhr);     
                            
                            });
                    
                    }
                }, {
                    label: 'Abbrechen',
                    action: function(dialogItself){
                        dialogItself.close();
                    }
                }]
            });
        
        
        });
        
        
        $('#drop_staff_button').click(function() {
        
                      
            dialog = BootstrapDialog.confirm('Mitarbeiter löschen bestätigen?', function(result){
                if(result) {
                
                    $('#spinner').removeClass('d-none');
                    
                    let postData = {
                        _token:'{{csrf_token()}}',
                        _method: 'DELETE',
                    }
                    
                    let selectedRowID = staff_table.getSelectedData()[0].ID;
                                            
                    $.post("../../../api/{{$repository->getConfig()->_service->url}}/ec0fe56720bb943359a29ca5285232208000e928/" + selectedRowID, postData)
                    
                        .done(function() {
                                                
                            $('#spinner').addClass('d-none');
                            
                            staff_table.getSelectedRows()[0].delete();
                        
                        })
                        
                        .fail(function(xhr) {
                        
                            $('#spinner').addClass('d-none');
                        
                            alertException(xhr);
                        });
                    
                    $('#staff_menu_button').prop('disabled', true);
                }
            });
        
        
        })
  
 
        staff_table.on("cellEdited", function(cell){
                        
            $('#spinner').removeClass('d-none');
            
            let postData = {
                _token:'{{csrf_token()}}',
                _method: 'PUT',
                data: {}
            }
            

            let row = cell.getRow().getData();
        
            postData.data[cell.getField()] = cell.getValue();
            
            $.post("../../../api/{{$repository->getConfig()->_service->url}}/ec0fe56720bb943359a29ca5285232208000e928/" + row.ID, postData)
                
                .done(function() {
                
                    $('#spinner').addClass('d-none');
                
                })
                
                .fail(function(xhr, status, error) {
                        
                    $('#spinner').addClass('d-none');
                    cell.restoreOldValue();
                                
                    alertException(xhr);
                    
                    
        
                });
        });
        
        
        
        
        staff_table.on("rowSelected", function(row){
            $('#staff_menu_button').prop("disabled",false);
            if(1==row.getData().flagIsAdmin) $('#drop_staff_button').addClass('disabled');
            else $('#drop_staff_button').removeClass('disabled');
        });
        
        staff_table.on("rowDeselected", function(row){
            $('#staff_menu_button').prop("disabled",true);
        });
        
                 
    });
    
  
</script>
    
  </head>
  <body class="bg-transparent">
  
    <div id="spinner" class="spinner spinner-border d-none" role="status">
        <span class="sr-only">Loading...</span>
    </div>


  
    <div class="container pt-3 bg-white border-left border-right" style="border-color:var(--indigo)">

         <nav class="navbar navbar-expand-lg navbar-light text-white"  style="background-color:var(--indigo)">
            <a class="navbar-brand text-white" href="#"><i class="mdi mdi-account-group"></i> Einstellungen (App)</a>
        </nav>

        <div class="btn-group mt-2 mb-2" role="group">
            <button type="image" class="btn" style="color:white !important; background-color:var(--indigo)" onclick="window.location='../1faf0aaa6dd4f9bdbde29349c1c829175516baf5'"><i class="mdi mdi-home-circle"></i> zurück zur Übersicht</button>
        </div>
        
       
        <div class="card mt-2">
                <div class="card-header">Mitarbeiter verwalten</div>
                <div class="card-body">
                    
                    <div class="btn-group mt-2" role="group" aria-label="Basic example">

                        
                        <button type="button" class="btn btn-dark" id="add_staff"><i class="mdi mdi-account-plus"></i> Neuer Mitarbeiter</button>

                        <button class="btn btn-dark dropdown-toggle" type="button" id="staff_menu_button" data-toggle="dropdown" aria-expanded="false" disabled>
                        <i class="mdi mdi-account"></i> ausgewählter Mitarbeiter
                        </button>
                        <div class="dropdown-menu">
                            <button class="dropdown-item" id="drop_staff_button">Löschen</button>
                        </div>
                    </div>
        <table id="staff-table" class="mb-3 mt-3">
                
            <thead>
                <tr>
                    <th>ID</th>
                    <th></th>
                    <th>Name</th>
                    <th>in RG angezeigter Name</th>
                    <th>Rolle</th>
                    <th>Farbe</th>
                    <th>Stundensatz</th>
                    <th>Login</th>
                </tr>
            </thead>
        
            <tbody>
            @foreach(\App\Models\PHPXPress\HwplusStaff::with('_user')->get() AS $row)
            <tr>
                <td>{{$row->ID}}</td>
                <td></td>
                <td>{{$row->descriptor}}</td>
                <td>{{$row->naming}}</td>
                <td>{{$row->_user->flagIsAdmin}}</td>
                <td><input type="color" value="{{$row->color}}" onchange="changeColor('{{$row->getKey()}}', this.value)"></td>
                <td>{{$row->hourly_rate}}</td>
                <td><button onclick="edit_account('{{$row->getKey()}}')" class="btn btn-dark btn-sm"><i class="mdi mdi-account-edit"></i></button></td>
            </tr>
            @endforeach
                
            </tbody>
        </table>
            </div>
            </div>
        
        
        
    
        
    </div>
  </body>
  <script>

  
  </script>
</html>
