@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Document Templates</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/home">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{!! route('document-templates', ['alias' => $alias]) !!}">Document
                            Templates</a>
                    </li>
                    <li class="breadcrumb-item active">{{ $template->id ? 'Edit' : 'Create' }}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <a href="javascript:history.back()" class="btn btn-secondary btn-sm"><i data-feather="arrow-left-circle"></i>
                Back</a>
            <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                class="btn btn-primary btn-sm"><i data-feather="check-circle"></i> Submit</button>
        </div>
    </div>
@endpush

@section('content')
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card new-cardbox">
                    <div class="card-body">
                        <form
                            action="{{ $template->id ? route('document-templates.update', ['alias' => $alias, 'template' => $template->id]) : route('document-templates.store', ['alias' => $alias]) }}"
                            role="post-data" redirect="{!! route('document-templates', ['alias' => $alias]) !!}"
                            method="POST">
                            @if ($template->id)
                                <input type="hidden" name="_method" value="PUT">
                            @endif

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label">Title <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="title"
                                                    value="{{ $template->title }}" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label">Type <span class="text-danger">*</span></label>
                                                <select class="form-control" name="type">
                                                    <option value="">Select an option</option>
                                                    @foreach ($templateTypes as $key => $type)
                                                        <option value="{{ $key }}"
                                                            {{ $template->type === $key ? 'selected' : '' }}>
                                                            {{ $type }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="mb-1">
                                                <label class="form-label">Content <span class="text-danger">*</span></label>
                                                <textarea id="editor" name="content" rows="15" class="form-control">
                                                {{ $template->content }}
                                            </textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script src="/js/common-script.js"></script>
    <script src="https://cdn.tiny.cloud/1/cqq8nzzubai8bulxe8dmtmawver87j96qxqwwr9ip4z60mgr/tinymce/8/tinymce.min.js"
        referrerpolicy="origin" crossorigin="anonymous"></script>
    <script>
        tinymce.init({
            selector: '#editor',
            height: 500,
            menubar: true,
            newline_behavior: 'linebreak',
            plugins: 'code table lists',
            toolbar: 'undo redo | formatselect | bold italic | bullist numlist | table | code',
            setup: function(editor) {
                editor.on('change input undo redo', function() {
                    editor.save();
                });

                editor.ui.registry.addMenuButton('placeholders', {
                    text: 'Insert Placeholder',
                    fetch: function(callback) {
                        const items = [
                            @foreach ($placeholders as $key => $name)     
                                {
                                    type: 'menuitem',
                                    text: '{{$name}}',
                                    onAction: () => editor.insertContent('{'+ '{{$key}}' + '}')
                                },
                            @endforeach
                        ];
                        callback(items);
                    }
                });
            },
            toolbar: 'undo redo | bold italic | placeholders | code',
            onboarding: false
        });
    </script>
@endpush