@extends('layouts.layout-2')

@section('content')

    <style>
     /*   body {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }*/
        .btn-xs {
            line-height: 1.3em;
        }
        .table tbody + tbody {
            border-top: 1px solid #9c9c9c;
        }
        .table th, .table td {
            border-top: none;
        }
        .table tr.border-none td, .table tr.border-none th  {
            border-top: none;
        }
        .table .thead-dark th {
            color: #4E5155;
            background-color: rgba(24, 28, 33, 0.1);
            border-color: rgba(63, 69, 74, 0.1);
        }

        .input-group-text {
            padding: 0.438rem 0.475rem;
        }

        .note-editing-area {
            border-radius: 0.25rem;
            border: 1px solid rgba(24, 28, 33, 0.1);
            padding: 0.438rem 0.875rem;
            color: #4E5155;
            -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
            transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        }



        .note-editor.note-frame .note-editing-area .note-editable, .note-editor.note-airframe .note-editing-area .note-editable {
            color: #000;
        }

         .note-editor.note-frame .note-editing-area:focus-within  , .note-editor.note-airframe .note-editing-area:focus-within   {
             border-color: #648859;
         }
         .note-editing-area .note-editable li {
             margin-bottom:0.5rem;
         }
        .note-editor.note-airframe .note-placeholder {
            padding: 0;
        }
         .draft_item_tbody .form-control {
             color: #000;
         }
    </style>

    <h4 class="font-weight-bold py-3 mb-1">
        FeWo Allgemein
    </h4>

    <div class="nav-tabs-top mb-4">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link @if(!$step) active show @endif" data-toggle="tab" href="#navs-top-drafts">PDF Vorlage</a>
            </li>
           {{--
            <li class="nav-item">
                <a class="nav-link @if($step === 'settings') active show @endif" data-toggle="tab" href="#navs-top-settings">Einstellungen</a>
            </li>
            --}}
        </ul>
        <div class="tab-content">

            <div class="tab-pane fade @if(!$step) active show @endif" id="navs-top-drafts">
                <div class="card">

                    {!! Form::open(['url' => route('cms_fewo_all', [$step]), 'class' => 'form-horizontal']) !!}
                    @if(count($contents))
                        @php($i = 1)
                        <div class="table-responsive mb-4">
                            <table class="table mb-0" id="table_dragula_tbody" style="min-width: 1080px">
                                <thead class="thead-dark">
                                <tr>
                                    <th style="width: 1em"></th>
                                    <th style="width: 1em">#</th>
                                    <th>Abschnitte</th>
                                    <th style="width: 8em">#</th>
                                </tr>
                                </thead>
                                @foreach($contents as $content)
                                <tbody class="draft_item_tbody">
                                    <tr>
                                        <td>
                                            <span class="handle ion ion-ios-move d-inline-block bg-primary text-white p-1"></span>
                                        </td>
                                        <td><span class="item_pos_number">{{ $i++ }}</span></td>
                                        <td>
                                            {{ Form::text('contents['.$content->id.'][name]', $content->name,  array('placeholder'=>__('Abschnitt*'), 'class'=>'form-control', 'id'=>'contents_'.$content->id.'_name', 'required')) }}
                                        </td>
                                        <td>
                                            <button type="button" name="" value="up_{{$content->id}}" class="btn btn-xs btn-default move-up-btn"><i class="fa fa-arrow-up"></i> </button>
                                            <button type="button" name="" value="down_{{$content->id}}" class="btn btn-xs btn-default mr-2 move-down-btn"><i class="fa fa-arrow-down"></i> </button>
                                            <a class="text-danger" href="{{ route('cms_fewo_all_delete', [$content->id]) }}"  onclick="return confirm('{{__('Wirklich löschen?')}}');"><i class="fa fa-trash-alt"></i></a>
                                        </td>
                                    </tr>
                                    <tr class="border-none">
                                        <td colspan="2" style="vertical-align: bottom">
                                            <button type="submit" name="action" value="saveAll" class="btn btn-secondary btn-sm" title="speichern"><i class="ion ion-ios-save"></i></button>&nbsp;
                                        </td>
                                        <td>
                                            {{ Form::textarea('contents['.$content->id.'][full_text]', $content->getContent(),  array('class'=>'form-control autoExpand summernote-air', 'id'=>'contents_'.$content->id.'_name', 'rows'=>'1', 'data-min-rows'=>'1')) }}
                                        </td>
                                        <td>
                                            <label class="custom-control custom-checkbox mt-2" style="margin-right: 20px;">
                                                {!! Form::checkbox('contents['.$content->id.'][in_pdf]', 1, ($content->decimal > 0), ['class'=>'custom-control-input']) !!}
                                                <span class="custom-control-label">{{__('in PDF')}}</span>
                                            </label>
                                            <label class="custom-control custom-checkbox mt-2" style="margin-right: 20px;">
                                                {!! Form::checkbox('contents['.$content->id.'][page-break]', 1, ($content->getObjectBy('page-break') > 0), ['class'=>'custom-control-input']) !!}
                                                <span class="custom-control-label" style="white-space: nowrap;">{{__('Neue Seite')}}</span>
                                            </label>
                                        </td>
                                    </tr>
                                </tbody>
                                @endforeach
                                <tfoot>
                                <tr>
                                    <td colspan="4"></td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    @endif

                    <div class="text-left mt-3 m-2">
                        <button type="submit" name="action" value="saveAll" class="btn btn-submit btn-sm">{{ __('save changes') }}</button>&nbsp;
                        <div class="float-right">
                            <button type="submit" name="action" value="addItem" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> Neuen Abschnitt hinzufügen</button>
                        </div>
                    </div>

                    {!! Form::close() !!}


                    <script>
                        $(document).ready(function() {
                            $.dragYScroll();
                            var sort_item_pos_number = function(){
                                var index = 1;
                                $('#table_dragula_tbody .draft_item_tbody').each(function () {
                                    $(this).find('.item_pos_number').html(index);
                                    $(this).data('rowPosition', index);
                                    index++;
                                });
                            };
                            $(function() {
                                // Drag handle
                                var sortableItems = dragula([$('#table_dragula_tbody')[0]], {
                                    moves: function (el, container, handle) {
                                        return handle.classList.contains('handle');
                                    }
                                });
                                sortableItems.on('dragend', function() {
                                    //sort new
                                    sort_item_pos_number();
                                });
                            });
                            $('table .move-up-btn').on('click', function () {
                                var thisRow = $(this).closest('tbody');
                                var prevRow = thisRow.prev();
                                if (prevRow.length) {
                                    prevRow.before(thisRow);
                                    sort_item_pos_number()

                                }
                            });
                            $('table .move-down-btn').on('click', function () {
                                var thisRow = $(this).closest('tbody');
                                var nextRow = thisRow.next();
                                if (nextRow.length) {
                                    nextRow.after(thisRow);
                                    sort_item_pos_number()
                                }
                            });
                        });
                    </script>

                </div>
            </div>

            <div class="tab-pane fade @if($step === 'settings') active show @endif" id="navs-top-settings">
                <div class="card">
                    <h4 class="mt-4 mb-2 ml-4">Einstellungen</h4>
                </div>
            </div>

        </div>
    </div>
@endsection