@extends('layouts.panel')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .saber-toasts-container-top-right.saber-toasts-containers {
            z-index: 100000;
        }

        .saber-toast .title,
        .saber-toast .text {
            margin: 0;
        }

        .btn-close {
            background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
        }
    </style>
    <div class="container-fluid">
        <div class="layout-specing">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="m-0">FAQ</h5>
                <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="offcanvas"
                    data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">Tambah <i data-feather="plus"
                        class="fea icon-sm icons"></i></button>
            </div>
            <div class="row mt-3">
                <div class="col-12">
                    <div class="card shadow border-0 rounded">
                        <div class="card-header bg-white p-4">
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-icon position-relative">
                                        <i data-feather="search" class="fea icon-sm icons"></i>
                                        <input type="text" class="form-control ps-5" placeholder="Cari" name="search">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderles">
                                <thead>
                                    <tr>
                                        <th>Pertanyaan</th>
                                        <th>Jawaban</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($faqs as $faq)
                                        <tr>
                                            <td>{{ $faq->question }}</td>
                                            <td>{{ $faq->answer }}</td>
                                            <td class="text-end">
                                                <button type="button" class="btn btn-outline-primary btn-sm btn-view"
                                                    data-id="{{ $faq->id }}"><i class="uil uil-eye"></i></button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop"
        aria-labelledby="staticBackdropLabel">
        <div class="offcanvas-header justify-content-end">
            {{-- <h5 class="offcanvas-title" id="staticBackdropLabel">Tambah</h5> --}}
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <input type="hidden" name="id">
            <div class="form-group">
                <label for="">Pertanyaan</label>
                <textarea name="question" id="" cols="30" rows="3" class="form-control"></textarea>
                <small class="text-danger"></small>
            </div>
            <div class="form-group mt-2">
                <label for="">Jawaban</label>
                <textarea name="answer" id="" cols="30" rows="3" class="form-control"></textarea>
                <small class="text-danger"></small>
            </div>
            <div class="d-grid mt-2">
                <button type="button" class="btn btn-primary" id="save">Simpan</button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    @if (Session::has('faq-toast'))
        <script>
            const toastText = '{{ Session::get('faq-toast') }}';
            saberToast.success({
                title: "Success",
                text: toastText,
                delay: 200,
                duration: 2600,
                rtl: false,
                position: "top-right"
            });
        </script>
    @endif
    <script>
        const closeButton = document.querySelector('.btn-close');
        const bsOffcanvas = new bootstrap.Offcanvas('#staticBackdrop');
        const viewButtons = document.querySelectorAll('.btn-view');
        viewButtons.forEach((el) => {
            el.addEventListener('click', () => {
                question.value = el.parentElement.previousElementSibling.previousElementSibling.textContent;
                answer.value = el.parentElement.previousElementSibling.textContent;
                id.value = el.getAttribute('data-id');
                closeButton.insertAdjacentHTML('beforebegin', `
                    <form action="${window.location.origin}/panel/faq/${id.value}" method="post" class="d-inline-block">
                        <input type="hidden" name="_method" value="DELETE">
                        <input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute('content')}">
                        <button type="submit" class="btn text-danger p-0 border-0"
                            onclick="return confirm('Yakin ingin menghapus FAQ ?')"><i class="uil uil-trash"></i></button>
                    </form>
                `);
                closeButton.parentElement.classList.remove('justify-content-end');
                closeButton.parentElement.classList.add('justify-content-between');
                bsOffcanvas.show();
            });
        });
        const id = document.querySelector('input[name="id"]');
        const question = document.querySelector('textarea[name="question"]');
        const answer = document.querySelector('textarea[name="answer"]');
        const saveButton = document.getElementById('save');

        closeButton.addEventListener('click', () => {
            if (closeButton.previousElementSibling !== null) {
                closeButton.previousElementSibling.remove();
            }
            closeButton.parentElement.classList.remove('justify-content-between');
            closeButton.parentElement.classList.add('justify-content-end');
            id.value = '';
            question.value = '';
            answer.value = '';
        });

        saveButton.addEventListener('click', async () => {
            clearErrors();
            disabledElement();

            const payload = {
                question: question.value,
                answer: answer.value,
            };
            const response = id.value.length > 0 ? await update(payload) : await save(payload);

            if (response.status === 'success') {
                return location.reload();
            }

            showErrors(response.errors);
            enabledElement();
        });

        const save = async (payload) => {
            const options = {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(payload),
            };
            const response = await fetch(`${window.location.origin}/panel/faq`, options);
            const result = await response.json();
            return result;
        }


        const update = async (payload) => {
            const options = {
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(payload),
            };
            const response = await fetch(`${window.location.origin}/panel/faq/${id.value}`, options);
            const result = await response.json();
            return result;
        }

        const disabledElement = () => {
            question.setAttribute('disabled', '');
            answer.setAttribute('disabled', '');
            saveButton.setAttribute('disabled', '');
            saveButton.innerHTML =
                'Loading <div class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>';
        }

        const enabledElement = () => {
            question.removeAttribute('disabled');
            answer.removeAttribute('disabled');
            saveButton.removeAttribute('disabled');
            saveButton.innerHTML = 'Simpan';
        }

        const showErrors = (errors) => {
            if (errors.question) {
                question.nextElementSibling.textContent = errors.question;
            }
            if (errors.answer) {
                answer.nextElementSibling.textContent = errors.answer;
            }
        }

        const clearErrors = () => {
            question.nextElementSibling.textContent = '';
            answer.nextElementSibling.textContent = '';
        }
    </script>
@endpush