@extends('layouts.main', [
    'parentSection' => 'admin',
    'elementName' => 'blog-setting'
])

@section('content')
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">네이버 블로그 자동포스팅 세팅</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            {{--<div class="btn-group me-2">--}}
                {{--<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>--}}
                {{--<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>--}}
            {{--</div>--}}
            {{--<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
                {{--<span data-feather="calendar"></span>--}}
                {{--This week--}}
            {{--</button>--}}
        </div>
    </div>

    <div class="col-md-12 col-lg-12">
        <div class="position-sticky">
            <form name="form" action="{{route(Request::route()->getName())}}" method="post" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <div class="row mt-4">
                    <div class="row col-6">
                        <div class="col-6">
                            <div class="row mb-3">
                                <h5 class="mb-3 text-success">포스팅 주제 키워드</h5>
                                <div class="input-group mb-3">
                                    <textarea class="form-control" name="keywords" placeholder="키워드 입력(줄바꿈으로 복수 입력)" rows="12">{!! $data['keywords'] !!}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="row mb-3">
                                <h5 class="mb-3 text-success">합성할 키워드</h5>
                                <div class="input-group mb-3">
                                    <textarea class="form-control" name="keywords2" placeholder="키워드 입력(줄바꿈으로 복수 입력)" rows="12">{!! $data['keywords2'] !!}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="row mb-1">
                            <div class="row justify-content-start mb-1">
                                <div class="row mb-1">
                                    <h5 class="mb-3 text-success">제목, 내용 구분자 문자 입력</h5>
                                    <div class="input-group mb-3">
                                        <input type="text" name="sep" id="sep" class="form-control" placeholder="|^|" value="{!! $data['sep'] !!}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="row justify-content-start mb-1">
                                <div class="row mb-1">
                                    <h5 class="mb-3 text-success">홍보 URL 등록</h5>
                                    <div class="input-group mb-3">
                                        <input type="text" name="urls" id="urls" class="form-control" placeholder="URL 입력(줄바꿈으로 여러 URL입력)" value="{!! $data['urls'] !!}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <h5 class="mb-3">ChatGPT 글 작성 방식 설명</h5>
                            <div class="input-group mb-3">
                                <textarea class="form-control" name="set_question" placeholder="어떤식으로 작성해야 하는지 설명" rows="3">{!! $data['set_question'] !!}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="row mb-3">
                        <h5 class="mb-3">ChatGPT 글 질문 리스트에서 몇개를 조합해 질문할 것인가?</h5>
                        <div class="input-group mb-3">
                            <input type="number" name="set_question_sum_max_count" class="form-control" value="{{$data['set_question_sum_max_count']}}" placeholder="4">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <h5 class="mb-3">ChatGPT 글 질문 리스트</h5>
                        @php
                            $questions = explode("|",$data['questions']);
                        @endphp

                        @for( $i=0; $i<count($questions); $i++ )
                        <div class="row dynamic_area1">
                            <div class="col-1">
                                <button type="button" class="btn btn-outline-secondary btn-sm px-2" onclick="add_dynamic_area( 'dynamic_area1', 'dynamic_index1', $(this).parent().find('.dynamic_index1').val(), 50 );">
                                    &nbsp;+&nbsp;
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm px-2" onclick="remove_dynamic_area( 'dynamic_area1', 'dynamic_index1', $(this).parent().find('.dynamic_index1').val() );">
                                    &nbsp;-&nbsp;
                                </button>
                                <input type="hidden" class="dynamic_index1" value="{{$i}}" style="width:30px;" disabled><!-- 추가삭제 인덱스넘버 -->
                            </div>
                            <div class="col-11">
                                <div class="input-group mb-3">
                                    <textarea class="form-control" name="questions[]" placeholder="질의 문장" rows="3">{!! $questions[$i] !!}</textarea>
                                </div>
                            </div>
                        </div>
                        @endfor
                    </div>
                </div>
                <div class="col-12">
                    <div class="row mb-3">
                        <h5 class="mb-3 text-success">이미지 생성용 프롬프트 문구(영어로만 입력)</h5>
                        <div class="input-group mb-3">
                            <textarea class="form-control" name="img_keywords" placeholder="영어로만 입력할것" rows="3">{!! $data['img_keywords'] !!}</textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <button class="btn btn-secondary" type="submit" id="button-addon2">저장</button>
                </div>
            </form>
        </div>
    </div>
</main>
@endsection

@push('css')
<style>
    a {text-decoration: none;}
    span.thumb {overflow: hidden;float: left;position: relative;margin: 1px 6px 0 -4px;border: 1px solid #fff;border-radius: 50%;}
    span.thumb img{width: 22px;aspect-ratio: auto 22 / 22;height: 22px;}

    .btn-group-sm>.btn, .btn-sm { padding: 3px 3px; font-size: 0.7rem; font-weight: bold; }
    .table td { padding: 20px 0px;}
    .table td hr { background-color: #cbd5e0; padding: 1px 0px; margin: 10px 0px;}
</style>
@endpush

@push('js')
<script>
/* ------------------------------------------------------------- [ + -  동적인풋 - Start ] ------------------------------------------------------------- */
// 특정 클래스영역을 복제
//
// parameter
// @ 복제될영역class네임,
// @ 인덱스넘버가 저장되는class네임
// @ 현재영역의 인덱스넘버값
// 2015-MJ
// 2016-MJ  @max_clone_count 추가하여 최대 생성갯수 제한 가능하게 수정
function add_dynamic_area(clone_area, dynamic_index, inx, max_clone_count) {
    if (max_clone_count) {
        let this_clone_count = $("." + clone_area).length;
        if (this_clone_count >= max_clone_count) {
            alert("최대 " + max_clone_count + "개 까지 추가 가능합니다.");
            return false;
        }
    }

    dynamic_tag = $("." + clone_area).eq(inx).clone();

    $("." + clone_area).eq(inx).before(function () {
        $(this).before(dynamic_tag);
        //$(this).find("input").val("").focus();
    });

    // 추가된 열로 인해 인덱스 번호를 모두 다시 생성해 대입한다.
    $("." + dynamic_index).each(function (i) {
        let this_attr_index = i;
        $(this).attr("value", this_attr_index);
    });
}

// 특정 클래스영역을 삭제
//
// parameter
// @ 복제될영역class네임,
// @ 인덱스넘버가 저장되는class네임
// @ 현재영역의 인덱스넘버값
// 2015-MJ
function remove_dynamic_area(clone_area, dynamic_index, inx) {
    // 동적 엘리먼트 요소가 1개만 남았을경우 제거되지 않게 함
    if ($("." + clone_area).length < 2) {
        return false;
    }

    $("." + clone_area).eq(inx).remove();
    $("." + dynamic_index).each(function (i) {
        let this_attr_index = i;
        $(this).attr("value", this_attr_index);
    });
}
/* ------------------------------------------------------------- [  + - 동적인풋 - End ] ------------------------------------------------------------- */
</script>
@endpush