@extends('admin.layouts.container')

@section('content')
<div class="side-title">
    <h3>{{$head ?? '' }}</h3>
</div>

<div class="border-item">
    <form class="form-row add_impact_from" method="post" action="{{ $action }}" enctype="multipart/form-data">
        @if($impact ?? ''  && $impact->id)
            @method('PUT')
        @endif
        @csrf

        @foreach($languages as $language)
        <div class="form-group col-lg-4">
            <label>{{ meta('sustainability_home_title', $language->local) ?? __('impacts.sustainability_home_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
            <input type="text" class="form-control" name="sustainability_home_title_{{ $language->local }}" placeholder="{{ meta('sustainability_home_title', $language->local) ?? __('impacts.sustainability_home_title') }}" value='{{ $impact[$language->local]->sustainability_home_title ?? "" }}'/>
        </div>
        <div class="form-group col-lg-4">
            <label>{{ meta('vision_home_title', $language->local) ?? __('impacts.vision_home_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
            <input type="text" class="form-control" name="vision_home_title_{{ $language->local }}" placeholder="{{ meta('vision_home_title', $language->local) ?? __('impacts.vision_home_title') }}" value='{{ $impact[$language->local]->vision_home_title ?? "" }}'/>
        </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('news_home_title', $language->local) ?? __('impacts.news_home_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="news_home_title_{{ $language->local }}" placeholder="{{ meta('news_home_title', $language->local) ?? __('impacts.news_home_title') }}" value='{{ $impact[$language->local]->news_home_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('sustainability_first_title', $language->local) ?? __('impacts.sustainability_first_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="sustainability_first_title_{{ $language->local }}" placeholder="{{ meta('sustainability_first_title', $language->local) ?? __('impacts.sustainability_first_title') }}" value='{{ $impact[$language->local]->sustainability_first_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('sustainability_second_title', $language->local) ?? __('impacts.sustainability_second_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="sustainability_second_title_{{ $language->local }}" placeholder="{{ meta('sustainability_second_title', $language->local) ?? __('impacts.sustainability_second_title') }}" value='{{ $impact[$language->local]->sustainability_second_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('vision_first_title', $language->local) ?? __('impacts.vision_first_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="vision_first_title_{{ $language->local }}" placeholder="{{ meta('vision_first_title', $language->local) ?? __('impacts.vision_first_title') }}" value='{{ $impact[$language->local]->vision_first_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('vision_second_title', $language->local) ?? __('impacts.vision_second_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="vision_second_title_{{ $language->local }}" placeholder="{{ meta('vision_second_title', $language->local) ?? __('impacts.vision_second_title') }}" value='{{ $impact[$language->local]->vision_second_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('slug', $language->local) ?? __('impacts.slug') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="slug_{{ $language->local }}" placeholder="{{ meta('slug', $language->local) ?? __('impacts.slug') }}" value='{{ $impact[$language->local]->slug ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('keywords', $language->local) ?? __('impacts.keywords') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="keywords_{{ $language->local }}" placeholder="{{ meta('keywords', $language->local) ?? __('impacts.keywords') }}" value='{{ $impact[$language->local]->keywords ?? "" }}'/>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('meta_description', $language->local) ?? __('impacts.meta_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="meta_description_{{ $language->local }}" placeholder="{{ meta('meta_description', $language->local) ?? __('impacts.meta_description') }}" value='{{ $impact[$language->local]->meta_description ?? "" }}'/>
                </div>

                <div class="form-group col-lg-12">
                    <label>{{ meta('vision_description', $language->local) ?? __('impacts.vision_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="vision_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('vision_description', $language->local) ?? __('impacts.vision_description') }}">{{ $impact[$language->local]->vision_description ?? "" }}</textarea>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('news_home_description', $language->local) ?? __('impacts.news_home_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="news_home_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('news_home_description', $language->local) ?? __('impacts.news_home_description') }}">{{ $impact[$language->local]->news_home_description ?? "" }}</textarea>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('sustainability_description', $language->local) ?? __('impacts.sustainability_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="sustainability_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('sustainability_description', $language->local) ?? __('impacts.sustainability_description') }}">{{ $impact[$language->local]->sustainability_description ?? "" }}</textarea>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('sustainability_home_description', $language->local) ?? __('impacts.sustainability_home_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="sustainability_home_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('sustainability_home_description', $language->local) ?? __('impacts.sustainability_home_description') }}">{{ $impact[$language->local]->sustainability_home_description ?? "" }}</textarea>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('vision_home_description', $language->local) ?? __('impacts.vision_home_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="vision_home_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('vision_home_description', $language->local) ?? __('impacts.vision_home_description') }}">{{ $impact[$language->local]->vision_home_description ?? "" }}</textarea>
                </div>


        @endforeach


            <div class="col-12 row">
                <div class="card mb-5 col-md-12">
                    <div class="card-header mb-5"><h4>{{ __('impacts.vision_list_title') }}</h4></div>
                    @if(count($visionListTitles))
                        @for($i = 0; $i < count($visionListTitles[$local]); $i++)
                            <div class="row deleted_row">
                                @foreach($languages as $language)
                                    <div class="form-group col-md-5">
                                        <label>{{ __('impacts.vision_list_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                        <input type="text" class="form-control" name="vision_list_title_{{ $language->local }}[]" placeholder="{{ __('impacts.vision_list_title') . " ({$language->name})" }}" value="{{$visionListTitles[$language->local][$i]}}"/>
                                    </div>
                                    <div class="form-group col-md-5">
                                        <label>{{ __('impacts.vision_list_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                        <input type="text" class="form-control" name="vision_list_description_{{ $language->local }}[]" placeholder="{{ __('impacts.vision_list_description') . " ({$language->name})" }}" value="{{$visionListDescriptions[$language->local][$i]}}"/>
                                    </div>
                                @endforeach
                                <div class="text-left col-2">
                                    <button class="btn btn-danger delete_row" type="button"><span class="fa fa-times"></span></button>
                                </div>
                            </div>
                        @endfor
                    @endif

                    {{-- Here append box node--}}
                    <div class="text-left mb-4 col-12 add_row_parent">
                        <button class="butn add_value_list" data-node= ".value_list_scope" type="button"><span class="fa fa-plus"></span></button>
                    </div>
                </div>
            </div>


            {{--Start sustainability_image container--}}
            <div class="form-group col-lg-3">
                <label>{{ meta('sustainability_image', getCurrentLocale()) ?? __('impacts.sustainability_image') }} </label>
                <input id="sustainability_image_thumbnail" class="sustainability_image_thumbnail" type="hidden" name="sustainability_image" value="{{old("sustainability_image", $impact->sustainability_image ?? "")}}"/>

                <div class="photos sustainability_image_main_photo {{ old('sustainability_image', $impact->sustainability_image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".sustainability_image_thumbnail" data-preview=".sustainability_image_holder" class="lfm" data-hide=".sustainability_image_pick_button">
                                    <img src="{{asset(old('sustainability_image', $impact->sustainability_image ?? ''))}} "  id="sustainability_image_holder" class="sustainability_image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".sustainability_image_thumbnail" data-hide=".sustainability_image_main_photo" data-show=".sustainability_image_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn sustainability_image_pick_button {{ old('sustainability_image', $impact->sustainability_image ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".sustainability_image_thumbnail" data-preview=".sustainability_image_holder" data-show=".sustainability_image_main_photo" data-hide=".sustainability_image_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End sustainability_image container--}}

            {{--Start vision_image container--}}
            <div class="form-group col-lg-3">
                <label>{{ meta('vision_image', getCurrentLocale()) ?? __('impacts.vision_image') }} </label>
                <input id="vision_image_thumbnail" class="vision_image_thumbnail" type="hidden" name="vision_image" value="{{old("vision_image", $impact->vision_image ?? "")}}"/>

                <div class="photos vision_image_main_photo {{ old('vision_image', $impact->vision_image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".vision_image_thumbnail" data-preview=".vision_image_holder" class="lfm" data-hide=".vision_image_pick_button">
                                    <img src="{{asset(old('vision_image', $impact->vision_image ?? ''))}} "  id="vision_image_holder" class="vision_image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".vision_image_thumbnail" data-hide=".vision_image_main_photo" data-show=".vision_image_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn vision_image_pick_button {{ old('vision_image', $impact->vision_image ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".vision_image_thumbnail" data-preview=".vision_image_holder" data-show=".vision_image_main_photo" data-hide=".vision_image_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End vision_image container--}}

            {{--Start sustainability_icon container--}}
            <div class="form-group col-lg-3">
                <label>{{ meta('sustainability_icon', getCurrentLocale()) ?? __('impacts.sustainability_icon') }} </label>
                <input id="sustainability_icon_thumbnail" class="sustainability_icon_thumbnail" type="hidden" name="sustainability_icon" value="{{old("sustainability_icon", $impact->sustainability_icon ?? "")}}"/>

                <div class="photos sustainability_icon_main_photo {{ old('sustainability_icon', $impact->sustainability_icon ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".sustainability_icon_thumbnail" data-preview=".sustainability_icon_holder" class="lfm" data-hide=".sustainability_icon_pick_button">
                                    <img src="{{asset(old('sustainability_icon', $impact->sustainability_icon ?? ''))}} "  id="sustainability_icon_holder" class="sustainability_icon_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".sustainability_icon_thumbnail" data-hide=".sustainability_icon_main_photo" data-show=".sustainability_icon_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn sustainability_icon_pick_button {{ old('sustainability_icon', $impact->sustainability_icon ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".sustainability_icon_thumbnail" data-preview=".sustainability_icon_holder" data-show=".sustainability_icon_main_photo" data-hide=".sustainability_icon_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End sustainability_icon container--}}

            {{--Start vision_icon container--}}
            <div class="form-group col-lg-3">
                <label>{{ meta('vision_icon', getCurrentLocale()) ?? __('impacts.vision_icon') }} </label>
                <input id="vision_icon_thumbnail" class="vision_icon_thumbnail" type="hidden" name="vision_icon" value="{{old("vision_icon", $impact->vision_icon ?? "")}}"/>

                <div class="photos vision_icon_main_photo {{ old('vision_icon', $impact->vision_icon ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".vision_icon_thumbnail" data-preview=".vision_icon_holder" class="lfm" data-hide=".vision_icon_pick_button">
                                    <img src="{{asset(old('vision_icon', $impact->vision_icon ?? ''))}} "  id="vision_icon_holder" class="vision_icon_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".vision_icon_thumbnail" data-hide=".vision_icon_main_photo" data-show=".vision_icon_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn vision_icon_pick_button {{ old('vision_icon', $impact->vision_icon ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".vision_icon_thumbnail" data-preview=".vision_icon_holder" data-show=".vision_icon_main_photo" data-hide=".vision_icon_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End vision_icon container--}}

            {{--Start news_icon container--}}
            <div class="form-group col-lg-3">
                <label>{{ meta('news_icon', getCurrentLocale()) ?? __('impacts.news_icon') }} </label>
                <input id="news_icon_thumbnail" class="news_icon_thumbnail" type="hidden" name="news_icon" value="{{old("news_icon", $impact->news_icon ?? "")}}"/>

                <div class="photos news_icon_main_photo {{ old('news_icon', $impact->news_icon ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".news_icon_thumbnail" data-preview=".news_icon_holder" class="lfm" data-hide=".news_icon_pick_button">
                                    <img src="{{asset(old('news_icon', $impact->news_icon ?? ''))}} "  id="news_icon_holder" class="news_icon_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".news_icon_thumbnail" data-hide=".news_icon_main_photo" data-show=".news_icon_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn news_icon_pick_button {{ old('news_icon', $impact->news_icon ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".news_icon_thumbnail" data-preview=".news_icon_holder" data-show=".news_icon_main_photo" data-hide=".news_icon_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End news_icon container--}}

        <div class="text-center mt-5 col-12">
            <button class="butn add_impact_button"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </form>

    @include('admin.impacts.value_list_scope')
</div>

@endsection

@section('inner_js')
    <!-- Editor JS files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    {{--    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>--}}
    <script>
        var route_prefix = "{{ url(config('lfm.prefix')) }}";
        var url = "{{url('/')}}/",
            currentLanguage = "{{getCurrentLocale()}}",
            inputName = null;
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>


    <script>
        $('.add_impact_button').click(async function (e) {
            e.preventDefault();

            let form = $('.add_impact_from');

            let data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                toasterError(response.errors);
            }
            if (response.url) {
                window.location.href = response.url
            }
        });

        $('.add_value_list').click (function(){
            const node = $(this).data('node');
            let content = $(node).html();
            const rand= Math.round(Math.random()*100).toString();
            const matched= content.match(/RAND/g);
            const res= content.replace(/RAND/g, rand);
            $(this).parents('.add_row_parent').before('<div class="row deleted_row">'+res+'</div>')
        });


        $('body').delegate('.delete_row', 'click' ,function(){
            $(this).closest('.row, .deleted_row').remove();
        });
    </script>

@endsection