@extends('admin.layouts.main')

@section('content')
<div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor font-bold">{{ @$data ? 'Edit' : 'Add' }} Faq</h4>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('/manager/dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active">
                            <a href="{{ url('/manager/faqs') }}" class="text-danger">Faq</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>

        @include('admin.includes.alert')
        <div class="card">
            <div class="card-body">

                <form action="{{ @$data ? url('/manager/faqs/' . $data['id']  ) : url('/manager/faqs') }}" method="post" enctype="multipart/form-data" data-parsley-validate>
                    @csrf

                    @if( @$data )
                    @method('PATCH')
                    @endif

                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="control-label">Question<span class="text-danger">*</span> </label>
                            <input type="text" data-parsley-required-message="The question field is required" name="question" value="{{ old('question', @$data->question) }}" class="form-control {{ $errors->has('question') ? 'is-invalid' : '' }}" autocomplete="off" placeholder="Enter question" required>
                            @if ($errors->has('question'))
                            <span class="text-danger">{{ $errors->first('question') }}</span>
                            @endif
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="control-label">Answer<span class="text-danger">*</span></label>
                            <textarea class="form-control" id="ckeditor" name="answer" rows="6" data-parsley-required-message="The answer field is required" placeholder="Enter answer" required>{!! old('answer', @$data['answer']) !!}</textarea>
                            @if ($errors->has('answer'))
                            <span class="text-danger">{{ $errors->first('answer') }}</span>
                            @endif
                        </div>

                    </div>

                    <button class="btn btn-primary" type="submit">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script>
    $(document).ready(function() {
        CKEDITOR.replace('ckeditor');
        CKEDITOR.config = {
            autoUpdateElement: true,
        }

        CKEDITOR.on('instanceReady', function() {
            $('#ckeditor').attr('required', '');
            $.each(CKEDITOR.instances, function(instance) {
                CKEDITOR.instances[instance].on("change", function(e) {
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                        $('form').parsley().validate();
                    }
                });
            });
        });
    });
</script>
@endpush