@extends('layouts.main')

@section('container')
<div class="main_container">
     <br><br>
     <!-- page content -->
        <div class="right_col" role="main">
          <div class="">
        
            <div class="clearfix"></div>
			<div class="row">
              <div class="col-md-6 col-xs-12 col-md-offset-3">
            	<div class="x_panel">
                  <div class="x_title">
                    <h2>Edit  Form <small></small></h2>
                   <!--  <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <!-- <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul> 
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul> -->
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">

                    <!-- start form for validation -->
                   <form action="{{ route('editAnnouncementAction') }}" method="post" class="form-horizontal" enctype="multipart/form-data" id="validate-form" >
                      <label for="fullname">Header* :</label>
                      {!! csrf_field() !!}
                                            	@foreach($fetch as $data)
                      <input type="text" id="fullname" class="form-control"  required  name="a_header" value="{{$data->a_header}}"   maxlength="37" required="" />
						<label for="message">Description :</label>
                         {{-- <textarea required="" id="message" required="required" class="form-control" name="description"  data-parsley-trigger="keyup" data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.."
                            data-parsley-validation-threshold="10">{{$data->description}}</textarea>--}}
                            <textarea  name="description" id="summernote">{{$data->description}}</textarea>
						 <label for="fullname">Upload Image* :</label>
						 <input type="hidden" value="{{$data->image}}" name="">
						 <br>
						 <br>
						 <div class="dropme grid" style="width:auto">
						 						 
						 <!--calculating the length of the image array for  total number of image upload changes in jquery.filter.js-->
                                                    	<input type="hidden" value="{{$count}}" id="image-count">
						 @if(!empty($img))
						 @foreach($img as $key=>$val)
						 <div class="col-md-3 " id="share-records-image{{$key}}">
                        <div class="thumbnail">
                          <div class="image view view-first">
                          	
                            <img class="imgValue" name="" style="width: 100%; display: block;" src="{{URL::asset('/userimage/'.$val['images'])}}" alt="image" />
                            <div class="mask">
                              <div class="tools tools-bottom">
                                <a href="#"><i class="fa fa-link"></i></a>
                                <a href="#"><i class="fa fa-pencil"></i></a>
                                <a onclick="alertDelete({{$key}},{{$data->id}})"><i class="fa fa-times"></i></a>
                              </div>
                            </div>
                          </div>
                          <div class="caption">
                            <p>{{$val['images']}}</p>
                          </div>
                        </div>
                      </div>
                      @endforeach
                      @endif
                     </div>
                     
                   
                    
                     
                     <!-- image location relocate and getting value of old json before shuffle and after shuffle -->
                     <input type="hidden" name="image_old" value="">
	                 <input type="hidden" id="imagejson" name="image_json">
	                 <input type="hidden" name="id" value="{{$data->id}}">
	               
                      <div class="clearfix"></div>
                      
                      <br><br>
						 <input type="file" name="upload[]" id="filer_input" multiple="multiple">
						  <input type="hidden"  name="title" value="{{$data['title']}}">
                          <br/>
                          
                       <div class='row'>
                    <div class="field_wrapper">      
                    	@php
                   $optvalues =  json_decode($data->options,true);
                   $i=0;
                    @endphp
                    @if(sizeof($optvalues)>0)
                    @foreach($optvalues as $opt)
                     <div class='row'>
                    <div class="form-group email  col-md-5">
                        <label>Option</label>
                        
                        <input type="text"  name="option[]" value="{{$opt['option']}}" class="form-control"  placeholder="Option to be shown in website"  required />
                         
                              
                  
                    </div>
                    <div class="form-group email col-md-5">
                        <label>Price</label>
                        
                        
                         <input type="text"  name="amount[]"   class="form-control" value="{{$opt['credit']}}"  placeholder="Credit (if not remain it 0)"  />
                             
                          
                              
                  </div>
                  @if(++$i <= 1)
                   <div class="form-group email form-group-icon-left col-md-2">
                        <label>&nbsp;</label>
                        
                        
                         <a href="javascript:void(0)" style="text-align: center" class="add_button form-control" rel="tooltip" title="" data-original-title="Add more fields"  data-placement="right"><i class="fa fa-plus  text-info" style="font-size: 20px; text-align: center;"></i></a>     
                          
                              
                  </div>
               
                  @else
                  
                  <div class="form-group email form-group-icon-left col-md-2">
                  	<label>&nbsp;</label>
                  	<a href="javascript:void(0)" style="text-align:center" class="remove_button form-control" rel="tooltip" title="" data-original-title="Remove fields"  data-placement="right">
                  		<i class="fa fa-minus  text-info" style="font-size: 20px; text-align: center;"></i>
                  		</a>
                  		</div>
                  
                  @endif
                  </div>
            
                  @endforeach
                    
                  @else
					<div class="row">
                  <div class="form-group email  col-md-5">
                        <label>Option</label>
                        
                        <input type="text"  name="option[]"  class="form-control"  placeholder="Option to be shown in website"  required />
                         
                              
                  
                    </div>
                    <div class="form-group email col-md-5">
                        <label>Price</label>
                        
                        
                         <input type="text"  name="amount[]"   class="form-control" value="0"  placeholder="Credit (if not remain it 0)"  />
                             
                          
                              
                  </div>
                  
                   <div class="form-group email form-group-icon-left col-md-2">
                        <label>&nbsp;</label>
                        
                        
                         <a href="javascript:void(0)" style="text-align: center" class="add_button form-control" rel="tooltip" title="" data-original-title="Add more fields"  data-placement="right"><i class="fa fa-plus  text-info" style="font-size: 20px; text-align: center;"></i></a>     
                          
                              
                  </div>
                </div>
                  @endif
                  
                    </div>
                    </div>
                    
                   </br>
                   
						@endforeach
						
						<div class="row">
                          <button class="btn btn-primary" type="submit">Save</button>
                          </div>
                    </form>
                    <!-- end form for validations -->

                  </div>
                </div>


              </div>

            </div>

          </div>
        </div>
        <!-- /page content -->
 <!-- page content -->
 <!-- /footer content -->
      </div>
