<x-admin.header />
<x-admin.sidebar />

<style>
	.input-field .img-upload-btn
	{
		margin: 10px;
	}
	td.col-img
	{
		display: flex;
	}
	td.col-img h6
	{
		position: relative;
		margin: 10px 0px 0px 10px !important;
	}

</style>


                        <div class="main-content">
                        	<div class="graph-card card-table" id="FaqList">
                                <div class="card-head">
                                    <div class="text-content">
                                        <h5>FAQ'S</h5>
                                    </div>
                                    <div class="card-drp">
                                        <div class="btn-content btn-group" role="group" aria-label="Basic example">
                                        @if(Auth::user()->type == 'admin')
                                        <a href="add_faq"><button type="button" class="btn active">Add New</button></a>
                                        @endif
                                    </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive table-scroll">
                                        <table class="table-management">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Faq Question</th>
                                                    <th>Faq Answer</th>
                                                    <th>Status</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            	@foreach($faqs as $key => $faq)
                                                <tr>
                                                	<td>
                                                		{{$faq->faq_id}}
                                                	</td>
                                                	<td>
                                                		{{ Str::limit($faq->faq_question,30) }}
                                                	</td>
                                                	<td>
                                                		{!! Str::of($faq->faq_answer)->limit(40); !!}
                                                	</td>
                                                    <td>
                                                    	@if($faq->faq_status == 1)
                                                        <h6>Active</h6>
                                                        @else
                                                        <h6>Un Active</h6>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <button class="refresh-btn edit-btnn" data-tooltip="Edit" data-faq_id="{{$faq->faq_id}}"
                                                        data-faq_question="{{$faq->faq_question}}"
                                                        data-faq_answer="{{$faq->faq_answer}}"
                                                        data-faq_status="{{$faq->faq_status}}">
                                                            <i class="fa-regular fa-pencil"></i>
                                                        </button>
                                                        <!-- <button class="delete-btn btn_del" value="{{$faq->faq_id}}" data-tooltip="Delete">
                                                            <i class="fa-regular fa-xmark"></i>
                                                        </button> -->
                                                    </td>

                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="pagination">
                                   
                                </div>
                                </div>
                            </div>
                        </div>

                        <!-- Model Start Here -->

                        <div class="modal fade" id="edit-faq" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="edit-dialogLabel" aria-hidden="true">
					        <div class="modal-dialog modal-dialog-centered">
					            <div class="modal-content">
					                <form id="update-form">
					                	@csrf
					                    <div class="modal-header">
					                        <h5 class="modal-title" id="edit-dialogLabel">Update Faqs</h5>
					                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					                    </div>
					                    <div class="modal-body">
					                        <div class="form-content">
					                            <div class="row">
					                                <div class="col-12">
					                                	<input type="hidden" name="FaqId" id="FaqId">
					                                </div>
					                                <div class="col-12">
					                                    <div class="input-field">
					                                        <label for="">Faq Question</label>
					                                        <input class="custom-input" type="text" name="FaqQuestion" id="FaqQuestion" value="">
					                                    </div>
					                                </div>
					                                <div class="col-12">
					                                    <div class="input-field">
					                                        <label for="">Faq Answer</label>
					                                        <textarea class="custom-input ckeditor" type="text" name="FaqAnswer" id="FaqAnswer"></textarea>
					                                    </div>
					                                </div>
					                                <div class="col-12">
					                                    <div class="input-field">
					                                        <label for="">Faq Status</label>
					                                        <select name="FaqStatus" class="form-control custom-input" id="FaqStatus">
					                                        	<option value="1">Active</option>
					                                        	<option value="0">Un-Active</option>
					                                        </select>
					                                    </div>
					                                </div>
					                                
					                            </div>
					                        </div>
					                    </div>
					                    <div class="modal-footer">
					                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
					                        <button type="submit" class="btn btn-process">Update Changes</button>
					                    </div>
					                </form>
					            </div>
					        </div>
    					</div>

    					<script>
    						$(".edit-btnn").click(function () {
    							$("#edit-faq").modal('show');
    							var id = $(this).data('faq_id');
    							var question = $(this).data('faq_question');
    							var answer = $(this).data('faq_answer');
    							var status = $(this).data('faq_status');

								
								CKEDITOR.instances['FaqAnswer'].setData(answer);
								$("#FaqId").val(id);
    							$("#FaqQuestion").val(question);
    							$("#FaqStatus").val(status);
    						})
    					</script>

                        <!-- Model End Here -->

                        <!-- Update Work Start Here -->

                        <script>
                        	$(document).ready(function(){
                        		$("#update-form").on('submit',function(e){
                        			e.preventDefault();

                        			for ( instance in CKEDITOR.instances )
    								CKEDITOR.instances[instance].updateElement();

    								var data = new FormData(this);

    								$.ajax({
    									url: "update_faq",
    									method: "POST",
    									data: data,
    									cache: false,
    									contentType: false,
    									processData: false,
    									success:function(data)
    									{
    										if($.isEmptyObject(data.error))
											{
												toastr.success(data.success,"Updated",{timeOut: 1500});
												document.getElementById('update-form').reset();
												CKEDITOR.instances.FaqAnswer.setData("");
												$("#edit-faq").modal('hide');
												$("#FaqList").load(location.href+" #FaqList>*","");
											}
											else if(data.error.FaqQuestion)
											{
												toastr.error(data.error.FaqQuestion,"Error",{timeOut: 1500});
												return false;
											}
											else if(data.error.FaqAnswer)
											{
												toastr.error(data.error.FaqAnswer,"Error",{timeOut: 1500});
												return false;
											}
    									},
    									error:function()
    									{
    										toastr.error("SomeThing Went Wrong...","Error");
											return false;
    									},
    								});
                        		});
                        	});
                        </script>

                        <!-- Update Work End Here -->

                        <!-- Delete Work Start Here -->

                        <script>
                        	$(document).ready(function(){
                        		$('body').on('click', '.btn_del', function(e){
                        			e.preventDefault();

                        			var id = $(this).val();

                        			$.ajax({
                        				url: "delete_faq",
                        				method: "GET",
                        				data: {'id': id},
                        				cache: false,
                        				success:function()
                        				{
                        					toastr.success("Faq Deleted Successfuly","Deleted",{timeOut: 1500});
                        					$("#FaqList").load(location.href+" #FaqList>*","");
                        				},
                        				error:function()
                        				{
                        					toastr.error("SomeThing Went Wrong...","Error");
											return false;
                        				},
                        			});
                        		});
                        	});
                        </script>

                        <!-- Delete Work End Here -->

<x-admin.footer />