@extends('app.app-master')

@section('content')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.12.0/d3.min.js"></script>


<div class="container">
   <div class="row">
      <div class="col-md-12 col-sm-3 col-xs-12">
         {{-- Quick Search --}}
            <div class="card opaque-white">
               <div class="card-header bg-darkblue">
                      Survey
               </div>
               <div class="card-body">
                  <div class="col-md-12">
                    <div class="bs-example">
                        <div class="accordion" id="accordionExample">
                            <div class="card custom-card">
                                <div class="card-header" id="headingOne">
                                  <div class="row">
                                    
                                        <div class="col-md-1">
                                          <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i></button>
                                        </div> 
                                        <div class="col-md-9">
                                          <h5 class="mb-0">Contest 1</h5>
                                        </div>
                                        <div class="col-md-2">
                                          <button class="btn btn-dark mx-auto float-right action-btn delete-btn"><i class="fa fa-trash-alt" aria-hidden="true" data-toggle="modal" data-target="#DeleteBrand"></i></button>
                                          <button class="btn btn-dark mx-auto float-right action-btn edit-btn" data-toggle="modal" data-target="#EditBrand"><i class="fas fa-pencil-alt" aria-hidden="true"></i></button> 
                                        </div> 

                                  </div>
                                </div>

                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                                    <div class="card-body">
                                        <div class="row">


                                          <div class="col-md-12">
                                            <div class="accordion" id="accordionChild">
                                             <div class="card">
                                                <div class="card-header" id="headingSubOne">
                                                   <h2 class="mb-0">
                                                      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseSubOne" aria-expanded="true" aria-controls="collapseSubOne">
                                                        <span class="mb-0">Question 1</span>
                                                      </button>
                                                   </h2>
                                                </div>
                                                <div id="collapseSubOne" class="collapse" aria-labelledby="headingSubOne" data-parent="#accordionChild">
                                                   <div class="card-body">
                                                      <div class="row">
                                                        <div class="col-md-6  pie-block">
                                                          <div class="pieID pie">
                                                            
                                                          </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                          <ul class="pieID legend">
                                                            <li>
                                                              <em><a href="">Answer 1</a></em>
                                                              <span>718</span>

                                                            </li>
                                                            <li>
                                                              <em><a href="">Answer 2</a></em>
                                                              <span>531</span>

                                                            </li>
                                                            <li>
                                                              <em><a href="">Answer 3</a></em>
                                                              <span>868</span>

                                                            </li>
                                                            <li>
                                                              <em><a href="">Answer 4</a></em>
                                                              <span>344</span>

                                                            </li>
                                                            <li>
                                                              <em><a href="">Answer 5</a></em>
                                                              <span>1145</span>

                                                            </li>
                                                          </ul>
                                                        </div>

                                                        <script type="text/javascript">
                                                          function sliceSize(dataNum, dataTotal) {
                                                          return (dataNum / dataTotal) * 360;
                                                        }
                                                        function addSlice(sliceSize, pieElement, offset, sliceID, color) {
                                                          $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
                                                          var offset = offset - 1;
                                                          var sizeRotation = -179 + sliceSize;
                                                          $("."+sliceID).css({
                                                            "transform": "rotate("+offset+"deg) translate3d(0,0,0)"
                                                          });
                                                          $("."+sliceID+" span").css({
                                                            "transform"       : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
                                                            "background-color": color
                                                          });
                                                        }
                                                        function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
                                                          var sliceID = "s"+dataCount+"-"+sliceCount;
                                                          var maxSize = 179;
                                                          if(sliceSize<=maxSize) {
                                                            addSlice(sliceSize, pieElement, offset, sliceID, color);
                                                          } else {
                                                            addSlice(maxSize, pieElement, offset, sliceID, color);
                                                            iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
                                                          }
                                                        }
                                                        function createPie(dataElement, pieElement) {
                                                          var listData = [];
                                                          $(dataElement+" span").each(function() {
                                                            listData.push(Number($(this).html()));
                                                          });
                                                          var listTotal = 0;
                                                          for(var i=0; i<listData.length; i++) {
                                                            listTotal += listData[i];
                                                          }
                                                          var offset = 0;
                                                          var color = [
                                                            "cornflowerblue", 
                                                            "olivedrab", 
                                                            "orange", 
                                                            "tomato", 
                                                            "crimson", 
                                                            "purple", 
                                                            "turquoise", 
                                                            "forestgreen", 
                                                            "navy", 
                                                            "gray"
                                                          ];
                                                          for(var i=0; i<listData.length; i++) {
                                                            var size = sliceSize(listData[i], listTotal);
                                                            iterateSlices(size, pieElement, offset, i, 0, color[i]);
                                                            $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]);
                                                            offset += size;
                                                          }
                                                        }
                                                        createPie(".pieID.legend", ".pieID.pie");

                                                        </script>

                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                             <div class="card">
                                                <div class="card-header" id="headingSubTwo">
                                                   <h2 class="mb-0">
                                                      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseSubTwo" aria-expanded="true" aria-controls="collapseSubTwo">
                                                        <span class="mb-0">Question 2</span>
                                                      </button>
                                                   </h2>
                                                </div>
                                                <div id="collapseSubTwo" class="collapse" aria-labelledby="headingSubTwo" data-parent="#accordionChild">
                                                   <div class="card-body">
                                                      <div class="row">
                                                        <div class="col-md-6  pie-block">
                                                          <div class="pieID pie">
                                                            
                                                          </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                          <ul class="pieID legend">
                                                            <li>
                                                              <em><a href="">Answer 1</a></em>
                                                              <span>718</span>

                                                            </li>
                                                            <li>
                                                              <em><a href="">Answer 2</a></em>
                                                              <span>531</span>

                                                            </li>
                                                            <li>
                                                              <em><a href="">Answer 3</a></em>
                                                              <span>868</span>

                                                            </li>
                                                            <li>
                                                              <em><a href="">Answer 4</a></em>
                                                              <span>344</span>

                                                            </li>
                                                            <li>
                                                              <em><a href="">Answer 5</a></em>
                                                              <span>1145</span>

                                                            </li>
                                                          </ul>
                                                        </div>

                                                        <script type="text/javascript">
                                                          function sliceSize(dataNum, dataTotal) {
                                                          return (dataNum / dataTotal) * 360;
                                                        }
                                                        function addSlice(sliceSize, pieElement, offset, sliceID, color) {
                                                          $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
                                                          var offset = offset - 1;
                                                          var sizeRotation = -179 + sliceSize;
                                                          $("."+sliceID).css({
                                                            "transform": "rotate("+offset+"deg) translate3d(0,0,0)"
                                                          });
                                                          $("."+sliceID+" span").css({
                                                            "transform"       : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
                                                            "background-color": color
                                                          });
                                                        }
                                                        function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
                                                          var sliceID = "s"+dataCount+"-"+sliceCount;
                                                          var maxSize = 179;
                                                          if(sliceSize<=maxSize) {
                                                            addSlice(sliceSize, pieElement, offset, sliceID, color);
                                                          } else {
                                                            addSlice(maxSize, pieElement, offset, sliceID, color);
                                                            iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
                                                          }
                                                        }
                                                        function createPie(dataElement, pieElement) {
                                                          var listData = [];
                                                          $(dataElement+" span").each(function() {
                                                            listData.push(Number($(this).html()));
                                                          });
                                                          var listTotal = 0;
                                                          for(var i=0; i<listData.length; i++) {
                                                            listTotal += listData[i];
                                                          }
                                                          var offset = 0;
                                                          var color = [
                                                            "cornflowerblue", 
                                                            "olivedrab", 
                                                            "orange", 
                                                            "tomato", 
                                                            "crimson", 
                                                            "purple", 
                                                            "turquoise", 
                                                            "forestgreen", 
                                                            "navy", 
                                                            "gray"
                                                          ];
                                                          for(var i=0; i<listData.length; i++) {
                                                            var size = sliceSize(listData[i], listTotal);
                                                            iterateSlices(size, pieElement, offset, i, 0, color[i]);
                                                            $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]);
                                                            offset += size;
                                                          }
                                                        }
                                                        createPie(".pieID.legend", ".pieID.pie");

                                                        </script>

                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                            </div>
                                          </div> 

                                        </div>


                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                  </div>
                </div>  
          </div>
        </div>
      </div>
   </div>
</div>

@endsection