@extends('admin.layouts.container')

@section('content')
<div class="side-title">
    <h3>{{$head ?? '' }}</h3>
</div>
<div class="border-item">
    <form class="form-row" method="post" action="{{ $action }}" onsubmit="saveForm(this)">
        @if($product ?? ''  && $product->id)
            @method('PUT')
        @endif
        @csrf

        <div class="form-group col-lg-6">
            <label>{{ meta('category_id', getCurrentLocale()) ?? __('products.category_id') }} </label>
            <select id="category_id" class="form-control {{ $errors->has('category_id') ? 'is-invalid' : '' }}" name="category_id" >
                <option value="">{{__('dashboard.select')}}</option>
                @foreach($categories as $row)
                    <option @if((isset($product) ? $product->category_id : "") == $row->id ) selected @endif value="{{$row->id}}">{{$row->name}}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-lg-6"></div>

        <div class="form-group col-lg-6">
            <label>{{ meta('children', getCurrentLocale()) ?? __('products.children') }} </label>
            <input type="number" id="children"  class="form-control {{ $errors->has('children') ? 'is-invalid' : '' }}" name="children" placeholder="{{ meta('children', getCurrentLocale()) ?? __('products.children') }}" value='{{ old("children", $product->children ?? "") }}'/>
        </div>

        <div class="form-group col-lg-6">
            <label>{{ meta('adult', getCurrentLocale()) ?? __('products.adult') }} </label>
            <input type="number" id="adult" class="form-control {{ $errors->has('adult') ? 'is-invalid' : '' }}" name="adult" placeholder="{{ meta('adult', getCurrentLocale()) ?? __('products.adult') }}" value='{{ old("adult", $product->adult ?? "") }}'/>
        </div>

        @foreach($languages as $language)
            <div class="form-group col-lg-6">
                <label>{{ meta('name', $language->local) ?? __('products.name') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                <input type="text" id="name_{{ $language->local }}"  class="form-control {{ $errors->has('name_'.$language->local) ? 'is-invalid' : '' }}" name="name_{{ $language->local }}" placeholder="{{ meta('name', $language->local) ?? __('products.name') }}" value='{{ old("name_{$language->local}", $product[$language->local]->name ?? "") }}'/>
            </div>
            <div class="form-group col-lg-12">
                <label>{{ meta('description', $language->local) ?? __('products.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) ?? __('products.description') }}">{{old("name_{$language->local}", $product[$language->local]->description ?? "") }}</textarea>
            </div>
        @endforeach






            <div class="card col-md-12 mb-5">
                <div class="card-header mb-3"><h4>{{ __('products.features') }}</h4></div>
                <div class="col-md-12">
                    <div class='row' id="features">
                        @if($product ?? ''  && $product->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>{{__('products.feature')}} {{$lang->local}}</label>
                                                <input type="text" class="form-control" name="features[{{$key}}][feature_{{$lang->local}}]" id="features_{{$key}}_feature_{{$lang->local}}" placeholder="{{__('products.feature')}} {{$lang->local}}" value='{{ $feature->descriptions($lang->id)->name }}' />

                                            </div>
                                        @endforeach

                                        <div class="form-group col-lg-12 image_container">
                                            <label>{{  __('products.image') }} </label>
                                            <input id="image_{{$key}}feature_thumbnail" class="image_{{$key}}feature_thumbnail" type="hidden" name="features[{{$key}}][image]" value="{{$feature->image}}"/>

                                            <div class="photos main_{{$key}}feature_photo wow fadeInUp ">
                                                <div class="col-md-4">
                                                    <div class="items">
                                                        <div class="img">
                                                            <a href="#" id="lfm" data-input=".image_{{$key}}feature_thumbnail" data-preview=".image_{{$key}}feature_holder" class="lfm" data-hide=".pick_{{$key}}feature_button">
                                                                <img  src="{{asset($feature->image )}} " id="image_{{$key}}feature_holder" class="image_{{$key}}feature_holder"/>
                                                            </a>
                                                        </div>
                                                        <a href="#" class="showHide resetImage close" data-empty=".image_{{$key}}feature_thumbnail" data-hide=".main_{{$key}}feature_photo" data-show=".pick_{{$key}}feature_button"><i class="fas fa-times"></i></a>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="clearfix"></div>
                                            <span class="input-group-btn pick_{{$key}}feature_button hide">
                                                    <a id="lfm"  data-input=".image_{{$key}}feature_thumbnail" data-preview=".image_{{$key}}feature_holder" data-show=".main_{{$key}}feature_photo" data-hide=".pick_{{$key}}feature_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-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>{{ __('products.feature_details') }}</h4></div>
                                            <div class="col-md-12">
                                                <div class='row' id="features{{$key}}">
                                                    @foreach($feature->details 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>{{__('products.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="{{__('products.detail')}} {{$lang->local}}" value='{{ $value->descriptions($lang->id)->name }}' >
                                                                </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="addfeatureDetail(this)" feature-id="{{$key}}" detail-id="{{count($feature->details)}}"  type="button"><span class="fa fa-plus"></span></button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    {{-- Here append box node--}}
                    <div class="col-lg-12">
                        <button class="butn" onclick="addfeature(this)" @if($product ?? ''  && $product->id) feature-id="{{count($features)}}" @else feature-id="0" @endif  type="button"><span class="fa fa-plus"></span></button>
                    </div>
                </div>
            </div>
            

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

                <div class="photos main_photo {{ old('image', $product->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', $product->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', $product->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> {{__('dashboard.choose')}}
                </a>
             </span>
            </div>
            
            <div class="border-item photos col-md-12">
                <div class="row">
                    @if ($product ?? false)
                        @foreach ($product['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="#0" onclick="DeleteImg(this)" 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)
                {
                    if('data' in data)
                    {
                        $('.ajaxErrorResponse').css("display", "none");
                        $('.ajaxResponse').css("display", "block");
                        $('.ajaxResponse').html(data.message);
                        window.location.replace(url_main);
                    }
                    else
                    {
                        $('.ajaxResponse').css("display", "none");
                        $('.ajaxErrorResponse').css("display", "block");
                        $('.ajaxErrorResponse').html('');
                        $.each(data.errors, function(key,value) {
                            
                            $('.ajaxErrorResponse').append('<div class="alert alert-danger">'+value+'</div');
    
                            var keys = key.replaceAll(".","_");
    
                            $('#'+keys).attr('class','form-control is-invalid');
                        });
                    }
                }
                ,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>
        function DeleteImg(elem)
        {
            $(elem).closest('.col-md-4').remove();
        }
    </script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            url_main = "{{url('/')}}/admin/products",
            currentLanguage = "{{getCurrentLocale()}}",
            imagePath = "{{asset('')}}";
            url_addfeature = {!! json_encode(url(getCurrentLocale().'/admin/products/addfeature')) !!},
            url_addfeature_detail = {!! json_encode(url(getCurrentLocale().'/admin/products/addfeatureDetail')) !!}
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
@endsection