@extends('layout.layout1')

@php
    $headTitle = 'Help & FAQ';
    $header = 'header';
@endphp

@section('content')
    <!-- Main content -->
    <div class="rbt-main-content mb--0 mr--0">
        <div class="rbt-daynamic-page-content center-width">

            <!-- Dashboard Center Content -->
            <div class="rbt-dashboard-content">
                <div class="banner-area">
                    <!-- ChatenAI small Slider -->
                    <div class="settings-area">
                        <h3 class="title">Help & FAQ</h3>
                    </div>
                </div>
                <div class="content-page pb--50">
                    <div class="chat-box-list">
                        <div class="content">
                            <!-- Start FAQ Section  -->
                            <div class="rainbow-accordion-style accordion rainbow-section-gapBottom">
                                <div class="accordion" id="accordionExamplea">
                                    <div class="accordion-item card bg-flashlight">
                                        <h2 class="accordion-header card-header" id="headingOne">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapseOne" aria-expanded="true"
                                                aria-controls="collapseOne">
                                                Siapa ni Cik Bayu?
                                            </button>
                                        </h2>
                                        <div id="collapseOne" class="accordion-collapse collapse show"
                                            aria-labelledby="headingOne" data-bs-parent="#accordionExamplea">
                                            <div class="accordion-body card-body">
                                                Cik Bayu ini adalah model kecerdasan buatan (AI) yang dari teknologi ChatGPT
                                                yang diolah mengunakan set-set data kawasan DUN sabah bersama maklumat Sabah
                                                dengan menggunakan bahasa tempatan Sabah.
                                            </div>
                                        </div>
                                    </div>

                                    <div class="accordion-item card bg-flashlight">
                                        <h2 class="accordion-header card-header" id="headingTwo">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                                                aria-expanded="false" aria-controls="collapseTwo">
                                                Mengapa saya perlu mendaftar?
                                            </button>
                                        </h2>
                                        <div id="collapseTwo" class="accordion-collapse collapse"
                                            aria-labelledby="headingTwo" data-bs-parent="#accordionExamplea">
                                            <div class="accordion-body card-body">
                                                Semua sesi perbualan dengan Cik Bayu ini dipersonalisasi untuk setiap
                                                pengguna dan juga menjadi dataset baru untuk menjadi item pembelajaran Cik
                                                Bayu.
                                            </div>
                                        </div>
                                    </div>

                                    <div class="accordion-item card bg-flashlight">
                                        <h2 class="accordion-header card-header" id="headingThree">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapseThree"
                                                aria-expanded="false" aria-controls="collapseThree">
                                                Bolehkah cik bayu memaparkan gambar dan video?
                                            </button>
                                        </h2>
                                        <div id="collapseThree" class="accordion-collapse collapse"
                                            aria-labelledby="headingThree" data-bs-parent="#accordionExamplea">
                                            <div class="accordion-body card-body">
                                                Buat masa sekarang, Cik Bayu hanya boleh menjawab pertanyaan anda
                                                menggunakan text.
                                            </div>
                                        </div>
                                    </div>

                                    <div class="accordion-item card bg-flashlight">
                                        <h2 class="accordion-header card-header" id="headingFour">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapseFour"
                                                aria-expanded="false" aria-controls="collapseFour">
                                                Bolehkah Cik Bayu menggunakan bahasa daerah saya?
                                            </button>
                                        </h2>
                                        <div id="collapseFour" class="accordion-collapse collapse"
                                            aria-labelledby="headingFour" data-bs-parent="#accordionExamplea">
                                            <div class="accordion-body card-body">
                                                Bahasa etnik suku kaum Sabah ditambahkan dari masa ke semasa.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item card bg-flashlight">
                                        <h2 class="accordion-header card-header" id="headingFive">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapseFive"
                                                aria-expanded="false" aria-controls="collapseFive">
                                                Bagaimana saya ingin membantu memperbaiki Cik Bayu?
                                            </button>
                                        </h2>
                                        <div id="collapseFive" class="accordion-collapse collapse"
                                            aria-labelledby="headingFive" data-bs-parent="#accordionExamplea">
                                            <div class="accordion-body card-body">
                                                Boleh mengisi borang maklum balas di laman ini.
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="accordion-item card bg-flashlight">
                                    <h2 class="accordion-header card-header" id="headingSix">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                            Is ChatenAI available in multiple languages?
                                        </button>
                                    </h2>
                                    <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExamplea">
                                        <div class="accordion-body card-body">
                                            Yes, ChatenAI is designed to support multiple languages, offering a versatile and inclusive communication experience for users worldwide.
                                        </div>
                                    </div>
                                </div> --}}

                                </div>
                            </div>

                            <div class="single-settings-box contact-box top-flashlight light-xl leftside overflow-hidden">
                                <h4 class="title mb--30">Contact Us</h4>

                                <!-- Start Contact Row  -->
                                <form action="#" class="rbt-profile-row rbt-default-form row row--15">
                                    @csrf
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="firstname">Name</label>
                                            <input id="firstname" type="text" placeholder="Trent"
                                                value="{{ $user->name }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="lastname">Email</label>
                                            <input id="lastname" type="email" placeholder="example.adam@gmail.com"
                                                value="{{ $user->email }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="subject">Subject</label>
                                            <input id="subject" type="text" name="subject" placeholder="Subject" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="phonenumber">Phone Number</label>
                                            <input id="phonenumber" type="number" placeholder=""
                                                value="{{ $user->phone_number }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="message">Your message</label>
                                            <textarea id="message" name="message" cols="20" rows="5" placeholder="Your message"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-12 mt--20">
                                        <div class="form-group mb--0">
                                            <button type="submit" class="btn-default">Send message</button>
                                        </div>
                                    </div>
                                </form>
                                <!-- End Contact Row  -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        $(document).ready(function() {

            $('.rbt-default-form').submit(function(e) {
                e.preventDefault();

                var token = $('input[name=_token]');
                var form = $(this);
                
                hitApi(
                    '/user-reports/store',
                    'post', {
                        _token: token.val(),
                        subject: form.find('input[name=subject]').val(),
                        message: form.find('textarea[name=message]').val(),
                    },
                    function(response) {
                        token.val(response.newToken);
                        if (response.isSuccess) {
                            form.find('input[name=subject]').val('');
                            form.find('textarea[name=message]').val('');
                            Swal.fire({
                                title: 'Success!',
                                text: response.message,
                                icon: 'success'
                            });
                        } else {
                            Swal.fire({
                                title: 'Warning!',
                                text: response.message,
                                icon: 'warning'
                            });
                        }
                    }
                );
                
            });

        });
    </script>

@endsection