@extends('layouts.layout')

@section('title', 'Testimonials')
<!-- @section('content') -->
@section('content')

<!--HTML  code -->
<div class="content-inner">
    <div class="main-right-teaser">
        <div class="permission-block">
        <div class="permission-header d-flex justify-content-between">
            <h3> Testimonials </h3>
            <div class="d-flex justify-content-between ">
            <div class="d-flex justify-content-between align-items-center mr-2">
                   <!--  <div class="switch-block blue-switch">
                        <label class="switch-title">Active/Inactive</label>
                        <label class="switch">
                        <input type="checkbox" value="1"  name="activenews">
                        <span class="slider round"></span>
                        </label>
                    </div> -->
                </div>
               

            </div>

         </div>
						<form method="post" id="faq_form" action="@if((!empty($testimonials))){{route('update-testimonial')}}@else{{route('store-testimonial')}}@endif" enctype="multipart/form-data">
							<div class="custom-form-inner">
								<div class="custom-form-column fluid-column">
									@csrf
									@if(isset($testimonials) && !empty($testimonials))
									<input type="hidden" id="testimonials_count" value="{{ count($testimonials) }}" />
									@foreach($testimonials as $testimonialskey => $value_testimonials)
									<ul class="dragable-block" id="delete_faq_{{$value_testimonials['id']}}">
										<input type="hidden" value="update" name="type[]" id="faq_type_{{$value_testimonials['id']}}" />
										<li>
											<a href="javascript:void(0)" class="delete-btn delete_faq" data-type="update" data-id="{{$value_testimonials['id']}}" >
												<svg xmlns="http://www.w3.org/2000/svg" width="13.985" height="15.069" viewBox="0 0 13.985 15.069">
													<g id="Group_4625" data-name="Group 4625" transform="translate(-333.971 -782.645)">
														<g id="Group_1417" data-name="Group 1417" transform="translate(335.3 786.944)">
															<path id="Path_1311" data-name="Path 1311" d="M347.254,807.982h-6.328a1.45,1.45,0,0,1-1.442-1.3l-1.009-9.473H349.7l-1.009,9.473A1.45,1.45,0,0,1,347.254,807.982Z" transform="translate(-338.475 -797.212)" fill="#121214"></path>
														</g>
														<g id="Group_1418" data-name="Group 1418" transform="translate(333.971 783.72)">
															<rect id="Rectangle_392" data-name="Rectangle 392" width="13.985" height="2.149" rx="1.075" fill="#121214"></rect>
														</g>
														<g id="Group_1419" data-name="Group 1419" transform="translate(338.298 782.645)">
															<rect id="Rectangle_393" data-name="Rectangle 393" width="5.33" height="2.149" rx="1.075" fill="#121214"></rect>
														</g>
														<g id="Group_1420" data-name="Group 1420" transform="translate(338.298 789.259)">
															<path id="Path_1312" data-name="Path 1312" d="M349.685,810.735a.59.59,0,0,1-.586-.53l-.46-4.5a.59.59,0,1,1,1.174-.12l.46,4.5a.59.59,0,0,1-.527.647A.522.522,0,0,1,349.685,810.735Z" transform="translate(-348.636 -805.057)" fill="#121214"></path>
														</g>
														<g id="Group_1421" data-name="Group 1421" transform="translate(341.595 789.259)">
															<path id="Path_1313" data-name="Path 1313" d="M360.4,810.735a.532.532,0,0,1-.061,0,.59.59,0,0,1-.527-.647l.46-4.5a.59.59,0,1,1,1.174.12l-.46,4.5A.59.59,0,0,1,360.4,810.735Z" transform="translate(-359.808 -805.057)" fill="#121214"></path>
														</g>
													</g>
												</svg>
											</a>
											<div class="question-wrap">
												<input type="hidden" name="testimonials_id[]" value="{{$value_testimonials['id']}}">
												<div class="form-wrap  style-input">
													<label for="title{{$value_testimonials['id']}}" class="style-label @if(isset($value_testimonials)) with-value @endif">Title*</label>
													<input type="text" id="title{{$value_testimonials['id']}}" class="form-control"  name="title[{{$testimonialskey}}]" value="@if(isset($value_testimonials)){{$value_testimonials['title']['rendered']}}@endif">
													<span role="alert" style="color:#FF0000">
													</span>
												</div>
												<div class="form-wrap style-input custom-textarea">
													<label for="content{{$value_testimonials['id']}}" class="style-label @if(isset($value_testimonials)) with-value @endif">Testimonial*</label>
													
													<textarea  id="content{{$value_testimonials['id']}}" class="form-control" rows="20" cols="80" name="content[{{$testimonialskey}}]" >@if(isset($value_testimonials)){{strip_tags($value_testimonials['content']['rendered'])}}@endif</textarea>
													<span role="alert" style="color:#FF0000">
													</span>
												</div>
												<div class="form-wrap  style-input">
													<label for="author{{$value_testimonials['id']}}" class="style-label @if(isset($value_testimonials)) with-value @endif">Name*</label>
													<input type="text" id="author{{$value_testimonials['id']}}" class="form-control"  name="author[{{$testimonialskey}}]" value="@if(isset($value_testimonials)){{(!empty($value_testimonials['acf']) && isset($value_testimonials['acf']['subtitle']) && !empty($value_testimonials['acf']['subtitle']))?$value_testimonials['acf']['subtitle']:''}}@endif">
													<span role="alert" style="color:#FF0000">
													</span>
												</div>
												<div class="form-wrap  style-input">
													<label for=""> Select Category</label>
													 							                        <div class="news-dropdown-wrap">
								                            <div class="news-dropdown" id="create-category{{$value_testimonials['id']}}">@if($cat_user=='') Select Category @else {{ $cat_user }} @endif <i class="fas fa-caret-down"></i></div>
								                            <input type="hidden" name="create-category-array{{$value_testimonials['id']}}" id="create-category-array{{$value_testimonials['id']}}">
								                            <div class="news-dorpdown-content">
								                                <div class="news-dropdown-body">
								                                    <div class="row">
   																		@foreach($categories as $key => $categoriesval)
								                                        <div class="col-md-4">
								                                        	
								                                            <div class="form-wrap">
								                                                <input class="styled-checkbox" data-name="{{(!empty($categoriesval['name']))?$categoriesval['name']:''}}" name="categories[{{(!empty($value_testimonials['id']))?$value_testimonials['id']:'0'}}][]"  onclick="getcategoryName{{(!empty($value_testimonials['id']))?$value_testimonials['id']:'0'}}(this)" type="checkbox" value="{{(!empty($categoriesval['id']))?$categoriesval['id']:''}}" id="categories{{(!empty($value_testimonials['id']))?$value_testimonials['id']:''}}{{(!empty($categoriesval['id']))?$categoriesval['id']:''}}"   data-id="{{(!empty($value_testimonials['id']))?$value_testimonials['id']:''}}">
								                                                <label class="styled-label" for="categories{{(!empty($value_testimonials['id']))?$value_testimonials['id']:''}}{{!empty($categoriesval['id'])?$categoriesval['id']:''}}">
								                                                {{(!empty($categoriesval['name']))?$categoriesval['name']:''}}
								                                                </label>
								                                            </div>
								                                        </div>
								                                        @endforeach
								                                  
								                                    </div>
								                                </div>
								                            </div>
								                        </div>
												</div>

											</div>
										</li>
									
									</ul>
									<script type="text/javascript">
										var items{{$value_testimonials['id']}} = [];
										function getcategoryName{{$value_testimonials['id']}}(e){

										    var value  = $(e).attr('data-name');
										    var id  = $(e).attr('data-id');
										     var itemsdetais = $('#create-category'+id).val();
										     
										    var indexOfElement = items{{$value_testimonials['id']}}.indexOf(value);
										    //value is not in the array
										    if(items{{$value_testimonials['id']}}.lengt <= 0){
										        $('#create-category'+id).text('Select Category');
										    }else{
											    if (indexOfElement < 0) {
											        items{{$value_testimonials['id']}}.push(value);
											    } else {
											        //value is in the array, remove it
											        items{{$value_testimonials['id']}}.splice(indexOfElement, 1);
											    }
											}
											if(items{{$value_testimonials['id']}}.length <= 0){
										        $('#create-category'+id).html('Select Category');
										    }
										    else{
										        $('#create-category-array'+id).val(items{{$value_testimonials['id']}});
										        $('#create-category'+id).text(items{{$value_testimonials['id']}});
										    }
										    items = [];
										}
									</script>
									@endforeach
									@else
									<ul class="dragable-block" data-id_faq_value="1">
										<li >
											<a href="javascript:void(0)" class="delete-btn delete_faq" data-type="add" data-id="1">
												<svg xmlns="http://www.w3.org/2000/svg" width="13.985" height="15.069" viewBox="0 0 13.985 15.069">
													<g id="Group_4625" data-name="Group 4625" transform="translate(-333.971 -782.645)">
														<g id="Group_1417" data-name="Group 1417" transform="translate(335.3 786.944)">
															<path id="Path_1311" data-name="Path 1311" d="M347.254,807.982h-6.328a1.45,1.45,0,0,1-1.442-1.3l-1.009-9.473H349.7l-1.009,9.473A1.45,1.45,0,0,1,347.254,807.982Z" transform="translate(-338.475 -797.212)" fill="#121214"></path>
														</g>
														<g id="Group_1418" data-name="Group 1418" transform="translate(333.971 783.72)">
															<rect id="Rectangle_392" data-name="Rectangle 392" width="13.985" height="2.149" rx="1.075" fill="#121214"></rect>
														</g>
														<g id="Group_1419" data-name="Group 1419" transform="translate(338.298 782.645)">
															<rect id="Rectangle_393" data-name="Rectangle 393" width="5.33" height="2.149" rx="1.075" fill="#121214"></rect>
														</g>
														<g id="Group_1420" data-name="Group 1420" transform="translate(338.298 789.259)">
															<path id="Path_1312" data-name="Path 1312" d="M349.685,810.735a.59.59,0,0,1-.586-.53l-.46-4.5a.59.59,0,1,1,1.174-.12l.46,4.5a.59.59,0,0,1-.527.647A.522.522,0,0,1,349.685,810.735Z" transform="translate(-348.636 -805.057)" fill="#121214"></path>
														</g>
														<g id="Group_1421" data-name="Group 1421" transform="translate(341.595 789.259)">
															<path id="Path_1313" data-name="Path 1313" d="M360.4,810.735a.532.532,0,0,1-.061,0,.59.59,0,0,1-.527-.647l.46-4.5a.59.59,0,1,1,1.174.12l-.46,4.5A.59.59,0,0,1,360.4,810.735Z" transform="translate(-359.808 -805.057)" fill="#121214"></path>
														</g>
													</g>
												</svg>
											</a>
											<div class="question-wrap">
												<div class="form-wrap  style-input">
													<label for="title" class="style-label ">Title*</label>
													<input type="text" id="title" class="form-control"  name="title[0]" >
													<span role="alert" style="color:#FF0000">
													</span>
												</div>
												<div class="form-wrap style-input custom-textarea">
													<label for="content" class="style-label">Testimonial*</label>
													<textarea  id="content" class="form-control" rows="20" cols="80" name="content[0]" ></textarea>
													<span role="alert" style="color:#FF0000">
													</span>
												</div>
												<div class="form-wrap  style-input">
													<label for="author" class="style-label ">Name*</label>
													<input type="text" id="author" class="form-control"  name="author[0]" >
													<span role="alert" style="color:#FF0000">
													</span>
												</div>
											</div>
										</li>
										
									</ul>
									@endif
									<div id="testimonial_module"></div>
									<div class="d-flex justify-content-end mb-3">
										<a href="javascript:void(0)" id="add_anothe_testimonial" data-id="1" class="btn">Add Another Testimonial</a>
									</div>
									<div class="d-flex justify-content-end align-items-end">
									
										<button type="submit" class="btn">save</button>
									</div>
								</div>
							</div>
						</form>
      
    </div>
