<!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>offene Aufträge - {{$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"-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/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-->
    <script src="https://cdn.jsdelivr.net/npm/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-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.21.1/dist/locale/bootstrap-table-de-DE.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>

    
    <!-- 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>
    
    <!-- Bootstrap Dialogs -->
    <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')}}">
   
    <style>
    
        .form-control.search-input {
            background-color:var(--info);
            color:var(--white);
            border-color:var(--info);
        }
        
        .form-control.search-input::placeholder {
            color:var(--white);
            opacity: 1; /* Firefox */
        }

        .form-control.search-input::-ms-input-placeholder { /* Edge 12 -18 */
            color:var(--white);
        }
       
    </style>
   
   
    <script>
    
    
  function buttons () {
    return {
       btnHome: {
            text: '<span class="mdi mdi-menu"></span>',
            attributes: {
                title: 'Sie befinden sich hier:',
                disabled:'disabled',
                style:"color:white !important; background-color:var(--info); opacity:1"
            },
      },
      btnDropDown:{
        text: 'Menü',
        icon: 'bi bi-file-plus',
        html: '' +
                '<button class="btn btn-info dropdown-toggle rounded-0" type="button" data-toggle="dropdown" id="menu_button" disabled>' +
                '<i class="mdi mdi-file-sign"></i> ausgewählter Auftrag' +
                '</button>' +
                '<div class="dropdown-menu">' +
                '<a class="dropdown-item" href="#" id="show_ticket">Öffnen</a>' +
                '<div class="dropdown-divider"></div>' +
                '<a class="dropdown-item" href="#" id="preview_ticket">Vorschau</a>' +
                '<div class="dropdown-divider"></div>' +
                '<a class="dropdown-item" href="#" id="drop_ticket_button">Löschen</a>' +
                '</div>' +
                '',
        attributes: {
          title: 'Stammdaten erfassen'
        }
      }
    }
  }
  
  $(function() {
  
        $('#show_ticket').click(function() {
        
            let ids = $.map($('#table').bootstrapTable('getSelections'), function (row) {
                return row.ID
            })
        
            window.location = "../0ff1bb77a9de65eac6621c9c5a983da7a37ed3bf/afe4f16263308b092d15e04719f202efe1326813/" + ids[0];
        
        })
        
        $('#preview_ticket').click(function() {
           
           let ids = $.map($('#table').bootstrapTable('getSelections'), function (row) {
                return row.ID
            })
           
            window.location = "../preview/1/" + ids[0];
        
        })
      
        $('#drop_ticket_button').click(function() {
        
            let rows = $.map($('#table').bootstrapTable('getSelections'), function (row) {
                        return row;
                    })
        
            BootstrapDialog.confirm('Soll der aktuell gewählte ' + rows[0].descriptor + ' vom ' + rows[0].date + ' (Kunde: ' + rows[0].kunde + ') wirklich gelöscht werden ?', 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}}/afe4f16263308b092d15e04719f202efe1326813/" + ids[0], postData)
                    
                        .done(function() {
                        
                            $('#menu_button').prop('disabled' ,true);
                        
                            $('#table').bootstrapTable('remove', {
                                field: 'ID',
                                values: ids
                            })
                        
                        })
                        
                        .fail(function(xhr) {
                        
                            alertException(xhr);
                        });
                    
                } else {

                }
            });
        
        });
  
        
        $('#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}}/afe4f16263308b092d15e04719f202efe1326813/" + row.ID, postData)
                
                .fail(function(xhr) {
                
                    alertException(xhr);
                    
                });
            
            })
            
            
        $('#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="bg-transparent">
  
 
    <div class="container pt-3 bg-white border-left border-right  border-info">

        <nav class="navbar navbar-expand-lg navbar-light bg-info text-white">
            <a class="navbar-brand text-white" href="#"><i class="mdi mdi mdi-book-open-page-variant-outline"></i> Offene Zettel</a>
        </nav>

        <table id="table"
            data-toggle="table" 
            data-search="true"
            data-show-search-clear-button="true"
            data-buttons="buttons"
            data-pagination="true"
            data-cookie="true"
            data-cookie-id-table="frame_open_tickets_index"
            data-cookie-storage="localStorage"
            data-page-list="10,25,50,100,all"
            data-click-to-select="true"
            data-single-select="true"
            data-buttons-align="left"
            data-buttons-class="info text-white"
            data-show-button-text="true"
            data-sort-name="date"
            data-unique-id="ID">
            <thead>
                <tr>
                <th data-field="select" data-checkbox="true"></th>
                <th data-field="ID" data-visible="false">ID</th>
                <th data-field="descriptor">Typ</th>
                <th data-field="kunde" data-sortable="true">Kunde</th>
                <th data-field="customer_id" data-sortable="true">Kd.Nr</th>
                <th data-field="commission_number" data-sortable="true" data-editable="true" data-editable-mode="inline" data-editable-type="text" data-editable-emptytext ="..." data-editable-emptyclass="text-black">Kommmison</th>

                <!--th data-field="assignment" data-sortable="true" data-editable="true" data-editable-mode="inline" data-editable-type="textarea" data-editable-type="text" data-editable-emptytext ="..." data-editable-emptyclass="text-black">Arbeiten</th -->
                <th data-field="location" data-sortable="true" data-editable="true" data-editable-mode="inline" data-editable-type="text" data-editable-emptytext ="..." data-editable-emptyclass="text-black">Einsatzort</th>
                <th data-field="date" data-sortable="true" data-sorter="datesSorter" data-formatter="date_formatter">Datum</th>
                <th data-align="center" data-width="20">Öffnen</th>
                </tr>
            </thead>
            <tbody>
                @foreach(\App\Models\PHPXPress\HwplusTickets::with(['_client', '_meta._doctype'])
                    ->whereHas('_meta._doctype', function($query) { $query->whereNotIn('identifier', ['lot', 'offer', 'material_offer']);  })
                    ->whereNull('job_number')
                    ->orderBy('date', 'DESC')
                    ->get() AS $row)
                <tr>
                    <td></td>
                    <td>{{$row->ID}}</td>
                    <td>{{$row->descriptor}}</td>
                    <td>@if($row->_client->descriptor){{$row->_client->descriptor}}@else{{$row->_client->firstname}} {{$row->_client->surname}}@endif</td>
                    <td>{{$row->_client->customer_id}}</td>
                    <td>{{$row->commission_number}}</td>
                    <!-- td>{{$row->assignment}}</td -->
                    <td>{{$row->location}}</td>
                    <td>{{$row->date}}</th>
                    <td><a href="../0ff1bb77a9de65eac6621c9c5a983da7a37ed3bf/{{$repository->getConfig()->getKey()}}/{{$row->ID}}"><btn class="btn btn-info btn-sm"><i class="bi bi-box-arrow-right"></i></a></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
  </body>
  <script>

    function datesSorter(a, b) {
        if (new Date(a) < new Date(b)) return 1;
        if (new Date(a) > new Date(b)) return -1;
        return 0;
    }



    let f = new Intl.DateTimeFormat('de', {
        year: "numeric",
        month: "numeric",
        day: "2-digit"
    });

    window.date_formatter = (value, row) => {
        if(!value) return;
        return f.format(new Date(value));
    }

  </script>
</html>
