@extends('admin.layouts.app')
@section('title', 'Edit Faqs')
@section('page_css')
    <!-- Datatables -->
    <link href="{{ asset('admin/datatables/datatables.net-bs/css/dataTables.bootstrap.min.css') }}" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <style>
        .addBtn {
            float: right;
            /*margin-top: 10px;*/
        }

        td {
            text-align: center;
        }
    </style>

@endsection
@section('section')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Edit Faqs</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">FAQ's</a></li>
                            <li class="breadcrumb-item active">Faqs</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content-header -->

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-12">
                        <form class="category-form" method="post" action="{{route('update.faqs',$faqs->id)}}"
                              enctype="multipart/form-data">
                            @csrf
                            <div class="card card-primary">
                                <div class="card-body">
                                    <div class="tab-content ">

                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="text" name="question" placeholder="Your Question"
                                                       class="form-control"
                                                value="{{$faqs->question ?? ''}}"
                                                >
                                            </div>
                                        </div>
                                        <br>
                                        <label>Answer</label>
                                        <div class="col">
    <textarea name="answer" placeholder="Answer" rows="4"
              class="form-control" id="textarea1"
              onkeyup="countCharSectionOne(this)">{{$faqs->answer ?? ''}}</textarea>
                                        </div>
                                        <br>
                                    </div>
                                </div>
                                    </div>

                                <div class="card-footer text-right">
                                    <input type="submit" value="Submit" id="submit_btn" class="btn btn-primary">
                                </div>
                            </div>
                        </form>
                        <!-- /.card -->
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@section('script')
    <script src="{{ asset('admin/ckeditor/ckeditor.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function (e) {
            //IMAGE CHNAGE
            $('#image1').change(function () {
                let reader = new FileReader();
                reader.onload = (e) => {
                    $('#preview-image-before-upload1').attr('src', e.target.result);
                    $('#preview-image-before-upload1').css({"width": "65%", "height": "200px"});
                }
                reader.readAsDataURL(this.files[0]);
            });
            // TEXTAREA ONE COUNT ON PAGE LOAD
            let length1 = $("#textarea1").val().length;
            $("#lengthCountSect1").text(500 - length1);

        });
        // TEXTAREA ONE COUNT FUNCTION
        function countCharSectionOne(val) {
            var len = val.value.length;
            if (len >= 500) {
                val.value = val.value.substring(0, 500);
                $('#lengthCountSect1').text(0);
            } else {
                $('#lengthCountSect1').text(500 - len);
            }
        };
        CKEDITOR.replace('textarea1');
    </script>
@endsection