@extends('layouts.default')
@section('content')
<style type="text/css">
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
.faqHeader {
    font-size: 27px;
    margin: 20px;
}

.panel-heading [data-toggle="collapse"]:after {
    font-family: 'FontAwesome';
    content: "\f078"; /* "play" icon */
    float: right;
    color: #F58723;
    font-size: 18px;
    line-height: 22px;
}

.panel-heading [data-toggle="collapse"].collapsed:after {
   
    color: #454444;
}
</style>
<!-- page content -->
<div class="right_col" role="main">
  	<div class="">
	    <div class="page-title">
	      	<div class="title_left">
	        	<h3>Create Policy FAQ</h3>
	      	</div>
	    </div>
	<div class="clearfix"></div>
    	<div class="row">
  			<div class="col-md-12 col-sm-12 col-xs-12">
	      		{{ Userdefined::showMessage() }}
	        <div class="x_panel">
	          	<div class="x_content">
	          		<div class="row">
						<div class="col-md-12 col-sm-12 col-xs-12 ">
				
						<form id="policy_form" class="mui-form" method="post" action="" role="form" autocomplete="off" data-toggle="validator">
						<div class="row">
								<div class="col-md-4 col-sm-4 col-xs-12 mui-textfield mui-textfield--float-label form-group">
			              		<input type="text" id="question" name="question" required maxlength="100">
			              		<div class="help-block with-errors"></div>
			              			<label>Question<i class="mandatory">*</i></label>
					            </div>
					        </div>
					        <div class="row">	
					            <div class="col-md-8 col-sm-8 col-xs-12 mui-textfield mui-textfield--float-label form-group">
					              	<textarea id="answer" name="answer" required></textarea>
					              	<div class="help-block with-errors"></div>
					              	<label>Answer<i class="mandatory">*</i></label>
					            </div>
					        </div>
					        <input type="hidden" name="staus">
					        <div class="row pull-right">	
					        	<button type="reset" class="btn btn-info">Reset</button>
					            <button type="submit" name="policy_faq_submit" value="policy_faq_submit" class="btn btn-success">Submit</button>
											
					        </div>
					        {{ csrf_field() }}
										</form>
									</div>
								</div>
							</div>
						</div>
		          	</div>

          	<div class="x_panel">
	          	<div class="x_content">
			      	<div class="title_left">
			        	<h3> Policy FAQ</h3>
			      	</div>
		          	<div class="panel-group" id="accordion">
       				 @foreach($policy_faq as $k=>$policy)
			        <div class="panel panel-default">
			            <div class="panel-heading">
			                <h4 class="panel-title">
			                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#{{$k}}">Q: {{$policy->question}}</a>
			                </h4>
			            </div>
			            <div id="{{$k}}" class="panel-collapse collapse">
			                <div class="panel-body">
			                  <h5><span class="label label-primary">Answer</span></h5>
			                   <p>{{$policy->answer}}</p>
			                </div>
			            </div>
			        </div>
			        @endforeach
							 </div>
						</div>
					</div>
		        </div>
	      	</div>
	    </div>
  	
<!-- /page content -->
<script type="text/javascript">
	 if($.fn.mCustomScrollbar){
           $('#accordion').mCustomScrollbar({
               autoHideScrollbar: true,
               theme: 'dark-3',
               mouseWheelPixels: 50,
               scrollInertia: 60,
               mouseWheel:{ preventDefault: true }
           });
       }
</script>

@stop