@extends('admin.layout.index')
@section('title')
    {{ __('messages.add-faq') }}
@endsection
@section('content')
    <div class="content-header">

    </div>
    <div class="content">
        <div class="col-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h4 class="box-title">{{ __('messages.add-faq') }}</h4>
                </div>
                <form method="post" action="{{ route('faq.add') }}" enctype="multipart/form-data">
                    <!-- /.box-header -->
                    <div class="box-body">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs nav-fill" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link {{ session('back') == null ? 'active' : '' }} {{ session('back') != null && session('back')['open'] == 1 ? 'active' : '' }} "
                                    data-toggle="tab" href="#arabic" role="tab">
                                    <span>
                                        <i class="flag-icon flag-icon-eg mr-1"></i></span>
                                    <span class="hidden-xs-down ml-15">{{ __('messages.lang-ar') }}
                                    </span>
                                    @if (session('back') != null && isset(session('back')['error_ar']))
                                        <span style="color: orangered"><i class="fa fa-times mr-1"></i></span>
                                    @endif

                                </a>
                            </li>
                            <li class="nav-item"><a
                                    class="nav-link {{ session('back') != null && session('back')['open'] == 2 ? 'active' : '' }}"
                                    data-toggle="tab" href="#english" role="tab"><span><i
                                            class="flag-icon flag-icon-gb mr-1"></i></span> <span
                                        class="hidden-xs-down ml-15">{{ __('messages.lang-en') }}</span>
                                    @if (session('back') != null && isset(session('back')['error_en']))
                                        <span style="color: orangered"><i class="fa fa-times mr-1"></i></span>
                                    @endif
                                </a></li>

                        </ul>
                        <!-- Tab panes -->

                        <div class="tab-content tabcontent-border">
                            <div class="tab-pane {{ session('back') == null ? 'active' : '' }} {{ session('back') != null && session('back')['open'] == 1 ? 'active' : '' }} "
                                id="arabic" role="tabpanel">
                                <div class="p-15">
                                    <div class="row">

                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="question_ar"> {{ __('messages.question_ar') }} : <span
                                                        class="danger">*</span> </label>
                                                <textarea id="question_ar" name="question_ar" rows="10" cols="80">
                                                    {!! old('question_ar') !!}
                                                </textarea>
                                                @if ($errors->has('question_ar'))
                                                    <span class="help-block">
                                                        <strong
                                                            class="text-danger">{{ $errors->first('question_ar') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="answer_ar"> {{ __('messages.answer_ar') }} : <span
                                                        class="danger">*</span> </label>
                                                <textarea id="answer_ar" name="answer_ar" rows="10" cols="80">
                                                    {!! old('answer_ar') !!}
                                                </textarea>
                                                @if ($errors->has('answer_ar'))
                                                    <span class="help-block">
                                                        <strong
                                                            class="text-danger">{{ $errors->first('answer_ar') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="wlastName2"> {{ __('messages.status') }} : <span
                                                        class="danger">*</span> </label>
                                                <select name="enable" data-placeholder="Type to search cities"
                                                    class="form-control custom-select required">
                                                    <option value="1" {{ old('enable') == 1 ? 'selected' : '' }}>
                                                        {{ __('messages.isActive') }}</option>
                                                    <option value="0" {{ old('enable') == 0 ? 'selected' : '' }}>
                                                        {{ __('messages.inActive') }}</option>
                                                </select>
                                                @if ($errors->has('enable'))
                                                    <span class="help-block">
                                                        <strong class="text-danger">{{ $errors->first('enable') }}</strong>
                                                    </span>
                                                @endif

                                            </div>

                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="arrangment"> {{ __('messages.arrangment') }} : </label>
                                                <input type="number" class="form-control " name="arrangment"
                                                    value="{{ old('arrangment') != null ? old('arrangment') : 1 }}">
                                                @if ($errors->has('arrangment'))
                                                    <span class="help-block">
                                                        <strong
                                                            class="text-danger">{{ $errors->first('arrangment') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane {{ session('back') != null && session('back')['open'] == 2 ? 'active' : '' }}"
                                id="english" role="tabpanel">
                                <div class="p-15">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="question_en"> {{ __('messages.question_en') }} : <span
                                                        class="danger">*</span> </label>
                                                <textarea id="question_en" name="question_en" rows="10" cols="80">
                                                        {!! old('question_en') !!}
                                                    </textarea>
                                                @if ($errors->has('question_en'))
                                                    <span class="help-block">
                                                        <strong
                                                            class="text-danger">{{ $errors->first('question_en') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="answer_en"> {{ __('messages.answer_en') }} : <span
                                                        class="danger">*</span> </label>
                                                <textarea id="answer_en" name="answer_en" rows="10" cols="80">
                                                    {!! old('answer_en') !!}
                                                </textarea>
                                                @if ($errors->has('answer_en'))
                                                    <span class="help-block">
                                                        <strong
                                                            class="text-danger">{{ $errors->first('answer_en') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <input type="hidden" value="{{ csrf_token() }}" name="_token">
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <button type="submit" class="btn btn-rounded btn-primary btn-outline">
                            <i class="ti-save-alt"></i> Save
                        </button>
                    </div>
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(function() {
            "use strict";

            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
            CKEDITOR.replace('question_ar', {
                removePlugins: 'scayt,wsc',
                disableNativeSpellChecker: true,
                extraPlugins: 'image',
                filebrowserUploadUrl: "{{ route('upload_image') }}?_token={{ csrf_token() }}",
                filebrowserUploadMethod: 'from'
            })
            CKEDITOR.replace('answer_ar', {
                removePlugins: 'scayt,wsc',
                disableNativeSpellChecker: true,
                extraPlugins: 'image',
                filebrowserUploadUrl: "{{ route('upload_image') }}?_token={{ csrf_token() }}",
                filebrowserUploadMethod: 'from'
            })
            CKEDITOR.replace('question_en', {
                removePlugins: 'scayt,wsc',
                disableNativeSpellChecker: true,
                extraPlugins: 'image',
                filebrowserUploadUrl: "{{ route('upload_image') }}?_token={{ csrf_token() }}",
                filebrowserUploadMethod: 'from'
            })
            CKEDITOR.replace('answer_en', {
                removePlugins: 'scayt,wsc',
                disableNativeSpellChecker: true,
                extraPlugins: 'image',
                filebrowserUploadUrl: "{{ route('upload_image') }}?_token={{ csrf_token() }}",
                filebrowserUploadMethod: 'from'
            })
            CKEDITOR.replace('question_fr', {
                removePlugins: 'scayt,wsc',
                disableNativeSpellChecker: true,
                extraPlugins: 'image',
                filebrowserUploadUrl: "{{ route('upload_image') }}?_token={{ csrf_token() }}",
                filebrowserUploadMethod: 'from'
            })
            CKEDITOR.replace('answer_fr', {
                removePlugins: 'scayt,wsc',
                disableNativeSpellChecker: true,
                extraPlugins: 'image',
                filebrowserUploadUrl: "{{ route('upload_image') }}?_token={{ csrf_token() }}",
                filebrowserUploadMethod: 'from'
            })

            //bootstrap WYSIHTML5 - text editor
            $('.textarea').wysihtml5();

        });

        function showPreview(event) {
            //alert('showPreview');
            if (event.target.files.length > 0) {

                let file = event.target.files[0];
                let img = new Image();
                let src = URL.createObjectURL(file);
                img.onload = function() {
                    console.log(img.height, img.width);
                    if (img.width > 200 && img.height > 200) {
                        let preview = document.getElementById("file-ip-1-preview");
                        preview.src = src;
                        preview.style.display = "block";
                    } else {
                        swal.fire({
                            title: "{{ __('The image width or height is less than 200px') }}",
                            type: "info",
                            confirmButtonColor: "#009EDB",
                            closeOnConfirm: false
                        })
                        event.target.value = "";
                        document.getElementById("file-ip-1-preview").style.display = "none";
                    }
                };

                img.src = src;
            }
        }
    </script>
@endsection