@extends('Admin.components.layout')
@section('title')
    Education Future
@endsection
@section('subtitle')
    @if (isset($data))
        Edit Education Future
    @else
        Add Education Future
    @endif
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row mt-2">
            <div class="col-12">
                <div class="card  p-3">
                    <div class="card-body ">
                        @if ($message = Session::get('success'))
                            <div class="alert alert-success alert-block">
                                <strong>{{ $message }}</strong>
                            </div>
                        @endif
                        @if ($errors->any())
                            <div class="row">
                                <div class="col-sm-6 col-sm-offset-3">
                                    {!! implode('', $errors->all('<div class="alert alert-danger">:message</div>')) !!}
                                </div>
                            </div>
                        @endif
                        <form action="{{ route('admin.feature.store') }}" method="POST" name="featform" id="featform"
                            enctype="multipart/form-data">
                            {{ csrf_field() }}
                            @if (isset($data))
                                <input type="hidden" name='id' id='id'
                                    value="{{ !empty($data) ? $data->id : ' ' }}">
                            @endif


                            <div class="mb-4">
                                <label for="website">Name In English: </label>
                                <input type="text" name="content_name" id="future_name" class="form-control"
                                    value="{{ !empty($data) ? $data->title : '' }}">
                            </div>
                            <div class="mb-4">
                                <label for="website">Name In Second Language: </label>
                                <input type="text" name="content_name_welsh" id="future_name" class="form-control"
                                    value="{{ !empty($data) ? $data->title_welsh : '' }}">
                            </div>
                            <div class="mb-4">
                                <label for="website">Sub Title In Englsih: </label>
                                <input type="text" name="content_sub_title" id="future_sub_title" class="form-control"
                                    value="{{ !empty($data) ? $data->sub_title : '' }}">
                            </div>
                            <div class="mb-4">
                                <label for="website">Sub Title In Second Language: </label>
                                <input type="text" name="content_sub_title_welsh" id="future_sub_title"
                                    class="form-control" value="{{ !empty($data) ? $data->sub_title_welsh : '' }}">
                            </div>
                            <div class="mb-4">
                                <label for="website">Type: </label>
                                <select name="type" id="type" class="form-control">
                                    <option value="">--Please Select Type--</option>
                                    <option value="content"
                                        {{ !empty($data) && $data->type == 'content' ? 'selected' : '' }}>
                                        content</option>
                                    <option value="video" {{ !empty($data) && $data->type == 'video' ? 'selected' : '' }}>
                                        Video
                                    </option>
                                </select>
                            </div>

                            <div id="content" {{ !empty($data) && $data->type == 'content' ? '' : 'hidden' }}>
                                {{-- <div id="content" hidden> --}}
                                <div class="mb-4">
                                    <label for="website">Content In English:</label>
                                    <textarea name="editor1" id="editor1">{!! !empty($data) && $data->type == 'content' ? $data->content : '' !!}</textarea>
                                </div>
                                <div class="mb-4">
                                    <label for="website">Content In Second Language:</label>
                                    <textarea name="editor2" id="editor2">{!! !empty($data) && $data->type == 'content' ? $data->content_welsh : '' !!}</textarea>
                                </div>
                                <div class="mb-4">
                                    <label>Images</label>
                                    <input type="file" name="txtFile" id="txtFile" class="form-control">
                                </div>
                                <div class="mb-4">
                                    <label>Images Preview</label>
                                    @if (!empty($data) && $data->type == 'content')
                                        <img src="{{ !empty($data) && $data->type == 'content' ? s3Url('uploads') . '/' . $data->image_url : '' }}"
                                            height="120" width="120" />
                                    @else
                                        <div>
                                            <label>Image not Available</label>
                                        </div>
                                    @endif
                                </div>
                                {{-- </div> --}}
                            </div>


                            <div id="video" {{ !empty($data) && $data->type == 'video' ? '' : 'hidden' }}>
                                {{-- <div id="video" hidden> --}}
                                <div class="mb-4">
                                    <label for="website">Video Id Englsih: </label> <label style="color:red">Enter Only Id
                                    </label>
                                    <input class="form-control" type="text" name="video_url_eng" id="video_url_eng"
                                        value="{{ !empty($data) && $data->type == 'video' ? $data->video_ur_eng : '' }}">
                                </div>
                                <div class="mb-4">
                                    <label for="website">Video Id Second Language: </label><label style="color:red">Enter
                                        Only Id
                                    </label>
                                    <input type="text" name="video_url_welsh" id="video_url_welsh" class="form-control"
                                        value="{{ !empty($data) && $data->type == 'video' ? $data->video_ur_welsh : '' }}">
                                </div>
                                <div class="mb-4">
                                    <label for="website">Video Content In English:</label>
                                    <textarea name="v_con_eng" id="v_con_eng">{!! !empty($data) && $data->type == 'video' ? $data->content : '' !!}</textarea>
                                </div>
                                <div class="mb-4">
                                    <label for="website">Video Content In Second Language:</label>
                                    <textarea name="v_con_welsh" id="v_con_welsh">{!! !empty($data) && $data->type == 'video' ? $data->content_welsh : '' !!}</textarea>
                                </div>
                            </div>
                            {{-- </div> --}}

                            <input type="hidden" value="{{ !empty($data) ? $data->id : '' }}" name="txtHidden"
                                id="txtHidden">

                            <div class="mb-4 text-right">
                                <button type="submit" class="btn btn-success"> Add</i></button>
                                <a class="btn btn-danger" href="{{ route('admin.education.list') }}"> Cancel</a>
                            </div>


                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script nonce="{{ $cspNonce }}" type="text/javascript" src="{{ asset(CK) }}/customjs.js"></script>

    <script nonce="{{ $cspNonce }}">
        $(document).ready(function() {
            // //CKEDITOR.replace('editor1');
            // var editor1 = CKEDITOR.replace('editor1', {
            //     extraPlugins: 'font',
            //     height: 200
            // });
            // var editor2 = CKEDITOR.replace('editor2', {
            //     extraPlugins: 'font',
            //     height: 200
            // });

            //ApplyCKEditor('editor1');
            var editor1 = ApplyCKEditor('editor1');
            var editor2 = ApplyCKEditor('editor2');

            // var editor1 = CKEDITOR.replace('v_con_eng', {
            //     extraPlugins: 'font',
            //     height: 200
            // });
            // var editor2 = CKEDITOR.replace('v_con_welsh', {
            //     extraPlugins: 'font',
            //     height: 200
            // });

            var editor1 = ApplyCKEditor('v_con_eng');
            var editor2 = ApplyCKEditor('v_con_welsh');
        });
    </script>
    <script nonce="{{ $cspNonce }}">
        $('#type').on('change', function(e) {
            var valueSelected = this.value;
            console.log(valueSelected);
            if (valueSelected == "content") {
                $("#content").prop('hidden', false);
                $("#video").prop('hidden', true);
            } else if (valueSelected == "video") {
                $("#content").prop('hidden', true);
                $("#video").prop('hidden', false);
            }

        });
    </script>
@endsection