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

@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>

    <div class="col-md-12">
        <div class="row justify-content-md-center mt-4  mb-4">
            <div class="col-auto">
                {{ $data->appends(Request::query())->links() }}
            </div>
            <div class="col-auto me-auto">
                <form id="list_form" name="list_form" method="get" action="{{route(Request::route()->getName(), [Request::getQueryString()])}}">
                    <select name="show" id="show">
                        <option value="" {{(get('show')=='')?'selected':''}}>노출 여부 선택(전체)</option>
                        <option value="1" {{(get('show')==1)?'selected':''}}>노출 허용 목록만</option>
                        <option value="2" {{(get('show')==2)?'selected':''}}>노출 안함 목록만</option>
                    </select>
                    <select name="status" id="status">
                        <option value="" {{(get('status')=='')?'selected':''}}>포스팅 가능 여부 선택(전체)</option>
                        <option value="1" {{(get('status')==1)?'selected':''}}>포스팅 가능</option>
                        <option value="2" {{(get('status')==2)?'selected':''}}>포스팅 완료</option>
                        <option value="3" {{(get('status')==3)?'selected':''}}>포스팅 불가</option>
                    </select>
                    <select name="qtype" class="ml-5" id="qtype">
                        <option value="subject" {{(get('qtype')=='subject')?'selected':''}}>제목</option>
                        <option value="content" {{(get('qtype')=='content')?'selected':''}}>내용</option>
                        <option value="tags" {{(get('qtype')=='tags')?'selected':''}}>태그</option>
                    </select>
                    <input type="text" name="q" value="{{get('q')}}">
                    <button type="submit">검색</button>
                </form>
            </div>
            <div class="col-auto">
                <a href="{{route($route_name.'.create')}}" class="btn btn-success">ChatGPT 글 생성</a>
            </div>
        </div>
        <div class="col">
            <form id="list_form" name="list_form" method="post" action="{{route(Request::route()->getName(), [Request::getQueryString()])}}">
                {{ method_field('DELETE') }}
                {{ csrf_field() }}

                <div class="px-1">
                    <div class="table-responsive">
                        <table id="resultTable" class="dataTable table table-sm">
                            <colgroup>
                                <col >
                                <col >
                                <col >
                                <col >
                                <col >
                                <col style="width:10%;">
                                <col style="width:40%;">
                                <col >
                            </colgroup>
                            <thead>
                            <tr>
                                <th><a href="javascript:all_check('.check_list')"><i class="bi bi-check-circle-fill"></i></a></th>
                                <th>ID</th>
                                <th>
                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="check_delete('check_list', '.dataTable');">
                                        <i class="bi bi-trash3-fill"></i>선택 삭제
                                    </button>
                                </th>
                                <th>상태</th>
                                <th>키워드</th>
                                <th>제목</th>
                                <th>목록 업데이트 시각</th>
                            </tr>
                            </thead>
                            <tbody>
                                @forelse($data as $list)
                                    <tr id="list-index-{{$loop->index}}">
                                        <td>
                                            <div class="form-group">
                                                <input type="checkbox" id="list_id_{{$list['id']}}" name="id" class="check_list" value="{{$list['id']}}" data-index="{{$loop->index}}" data-status="{{$list['stats']}}" data-kin_status="{{$list['kin_status']}}">
                                            </div>
                                        </td>
                                        <td>{{$list['id']}}</td>
                                        <td>
                                            <a href="{{route('blog-work.view', ['id'=>$list->id, Request::getQueryString()])}}" class="btn btn-outline-primary btn-sm"><i class="bi bi-gear"></i> 보기</a>
                                            <a href="{{route('blog-work.edit', ['id'=>$list->id, Request::getQueryString()])}}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-gear"></i> 수정</a>

                                            <button type="button" onclick="$(this).attr('disabled', true); direct_delete('{{$list['id']}}', '.dataTable', '{{$loop->index}}');" class="btn btn-outline-danger btn-sm"><i class="bi bi-trash3"></i> 삭제</button>
                                        </td>
                                        <td style="{{($list['status']===1)?'color:green':''}};">
                                            {{get_posting_status($list['status'])}}
                                            @if($list['status']===2)
                                                <br />
                                                <a href="https://blog.naver.com/{{$list->post['blogId']}}" target="_blank">{{$list->post['blogId']}}</a>
                                            @endif
                                        </td>
                                        <td><b>{{$list['keywords']}}</b></td>
                                        <td><img src="{{$list->images[0]['path']}}" alt="{{$list->images[0]['path']}}" style="width:80px;" class="img-thumbnail"></td>
                                        <td>
                                            @if(!empty($list->post['link']))
                                                <a href="{!!$list->post['link']!!}" target="_blank" style="text-decoration: none;" class="k-title">{!! ellipsize($list['subject'], 60, 1) !!}</a>
                                                <br />
                                                {{$list->post['link']}}
                                            @else
                                                {!! ellipsize($list['subject'], 60, 1) !!}
                                            @endif

                                        </td>
                                        <td>
                                            {{$list['created_at']}}<br />
                                            {{$list['updated_at']}}<br />
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8">{{$data['keyword']}} 검색 결과가 없습니다.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                </div>
            </form>
        </div>

        <div class="row justify-content-md-center mt-4">
            <div class="col-md-auto">
                {{ $data->appends(Request::query())->links() }}
            </div>
        </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>
    // 선택한 체크박스에 해당하는 다중 row 삭제
    function check_delete(className, selector){
        let check_value = [];
        let check_index = [];
        $("input:checkbox[class="+className+"]:checked").each(function() {
            check_value.push($(this).val());
            check_index.push($(this).data('index'));
        });
        if (check_value.length < 1) {
            alert('삭제할 리스트를 선택하세요.');
            return false;
        }
        let check_value_string = check_value.join(",");
        let result = confirm('선택한 리스트 '+check_value.length+'개를 삭제하시겠습니까?');
        if (result) {
            axios.delete('/blog-work/'+check_value_string).then(function (res) {
                if (res.data==='ok') {
                    $.each(check_index, function(){
                        $(selector).find("#list-index-"+this).remove();
                    });
                    alert('삭제 완료');
                } else {
                    alert('삭제 실패');
                }
            });
        } else {
            return false;
        }
    }

    // 단일 row 삭제
    function direct_delete(id, selector, index){
        let result = confirm('선택한 항목을 삭제하시겠습니까?');
        if (result) {
            axios.delete('/blog-work/'+id).then(function (res) {
                console.log(res.data);
                if (res.data==='ok') {
                    $(selector).find("#list-index-"+index).remove();
                    alert('삭제 완료');
                } else {
                    alert('삭제 실패');
                }
            });
        }
    }
</script>
@endpush