@extends('layouts.admin')

@section('content')

<div class="container">
    <div class="row">

        {{-- CONTROLS --}}
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                <strong>Template Details</strong>
                </div>
                    <div class="card-body">

                        {{ csrf_field() }}
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $template->name) }}" required>
                        </div>
                        <div class="form-group">
                            <label>Slug</label>
                            <input type="text" name="slug" class="form-control" value="{{ old('slug', $template->slug) }}" required>
                        </div>

                        {{-- Testing Output --}}
                        <div class="form-group d-none1">
                            <label>Output</label>
                            <textarea name='json' class="form-control" id="json-output" rows="5">{{$template->json}}</textarea>
                        </div>
                        {{-- //Testing Output --}}

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                    <div class="card-footer text-right">
                        <input type="hidden" name="id" value="{{ $template->id }}">
                        <input type="submit" class="btn btn-primary" value="Save Template">
                    </div>
            </div>
            <div id="add_buttons" class="card">
                <div class="card-header">
                    <strong>Template Controls</strong>
                    <i class="fa fa-circle-o-notch fa-lg fa-spin" style="display:none;"></i> 
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <button type="button" class="btn btn-block btn-primary" data-type="container">
                            Add Container
                        </button>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-block btn-primary" data-type="row">
                            Add Row
                        </button>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-block btn-primary" data-type="column">
                            Add Column
                        </button>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-block btn-primary" data-type="component">
                            Add Component
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {{-- //CONTROLS --}}

        {{-- LIST --}}
        <div class="col-md-8">
            <div class="row">

                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            <strong>Template</strong>
                        </div>
                        <div class="card-body">
                            <div class="dd nestable" id="nestable">
                                <ol class="dd-list">
                                {{-- Populate Template --}}
                                @if($template_items)
                                    @foreach ($template_items as $template_item)
                                        @include('template::partials.item', ['template_item' => $template_item])
                                    @endforeach
                                @endif
                                {{-- //Populate Template --}}
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- //LIST --}}

    </div>
</div>

@include('template::partials.modal')




{{-- {{ Module::asset('Template:js/nestable-master/style.css') }}
{{ Module::asset('Template:js/nestable-master/jquery.nestable.js') }}
{{ Module::asset('Template:js/nestable-master/jquery.nestable++.js') }} --}}

<link rel="stylesheet" href="{{ Module::asset('template:js/Nestable-master/style.css') }}">
<script src="{{ Module::asset('template:js/Nestable-master/jquery.nestable.js') }}"></script>
<script src="{{ Module::asset('template:js/Nestable-master/jquery.nestable++.js') }}"></script>

@include ('js_vars')
<script>
$('#nestable').nestable({ maxDepth: 10 }).nestable('collapseAll').on('change', updateOutput);
</script>

<script>
$('#add_buttons button').on('click', function(e){
    var loading_icon = $(this).closest(".card").find(".card-header .fa-spin");
    loading_icon.fadeIn();
    $.ajax({
        url: "/admin/template/additem/" + $(this).data('type')
    })
    .done(function(result){
        $('#template-item-form').html(result);
        $('#form_modal').modal();
        loading_icon.css('display', 'none');
    })
});
</script>

@endsection