@extends('layouts.layout-2')

@section('content')

    <h4 class="font-weight-bold py-3 mb-1">
        {{ __('Inhalte') }}  {{ __('Allgemein') }}
    </h4>

    @if ($errors->any())
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    <div class="card">
        <div class="card-datatable table-responsive py-2" data-route-modal="{{ route('cms_content_all_load_modal') }}" data-target-modal="#modals-load-content">
            <div class="mr-4 mb-2 text-right">
                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modals-load-content"
                        data-id="new"
                        data-model="content"
                >Neuen Content anlegen</button>
            </div>

            <table class="datatables-default table table-striped table-bordered clients-table">
                <thead>
                <tr>
                    <th style="max-width: 60px;">&nbsp;</th>
                    <th>{{__('Name')}}</th>
                    <th>{{__('Type')}}</th>
                    <th>{{__('Inhalt')}}</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @foreach($contents as $value)
                    <tr>
                        <td class="not">
                            <button type="button" class="btn icon-btn btn-sm btn-primary" data-toggle="modal" data-target="#modals-load-content"
                                    data-id="{{ $value->id }}"
                                    data-model="content">
                                <span class="far fa-edit"></span>
                            </button>
                        </td>
                        <td>{{ $value->name }}</td>
                        <td>{{ $value->getFieldName() }}</td>
                        <td>{{ $value->getPreviewContent() }}</td>
                        <td><a class="text-danger" href="{{ route('cms_content_all_delete', [$value->id]) }}"  onclick="return confirm('{{__('Wirklich löschen?')}}');"><i class="far fa-trash-alt"></i></a></td>

                    </tr>
                @endforeach
                </tbody>
            </table>
            <div class="mt-4 mr-4 text-right">
                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modals-load-content"
                        data-id="new"
                        data-model="content"
                >Neuen Content anlegen</button>
            </div>
        </div>

    </div>
        <script>
            $( document ).ready(function() {


                function loadModalInner(self, data){

                    var url = data.route,
                        contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
                    $.ajax({
                        url: url,
                        data: data,
                        type: "POST",
                        dataType: "json",
                        cache: false,
                        contentType: contentType,
                        encode: true,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            $(data.response.target).find('.modal-dialog').html(data.html);
                            $('.selectpicker').selectpicker('refresh');
                            //datepicker_birthday_init();
                        },
                        error: function(xhr, status, errorThrown) {
                            console.log(xhr);
                            console.log(xhr.responseText);
                            console.log(errorThrown);
                            console.log("Sorry, there was a problem!");
                        }
                    });
                    return false;
                }

                $('#modals-load-content').on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget);
                    if (!button.data('id')) {
                        return;
                    }
                    var data = {};
                    data.route = button.parents('.card').find('.card-datatable').data('route-modal');
                    data.target = button.parents('.card').find('.card-datatable').data('target-modal');
                    data.id = button.data('id');
                    data.model = button.data('model');
                    console.log(data);
                    loadModalInner(this, data);

                });

                $('.datatables-default').dataTable({
                    "bLengthChange": false,
                    "iDisplayLength": 50,
                    "language": {
                        "url": "/js/German.json"
                    }
                });

            });

        </script>

    <!-- Modal template -->
    <div class="modal fade" id="modals-load-content">
        <div class="modal-dialog">

        </div>
    </div>


@endsection