<!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>Arbeitseinheiten - {{$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>

    
    
     <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?1')}}"></script>
    <link rel="stylesheet" href="{{url('css/hwplus.css')}}">
    <script>
    
                    
    
  function buttons () {
    return {
    btnIcon: {
            html:'<button type="image" class="btn btn-dark" style="color:white !important; opacity:1;" disabled><img src="/images/logo_hell.png" widht=20 height=20/></button>'
      },
    btnHome: {
            text: 'Einstellungen > Arbeitseinheiten',
            attributes: {
                title: 'Sie befinden sich hier:',
                disabled:'disabled',
                style:"color:white !important; background-color:var(--dark); opacity:1"
            },
      },
    btnReturn: {
            text: 'zurück zu Einstellungen',
            icon: 'mdi mdi-home-circle',
            event: function () {
                window.location = "../1faf0aaa6dd4f9bdbde29349c1c829175516baf5";
            },
            attributes: {
            title: 'Zurück zu Einstellungen'
            }
      },
      btnAdd: {
        text: 'Neu anlegen',
        icon: 'mdi mdi-plus-circle',
        event: function () {
            BootstrapDialog.show({
                message: $('<div></div>').load('../50c364e0e493d7f46889cc89c1651a23d3a0c9c9'),
                title:'Neue Arbeitseinheit',
                type: BootstrapDialog.TYPE_LIGHT,
                buttons: [{
                    label: 'Speichern',
                    cssClass:'btn-success',
                    action: function(dialogItself){
                    
                        let postData = $('#new_unit').serialize();
                    
                       
                        $.post("../../api/{{$repository->getConfig()->_service->url}}/d596f5dc798b83d3bca3ad7d68d7ccb2ad6e5029/50c364e0e493d7f46889cc89c1651a23d3a0c9c9", postData)
                        
                        .done(function(data) {  $('#table').bootstrapTable('append', data); dialogItself.close(); })
                        
                        .fail(function(xhr, status, error) {
                        
                            
                            if(422 == xhr.status) {
                                $('#new_unit').find('.is-invalid').removeClass('is-invalid');
                                $.each(xhr.responseJSON, function(index, item) {
                                    let array = index.split('.');
                                    $('#new_unit').find('[name="data['+array[1]+']"]').addClass('is-invalid'); 
                                });
                            
                            
                            }

                            else alertException(xhr);
                        
                        });
                    
                    }
                }, {
                    label: 'Abbrechen',
                    action: function(dialogItself){
                        dialogItself.close();
                    }
                }]
            });
        },
      },
      btnDropDown:{
        text: 'Neu anlegen',
        icon: 'bi bi-file-plus',
        html: '' +
                '<button class="btn btn-dark dropdown-toggle" type="button" id="menu_button" data-toggle="dropdown" aria-expanded="false" disabled>' +
                'Auswahl' +
                '</button>' +
                '<div class="dropdown-menu">' +
                '<a class="dropdown-item" href="#" id="drop_unit_button">Löschen</a>' +
                '</div>' +
                '',
      }
    }
  }
  
  $(function() {
  
 
        $('#drop_unit_button').click(function() { 
        
            BootstrapDialog.confirm('Arbeitseinheit löschen bestätigen?', function(result){
                if(result) {
                    
                    let postData = {
                        _token:'{{csrf_token()}}',
                        _method: 'DELETE',
                    }
                    
                    let ids = $.map($('#table').bootstrapTable('getSelections'), function (row) {
                        return row.ID
                    })
                    
                          
                    $.post("../../api/{{$repository->getConfig()->_service->url}}/d596f5dc798b83d3bca3ad7d68d7ccb2ad6e5029/" + ids[0], postData)
                    
                        .done(function() {
                        
                            $('#menu_button').prop('disabled' ,true);
                        
                            $('#table').bootstrapTable('remove', {
                                field: 'ID',
                                values: ids
                            })
                        
                        })
                        
                        .fail(function(xhr) {
                        
                            alertException(xhr);
                        });
                    
                }
            });
        
        });
  
        
        $('#table').on('editable-save.bs.table', function ( $el, field, row, rowIndex, oldValue) {
            // ...
            
            let postData = {
                _token:'{{csrf_token()}}',
                _method: 'PUT',
                data: {}
            }
            
            postData.data[field] = row[field];
            
            $.post("../../api/{{$repository->getConfig()->_service->url}}/d596f5dc798b83d3bca3ad7d68d7ccb2ad6e5029/" + row.ID, postData)
                
                .fail(function(xhr, status, error) {
                          
                    $('#table').bootstrapTable('updateCell', {index: rowIndex, field: field, value: oldValue});
                                
                    let dialog = BootstrapDialog.confirm({
                        title: 'Fehler',
                        type: BootstrapDialog.TYPE_DANGER, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
                        message: 'Es ist ein Fehler aufgetreten',
                        closable: true, // <-- Default value is false
                        draggable: true, // <-- Default value is false
                        btnCancelLabel: 'Schließen', // <-- Default value is 'Cancel',
                        btnOKLabel: 'Fehler anzeigen', // <-- Default value is 'OK',
                        btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
                        callback: function(result) {
                            // result will be true if button was click, while it will be false if users close the dialog directly.
                            if(result) {
                                errorPage = window.open('', 'errorPage');
                                errorPage.document.body.innerHTML = xhr.responseText;
                                errorPage.focus();
                            }
                        }
                    });
                    
                    
        
                });
            
            })
            
            
    
            
        $('#table').on('check.bs.table', function() {
            $('#menu_button').prop("disabled",false);
        });
            
       $('#table').on('uncheck.bs.table', function() {
            $('#menu_button').prop("disabled",true);
        });
                 
    });
    
  
</script>
    
  </head>
  <body class="h-100">
  

  
    <div class="container h-100  bg-light border-left border-right border-dark ">
        <table id="table"
            data-toggle="table" 
            data-search="true" 
            data-buttons="buttons"
            data-click-to-select="true"
            data-single-select="true"
            data-buttons-align="left"
            data-buttons-class="dark text-white"
            data-show-button-text="true">
            <thead>
                <tr>
                <th data-field="ID" data-visible="false"></th>
                <th data-field="select" data-checkbox="true"></th>
                <th data-field="descriptor" data-editable="true" data-editable-mode="inline" data-editable-type="text">Bezeichnung</th>
                </tr>
            </thead>
            <tbody>
            @foreach(\App\Models\PHPXPress\HwplusManhoursUnits::get() AS $row)
                <tr>
                    <td>{{$row->ID}}</td>
                    <td></td>
                    <td>{{$row->descriptor}}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
  </body>
  <script>

  
  </script>
</html>
