@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">
        Buchnungen PDF Vorlage / {{ $general_name->name }}
        <div class="float-right">
            <a href="{{ route('cms_booking_all') }}" class="btn btn-default btn-sm">zurück</a>
        </div>
    </h4>


        <div class="card">
            {!! Form::open(['url' => route('cms_booking_all_detail', [$general_name->id]), '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_booking_all_delete', [$content->id, 'item']) }}"  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>

@endsection