<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><div class="form-group email  col-md-5"><label>Option</label><input type="text"  name="option[]"  class="form-control"  placeholder="Option to be shown in website"  required /></div><div class="form-group email col-md-5"><label>Price</label> <input type="text"  name="amount[]" value="0"  class="form-control"  placeholder="Credit"  /> </div> <div class="form-group email form-group-icon-left col-md-2"><label>&nbsp;</label><a href="javascript:void(0)" style="text-align:center" class="remove_button form-control" rel="tooltip" title="" data-original-title="Remove fields"  data-placement="right"><i class="fa fa-minus  text-info" style="font-size: 20px; text-align: center;"></i></a></div></div>  ';
     
    var x = 1; //Initial field counter is 1
	$(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent().parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>
<script>
$('.dropme').dropme('enable');
$('.exclude').dropme({
				items: ':not(.disabled)'
			});
			$('.connected').dropme({
				linkTo: '.connected'
			});
</script>

<script>
function alertDelete(index,id){
	var APP_URL = {!! json_encode(url('/')) !!}
	swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary Record!",
  type: "warning",
  showCancelButton: true,
  closeOnConfirm: false,
  confirmButtonText: "Yes, delete it!",
  showLoaderOnConfirm: true,
},
function(){
 $.ajax(
                {
                    type: "post",
                    url: APP_URL+"/api/image_edit_Announcement",
                    data: "id="+id+'&index='+index,
                    success: function(data){
                    	$("#share-records-image"+index).hide();
                    }
                }
        )
         .done(function(data) {
        swal("success!", "Share has been Deleted successfully !", "success");
        $('#orders-history').load(document.URL +  ' #orders-history');
      })
      .error(function(data) {
        swal("Oops", "We couldn't connect to the server!", "error");
      });
});
};
</script>
@stop