@extends('admin.layouts.container')

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

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

        @foreach($languages as $language)
        <div class="form-group col-lg-4">
            <label>{{ meta('mission_title', $language->local) ?? __('drives.mission_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
            <input type="text" class="form-control" name="mission_title_{{ $language->local }}" placeholder="{{ meta('mission_title', $language->local) ?? __('drives.mission_title') }}" value='{{ $drive[$language->local]->mission_title ?? "" }}'/>
        </div>
        <div class="form-group col-lg-4">
            <label>{{ meta('vision_title', $language->local) ?? __('drives.vision_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
            <input type="text" class="form-control" name="vision_title_{{ $language->local }}" placeholder="{{ meta('vision_title', $language->local) ?? __('drives.vision_title') }}" value='{{ $drive[$language->local]->vision_title ?? "" }}'/>
        </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('values_title', $language->local) ?? __('drives.values_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="values_title_{{ $language->local }}" placeholder="{{ meta('values_title', $language->local) ?? __('drives.values_title') }}" value='{{ $drive[$language->local]->values_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('people_title', $language->local) ?? __('drives.people_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="people_title_{{ $language->local }}" placeholder="{{ meta('people_title', $language->local) ?? __('drives.people_title') }}" value='{{ $drive[$language->local]->people_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('safety_title', $language->local) ?? __('drives.safety_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="safety_title_{{ $language->local }}" placeholder="{{ meta('safety_title', $language->local) ?? __('drives.safety_title') }}" value='{{ $drive[$language->local]->safety_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('quality_first_title', $language->local) ?? __('drives.quality_first_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="quality_first_title_{{ $language->local }}" placeholder="{{ meta('quality_first_title', $language->local) ?? __('drives.quality_first_title') }}" value='{{ $drive[$language->local]->quality_first_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('quality_second_title', $language->local) ?? __('drives.quality_second_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="quality_second_title_{{ $language->local }}" placeholder="{{ meta('quality_second_title', $language->local) ?? __('drives.quality_second_title') }}" value='{{ $drive[$language->local]->quality_second_title ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('slug', $language->local) ?? __('drives.slug') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="slug_{{ $language->local }}" placeholder="{{ meta('slug', $language->local) ?? __('drives.slug') }}" value='{{ $drive[$language->local]->slug ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('keywords', $language->local) ?? __('drives.keywords') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="keywords_{{ $language->local }}" placeholder="{{ meta('keywords', $language->local) ?? __('drives.keywords') }}" value='{{ $drive[$language->local]->keywords ?? "" }}'/>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('meta_description', $language->local) ?? __('drives.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) ?? __('drives.meta_description') }}" value='{{ $drive[$language->local]->meta_description ?? "" }}'/>
                </div>

                <div class="form-group col-lg-12">
                    <label>{{ meta('mission_description', $language->local) ?? __('drives.mission_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="mission_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('mission_description', $language->local) ?? __('drives.mission_description') }}">{{ $drive[$language->local]->mission_description ?? "" }}</textarea>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('vision_description', $language->local) ?? __('drives.vision_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="vision_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('vision_description', $language->local) ?? __('drives.vision_description') }}">{{ $drive[$language->local]->vision_description ?? "" }}</textarea>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('people_description', $language->local) ?? __('drives.people_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="people_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('people_description', $language->local) ?? __('drives.people_description') }}">{{ $drive[$language->local]->people_description ?? "" }}</textarea>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('safety_description', $language->local) ?? __('drives.safety_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="safety_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('safety_description', $language->local) ?? __('drives.safety_description') }}">{{ $drive[$language->local]->safety_description ?? "" }}</textarea>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('quality_description', $language->local) ?? __('drives.quality_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="quality_description_{{ $language->local }}" class="form-control" placeholder="{{ meta('quality_description', $language->local) ?? __('drives.quality_description') }}">{{ $drive[$language->local]->quality_description ?? "" }}</textarea>
                </div>


        @endforeach


            <div class="col-12 row">
                <div class="card mb-5 col-md-12">
                    <div class="card-header mb-5"><h4>{{ __('drives.value_lists') }}</h4></div>
                    @if(count($valueListTitles))
                        @for($i = 0; $i < count($valueListTitles[$local]); $i++)
                            <div class="row deleted_row">
                                @foreach($languages as $language)
                                    <div class="form-group col-md-5">
                                        <label>{{ __('drives.values_list_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                        <input type="text" class="form-control" name="values_list_title_{{ $language->local }}[]" placeholder="{{ __('drives.values_list_title') . " ({$language->name})" }}" value="{{$valueListTitles[$language->local][$i]}}"/>
                                    </div>
                                    <div class="form-group col-md-5">
                                        <label>{{ __('drives.values_list_description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                        <input type="text" class="form-control" name="values_list_description_{{ $language->local }}[]" placeholder="{{ __('drives.values_list_description') . " ({$language->name})" }}" value="{{$valueListDescriptions[$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>

            <div class="col-12 row">
                <div class="card mb-5 col-md-12">
                    <div class="card-header mb-5"><h4>{{ __('drives.quality_lists') }}</h4></div>
                    @if(count($qualityLists))
                        @for($i = 0; $i < count($qualityLists[$local]); $i++)
                            <div class="row deleted_row">
                                @foreach($languages as $language)
                                    <div class="form-group col-md-5">
                                        <label>{{ __('drives.quality_lists') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                        <input type="text" class="form-control" name="quality_list_{{ $language->local }}[]" placeholder="{{ __('drives.quality_lists') . " ({$language->name})" }}" value="{{$qualityLists[$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= ".quality_list_scope" type="button"><span class="fa fa-plus"></span></button>
                    </div>
                </div>
            </div>


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

                <div class="photos mission_image_main_photo {{ old('mission_image', $drive->mission_image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".mission_image_thumbnail" data-preview=".mission_image_holder" class="lfm" data-hide=".mission_image_pick_button">
                                    <img src="{{asset(old('mission_image', $drive->mission_image ?? ''))}} "  id="mission_image_holder" class="mission_image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".mission_image_thumbnail" data-hide=".mission_image_main_photo" data-show=".mission_image_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn mission_image_pick_button {{ old('mission_image', $drive->mission_image ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".mission_image_thumbnail" data-preview=".mission_image_holder" data-show=".mission_image_main_photo" data-hide=".mission_image_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End mission_image container--}}

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

                <div class="photos vision_image_main_photo {{ old('vision_image', $drive->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', $drive->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', $drive->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 values_image container--}}
            <div class="form-group col-lg-3">
                <label>{{ meta('values_image', getCurrentLocale()) ?? __('drives.values_image') }} </label>
                <input id="values_image_thumbnail" class="values_image_thumbnail" type="hidden" name="values_image" value="{{old("values_image", $drive->values_image ?? "")}}"/>

                <div class="photos values_image_main_photo {{ old('values_image', $drive->values_image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".values_image_thumbnail" data-preview=".values_image_holder" class="lfm" data-hide=".values_image_pick_button">
                                    <img src="{{asset(old('values_image', $drive->values_image ?? ''))}} "  id="values_image_holder" class="values_image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".values_image_thumbnail" data-hide=".values_image_main_photo" data-show=".values_image_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn values_image_pick_button {{ old('values_image', $drive->values_image ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".values_image_thumbnail" data-preview=".values_image_holder" data-show=".values_image_main_photo" data-hide=".values_image_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End values_image container--}}

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

                <div class="photos people_image_main_photo {{ old('people_image', $drive->people_image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".people_image_thumbnail" data-preview=".people_image_holder" class="lfm" data-hide=".people_image_pick_button">
                                    <img src="{{asset(old('people_image', $drive->people_image ?? ''))}} "  id="people_image_holder" class="people_image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".people_image_thumbnail" data-hide=".people_image_main_photo" data-show=".people_image_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn people_image_pick_button {{ old('people_image', $drive->people_image ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".people_image_thumbnail" data-preview=".people_image_holder" data-show=".people_image_main_photo" data-hide=".people_image_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End people_image container--}}

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

                <div class="photos safety_image_main_photo {{ old('safety_image', $drive->safety_image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".safety_image_thumbnail" data-preview=".safety_image_holder" class="lfm" data-hide=".safety_image_pick_button">
                                    <img src="{{asset(old('safety_image', $drive->safety_image ?? ''))}} "  id="safety_image_holder" class="safety_image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".safety_image_thumbnail" data-hide=".safety_image_main_photo" data-show=".safety_image_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn safety_image_pick_button {{ old('safety_image', $drive->safety_image ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".safety_image_thumbnail" data-preview=".safety_image_holder" data-show=".safety_image_main_photo" data-hide=".safety_image_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End safety_image container--}}

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

                <div class="photos quality_image_main_photo {{ old('quality_image', $drive->quality_image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-12">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".quality_image_thumbnail" data-preview=".quality_image_holder" class="lfm" data-hide=".quality_image_pick_button">
                                    <img src="{{asset(old('quality_image', $drive->quality_image ?? ''))}} "  id="quality_image_holder" class="quality_image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".quality_image_thumbnail" data-hide=".quality_image_main_photo" data-show=".quality_image_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn quality_image_pick_button {{ old('quality_image', $drive->quality_image ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".quality_image_thumbnail" data-preview=".quality_image_holder" data-show=".quality_image_main_photo" data-hide=".quality_image_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End quality_image container--}}

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

    @include('admin.drives.value_list_scope')
    @include('admin.drives.quality_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_drive_button').click(async function (e) {
            e.preventDefault();

            let form = $('.add_drive_form');

            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