@extends('admin.layouts.container')

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

<div class="border-item">
    <form class="form-row" method="post" onsubmit="saveForm(this)" action="{{ $action }}" enctype="multipart/form-data">
        
        @if($compound ?? ''  && $compound->id)
            @method('PUT')
        @endif
        @csrf
        
        <div class="form-group col-lg-6" >
            <label>{{ __('compounds.city_id') }} </label>
            <select name="city_id" id="city_id" class="form-control  {{ $errors->has('city_id') ? 'is-invalid' : '' }}">
                <option selected="" disabled="">{{__('dashboard.select')}}</option>
                @foreach($cities as $row)
                    <option @if($compound ?? ''  && $compound->id)  @if($compound->city_id == $row->id) selected @endif @endif  value="{{$row->id}}" > {{$row->descriptions()->title}} </option>  
                @endforeach
            </select>     
        </div>
        
        <div class="form-group col-lg-6">
            <label>{{ __('compounds.link') }} </label>
            <input type="text" id="link" class="form-control {{ $errors->has('link') ? 'is-invalid' : '' }}" name="link" placeholder="{{ __('compounds.link') }}" value='{{ old("link", $compound->link ?? "") }}'/>
        </div>
       

        @foreach($languages as $language)
            <div class="form-group col-lg-6">
                <label>{{ meta('title', $language->local) ?? __('compounds.title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                <input type="text" id="title_{{$language->local}}" class="form-control {{ $errors->has('title_'.$language->local) ? 'is-invalid' : '' }}" name="title_{{ $language->local }}" placeholder="{{ meta('title', $language->local) ?? __('compounds.title') }}" value='{{ old("title_{$language->local}", $compound[$language->local]->title ?? "") }}'/>
            </div>
            <div class="form-group col-lg-6">
                <label>{{ meta('address', $language->local) ?? __('compounds.address') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                <input type="text" id="address_{{$language->local}}" class="form-control {{ $errors->has('address_'.$language->local) ? 'is-invalid' : '' }}" name="address_{{ $language->local }}" placeholder="{{ meta('address', $language->local) ?? __('compounds.address') }}" value='{{ old("address_{$language->local}", $compound[$language->local]->address ?? "") }}'/>
            </div>
            
            <div class="form-group col-lg-12">
                <label>{{ meta('description', $language->local) ?? __('compounds.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                <textarea type="text" id="description_{{$language->local}}" class="form-control {{ $errors->has('description_'.$language->local) ? 'is-invalid' : '' }}" name="description_{{ $language->local }}" placeholder="{{ meta('description', $language->local) ?? __('compounds.description')}}">{{ old("description_{$language->local}", $compound[$language->local]->description ?? "") }}</textarea>
            </div>

        @endforeach
        
        
        <div class="form-group col-lg-12 image_container">
            <label>{{ meta('image', getCurrentLocale()) ?? __('compounds.image') }} (635*450)px</label>
            <input id="image_thumbnail" class="image_thumbnail" type="hidden" name="image" value="{{old("image", $compound->image ?? "")}}"/>

            <div class="photos main_photo {{ old('image', $compound->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-hide=".pick_button">
                                <img src="{{asset(old('image', $compound->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', $compound->image ?? '') ? 'hide' : '' }} ">
                <a id="lfm"  data-input=".image_thumbnail" data-preview=".image_holder" data-show=".main_photo" data-hide=".pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
             </span>
        </div>
     
     
        <div class="form-group col-lg-12 image_container">
            <label>{{ meta('external_image', getCurrentLocale()) ?? __('compounds.external_image') }} (610*250)px</label>
            <input id="external_image_thumbnail" class="external_image_thumbnail" type="hidden" name="external_image" value="{{old("external_image", $compound->external_image ?? "")}}"/>

            <div class="photos main_external_photo {{ old('external_image', $compound->external_image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                <div class="col-md-4">
                    <div class="items">
                        <div class="img">
                            <a href="#" id="lfm" data-input=".external_image_thumbnail" data-preview=".external_image_holder" class="lfm" data-hide=".external_pick_button">
                                <img src="{{asset(old('external_image', $compound->external_image ?? ''))}} "  id="external_image_holder" class="external_image_holder"/>
                            </a>
                        </div>
                        <a href="#" class="showHide resetImage close" data-empty=".external_image_thumbnail" data-hide=".main_external_photo" data-show=".external_pick_button"><i class="fas fa-times"></i></a>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>
            <span class="input-group-btn external_pick_button {{ old('external_image', $compound->external_image ?? '') ? 'hide' : '' }} ">
                <a id="lfm"  data-input=".external_image_thumbnail" data-preview=".external_image_holder" data-show=".main_external_photo" data-hide=".external_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
             </span>
        </div>
     
        
        <div class="card col-md-12 mb-5">
            <div class="card-header mb-3"><h4>{{ __('compounds.features') }}</h4></div>
            <div class="col-md-12">
                <div class='row' id="features">
                    @if($compound ?? ''  && $compound->id)
                        @foreach($features as $key=>$feature)
                            <div class="card col-12">
                                <div class="row pricing-list-item border-item mb-4">
                                    
                                    @foreach($languages as $lang)
                                        <div class="form-group col-lg-5">
                                            <label>{{__('compounds.feature')}} {{$lang->local}}</label>
                                            <input type="text" class="form-control" name="features[{{$key}}][feature_{{$lang->local}}]" id="features_{{$key}}_feature_{{$lang->local}}" placeholder="{{__('compounds.feature')}} {{$lang->local}}" value='{{ $feature->descriptions($lang->id)->title }}' />
                                
                                        </div>
                                    @endforeach
                                   
                                    <div class="form-group col-lg-2" style="font-size: 30px;margin-top:35px;">
                                    	<i class="fas fa-times-circle" onclick="remove(this)"></i>
                                	</div>
                                    <div class="card col-md-12 mb-5">
                                        <div class="card-header mb-3"><h4>{{ __('compounds.feature_details') }}</h4></div>
                                        <div class="col-md-12">
                                            <div class='row' id="features{{$key}}">
                                                @foreach($feature->values as $rowkey=>$value)
                                                    <div class="row col-lg-12 pricing-list-item border-item mb-4">
                                                        @foreach($languages as $lang)
                                                            <div class="form-group col-lg-5" >
                                                                <label>{{__('compounds.detail')}} {{$lang->local}}</label>
                                                                <input name="features[{{$key}}][details][{{$rowkey}}][detail_{{$lang->local}}]" id="features_{{$key}}_details_{{$rowkey}}_detail_{{$lang->local}}" class="form-control" placeholder="{{__('compounds.detail')}} {{$lang->local}}" value='{{ $value->descriptions($lang->id)->title }}' >
                                                            </div>
                                                        @endforeach
                                                        <div class="form-group col-lg-2" style="font-size: 30px;margin-top:35px;">
                                                        	<i class="fas fa-times-circle" onclick="remove(this)"></i>
                                                    	</div>
                                                    	
                                                        <div class="form-group col-lg-12 image_container">
                                                            <label>{{  __('compounds.image') }} </label>
                                                            <input id="image_{{$key}}feature{{$rowkey}}_thumbnail" class="image_{{$key}}feature{{$rowkey}}_thumbnail" type="hidden" name="features[{{$key}}][details][{{$rowkey}}][image]" value="{{$value->image}}"/>
                                                    
                                                            <div class="photos main_{{$key}}feature{{$rowkey}}_photo wow fadeInUp ">
                                                                <div class="col-md-4">
                                                                    <div class="items">
                                                                        <div class="img">
                                                                            <a href="#" id="lfm" data-input=".image_{{$key}}feature{{$rowkey}}_thumbnail" data-preview=".image_{{$key}}feature{{$rowkey}}_holder" class="lfm" data-hide=".pick_{{$key}}feature{{$rowkey}}_button">
                                                                                <img  src="{{asset($value->image )}} " id="image_{{$key}}feature{{$rowkey}}_holder" class="image_{{$key}}feature{{$rowkey}}_holder"/>
                                                                            </a>
                                                                        </div>
                                                                        <a href="#" class="showHide resetImage close" data-empty=".image_{{$key}}feature{{$rowkey}}_thumbnail" data-hide=".main_{{$key}}feature{{$rowkey}}_photo" data-show=".pick_{{$key}}feature{{$rowkey}}_button"><i class="fas fa-times"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    
                                                            <div class="clearfix"></div>
                                                            <span class="input-group-btn pick_{{$key}}feature{{$rowkey}}_button hide">
                                                                <a id="lfm"  data-input=".image_{{$key}}feature{{$rowkey}}_thumbnail" data-preview=".image_{{$key}}feature{{$rowkey}}_holder" data-show=".main_{{$key}}feature{{$rowkey}}_photo" data-hide=".pick_{{$key}}feature{{$rowkey}}_button" class="lfm btn btn-primary text-light">
                                                                    <i class="fas fa-camera-retro"></i> Choose
                                                                </a>
                                                             </span>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                	
                                	<div class="col-12">
                                        <div class="text-left mb-4 col-12 add_row_parent">
                                            <button class="butn" onclick="addfeatureDetail(this)" feature-id="{{$key}}" detail-id="{{count($feature->values)}}"  type="button"><span class="fa fa-plus"></span></button>
                                        </div>
                                    </div>
                                	
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                {{-- Here append box node--}}
                <div class="text-left mb-4 col-12 add_row_parent">
                    <button class="butn" onclick="addfeature(this)" @if($compound ?? ''  && $compound->id) feature-id="{{count($features)}}" @else feature-id="0" @endif  type="button"><span class="fa fa-plus"></span></button>
                </div>
            </div>
        </div>
        
        <div class="card col-md-12 mb-5">
            <div class="card-header mb-3"><h4>{{ __('compounds.details') }}</h4></div>
            <div class="col-md-12">
                <div class='row' id="details">
                    @if($compound ?? ''  && $compound->id)
                        @foreach($details as $key=>$detail)
                            <div class="card col-12">
                                <div class="row pricing-list-item border-item mb-4">
                                    
                                    @foreach($languages as $lang)
                                        <div class="form-group col-lg-5">
                                            <label>{{__('compounds.feature')}} {{$lang->local}}</label>
                                            <input type="text" class="form-control" name="details[{{$key}}][feature_{{$lang->local}}]" id="details_{{$key}}_feature_{{$lang->local}}" placeholder="{{__('compounds.feature')}} {{$lang->local}}" value='{{ $detail->descriptions($lang->id)->title }}' />
                                
                                        </div>
                                    @endforeach
                                   
                                    <div class="form-group col-lg-2" style="font-size: 30px;margin-top:35px;">
                                    	<i class="fas fa-times-circle" onclick="remove(this)"></i>
                                	</div>
                                    <div class="card col-md-12 mb-5">
                                        <div class="card-header mb-3"><h4>{{ __('compounds.feature_details') }}</h4></div>
                                        <div class="col-md-12">
                                            <div class='row' id="details{{$key}}">
                                                @foreach($detail->values as $rowkey=>$value)
                                                    <div class="row col-lg-12 pricing-list-item border-item mb-4">
                                                        @foreach($languages as $lang)
                                                            <div class="form-group col-lg-5" >
                                                                <label>{{__('compounds.detail')}} {{$lang->local}}</label>
                                                                <input name="details[{{$key}}][details][{{$rowkey}}][detail_{{$lang->local}}]" id="details_{{$key}}_details_{{$rowkey}}_detail_{{$lang->local}}" class="form-control" placeholder="{{__('compounds.detail')}} {{$lang->local}}" value='{{ $value->descriptions($lang->id)->title }}'>
                                                            </div>
                                                        @endforeach
                                                        <div class="form-group col-lg-2" style="font-size: 30px;margin-top:35px;">
                                                        	<i class="fas fa-times-circle" onclick="remove(this)"></i>
                                                    	</div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                	
                                	<div class="col-12">
                                        <div class="text-left mb-4 col-12 add_row_parent">
                                            <button class="butn" onclick="adddetailDetail(this)" feature-id="{{$key}}" detail-id="{{count($detail->values)}}"  type="button"><span class="fa fa-plus"></span></button>
                                        </div>
                                    </div>
                                	
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                {{-- Here append box node--}}
                <div class="text-left mb-4 col-12 add_row_parent">
                    <button class="butn" onclick="adddetail(this)" @if($compound ?? ''  && $compound->id) feature-id="{{count($details)}}" @else feature-id="0" @endif  type="button"><span class="fa fa-plus"></span></button>
                </div>
            </div>
        </div>
     
     
     
        <div class="border-item photos col-md-12 other_image_container">
            <div class="row">
                @if ($compound ?? false)
                    @foreach ($compound['photos'] as $photo)
                        <div class="col-md-4">
                            <div class="items">
                                <div class="img">
                                    <a href="{{ asset($photo->image ?? '')}}" data-fancybox="gallery"><img src="{{ asset($photo->image ?? '')}}" alt=""></a>
                                </div>
                                <input type="hidden" name="images[]" value="{{ $photo->image ?? "" }}">
                                <a href="#" class="close"><i class="fas fa-times"></i></a>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="text-center">
                <input id="other_image_thumbnail" class="other_image_thumbnail" type="hidden"/>
                <div class="clearfix"></div>
                <span id="add">
                    <a id="lfm" data-width="" data-cache="article_gallery" data-input=".other_image_thumbnail" data-preview="" data-show="" data-hide="" class="lfm add">
                        Add New Item
                    </a>
                </span>
            </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 files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    <script>
        function saveForm(elem)
        {
            event.preventDefault();
            $('form *').removeClass('is-invalid');
            var action = $(elem).attr('action');
               
            var urls = action;
            var form = $(elem).serialize();
            $.ajax({
                  url : urls,
                  type : 'POST',
                  data : form,
                  dataType : 'json',
                  success:function(data)
                  {
                      $('.ajaxErrorResponse').css("display", "none");
                      $('.ajaxResponse').css("display", "block");
                    $('.ajaxResponse').html(data.message);
                    window.location.href = url_main
                  }
                  ,error: function (data) {
                      $('.ajaxResponse').css("display", "none");
                    $('.ajaxErrorResponse').css("display", "block");
                   $('.ajaxErrorResponse').html('');
                   $.each(data.responseJSON.errors, function(key,value) {
                     $('.ajaxErrorResponse').append('<div class="alert alert-danger">'+value+'</div');
                     
                     var keys = key.replaceAll(".","_");
                     
                     $('#'+keys).attr('class','form-control is-invalid');
                 }); 
         
                }
            })
        }
        function addfeature(elem)
        {
            var num = $(elem).attr('feature-id');
            var newrow = parseInt(num)+1; 
            $(elem).attr('feature-id', newrow);
            
             $.ajax({
              url : url_addfeature,
              type : 'GET',
              data : 'key='+num,
              success:function(data)
              {
                $('#features').append(data);
              }
            })
        }
        function addfeatureDetail(elem)
        {
            var feature_id = $(elem).attr('feature-id');
            var num = $(elem).attr('detail-id');
            var newrow = parseInt(num)+1; 
            $(elem).attr('detail-id', newrow);
            
             $.ajax({
              url : url_addfeature_detail,
              type : 'GET',
              data : 'key='+num+'&feature_id='+feature_id,
              success:function(data)
              {
                $('#features'+feature_id).append(data);
              }
            })
        }
        
        
        
        function adddetail(elem)
        {
            var num = $(elem).attr('feature-id');
            var newrow = parseInt(num)+1; 
            $(elem).attr('feature-id', newrow);
            
             $.ajax({
              url : url_adddetail,
              type : 'GET',
              data : 'key='+num,
              success:function(data)
              {
                $('#details').append(data);
              }
            })
        }
        function adddetailDetail(elem)
        {
            var feature_id = $(elem).attr('feature-id');
            var num = $(elem).attr('detail-id');
            var newrow = parseInt(num)+1; 
            $(elem).attr('detail-id', newrow);
            
             $.ajax({
              url : url_adddetail_detail,
              type : 'GET',
              data : 'key='+num+'&feature_id='+feature_id,
              success:function(data)
              {
                $('#details'+feature_id).append(data);
              }
            })
        }
        
        function remove(elem)
        {
            $(elem).closest('.row').remove();
        }
    </script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            url_main = "{{url('/')}}/admin/compounds",
            url_addfeature = {!! json_encode(url(getCurrentLocale().'/admin/addfeature')) !!},
            url_addfeature_detail = {!! json_encode(url(getCurrentLocale().'/admin/addfeatureDetail')) !!},
            url_adddetail = {!! json_encode(url(getCurrentLocale().'/admin/adddetail')) !!},
            url_adddetail_detail = {!! json_encode(url(getCurrentLocale().'/admin/adddetailDetail')) !!},
            currentLanguage = "{{getCurrentLocale()}}",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script src="{{ asset('assets/admin/js/articles.js') }}"></script>
    <script src="{{ asset('assets/admin/js/compounds.js') }}"></script>
@endsection