@extends('admin.layouts.app')



<!-- Parsley CSS -->
@push('style')
<link rel="stylesheet" href="{{asset('admin/assets/css/main.css')}}">
<link rel="stylesheet" href="{{asset('admin/assets/css/color_skins.css')}}">

@endpush


@section('content')
<section class="content home">
    <div class="block-header">
        <!-- Start Content-->
        <div class="container-fluid">
            <div class="body">

                <div class="row">
                    <div class="col-lg-12 mt-3 mb-3">
                        <h2 class="text-center">{{!empty($faqContent) ? 'EDIT' : 'ADD'}} FAQ</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">

                                @if(empty($faqContent))
                                <form class="form" name="createfaq" id="createfaq" method="post" action="{{route('admin-store_faq')}}" enctype="multipart/form-data">
                                    @else
                                    <form class="form" name="updatefaq" id="updatefaq" method="post" action="{{ route('admin-update_faq', $faqContent->id) }}" enctype="multipart/form-data">
                                        @method('PUT')
                                        @endif

                                        @csrf

                                        <input type="hidden" name="about_us_id" id="about_us_id" value="{{ $faqContent->id ?? ''}}">

                                        <!-- <h3 class="mb-4">Category Details</h3> -->
                                        <!-- <div class="mb-3">
                                            <label for="name" class="form-label">Name * :</label>
                                            <input type="text" class="form-control" name="name" id="name" value="{{ $categories->category_name ?? '' }}">
                                        </div> -->

                                        <div class="form-group form-float">
                                            <div class="form-line">
                                                <textarea id="question" name="question" class="form-control">{{ $faqContent->question ?? '' }}</textarea>
                                                <label class="form-label">Question</label>
                                            </div>
                                        </div>
                                        <div class="form-group form-float">
                                            <div class="form-line">
                                                <textarea id="answer" name="answer" class="form-control">{{ $faqContent->answer ?? '' }}</textarea>
                                                <label class="form-label">Answer</label>
                                            </div>
                                        </div>



                                        <div>
                                            @if(empty($faqContent))
                                            <input type="submit" class="btn btn-success" class="add_aboutUs_content" value="Add">
                                            @else
                                            <input type="submit" class="btn btn-success" class="update_aboutUs_content" value="Update">
                                            @endif
                                        </div>
                                    </form>
                                </form>

                            </div>
                        </div> <!-- end card-->
                    </div> <!-- end col-->
                </div>

            </div>
        </div>
    </div>
</section>

@endsection

@push('script')
<script src="{{asset('admin/assets/bundles/libscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('admin/assets/bundles/vendorscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->

<script src="{{asset('admin/assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('admin/assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->

<script src="{{asset('admin/assets/bundles/mainscripts.bundle.js')}}"></script><!-- Custom Js -->
<script src="{{asset('admin/assets/js/pages/forms/form-validation.js')}}"></script>

<script>
    //JQUERY FORM VALIDATION FOR ADD AND EDIT  

    $('#createfaq,#updatefaq').validate({
        rules: {
            'question': {
                'required': true
            },
            'answer': {
                'required': true
            },
        },
        messages: {
            'question': {
                'required': 'Please enter your question.'
            },
            'answer': {
                'required': 'Please enter your answer.'
            },
        },

        highlight: function(input) {
            $(input).parents('.form-line').addClass('error');
        },
        unhighlight: function(input) {
            $(input).parents('.form-line').removeClass('error');
        },
        errorPlacement: function(error, element) {
            $(element).parents('.form-group').append(error);
        }
    });
</script>
<script>
    //WHEN EDIT FORM WILL OPEN

    document.addEventListener('DOMContentLoaded', function() {
        // Get all the form inputs
        const formInputs = document.querySelectorAll('.form-control');

        // Iterate over each input
        formInputs.forEach(function(input) {
            // Check if the input has a predefined value
            if (input.value !== '') {
                // Add a class to the parent form-group to show the label
                input.parentElement.classList.add('focused');
            }

            // Add event listener for input focus
            input.addEventListener('focus', function() {
                // Add a class to the parent form-group to show the label
                this.parentElement.classList.add('focused');
            });

            // Add event listener for input blur
            input.addEventListener('blur', function() {
                // Check if the input value is empty
                if (this.value === '') {
                    // Remove the class from the parent form-group to hide the label
                    this.parentElement.classList.remove('focused');
                }
            });
        });
    });
</script>

@endpush