</div>
<!--maintainance code -->
<!-- @include('maintainance') -->
<script type="text/javascript">
	  $(document).on("click", ".delete_faq", function () {
        var id = $(this).data("id");
        var type = $(this).data("type");

        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: "btn btn-success",
                cancelButton: "btn btn-danger",
            },
            buttonsStyling: false,
        });

        swalWithBootstrapButtons
            .fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel!",
                reverseButtons: true,
            })
            .then((result) => {
                if (result.isConfirmed) {
                    $("#faq_type_" + id).val("delete");
                    if (type == "update") {
                        $("#delete_faq_" + id).hide();
                    } else {
                        $("#delete_faq_" + id).remove();
                    }
                }
            });
    });
	
	 $("#add_anothe_testimonial").click(function () {
        var id = $(this).data("id");
        var increment_val = Number(id) + 1;
        $("#add_anothe_testimonial").data("id", Number(id) + 1);

        var testimonials_count = $("#testimonials_count").val();

        
        let faqHtml =
            `
         <ul class="dragable-block" id="delete_faq_`+testimonials_count+`">
            <li>
            <input type="hidden" name="type[`+testimonials_count+`]" value="add">
               <a href="javascript:void(0)" class="delete-btn delete_faq" data-type="add" data-id="`+testimonials_count+`" >
                  <svg xmlns="http://www.w3.org/2000/svg" width="13.985" height="15.069" viewBox="0 0 13.985 15.069">
                     <g id="Group_4625" data-name="Group 4625" transform="translate(-333.971 -782.645)">
                        <g id="Group_1417" data-name="Group 1417" transform="translate(335.3 786.944)">
                           <path id="Path_1311" data-name="Path 1311" d="M347.254,807.982h-6.328a1.45,1.45,0,0,1-1.442-1.3l-1.009-9.473H349.7l-1.009,9.473A1.45,1.45,0,0,1,347.254,807.982Z" transform="translate(-338.475 -797.212)" fill="#121214"></path>
                        </g>
                        <g id="Group_1418" data-name="Group 1418" transform="translate(333.971 783.72)">
                           <rect id="Rectangle_392" data-name="Rectangle 392" width="13.985" height="2.149" rx="1.075" fill="#121214"></rect>
                        </g>
                        <g id="Group_1419" data-name="Group 1419" transform="translate(338.298 782.645)">
                           <rect id="Rectangle_393" data-name="Rectangle 393" width="5.33" height="2.149" rx="1.075" fill="#121214"></rect>
                        </g>
                        <g id="Group_1420" data-name="Group 1420" transform="translate(338.298 789.259)">
                           <path id="Path_1312" data-name="Path 1312" d="M349.685,810.735a.59.59,0,0,1-.586-.53l-.46-4.5a.59.59,0,1,1,1.174-.12l.46,4.5a.59.59,0,0,1-.527.647A.522.522,0,0,1,349.685,810.735Z" transform="translate(-348.636 -805.057)" fill="#121214"></path>
                        </g>
                        <g id="Group_1421" data-name="Group 1421" transform="translate(341.595 789.259)">
                           <path id="Path_1313" data-name="Path 1313" d="M360.4,810.735a.532.532,0,0,1-.061,0,.59.59,0,0,1-.527-.647l.46-4.5a.59.59,0,1,1,1.174.12l-.46,4.5A.59.59,0,0,1,360.4,810.735Z" transform="translate(-359.808 -805.057)" fill="#121214"></path>
                        </g>
                     </g>
                  </svg>
               </a>
               <div class="question-wrap style-input">
                 <div class="form-wrap  style-input">
													<label for="title" class="style-label ">Title*</label>
													<input type="text" id="title" class="form-control"  name="title[`+testimonials_count+`]" >
													<span role="alert" style="color:#FF0000">
													</span>
												</div>
												<div class="form-wrap style-input custom-textarea">
													<label for="content" class="style-label">Testimonial*</label>
													<textarea  id="content" class="form-control" rows="20" cols="80" name="content[`+testimonials_count+`]" ></textarea>
													<span role="alert" style="color:#FF0000">
													</span>
												</div>
												<div class="form-wrap  style-input">
													<label for="author" class="style-label ">Name*</label>
													<input type="text" id="author" class="form-control"  name="author[`+testimonials_count+`]" >
													<span role="alert" style="color:#FF0000">
													</span>
												</div>
               </div>
            </li>
         </ul>
         `;
        $("#testimonial_module").append(faqHtml);

        $("#testimonials_count").val(Number(testimonials_count) + 1);
    });
</script>
@endsection