@extends('layouts.app')
@section('content')
    <div class="content">
        <x-content.header title="{{__('title.setup')}} - {{ __('title.templates')}}" />
        <div class="tw-card">
            <div class="p-6">
                <form id="form" name="templates-form" action="{{route('settings.templates.update', $template->id)}}" method="POST">
                    @include('mail-templates.form', [
                        'edit' => true
                    ])
                    <div class="mt-4 border-top">
                        <button type="submit" class="btn btn-info mt-4 btn-save">
                            {{trans('forms.lbl_save')}}
                        </button>
                        <a href="{{route('settings.templates.index')}}"  class="btn btn-outline-secondary mt-4">{{trans('forms.lbl_cancel')}}</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@php 
    $htmlTemplates = $template->languages->mapWithKeys(function($language) {
        return [$language->pivot->language_id => $language->pivot->html_template];
    })->toJson();
@endphp
@section('footer-script')
    <!-- plugin js for this page -->
    <!-- End plugin js for this page -->
    <script type="text/javascript">

        let languages = JSON.parse("{{isset($languages) ? $languages?->pluck('id')?->toJson() : '[]'}}"),
            htmlTemplates = JSON.parse("{!!addslashes($htmlTemplates)!!}");
        
        setTimeout(function(){
            languages.forEach((languageId) => {
                if ( htmlTemplates[languageId] && htmlTemplates[languageId] !== undefined ) {
                    tinymce
                        .get("html-template-" + languageId)
                        .setContent(htmlTemplates[languageId]);
                    jQuery("textarea[name='html_template[" + languageId + "]']").val(htmlTemplates[languageId]);
                }
            });
        }, 2500);

        $(".btn-save").on("click", function(event) {
            event.preventDefault();
            if($("#form").valid()){
                data = $('#form').serialize();

                PDRequest({
                    type    : "PUT",
                    url     : $("#form").prop("action"),
                    data    : data,
                    event   : event
                }).then((response) => {
                    window.location = "{{route('settings.templates.index')}}";
                });
            }
        });

        $(".btn-insert").on("click", function(event) {
            let languageId = $(this).attr('data-language-id'),
                fieldValueInput = $('input[name="field-value[' + languageId + ']"]');

            if(fieldValueInput.val() != "") {
                tinymce
                    .get("html-template-" + languageId)
                    .execCommand(
                        'mceInsertContent', 
                        false, 
                        fieldValueInput.val()
                    );
                fieldValueInput.val("");
            }
        });

        $('body').on('change', '.field-selection', function (e) {
            let languageId = $(this).attr('data-language-id');
            if($(this).val() != "") {
                $('input[name="field-value[' + languageId + ']"]').val("\{\{"+$(this).val()+"\}\}");
            }
        });

        function getFields( id ) {
            let url = '{{route('settings.templates.index')}}';

            PDRequest({
                type    : "POST",
                url     : url+"/"+id+"/fields",
                isFlash : false
            }).then(response => {
                languages.forEach( (languageId) => {
                    let model = $('select[name="field[' + languageId + ']"]')
                    
                    $('input[name="field-value[' + languageId + ']"]').val("");
                    
                    model.empty();
                    model.append("<option value>Select Field</option>");
                    $.each(response.fields, function(index, element) {
                        model.append("<option value='" + element.name + "'>" + element.label + "</option>");
                    });
                });
            });
        }

        $('body').on('change', '#form_id', function (e) {
            event.preventDefault();
            getFields($(this).val());
        });

        getFields( $("#form_id").val() );

    </script>
@stop