@extends(decide_template())

@section('title', $title)

@section('page_styles')
<link href="{{ asset('css/spintags-create.css') }}?v={{$local_version}}.01" rel="stylesheet" type="text/css">
<link href="{{ asset('css/aitags-create.css') }}?v={{$local_version}}.02" rel="stylesheet" type="text/css">
@endsection

@section('page_scripts')
<script src="{{ asset('themes/default/js/jquery.form.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/jquery.validate.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/additional-methods.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/init.js') }}" type="text/javascript"></script>
<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 src="{{ asset('themes/default/js/form-controls.js') }}" type="text/javascript"></script>

@php
$aiTagsI18n = [
    'form_error'     => trans('common.message.form_error'),
    'record_created' => trans('common.message.create'),
    'copied'         => trans('common.message.success_copied'),
];
@endphp
<script>
    window.aiTagsI18n = @json($aiTagsI18n);
</script>
<script src="{{ asset('themes/default/js/includes/ai_content_tags.js') }}" type="text/javascript"></script>

@php
    // Which prompt template this tag was built from, so its input fields can be
    // re-opened on edit. The saved input values themselves are rendered by the
    // templateData partial, which reads the same JSON.
    $query_type = null;
    if (!empty($custom_field->ai_query)) {
        $query_type = (int) $custom_field->ai_query;
    }
@endphp

@if(!empty($query_type))
    <script>
        setTimeout(() => {
            $("#prompt{{ $query_type }}").trigger("click");
        }, 500);
    </script>
@endif

