@extends('layouts.app')
@section('style')
<style>
 .notes {
    background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-size: 100% 100%, 100% 100%, 100% 31px;
    border: NONE;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 31px;
    font-family: Arial, Helvetica, Sans-serif;
    padding: 8px;
}

.notes:focus {
    outline: none;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
 
    vertical-align: middle;
 
}
 </style>
@endsection
@section('content')
<form method="post" action="{{url('question')}}">
  <input type="hidden" name="_token" value="{{csrf_token()}}">
  <div class="card">
    <div class="card-body">
      <div align="center">
        <img src="{{asset('image/logo.png')}}" style="max-width:120px"></div><br>

      <div align="center">
        <h4> แบบประเมินความพึงพอใจการให้บริการ
            {{ env('APP_NAME') }}</h4>
      </div>
      <div><strong> ข้อชี้แจง </strong>  กรุณาทำเครื่องหมาย  <i class="fa fa-check"></i> ในข้อที่ตรงกับความเป็นจริงและในช่องที่ตรงกับความคิดเห็นของของท่านมากที่สุด </div>
      <div class="row"  id="part1" style="padding-bottom:20px;  ">
        <div class="col-sm-12">
          <strong> ตอนที่   1 ข้อมูลทั่วไปของ ผู้ตอบ</strong>
        </div>
        <div class="col-sm-12">1. เพศ </div>
       
        
          <div class="col-sm-2">
            <label>
              <input name="gender" type="radio" required="required" value="ชาย">
              ชาย</label>
          </div>
          <div class="col-sm-2">
            <label>
              <input type="radio" name="gender" value="หญิง">
              หญิง</label>
          </div>
    
        <div class="col-sm-12">2. อายุ</div>
 
          <div class="col-sm-3">
            <label>
              <input name="age" type="radio" required="required" value="ต่ำกว่า 20 ปี">
              ต่ำกว่า 20 ปี</label>
          </div>
          <div class="col-sm-3">
            <label>
              <input type="radio" name="age" value="21 - 40 ปี">
              21 - 40 ปี</label>
          </div>
          <div class="col-sm-3">
            <label>
              <input type="radio" name="age" value="41 - 60 ปี">
              41 - 60 ปี</label>
          </div>
          <div class="col-sm-3">
            <label>
              <input type="radio" name="age" value="มากกว่า 60 ปี">
              มากกว่า 60 ปี</label>
          </div>
      
        <div class="col-sm-12">3. ระดับการศึกษา</div>
 
          <div class="col-sm-3">
            <label>
              <input name="education" type="radio" required="required" value="ประถมศึกษา">
              ประถมศึกษา</label>
          </div>
          <div class="col-sm-6">
            <label>
              <input type="radio" name="education" value="มัธยมศึกษาต้น/ปลาย/เทียบเท่า">
              มัธยมศึกษาต้น/ปลาย/เทียบเท่า</label>
          </div>
 
 
          <div class="col-sm-3">
            <label>
              <input type="radio" name="education" value="ปริญญาตรี">
              ปริญญาตรี</label>
          </div>
          <div class="col-sm-6">
            <label>
              <input type="radio" name="education" value="สูงกว่าปริญญาตรี">
              สูงกว่าปริญญาตรี</label>
          </div>
 
        <div class="col-sm-12">4. อาชีพ</div>
 
          <div class="col-sm-4">
            <label>
              <input name="occupation" type="radio" required="required" value="นักเรียน/นักศึกษา">
              นักเรียน/นักศึกษา</label>
          </div>
          <div class="col-sm-4">
            <label>
              <input type="radio" name="occupation" value="ข้าราชการ/เจ้าหน้าที่รัฐ">
              ข้าราชการ/เจ้าหน้าที่รัฐ</label>
          </div>
          <div class="col-sm-4">
            <label>
              <input type="radio" name="occupation" value="ผู้ประกอบการ/เอกชน">
              ผู้ประกอบการ/เอกชน</label>
          </div>
          <div class="col-sm-4">
            <label>
              <input type="radio" name="occupation" value="องค์กรเครือข่ายชุมชน">
              องค์กรเครือข่ายชุมชน</label>
          </div>
          <div class="col-sm-8">
            <label>
              <input type="radio" name="occupation" value="อื่นๆ"  >
              อื่นๆ  (โปรดระบุ) </label>
            <input type="text" name="occupation_etc" style="width:250px">
          </div>
 
      </div>
      <div  class="row" id="part2" >
        <div class="col-sm-12" ><strong> ตอนที่  2 คำถามเกี่ยวกับคุณภาพการบริการของ  {{ env('APP_NAME') }}</strong><br>
 
