@extends('adminlte::page')

@section('title', 'Add '.$section.' Document Points')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6 col-6">
            <h1>Add {{$section}} Document Points</h1>
        </div>
    </div>
@stop
@php 
    $index_count1=1;
@endphp


@section('content')
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <div class="card box-primary">
                <!-- form start -->
                <form role="form" enctype="multipart/form-data" method="POST" action="{{ route('admin.dashboard-services.techstack.heading.add.action',[$id, $section]) }}" autocomplete="off">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label>Heading</label>
                            <input type="text" class="form-control" name="heading" placeholder="heading"
                                   value="{{ old('heading') }}" required>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Button Text</label>
                                    <input type="text" class="form-control" name="button_text" placeholder="button_text"
                                        value="{{ old('button_text') }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Button Link</label>
                                    <input type="text" class="form-control" name="button_link" placeholder="button_link"
                                        value="{{ old('button_link') }}" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Points</label>
                            </div>
                        </div>
                        <!-- <div class="col-md-12"> -->

                        <div id="bookForm1" >
                            <div class="form-group">                  
                                <div class="row">
                                    <div class="col-md-3">
                                        
                                        <select class="category select2 rounded form-control" name="icons_input[{{$index_count1}}]" id="heading_name">
                                            <option value="">Select icon...</option>
                                            @foreach ($icons as $icon)
                                                <option value="{{ $icon->icon }}" >{{ $icon->icon_name }}</option>
                                            
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" class="form-control"  placeholder="Points" name="points[{{$index_count1}}]">
                                    </div>
                                     
                                </div>
                            </div>

                            <div class="form-group d-none form-new " id="bookTemplate1">
                                <div class="row">

                                <div class="col-md-3">
                                    <select class="category select2 rounded form-control" name="icon_input" id="heading_name">
                                        <option value="">Select icon...</option>
                                        @foreach ($icons as $icon)
                                            <option value="{{ $icon->icon }}" >{{ $icon->icon_name }}</option>
                                        
                                        @endforeach
                                    </select>
                                </div>   
                                    

                                    <div class="col-md-3">
                                        <input type="text" class="form-control"  placeholder="Points" name="point" >
                                    </div>  

                                    

                                    <div class="col-xs-1 item">
                                        <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button> 
                                    </div>               
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-1 ">
                                    <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>
                        </div>
                                    
						
                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>

                   
                   
                    
                    




                    </div>
                    <!-- /.box-body -->

            
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
@stop

@section('js')
    <script src="{{asset('/admin/js/bootstrap-tagsinput.js')}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        var bookIndex1 =;
        $('#bookForm1')
			.on('click', '.addButton', function() {
				bookIndex1++;
               
				var $template = $('#bookTemplate1'),
					$clone    = $template
									.clone()
									.removeClass('d-none')
									.removeAttr('id')
									.attr('data-book-index', bookIndex1)
									.insertBefore($template);
                $clone
					.find('[name="icon_input"]').attr('name','icons_input['+bookIndex1+']').attr('value','').end();
				$clone
					.find('[name="point"]').attr('name','points['+bookIndex1+']').attr('value','').end();
				

               
                    
            })
			.on('click', '.removeButton', function() {
				
				var $row  = $(this).parents('.form-new'),
					index = $row.attr('data-book-index');
				$row.remove();
			})    
       
   });
    </script>
@stop