<script>


    function copy_content(containerid) {
        var range = document.createRange();
        range.selectNode(containerid);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand("copy");
        window.getSelection().removeAllRanges();
        Command: toastr["success"] (window.aiTagsI18n.copied);
    }
    $(document).ready(function() {
        $('#name').on('keyup change', function () {
            var current = $(this).val();
            var cleaned = current.replace(/[^a-zA-Z0-9_-]/g, '');
            if (cleaned !== current) {
                $(this).val(cleaned);
            }
        });
        $(".m-select2").select2();


        $(".options").on("change", function() {
            $(".options").css("border-color", "#bec4d0");
            $(".select2-selection").css("border-color", "#bec4d0");
        });
        $(".options").keyup( function() {
            $(".options").css("border-color", "#bec4d0");
        });

        $("body").on("click" , "#get-content", function() {
            $(".input-icon").removeClass("select-invalid");
            $('select.options').parent().removeClass("select-invalid");
            $(".description").css("border-color", "#bec4d0");
            $('input.options').css("border-color", "#bec4d0");
            $('select.options').css("border-color", "#bec4d0");
            $("#no-query").hide();
            $("#res-blk").hide();

            $("#_method").val("POST");
            var form_data = $('#contenttags-frm').serialize();
            $("#_method").val("PUT");
            $.ajax({
                url: "{{route('get-ai-response')}}",
                data: form_data,
                type: "POST",
                beforeSend: function () {
                    $(".description").css("border-color", "#bec4d0");
                    $(".blockUI").show();
                },
                complete:  function () {
                    $(".blockUI").hide();
                },
                success: function (data) {
                    $(".blockUI").hide();
                     var obj = JSON.parse(data);
                    if(obj["status"] == "required") {
                        try {
                            $.each(obj["input_fields"], function( index, value ) {
                                $(".input-icon").removeClass("select-invalid");
                                $('select.options').parent().addClass("select-invalid");
                                $("." + value).css("border-color", "red");
                            });
                            Command: toastr["error"] (obj["content"] || window.aiTagsI18n.form_error);
                            return false;
                        } catch(e) {
                            $('select.options').parent().removeClass("select-invalid");
                            $(".description").css("border-color", "#bec4d0");
                            $('input.options').css("border-color", "#bec4d0");
                            $('select.options').css("border-color", "#bec4d0");
                        }
                    }
                    else if(obj["status"] == false){
                        Command: toastr["error"] (obj["content"]);
                    }
                    else {
                        $("#res-blk").show();
                        var finalContent = obj["content"];
                        var formattedContent = finalContent.replace(/\n/g, '<br>');
                        $("#cnamecopy").html(formattedContent);
                        $("#response_final").val(obj["content"]);
                        $("#tokenUsed").html(obj["total_tokens"]);
                        $("#AitokenUsed").html(obj["ai_tokens"]);
                        $("#query_content").html(obj["query_content"]);

                    }

                    var tokens = obj["total_tokens"];
                    if(tokens > 0) {
                        $("#token-blk").show();
                        $("#ai-token-blk").show();
                        $("#token-blk").removeClass("btn-label-grey").removeClass("btn-label-success").addClass("btn-label-grey");
                    } else {
                        $("#token-blk").removeClass("btn-label-grey").removeClass("btn-label-danger").addClass("btn-label-success");
                    }
                }
            });

        });

        $(".description").on("change", function() {
            $(".description").css("border-color", "#bec4d0");
        });



        $(".ai-query").click(function() {
            $(".description").val("");
            $(".options").val("");
            $(".options").val("").trigger('change');
            $(".description").css("border-color", "#bec4d0");
            var val = $(this).attr("data-id");
            var form_data = {
                id : val,
                tag_id: 0            }
            $.ajax({
                    url: "{{route('contenttags.template.get')}}",
                    data: form_data,
                    type: "POST",
                    beforeSend: function () {
                        $("#templateData").html("");
                        $(".description").css("border-color", "#bec4d0");
                         $(".blockUI").show();
                    },
                    complete:  function () {
                        $(".blockUI").hide();
                    },
                    success: function (html) {
                        $(".blockUI").hide();
                        $("#templateData").html(html);
                    }
                });


            $("#query_type").val(val);
            $("#sb").show();
            $(".content-types").show();
            $(".ctype").fadeIn("slow");
            $(".kt-radio").removeClass("active");
            $(this).parents(".kt-radio").addClass("active");
        });

        var $slider = $('#slider'),
            $prev = $('#prev'),
            $next = $('#next'),
            $slide = $slider.find('div'),
            currentSlide = 0,
            allSlides = $slider.find('div').length - 1; // index start from 0
        $slider.find('div').eq(0).show();
        var numSlide = 1;
        var aSlides = allSlides+1;
        $(".cr-num").text(numSlide);
        $(".all-num").text(aSlides);
        function nextSlide() {
            if(currentSlide < allSlides) {
                $slide.eq(currentSlide).hide();
                $slide.eq(currentSlide + 1).fadeIn(1000);
                currentSlide+=1;
                numSlide = currentSlide +1;
                $(".cr-num").text(numSlide);
                $(".all-num").text(aSlides);
            }
        }
        function prevSlide() {
            if(currentSlide > 0) {
                $slide.eq(currentSlide).hide();
                $slide.eq(currentSlide - 1).fadeIn(1000);
                currentSlide-=1;
                numSlide = numSlide -1;
                $(".cr-num").text(numSlide);
                $(".all-num").text(aSlides);
            }
        }
        $next.on('click', nextSlide);
        $prev.on('click', prevSlide);
    });
</script>
@endsection

@section(decide_content())

@if($errors->any())
    <!-- For PHP validations errors-->
    <div class="alert alert-danger" data-name="WKugIwZU">
        @foreach($errors->all() as $error)
            <p>{{ $error }}</p>
        @endforeach
    </div>
@endif

@if (Session::has('error'))
<div class="alert alert-danger" data-name="vImslclh">
    {!! Session::get('error') !!}
</div>
@endif

<!-- will be used to show any messages -->
@if (Session::has('msg'))
<div class="alert alert-success" data-name="rzRBrJQl">
    {{ Session::get('msg') }}
</div>
@endif
<!-- will be used to show any messages -->
<div id="msg" class="display-hide" data-name="iYYJLRYF">
    <button class="close" data-close="alert"></button>
    <span id='msg-text'><span>
