@extends('admin.layouts.container')

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



    <div class="border-item">
        <ul class="nav nav-pills bg-nav-pills nav-justified mb-3">
            <li class="nav-item">
                <a href="#main" data-toggle="tab" aria-expanded="false" class="nav-link rounded-0 active">
                    <i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i>
                    <span class="d-none d-lg-block">{{__('services.details')}}</span>
                </a>
            </li>

            <li class="nav-item">
                <a href="#section_items" data-toggle="tab" aria-expanded="false" class="nav-link rounded-0">
                    <i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i>
                    <span class="d-none d-lg-block">{{__('services.items')}}</span>
                </a>
            </li>

        </ul>
        <form class="form-row" method="post" onsubmit="saveForm(this)" action="{{ $action }}"
              enctype="multipart/form-data">
            @if($service ?? ''  && $service->id)
                @method('PUT')
            @endif
            @csrf
            <div class="tab-content row col-12">
                <div class="tab-pane col-lg-12 active" id="main">
                    <div class="form-row">

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

                            <div class="form-group col-lg-6">
                                <label>{{ meta('second_title', $language->local) ?? __('services.second_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                <input type="text"
                                       class="form-control only-alphanum {{ $errors->has('second_title_'.$language->local) ? 'is-invalid' : '' }}"
                                       name="second_title_{{ $language->local }}"
                                       placeholder="{{ meta('second_title', $language->local) ?? __('services.second_title') }}"
                                       value='{{ old("second_title_{$language->local}", $service[$language->local]->second_title ?? "") }}'/>
                            </div>

                            <div class="form-group col-lg-12">
                                <label>{{ meta('description', $language->local) ?? __('services.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                <textarea
                                    class="form-control only-alphanum {{ $errors->has('description_'.$language->local) ? 'is-invalid' : '' }}"
                                    name="description_{{ $language->local }}"
                                    placeholder="{{ meta('description', $language->local) ?? __('services.description') }}">{{ old("description_{$language->local}", $service[$language->local]->description ?? "") }}</textarea>
                            </div>
                        @endforeach

                    </div>


                    <div class="form-group col-lg-12 image_container">
                        <label>{{ meta('image', getCurrentLocale()) ?? __('services.image') }} </label>
                        <input id="image_thumbnail" class="image_thumbnail" type="hidden" name="image"
                               value="{{old("image", $service->image ?? "")}}"/>

                        <div
                            class="photos main_photo {{ old('image', $service->image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                            <div class="col-md-4">
                                <div class="items">
                                    <div class="img">
                                        <a href="#"
                                           id="lfm"
                                           data-input=".image_thumbnail"
                                           data-preview=".image_holder"
                                           class="lfm"
                                           data-width="{{ config('general.image_sizes.service.width', 1000) }}"
                                           data-height="{{ config('general.image_sizes.service.height', 1500) }}"
                                           data-hide=".pick_button">
                                            <img src="{{asset(old('image', $service->image ?? ''))}} " id="image_holder"
                                                 class="image_holder"/>
                                        </a>
                                    </div>
                                    <a href="#" class="showHide resetImage close" data-empty=".image_thumbnail"
                                       data-hide=".main_photo" data-show=".pick_button"><i class="fas fa-times"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix"></div>
                        <span
                            class="input-group-btn pick_button {{ old('image', $service->image ?? '') ? 'hide' : '' }} ">
                    <a id="lfm"
                       data-input=".image_thumbnail"
                       data-preview=".image_holder"
                       data-show=".main_photo"
                       data-hide=".pick_button"
                       data-width="{{ config('general.image_sizes.service.width', 1000) }}"
                       data-height="{{ config('general.image_sizes.service.height', 1500) }}"
                       class="lfm btn btn-primary text-light">
                        <i class="fas fa-camera-retro"></i> {{__('dashboard.choose')}}
                    </a>
                </span>
                    </div>

                </div>

                <div class="tab-pane col-lg-12" id="section_items">
                    <div class="row">
                        <div class="col-lg-12">
                            <h3> {{__('services.items')}} </h3>
                        </div>
                        <div class="col-lg-12" id="items">
                            @if($service ?? ''  && $service->id)
                                @foreach($items as $key=>$row)
                                    @include('admin.services.service_item',['key'=>$key,'service'=>$row])
                                @endforeach
                            @endif
                        </div>
                        <div class="col-lg-12">
                            <a style="cursor: pointer;" target="items" action="{{ route('admin.service.item') }}"
                               data-id="{{count($items)}}" onclick="additem(this)" class="btn_1 gray "><i
                                    class="fa fa-fw fa-plus-circle"></i>{{__("services.add_new")}}</a>
                        </div>
                    </div>
                </div>
            </div>


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

@endsection

@section('inner_js')
    <!-- Editor JS orders -->
    {{--        <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>--}}
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>


    <script>
        function additem(elem) {
            var num = $(elem).attr('data-id');
            var newrow = parseInt(num) + 1;
            $(elem).attr('data-id', newrow);
            let target = $(elem).attr('target');
            let action = $(elem).attr('action');

            $.ajax({
                url: action,
                type: 'GET',
                data: 'key=' + num,
                success: function (data) {
                    $('#' + target).append(data);
                }
            })
        }


        function remove(elem) {
            $(elem).closest('.row').remove();
        }
    </script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            currentLanguage = "{{getCurrentLocale()}}",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
@endsection