@extends('layouts.dashboard')

@section('stylesheet')
{!! Html::style('css/parsley.css') !!}

@endsection

@section('content')
<div class="row">
    <div class="col-lg-12">
        {!! Form::model($categorie,['route' => ['administration.categories.update',$categorie->id],'method'=>'PUT','files'=>true,'data-parsley-validate'=>'']) !!}
            <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#menu0">General information</a></li>
              <li><a data-toggle="tab" href="#menu1">Category SEO</a></li>
              <li><a data-toggle="tab" href="#menu2">Category Testimonials</a></li>
            </ul>
            <div class="tab-content">
                <label for="" class="control-label margint-15">(<span class="required">*</span>) Required field</label>
                <div id="menu0" class="tab-pane fade in active">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            New Category
                        </div>
                        <div class="panel-body">
                            <div class="col-lg-12">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('name_en', "Name", ['class' => 'control-label']) }}
                                        <span class="required">*</span>
                                        {{ Form::text('name_en', null, array_merge(['class' => 'form-control','placeholder'=>"Name",'required'=>''])) }}
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('slug_en', "URL Title", ['class' => 'control-label']) }}
                                        <span class="required">*</span>
                                        {{ Form::text('slug_en', null, array_merge(['class' => 'form-control','placeholder'=>"URL Title",'required'=>''])) }}
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('filtrage', 'filtering', ['class' => 'control-label']) }}
                                        <span class="required">*</span>
                                        {{ Form::select('filtrage', ['' => 'choose filtering mode', 'price' => 'Price', 'title' => 'Title', 'duration' => 'Duration'], null, ['class' => 'form-control']) }}
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('display_menu', "Display on Menu", ['class' => 'control-label']) }}
                                        <div class="checkbox nomargin" style="margin: 0px;">
                                            <label class="form-control" style="border: none;">
                                                @if ($categorie->display_menu)
                                                    {{ Form::checkbox('display_menu', '1',true,array_merge(['class'=>'nomargin','id'=>'checkbox1'])) }}
                                                @else
                                                    {{ Form::checkbox('display_menu', '1',false,array_merge(['class'=>'nomargin','id'=>'checkbox1'])) }}
                                                @endif
                                            </label>
                                        </div>                                   
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('image', 'Image', ['class' => 'control-label']) }}
                                        <span class="required">*</span>
                                        {{ Form::file('image', array('accept'=>'image/*','class' => 'form-control')) }}
                                       
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('video', "Video", ['class' => 'control-label']) }}
                                        {{ Form::text('video', null, array_merge(['class' => 'form-control','placeholder'=>"Video"])) }}
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mt-card-item">
                                        <div class="mt-card-avatar mt-overlay-4">
                                            {{  Html::image($categorie->image, null,array('class'=>'img-bike')) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    {{ Form::label('desciption_en', 'Description', ['class' => 'control-label','style'=>'width: 12.33%;']) }}
                                    <span class="required">*</span>
                                    {{ Form::textarea('desciption_en', null, array_merge(['class' => 'ckeditor form-control','placeholder'=>'Description','required'=>''])) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="menu1" class="tab-pane fade">
                    <div class="panel panel-default margint-25">
                        <div class="panel-heading">
                            Category SEO
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            {{ Form::label('meta_title_en', "Title", ['class' => 'control-label']) }}
                                            <span class="required">*</span>
                                            {{ Form::textarea('meta_title_en', null, array_merge(['class' => 'form-control','placeholder'=>"Title"])) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            {{ Form::label('meta_key_en', "Keywords", ['class' => 'control-label']) }}
                                            <span class="required">*</span>
                                            {{ Form::textarea('meta_key_en', null, array_merge(['class' => 'form-control','placeholder'=>"Keywords"])) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            {{ Form::label('meta_description_en', "Description", ['class' => 'control-label']) }}
                                            <span class="required">*</span>
                                            {{ Form::textarea('meta_description_en', null, array_merge(['class' => 'form-control','placeholder'=>"Description"])) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
								<h3>Footer Links</h3>
                                <div class="col-lg-12">
                                    <div class="col-md-6">
                                        <label class="control-label"> Tilte</label>
                                    </div>
                                    <div class="col-md-5">
                                        <label class="control-label"> Link</label>
                                    </div>
                                    <div class="col-md-1">
                                        <label class="control-label"> Action</label>
                                    </div>
                                </div>
                                <div class="row" id="tour-days">
                                    @php
                                        $day_number = 1;
                                    @endphp
                                    @if(count($footers) > 0)
                                        @foreach($footers as $footer)
                                            <div class="col-lg-12 marginb-10 removeclass-day{{$footer->id}}" >
                                                <div class="col-md-6">
                                                    {{ Form::text('title[]', $footer->title, array_merge(['class' => 'form-control','placeholder'=>"Tilte"])) }}
                                                </div>
                                                <div class="col-md-5">
                                                    {{ Form::text('slug[]', $footer->slug, array_merge(['class' => 'form-control','placeholder'=>"Link"])) }}
                                                </div>
                                                @if($loop->first)
                                                    <div class="col-md-1">
                                                        <a href="javascripts:;" onclick="addDay()" class="btn btn-primary"><i class="fa fa-plus"></i></a>
                                                    </div>
                                                @else
                                                    <div class="col-md-1">
                                                        <a href="javascripts:;" onclick="removeDay({{$footer->id}})" class="btn btn-danger"><i class="fa fa-trash"></i></a>
                                                    </div>
                                                @endif
                                            </div>
                                            @php
                                                $day_number = $footer->id;
                                            @endphp
                                        @endforeach
                                    @else
                                        <div class="col-lg-12 marginb-10 " >
                                            <div class="col-md-6">
                                                {{ Form::text('title[]', null, array_merge(['class' => 'form-control','placeholder'=>"Tilte"])) }}
                                            </div>
                                            <div class="col-md-5">
                                                {{ Form::text('slug[]', null, array_merge(['class' => 'form-control','placeholder'=>"Link"])) }}
                                            </div>
                                            <div class="col-md-1">
                                                <a href="javascripts:;" onclick="addDay()" class="btn btn-primary"><i class="fa fa-plus"></i></a>
                                            </div>
                                        </div>                                    
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="menu2" class="tab-pane fade">
                    {{-- Category Testimonials --}}
                    <div class="testimonials">
                        @foreach($categorie->testimonials as $testimonial)
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-md-6">
                                            {{ $testimonial->title_en }}
                                        </div>
                                        <div class="col-md-6" style="text-align: right;">
                                            <a href="javascripts:;" onclick="removeTestimonial(event)" class="btn btn-danger btn-sm"><i class="fa fa-minus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <input type="hidden" name="ids[]" value="{{ $testimonial->id }}">
                                            <input type="hidden" name="imageChanged[]" value="0" class="imageChanged{{ $loop->index }}">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for="title_en" class="control-label">Title</label>
                                                    <span class="required">*</span>
                                                    <input class="form-control" placeholder="Title" required="" name="old_title_en[]" type="text" id="title_en" value="{{ $testimonial->title_en }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for="firstname" class="control-label">Firstname</label>
                                                    <span class="required">*</span>
                                                    <input class="form-control" placeholder="Firstname" required="" name="old_firstname[]" type="text" id="firstname" value="{{ $testimonial->firstname }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for="lastname" class="control-label">Lastname</label>
                                                    <span class="required">*</span>
                                                    <input class="form-control" placeholder="Lastname" name="old_lastname[]" type="text" id="lastname" required="" value="{{ $testimonial->lastname }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for="country_en" class="control-label">Country</label>
                                                    <span class="required">*</span>
                                                    <input class="form-control" placeholder="Country" required="" name="old_country_en[]" type="text" id="country_en" value="{{ $testimonial->country_en }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                {{  Html::image($testimonial->image, null,array('class'=>'img-bike with-10')) }}
                                                <div class="form-group">
                                                    <label for="image" class="control-label">Image</label>
                                                    <input accept="image/*" class="form-control testimonialImage"
                                                           name="old_testimonial_image[]" type="file" id="image" data-index="{{ $loop->index }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <label for="desciption_en" class="control-label" style="width: 12.33%;">Description</label>
                                                <span class="required">*</span>
                                                {{ Form::textarea('old_desciptions_en[]', $testimonial->desciption_en, array_merge(['class' => 'ckeditor form-control','placeholder'=>'Description','required'=>''])) }}

                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.row (nested) -->
                                </div>
                                <!-- /.panel-body -->
                            </div>
                        @endforeach
                    </div>
                    <div class="row">
                        <div class="col-sm-12" style="text-align: center;">
                            <a href="javascripts:;" onclick="addTestimonial()" class="btn btn-primary"><i
                                        class="fa fa-plus"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                {{ Form::submit('Update',array_merge(['class'=>'btn btn-default'])) }}
            </div>
        {!! Form::close() !!}
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
@endsection

@section('scripts')
	<script type="text/javascript">
        /* script day */
        var item_day = {{$day_number}};
        function addDay() {

            item_day++;
            var objTo = document.getElementById('tour-days')
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "col-lg-12 marginb-10 removeclass-day"+item_day);
            var rdiv = 'removeclass-day'+item_day;
            divtest.innerHTML  = '<div class="col-md-6"><input class="form-control" placeholder="Title"  name="title[]" type="text"></div> <div class="col-md-5"><input class="form-control" placeholder="Link"  name="slug[]" type="text"></div> <div class="col-md-1"><a href="javascripts:;" onclick="removeDay('+ item_day +')" class="btn btn-danger"><i class="fa fa-trash"></i></a></div>';
          
            objTo.appendChild(divtest)
        }
        function removeDay(rid) {
            item_day--;
            $('.removeclass-day'+rid).remove();
        }

        let testimonials_count = 0;
        function addTestimonial() {
            let testimonial = '<div class="panel panel-default">\n' +
                '            <div class="panel-heading">\n' +
                '                <div class="row">' +
                '                    <div class="col-md-6">' +
                '                         New Testimonial\n' +
                '                    </div>' +
                '                    <div class="col-md-6" style="text-align: right;">' +
                '                         <a href="javascripts:;" onclick="removeTestimonial(event)" class="btn btn-danger btn-sm"><i class="fa fa-minus"></i></a>\n' +
                '                    </div>' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="panel-body">\n' +
                '                <div class="row">\n' +
                '                        <div class="col-lg-12">\n' +
                '                            <div class="col-lg-6">\n' +
                '                                <div class="form-group">\n' +
                '                                    <label for="title_en" class="control-label">Title</label>\n' +
                '                                    <span class="required">*</span>\n' +
                '                                    <input class="form-control" placeholder="Title" required="" name="title_en[]" type="text" id="title_en">\n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                            <div class="col-lg-6">\n' +
                '                                <div class="form-group">\n' +
                '                                    <label for="firstname" class="control-label">Firstname</label>\n' +
                '                                    <span class="required">*</span>\n' +
                '                                    <input class="form-control" placeholder="Firstname" required="" name="firstname[]" type="text" id="firstname">\n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                            <div class="col-lg-6">\n' +
                '                                <div class="form-group">\n' +
                '                                    <label for="lastname" class="control-label">Lastname</label>\n' +
                '                                    <span class="required">*</span>\n' +
                '                                    <input class="form-control" placeholder="Lastname" name="lastname[]" type="text" id="lastname" required="">\n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                            <div class="col-lg-6">\n' +
                '                                <div class="form-group">\n' +
                '                                    <label for="country_en" class="control-label">Country</label>\n' +
                '                                    <span class="required">*</span>\n' +
                '                                    <input class="form-control" placeholder="Country" required="" name="country_en[]" type="text" id="country_en">\n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                            <div class="col-lg-6">\n' +
                '                                <div class="form-group">\n' +
                '                                    <label for="image" class="control-label">Image</label>\n' +
                '                                    <span class="required">*</span>\n' +
                '                                    <input accept="image/*" required="" class="form-control" name="testimonial_image[]" type="file" id="image">\n' +
                '                                   \n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                            <div class="col-lg-12">\n' +
                '                                <label for="desciption_en" class="control-label" style="width: 12.33%;">Description</label>\n' +
                '                                <span class="required">*</span>\n' +
                '                                <textarea class="form-control" placeholder="Description" name="desciptions_en[]" cols="50" rows="10" id="desciption_en'+ testimonials_count +'" style="visibility: hidden; display: none;" required></textarea>\n' +
                '                                \n' +
                '                            </div>\n' +
                '                        </div>\n' +
                '                </div>\n' +
                '                <!-- /.row (nested) -->\n' +
                '            </div>\n' +
                '            <!-- /.panel-body -->\n' +
                '        </div>';

            let testimonials = $('.testimonials').append(testimonial);
            CKEDITOR.replace('desciption_en' + testimonials_count++);
        }

        function removeTestimonial(event) {
            $(event.target).closest('div.panel.panel-default').remove();
        }

        /**
         * on file changed
         */

        $('.testimonialImage').change(function (event) {
            let element = $(event.target);
            let index = element.attr('data-index');
            imageChanged(element[0], index);
        });

        function imageChanged(element, index) {
            console.log(index);
            if(element.files) {
                if (element.files.length === 0) {
                    $('.imageChanged' + index).val('0');
                    console.log('0');
                } else {
                    $('.imageChanged' + index).val('1');
                    console.log('1');
                }
            } else {
                $('.imageChanged' + index).val('0');
                console.log('0 no files');
            }
        }
	</script>

	{!! Html::script('js/parsley.min.js') !!}
    {!! Html::script('backoffice/vendor/ckeditor/ckeditor.js') !!}

@endsection