</div>
<div class="col-md-12 main-block" data-name="qDwPVqxQ">

    <!-- BEGIN FORM-->
    @if($action == 'add')
    <form action="" method="POST" id="contenttags-frm" name="contenttags-frm" class="kt-form kt-form--label-right">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" id="action" value="add">
    @else
    <form action="{{ route('contenttags.update', $custom_field->id) }}" name="contenttags-frm" method="POST" id="contenttags-frm" class="kt-form kt-form--label-right">
        <input type="hidden" id="action" value="edit">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden"  name="id" id="content-tag-id" value="{{$custom_field->id}}">
        <input type="hidden" id="_method" name="_method" value="PUT">
    @endif

        <input type="hidden" name="query_type" id="query_type" value="">
        <div class="row" data-name="CsVHvaMg">
            <div class="kt-portlet kt-portlet--height-fluid" data-name="htrXTgbB">
                <div class="kt-portlet__head" data-name="oxzDIHtQ">
                    <div class="kt-portlet__head-label" data-name="HtSmybcH">
                        <h3 class="kt-portlet__head-title">{{trans('content_tags.add_new.form.heading')}}</h3>
                    </div>
                </div>
                <div class="kt-portlet__body" data-name="lEEPdWuL">
                    <div class="form-body" data-name="iJyAYkhn">
                        <!-- Name / Placeholder -->
                        <div class="form-group row" data-name="oRssRNWB">
                            <div class="col-md-6" data-name="zPiJOnvC">
                                <label class="col-form-label">{{trans('content_tags.add_new.form.name')}}
                                    <span class="required"> * </span>
                                     {!! popover( 'content_tags.add_new.form.name_help','common.description' ) !!}
                                </label>
                                <div class="input-icon right" data-name="VwyBNeSC">
                                    <input type="text" name="place_holder" id="name" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" class="form-control" {{isset($custom_field->place_holder) ? "readonly" : '' }} value="{{isset($custom_field->place_holder) ? $custom_field->place_holder : '' }}"  />
                                </div>
                            </div>
                            <div class="col-md-6" data-name="zPiJOnvC">
                                <label class="col-form-label">{{trans('content_tags.add_new.form.number_of_character')}}
                                    <span class="required"> * </span>
                                     {!! popover( 'content_tags.add_new.form.number_of_character_help','common.description' ) !!}
                                </label>
                                @php
                                    $number_of_characters = ["100", "200", "300", "500", "1000", "2500"];
                                    $selected_limit = isset($custom_field->number_of_character) ? (string) $custom_field->number_of_character : "300";
                                @endphp
                                <div class="input-icon right" data-name="VwyBNeSC">
                                    <select class="form-control m-select2" id="number_of_character" name="number_of_character" data-placeholder="{{ trans('content_tags.add_new.form.select_limit') }}">
                                        <option value="">{{ trans('content_tags.add_new.form.select_limit') }}</option>
                                        @foreach($number_of_characters as $limit)
                                        <option {{ $selected_limit == $limit ? "selected" : '' }} value="{{ $limit }}">{{ $limit }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row" data-name="oRssRNWB">
                            <div class="col-md-2">
                                <label class="col-form-label">
                                    {{ trans('content_tags.add_new.form.mode') }}
                                    <span class="required"> * </span>
                                </label>
                            </div>
                            <div class="col-md-10" data-name="OYPJaTfS">
                                <div class="kt-radio-inline2">
                                    <label class="kt-radio" for="mode1">
                                        <input type="radio" checked name="type" value="static" id="mode1" @if(!empty($custom_field->type) and ($custom_field->type == "static")) checked @endif>  {{ trans('content_tags.add_new.form.static') }} {!! popover( 'content_tags.add_new.form.help_text_1','common.description' ) !!}
                                        <span></span>
                                    </label>
                                    <label class="kt-radio" for="mode2">
                                        <input type="radio" name="type" value="dynamic" id="mode2" @if(!empty($custom_field->type) and ($custom_field->type == "dynamic")) checked @endif>  {{ trans('content_tags.add_new.form.dynamic') }} {!! popover( 'content_tags.add_new.form.help_text_2','common.description' ) !!}
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row" data-name="oRssRNWB">
                            <div class="col-md-2">
                                <label class="col-form-label">
                                    {{ trans('content_tags.add_new.form.model') }}
                                    {!! popover( 'content_tags.add_new.form.model_help','common.description' ) !!}
                                    <span class="required"> * </span>
                                </label>
                            </div>
                            <div class="col-md-10" data-name="OYPJaTfS">
                                <div class="kt-radio-inline2">
                                    @php
                                        $ai_tiers = config('mumara.ai_tiers', []);
                                        $selected_tier = !empty($custom_field->ai_model) && isset($ai_tiers[$custom_field->ai_model]) ? $custom_field->ai_model : 'balanced';
                                    @endphp
                                    @foreach($ai_tiers as $tier_key => $tier)
                                        <label class="kt-radio" for="model_{{ $tier_key }}">
                                            <input type="radio" name="model" value="{{ $tier_key }}" id="model_{{ $tier_key }}" {{ $selected_tier == $tier_key ? 'checked' : '' }}> {{ $tier['label'] }}
                                            <span></span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="form-group row" data-name="oRssRNWB">
                            <div class="col-md-12" data-name="zPiJOnvC">
                                <label class="col-form-label">{{trans('content_tags.add_new.form.query')}}
                                    <span class="required"> * </span>
                                     {!! popover( 'content_tags.add_new.form.query_help','common.description' ) !!}
                                </label>
                                <div class="input-icon right" data-name="VwyBNeSC">
                                    <div class="kt-radio-inline">
                                        @foreach($prompts as $prompt)
                                            <label class="kt-radio btn ">
                                                <input type="radio" name="ai_query" class="ai-query" id="prompt{{$prompt->id}}" data-id="{{$prompt->id}}" value="{{$prompt->id}}">{{$prompt->name}}
                                            </label>
                                        @endforeach
                                    </div>
                                    <span id="no-query" class="text-error">{{ trans("content_tags.add_new.form.field_requires") }}</span>
                                </div>
                            </div>
                        </div>

                        <div id="templateData"></div>


                        <!-- Name / Placeholder -->
                        <div id="res-blk" @if(empty($custom_field->response)) style="display:none;" @endif>
                            <div class="form-group row" data-name="nodWCubL">
                                <div class="col-md-12" data-name="FzsYCeQb">
                                    <label class="col-form-label">{{trans('content_tags.add_new.form.response')}} <span class="required"> * </span>
                                        {!! popover( 'content_tags.add_new.form.response_help','common.description' ) !!}
                                    </label>
                                    <div class="input-icon right" data-name="CnEEMVhY">
                                        <div id="optkey" class="scroll" data-name="kcrvKVPI">
                                            <button class="btn btn-default btn-copy icon-copy" type="button" title="" id="cp_btn21" onclick="copy_content(cnamecopy)">
                                                <svg class="octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>
                                            </button>
                                            <span id="cnamecopy">{{ $custom_field->response ?? '' }}</span>
                                        </div>

                                        <div>
                                            <span @if(!empty($custom_field->response)) style="display:none;" @endif class="btn btn-label-grey" id="token-blk">{{ trans('content_tags.add_new.form.credits_used') }}: <span id="tokenUsed"></span></span>
                                            @if(!empty(request()->get("debug")) and request()->get("debug") == 1 and ! isClient(getAuthUser()))
                                            <span @if(!empty($custom_field->response)) style="display:none;" @endif class="btn btn-label-grey" id="ai-token-blk">{{ trans('content_tags.add_new.form.mumara_cost') }}: <span id="AitokenUsed"></span></span>
                                            @endif
                                        </div>

                                    </div>

                                    <textarea name="response_final" style="display:none" id="response_final">{{ $custom_field->response ?? '' }}</textarea>

                                    <br>

                                    @if(!empty(request()->get("debug")) and request()->get("debug") == 1 and ! isClient(getAuthUser()))
                                        <div id="query_content"></div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <!-- List of Words -->
                    </div>
                </div>
                <div class="kt-portlet__foot" data-name="OxaAdMjo">
                    <div class="form-actions" data-name="YPOFBFiA">
                        <div class="row" data-name="lHKALCdk">
                            <div class="col-md-12" data-name="jGvUwMJD">
                                <!-- save & add new -->
                                <button type="submit" name="save_add" class="btn btn-success" value="save_add">{{trans('common.form.button.save_add')}}</button>
                                @if($action == 'add')
                                <!-- save & exit -->
                                <button type="submit" name="save_exit" class="btn btn-success" value="save_exit">{{trans('common.form.button.save_exit')}}</button>
                                @else
                                <!-- save -->
                                <button type="submit" name="edit" class="btn btn-success" value="edit">{{trans('common.form.button.save')}}</button>
                                @endif
                                <!-- cancel -->
                                <a href="{{ route('contenttags.index') }}"><button type="button" class="btn btn-default">{{trans('common.form.button.cancel')}}</button></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- END FORM-->
</div>
@endsection