@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.store')}}" method="POST">
                    @include('mail-templates.form', [
                        'edit' => false
                    ])
                    <div class="mt-4 border-top">
                        <button type="submit" class="btn btn-info mt-4 btn-save">
                            {{trans('forms.lbl_create')}}
                        </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

@section('footer-script')
    <!-- End plugin js for this page -->
    <script type="text/javascript">
        
        let languages = JSON.parse("{{isset($languages) ? $languages?->pluck('id')?->toJson() : '[]'}}");

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

                PDRequest({
                    type    : "POST",
                    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()+"\}\}");
            }
        });

        $('body').on('change', '#form_id', function (e) {

            let url = '{{route('settings.templates.index')}}', 
                id  = $(this).val();

            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>");
                    });
                });
            });
        });

    </script>
@stop