@php
    // The input values saved with this tag, keyed by the template's input
    // placeholder, so an edit re-opens the form exactly as it was submitted.
    $savedInputs = [];
    if (!empty($tag->data)) {
        foreach ((json_decode($tag->data, true) ?: []) as $key => $value) {
            if (is_array($value)) {
                continue;
            }
            $savedInputs[str_replace(' ', '_', $key)] = $value;
        }
    }
@endphp

<div class="form-group row" data-name="nodWCubL">
    <div class="col-md-12" data-name="FzsYCeQb">
        <div class="ctype ct1">
            <h4>{{ trans("common.description") }}</h4>
            <ul class="ctype-list">
                @foreach(preg_split("/\r\n|\n|\r/", (string) $prompt->description) as $line)
                    <li><i class="flaticon2-right-arrow"></i>{{ $line }}</li>
                @endforeach
            </ul>
        </div>
    </div>
</div>


<div class="form-group row" id="" data-name="nodWCubL">
    <div class="col-md-12" data-name="FzsYCeQb">
        <label class="col-form-label text-example">{{trans('content_tags.examples')}}
        </label>
        <div class="input-icon right example-box" data-name="CnEEMVhY">
            <div class="slider-block" id="sliderf">
                <div class="slide">
                    <h4>{{ $prompt->name }}</h4>
                    <ul class="ctype-list examples">
                        @foreach(preg_split("/\r\n|\n|\r/", (string) $prompt->example) as $line)
                            <li><i class="fa fa-circle-notch"></i>{{ $line }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="ex-num">
                <a href="javascript:;" id="prev"> <i class="la la-angle-left"></i></a><span class="cr-num"></span>
                <span class="sep"> / </span>
                 <span class="all-num"></span> <a href="javascript:;" id="next"><i class="la la-angle-right"></i></a>
            </div>
        </div>
    </div>
</div>
<div class="form-group row" data-name="nodWCubL">
@if(!empty($prompt->tones))
    @foreach($tones as $tone)
           @if(!empty($tone["input_field"]) and !empty($tone["input_placeholder"]) and !empty($tone["input_type"]))
        @if($tone["input_type"] == "textarea")
        <div class="col-md-12" id="input1" data-name="FzsYCeQb" @if($tone["input_type"] == "textarea") style="display:block" @else style="display:none" @endif>
            <label class="col-form-label" id="label-1">{{$tone["input_field"]}}
            @if(empty($tone['input_require']) OR (!empty($tone['input_require']) and $tone['input_require'] == "required"))
             <span class="required"> * </span>
             @php $required = "required"; @endphp
             @endif

            </label>
            <div class="input-icon right" data-name="CnEEMVhY">
                <textarea  name="{{$tone['input_placeholder']}}" {{$required}} class="form-control description {{$tone['input_placeholder']}}" rows="10">{{ $finalVal }}</textarea>
                <span class="text-help">{{$tone["input_desc"]}}</span>
            </div>
        </div>
        @endif
        @if($tone["input_type"] == "input")
        <div class="col-md-12" id="input2" data-name="FzsYCeQb" @if($tone["input_type"] == "input") style="display:block" @else style="display:none" @endif>
            <label class="col-form-label" id="label-1">{{$tone["input_field"]}}
            @if(empty($tone['input_require']) OR (!empty($tone['input_require']) and $tone['input_require'] == "required"))
             <span class="required"> * </span>
             @php $required = "required"; @endphp
             @endif
            </label>
            <div class="input-icon right" data-name="CnEEMVhY">
                <input type="text" {{$required}} @if (!empty($finalVal)) value="{{$finalVal}}" @endif  name="{{$tone['input_placeholder']}}"  data-name="user_input_audience"  class="form-control options {{$tone['input_placeholder']}}">
                <span class="text-help">{{$tone["input_desc"]}}</span>
            </div>
        </div>
        @endif
        @if($tone["input_type"] == "dropdown")
                <div class="col-md-12" id="input3" data-name="FzsYCeQb" @if($tone["input_type"] == "dropdown") style="display:block" @else style="display:none" @endif>
            <div class="input-icon right tone " data-name="CnEEMVhY">
                <label class="col-form-label" id="label1">{{$tone["input_field"]}}
                @if(empty($tone['input_require']) OR (!empty($tone['input_require']) and $tone['input_require'] == "required"))
                <span class="required"> * </span>
                @php $required = "required"; @endphp
                @endif
                </label>
                <select class="form-control m-select2 options email-type  {{$tone['input_placeholder']}}" {{$required}}  name="{{$tone['input_placeholder']}}"  data-placeholder="{{trans('content_tags.add_new.form.select_topic')}}">
                    <option value="">{{trans('content_tags.add_new.form.select_topic')}}</option>
                    @foreach($options as $opt)
                        <option @if($finalVal == trim($opt)) selected @endif value="{{trim($opt)}}">{{$opt}}</option>
                    @endforeach
                </select>
                <span class="text-help">{{$tone["input_desc"]}}</span>
            </div>
        </div>
        @endif
        @endif
    @endforeach
    @endif
    @if($prompt->instructions)
        <div class="col-md-12" id="input2" data-name="FzsYCeQb" style="display:block">
            <label class="col-form-label" id="label-1">{{trans('content_tags.add_new.form.additional_instruction')}}
                         <span class="required"> * </span>
            </label>
            <div class="input-icon right" data-name="CnEEMVhY">
                <input type="text" required="" name="additional_instruction" data-name="user_input_audience" class="form-control options additional_instruction">
                <span class="text-help">{{trans('content_tags.add_new.form.additional_detail')}} </span>
            </div>
        </div>
    @endif

    @if($prompt->tone)
    <div class="col-md-12"  data-name="FzsYCeQb"  >
        <div class="input-icon right tone " data-name="CnEEMVhY">
            <label class="col-form-label" id="label1">{{ trans('content_tags.add_new.form.tone_type') }} <span class="required"> * </span></label>
                @php
                    // The value is the instruction handed to the model, so it stays
                    // English; only the label the user reads is translated.
                    $toneOptions = [
                        'Professional/Formal'       => 'professional_formal',
                        'Friendly/Casual'           => 'friendly_casual',
                        'Persuasive/Sales-oriented' => 'persuasive_sales_oriented',
                        'Informative/Educational'   => 'informative_educational',
                        'Enthusiastic/Energetic'    => 'enthusiastic_energetic',
                        'Serious/Sober'             => 'serious_sober',
                        'Humorous/Witty'            => 'humorous_witty',
                        'Inspirational/Motivational'=> 'inspirational_motivational',
                        'Empathetic/Understanding'  => 'empathetic_understanding',
                        'Technical/Expert'          => 'technical_expert',
                        'Creative/Innovative'       => 'creative_innovative',
                    ];
                    $selectedTone = isset($savedInputs['tone_type']) ? $savedInputs['tone_type'] : '';
                @endphp
                <select class="form-control m-select2" data-placeholder="{{ trans('content_tags.add_new.form.tone_type') }}" name="tone_type" id="tone_type">
                    <option value="">{{ trans('content_tags.add_new.form.tone_type') }}</option>
                    @foreach($toneOptions as $toneValue => $toneKey)
                        <option @if($selectedTone == $toneValue) selected @endif value="{{ $toneValue }}">{{ trans('content_tags.add_new.form.'.$toneKey) }}</option>
                    @endforeach
                </select>

        </div>
    </div>
    @endif

    <div class="col-md-12" data-name="FzsYCeQb">
        <div class="btn-fetch">
            <a href="javascript:;" id="get-content" class="btn btn-info btn-sm">
                {{trans('content_tags.add_new.form.fetch_content')}}
            </a>
        </div>
    </div>
</div>

<script src="{{ asset('themes/default/js/select2.full.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/select2.js') }}" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $(".m-select2").select2();
    });
</script>