@extends('admin.layouts.container')

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

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

        <div class="form-group col-lg-12">
            <label>{{ meta('cat_option_id', $lang) ?? __('options.cat_option_id') }}</label>
            <select name="cat_option_id" class="form-control {{ $errors->has('cat_option_id') ? 'is-invalid' : '' }}">
                {{-- <option value="">{{__('options.cat_option_id')}}</option> --}}
                @foreach($categories as $category)
                    <option {{old('cat_option_id', $option->cat_option_id ?? null) == $category->id ? 'selected' : '' }}
                            value="{{ $category->id }}"
                            data-meta="{{ json_encode($category->meta) }}">
                        {{ $category->currentDescription->title ?? "" }}
                    </option>
                @endforeach
            </select>
        </div> <!-- end of form-group -->

        <div class="row w-100 m-auto">
            @foreach($languages as $language)
                <div class="form-group col-lg-6">
                    <label>{{ meta('title', $language->local) ?? __("options.title") }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control {{ $errors->has('title_'.$language->local) ? 'is-invalid' : '' }}" name="title_{{ $language->local }}" placeholder="{{ meta('title', $language->local) ?? __("options.title") }}" value='{{ old("title_{$language->local}", $option[$language->local]->title ?? "") }}'/>
                </div>
            @endforeach

            @foreach(['subtitle'] as $moduleField)
                @foreach($languages as $language)
                    <div class="form-group col-lg-6">
                        <label>
                            {{ meta($moduleField, $language->local) ?? __("options.$moduleField") }} {{ count($languages) > 1 ? "({$language->name})" : '' }}
                        </label>
                        <input type="text" class="form-control {{ $errors->has($moduleField.'_'.$language->local) ? 'is-invalid' : '' }}"
                               name="{{ $moduleField }}_{{ $language->local }}"
                               placeholder="{{ meta($moduleField, $language->local) ?? __("options.$moduleField") }}"
                               value='{{ old($moduleField."_{$language->local}", $option[$language->local]->{$moduleField} ?? "") }}'/>
                    </div>
                @endforeach
            @endforeach

            @foreach($languages as $language)
                <div class="form-group col-lg-6">
                    <label>{{ meta('description', $language->local) ?? __("options.description")}} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea rows="5" id="description_{{ $language->local }}" name="description_{{ $language->local }}" class="form-control my-editor {{ $errors->has('description_'.$language->local) ? 'is-invalid' : '' }}" placeholder="{{ meta('description', $language->local) ?? __("options.description")}}">{{ old("description_{$language->local}", $option[$language->local]->description ?? "") }}</textarea>
                </div>
            @endforeach
        </div> <!-- end of row -->

        <div class="form-group col-lg-12">
            @php $fieldLabelName = meta('item_number', $lang) ?? __("options.item_number"); @endphp
            <label data-name="{{ $fieldLabelName }}">{{ $fieldLabelName }} </label>
            <input type="text"
                   class="form-control {{ $errors->has('item_number') ? 'is-invalid' : '' }}"
                   name="item_number"
                   placeholder="{{ $fieldLabelName }}"
                   value='{{ old("item_number", $option->item_number ?? "") }}'/>
        </div> <!-- end of form-group -->

        <div class="form-group col-lg-12">
            <label>{{ meta('item_name', $lang) ?? __("options.item_name") }} </label>
            <input type="text"
                   class="form-control {{ $errors->has('item_name') ? 'is-invalid' : '' }}"
                   name="item_name"
                   placeholder="{{ meta('item_name', $lang) ?? __("options.item_name") }}"
                   value='{{ old("item_name", $option->item_name ?? "") }}'/>
        </div> <!-- end of form-group -->

        @include('admin.partials._upload_photo', ['item_value'=>old('image', $option->image ?? ''), 'label_name'=>meta('image', $lang) ?? __("options.image"), 'input_name'=>'image'])

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

@endsection


@push('stack_scripts')

@endpush

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

    <script>
        let catSelect = $('[name=cat_option_id]');
        const optionFields = {!! $optionFields !!};
        const languages = {!! json_encode($languages) !!};
        const edit = !!"{{ $edit }}";
        const changedLabelNames = {!! $changedLabelNames !!};
        catSelect.change(function(){
            let selectElement = $(this);
            let selectedValue = Number(selectElement.val());
            let meta = selectElement.find(':selected').data('meta');
            //console.log(meta);
            const langFields = ['description', 'subtitle'];
            let readonlyFields = meta?.readonly_fields || [];
            let element;
            let labelNames = changedLabelNames[selectedValue];
            if(optionFields){
                optionFields.map(field=>{
                    if(langFields.includes(field)){
                        languages.map(lang=>{
                            $(`[name=${field}_${lang.local}]`).closest('.form-group').hide();
                        });
                    }else {
                        $(`[name=${field}]`).closest('.form-group').hide();
                    }
                });
            }
            if(meta?.fields){
                meta.fields.map(field=>{
                    if(langFields.includes(field)){
                        languages.map(lang=>{
                            element = $(`[name=${field}_${lang.local}]`);
                            processElement(element, field);
                        });
                    }else {
                        element = $(`[name=${field}]`);
                        processElement(element, field);
                    }
                }); //end of map fields
            } //end if fields

            function processElement(element, field){
                let formGroup = element.closest('.form-group');
                let label = formGroup.find('label');
                formGroup.show();
                if(edit && readonlyFields.includes(field)){
                    element.prop('readonly', true);
                }
                if(labelNames?.[field]){
                    label.text(labelNames[field]);
                    element.attr('placeholder', labelNames[field]);
                }else if (label.data('name')) {
                    label.text(label.data('name'));
                    element.attr('placeholder', label.data('name'));
                }
            } //end of processElement function
        }); //end of change
        catSelect.trigger("change");
    </script>
@endsection