<div class="row "><div class="col-sm-4"><strong>กรุณาทำเครื่องหมาย </strong>  <i class="fa fa-check"></i>   </div>   <div class="col-sm-4"> ระดับความพึงพอใจ มากที่สุด  </div><div class="col-sm-4">  มีค่าเท่ากับ  5  คะแนน</div></div>
<div class=" row"><div class="col-sm-4 offset-sm-4">ระดับความพึงพอใจ มาก 	</div><div class="col-sm-4">   มีค่าเท่ากับ  4  คะแนน </div></div>
<div class=" row"><div class="col-sm-4 offset-sm-4">ระดับความพึงพอใจ ปานกลาง  </div><div class="col-sm-4">  มีค่าเท่ากับ  3  คะแนน </div></div>
<div class=" row"><div class="col-sm-4 offset-sm-4">ระดับความพึงพอใจ น้อย 	 </div><div class="col-sm-4">    มีค่าเท่ากับ  2  คะแนน </div></div>
<div class=" row"><div class="col-sm-4 offset-sm-4">ระดับความพึงพอใจ น้อยที่สุด </div><div class="col-sm-4">    มีค่าเท่ากับ  1  คะแนน</div></div>
 

          <table border="1"  width="680" class="table table-bordered">
            <tr>
              <td  rowspan="2" align="center" valign="middle"  > <strong>คุณภาพการบริการ </strong></td>
              <td   colspan="5" align="center"><strong> ระดับความพึงพอใจ </strong></td>
            </tr>
            <tr>
              <td width="30" align="center"  ><strong> 5 </strong></td>
              <td width="30" align="center"  ><strong> 4 </strong></td>
              <td width="30" align="center"  ><strong> 3 </strong></td>
              <td width="30" align="center"  ><strong> 2 </strong></td>
              <td width="30" align="center"   ><strong> 1 </strong></td>
            </tr>
            @foreach($mqs as $mq)
            <tr>
              <td colspan="6" bgcolor="#CDCDCD"  ><strong>{{$mq->name}}</strong></td>
            </tr>
            <tr> @foreach($qs as $q) 
              @if($q->mains_id==$mq->id)
              <td style="text-indent:20pt">{{$q->question}}</td>
              <td><input type="hidden" name="qid[]" value="{{$q->id}}">
                <input type="radio" name="answer_{{$q->id}}[]"  value="5"></td>
              <td><input name="answer_{{$q->id}}[]" type="radio"  value="4"></td>
              <td><input name="answer_{{$q->id}}[]" type="radio"  value="3"></td>
              <td><input name="answer_{{$q->id}}[]" type="radio" value="2"></td>
              <td><input name="answer_{{$q->id}}[]" type="radio" required="required"  value="1"></td>
            </tr>
            @endif
            @endforeach    
            
            @endforeach
          </table>
        </div>
      </div>
      <div  class="row" id="part3" >
        <div class="col-sm-12" ><strong> ตอนที่  3 ข้อเสนอแนะในการให้บริการของ  {{ env('APP_NAME') }}</strong>
          <textarea name="etc" class="form-control notes" rows="5"></textarea>
        </div>
      </div>
      <div  class="row" id="part4" >
        <div class="col-sm-12" >
          <button class="btn btn-success btn-block"><i class="fa fa-save"></i> ส่งแบบประเมิน</button>
        </div>
      </div>
    </div>
  </div> 
</form>
@endsection