@php
    $dateTime = new DateTime();
    $dateTime->modify('+1 hour');
    $oneHourLater = $dateTime->format('Y-m-d H:i');
@endphp
@extends('console_layouts.master')
@section('title')
    新增-常見問題
@endsection
@section('css')
    <link href="{{ asset('assets/libs/@ckeditor/ckeditor5.css') }}" rel="stylesheet">
    
    <style>
        .item-index>h5 {
            text-align: center;
            width: 2em;
            height: 2em;
            border-radius: 50%;
            background-color: rgb(123, 112, 161);
            color: rgb(215, 218, 250);
            padding-block: 15%;
        }

        .image-input {
            display: none;
        }

        .image-upload-button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            cursor: pointer;
            border-radius: 50%;
 
        }
        .image-upload-button .icon {
            font-size: 25px;
        }

        .image_preview {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 150px;
            position: relative;
            display: inline-block;
            border-radius: 20%;
            margin: 10px;
            cursor: move;
        }

        .image_preview img {
            display: block;
            height: 100%;
            /* Adjust width as necessary */
            border-radius: 1em;
        }

        .del_btn {
            position: absolute;
            top: 1%;
            right: 1%;
            color: white;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 24px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        }

        .del_btn:hover {
            transform: scale(1.1);
            /* Increase size slightly */
            transition: transform .1s ease;
        }
    </style>
    <link href="{{ asset('assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet">
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
        @endslot
        @slot('title')
         新增-常見問題 
        @endslot
    @endcomponent
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <div class="mb-3">
                            <label class="form-label">項目名稱</label>
                            <input type="hidden" class="form-control" id="formAction" name="formAction" value="add">
                            <input type="text" class="form-control d-none" id="product-id-input">
                            <input type="text" class="form-control" id="title_input" value="" placeholder="請輸入標題" >
                        </div>
                    </div>
                    <div class="mb-3">
                        <label>內容</label>
                        <div id="content_input"></div>
                    </div>
                    <div class="mb-3">
                        <div class="mb-3">
                            <label class="form-label">分類</label>
                            <select class=" mb-3" id="layer1-input" name="layer1" data-choices data-choices-search-false data-choices-sorting-false>
                                <option value="" >未分類</option>
                                @foreach ($layer as $layer1)
                                    <option value="{{$layer1->id}}">{{$layer1->name}}</option>
                                @endforeach
                            </select>                        
                        </div>
                    </div>
                </div>
            </div>
            <!-- end card -->
          

        </div>
        <div class="text-end mb-3">
            <a href="{{locale_asset('console/faq_list')}}">
                <button type="button" id="cancel-button" class="btn btn-light w-sm">取消</button>
            </a>
            <button type="submit" id="save-button" class="btn btn-primary w-sm">儲存</button>
        </div>
        <!-- end row -->

@endsection
@section('script')
    <script type="module" src="{{ asset('assets/libs/@ckeditor/creative8_ckeditor5.js') }}"></script>
    <script src="{{ asset('assets/js/app.min.js') }}"></script>
    <script>


    const title = document.querySelector('#title_input').value;

    let create_data = {}; 

    window.onload = function() {

        ClassicEditor.create(document.querySelector('#content_input'), editorConfig)
            .then(function (editor) {

                var content = document.querySelector('#content_input').innerText;
                editor.setData(content);
                editor.ui.view.editable.element.style.height = '200px';
                window.contentEditor = editor;
            })["catch"](function (error) {
                console.error(error);
        });

        var save_btn = document.querySelector('#save-button');
        save_btn.onclick = function(){
             save()
        };

        
    }


    function save(){

        var title = document.querySelector('#title_input').value;
        var content = window.contentEditor.getData();

        create_data.title = title;
        create_data.content = content;
        create_data.layer1 = document.querySelector('#layer1-input').value;
        
        var xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            var response = JSON.parse(this.responseText);
            if (this.readyState == 4 && this.status == 200) {
                if (response.success) {             
                    successSwal(response.message, function(){
                    window.location = "{{locale_asset('console/faq_list')}}"
                });                        
                }else{
                    errorSwal(response.message);        
                }
            }else{
                errorSwal(response.message);        
                location.reload();
            }
        }
        xhttp.open("POST", '{{locale_api("faq_create")}}', true);
        xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
        xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');
        xhttp.send(JSON.stringify(create_data)); 
    }

    </script>
@endsection