@extends('layout.adminapp')
@section('page-css')

@endsection
@section('page-content')

      <section class="content">
        <div class="heading-title text-center mt-5">
            <h4>CONFLICT OF INTEREST(COI)</h4>
            <hr class="text-center w-25">
        </div>
        <div class="content-inner content-docs">
          <div class="row">
            <div class="col-lg">
              <div class="card bg-tertiary">
                <div class="card-body">
                  <div class="row">
                    <div class="col-lg">
                      <img src="{{ asset('images/1.png') }}" alt="{{ asset('images/one.png') }}" class="img-fluid" width="90">

                    </div>
                    <div class="col-lg text-center">
                      <h5 class="text-white">Total <br> Users</h5> <br>
                      <h3 class="text-center text-white">{{ $users }}</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg">
            <a href="{!! route('get_not_started') !!}">
              <div class="card" style="background-color:#e1cd56;">
                <div class="card-body">
                  <div class="row">
                    <div class="col-lg">
                      <img src="{{ asset('images/2.png') }}" alt="{{ asset('images/two.png') }}" class="img-fluid" width="90">

                    </div>
                    <div class="col-lg text-center">
                      <h5 class="text-white">Total <br> Pending</h5> <br>
                      <h3 class="text-center text-white">{{ $pending }}</h3>
                    </div>
                  </div>
                </div>
              </div></a>
            </div>

            <div class="col-lg">
              <a href="{!! route('totalstarted') !!}">
                <div class="card bg-primary">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-lg">
                        <img src="{{ asset('images/3.png') }}" alt="{{ asset('images/two.png') }}" class="img-fluid" width="90">

                      </div>
                      <div class="col-lg text-center">
                        <h5 class="text-white">Total <br> Started</h5> <br>
                        <h3 class="text-center text-white">{{ $coi }}</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-lg">
              <a href="{!! route('getcompleted') !!}">
                <div class="card bg-success">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-lg">
                        <img src="{{ asset('images/4.png') }}" alt="{{ asset('images/one.png') }}" class="img-fluid" width="90">
                      </div>
                      <div class="col-lg text-center ">
                        <h5 class="text-white">Total<br> Completed</h5> <br>
                        <h3 class="text-center text-white">{{ $completed }}</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </div>
{{--
          <div class="row" style="margin-top:10%">
            <div style="width:100% ">
              <div id="chart1"></div>


</div>
          </div> --}}
        </div>

        <div class="heading-title text-center mt-3">
            <h4>CODE OF ETHICS(COE)</h4>
            <hr class="text-center w-25">
        </div>

        <div class="content-inner content-docs">
            <div class="row">
              <div class="col-lg">
                <div class="card bg-tertiary">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-lg">
                        <img src="{{ asset('images/1.png') }}" alt="{{ asset('images/one.png') }}" class="img-fluid" width="90">

                      </div>
                      <div class="col-lg text-center">
                        <h5 class="text-white">Total <br> Users</h5> <br>
                        <h3 class="text-center text-white">{{ $userscoe }}</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-lg">
              <a href="{!! route('getcoepending') !!}">
                <div class="card" style="background-color:#e1cd56;">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-lg">
                        <img src="{{ asset('images/2.png') }}" alt="{{ asset('images/two.png') }}" class="img-fluid" width="90">

                      </div>
                      <div class="col-lg text-center">
                        <h5 class="text-white">Total <br> Pending</h5> <br>
                        <h3 class="text-center text-white">{{ $pendingcoe }}</h3>
                      </div>
                    </div>
                  </div>
                </div></a>
              </div>

              <div class="col-lg">
                <a href="{!! route('getcoecompleted') !!}">
                  <div class="card bg-success">
                    <div class="card-body">
                      <div class="row">
                        <div class="col-lg">
                          <img src="{{ asset('images/4.png') }}" alt="{{ asset('images/one.png') }}" class="img-fluid" width="90">
                        </div>
                        <div class="col-lg text-center ">
                          <h5 class="text-white">Total<br> Completed</h5> <br>
                          <h3 class="text-center text-white">{{ $completedcoe }}</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </div>

          </div>

      </section>
@endsection

@section('page-js')
  {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> --}}
<script src="{!! asset('js/apexcharts.min.js') !!}" charset="utf-8"></script>
  {{-- @if($chart1) --}}
  {{-- {!! $chart->script() !!} --}}
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

  {{-- @endif --}}

  <script type="text/javascript">
  $(document).ready(function(){
    // setTimeout(function(){
    //        location.reload();
    //    }, 10000);
       $(function () {
           chart1();
       function chart1() {
           var options = {
               chart: {
                   height: 530,
                   type: "bar",
                   shadow: {
                       enabled: true,
                       color: "#000",
                       top: 18,
                       left: 7,
                       blur: 10,
                       opacity: 1
                   },
                   toolbar: {
                       show: false
                   }
               },
               plotOptions: {
       bar: {
           distributed: true, // this line is mandatory
           // horizontal: true,
           // barHeight: '85%',
       },
   },
               colors: ["rgba(25, 44, 63, 1.0)", "rgba(255, 205, 86, 1.0)","rgba(51,105,232, 1.0)","rgba(0,199,89, 1.0)",],
               dataLabels: {
                   enabled: true
               },
               stroke: {
                   curve: "smooth"
               },
               series: [{
                   // name: "High - 2019",
                   data: [{{ $users }},{{ $pending }},{{ $coi }},{{ $completed }} ]
               },

               ],
               grid: {
                   borderColor: "#e7e7e7",
                   row: {
                       colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
                       opacity: 0.0
                   }
               },
               markers: {
                   size: 4
               },
               xaxis: {
                   categories: ["Total Users", "Total Pending", "Total Started","Total Completed"],

                   labels: {
                       style: {
                           colors: "#9aa0ac"
                       }
                   }
               },
               yaxis: {
                   title: {
                       text: ""
                   },
                   labels: {
                       style: {
                           color: "#9aa0ac"
                       }
                   },
                   min: 0,
                   max: 4000
               },
               legend: {
                   position: "top",
                   horizontalAlign: "right",
                   floating: true,
                   offsetY: -25,
                   offsetX: -5
               }
           };

           var chart = new ApexCharts(document.querySelector("#chart1"), options);

           chart.render();
       }
       }
       );

     });

     </script>
@endsection