@extends('layouts.app_discussion')

@section('content')


<div class="container">
    <div class="row">
        <div class="col-md-3">
            @include('includes/dashboard/left_menu')
        </div>
        <div class="col-md-9 h-100">
            <div class="col-lg-12">
                <div class="forum-title">
                    {{-- <div class="pull-right forum-desc"></div>
                    <h3 class="text-primary">Report</h3> --}}
                  
                    <div class="row">
                        <div class="col col-md-12 d-flex justify-content-center justify-content-md-end">
                            <div class="d-grid gap-4 px-4"><button class="btn btn-secondary btn-rounded"> <a href="{{url('report/createPDF')}}" target="blank"  id="downloadPdf" class="text-secondary fw-bold"><i class="fa fa-download"></i> Download Report</a></button></div>
                            @if($complete_status == 0)
                              <div class="d-grid gap-4"><button class="btn btn-primary btn-rounded" id="btn-new-assesment">Create New Assesment </button></div>
                            @endif
                        </div>
                        <div class="col">
                            @foreach( $evaluation_list as $key=> $list)
                              @php 
                               $is_complete = '';
                              if($list->status_id == 2) {
                                  $is_complete = 'Completed';
                              } @endphp
                              {{ $key+1 }} . <a href="{{url('/report?evaluation='.\App\Helpers\Helper::encriptId($list->evaluation_id))}}" class="text-secondary fw-bold"> {{ \App\Helpers\Helper::formatDateTime($list->date_time_started) }} {{  $is_complete }}</a><br>
                            @endforeach
                        </div>
                    </div> 
                </div>
                @include('report/reportview')
            </div>                   
          </div>
        </div>
@endsection

<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>


<script>
  var APP_URL  = "{{ url('')}}";
  $(document).ready(function() {

    $(document).on("click", "#btn-new-assesment", function (e) {
      $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Create New Assesment')
       $.ajaxSetup({
               headers: {
                   'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
               }
           });   
           e.preventDefault();
           $.ajax({
               data:{},
               url: APP_URL + "/evaluation/storeEvaluationByMember",
               type: "POST",
               dataType:"json",
               beforeSend: function(){},
               success: function(result) {
                   window.location.href=APP_URL + "/focus-area";
               },
               error:function (response){},
               complete:function(data){}
           });
   });
  });
</script>
 <style>
     .dashboard-pg .card{
        background-image: url('{{url('/assets/images/Ellipse 156.png')}}');
         background-color: #f0f0f0;
         background-repeat: no-repeat;
         background-position-x: center;
         margin-bottom: 20px;
         padding: 10px;
     }

.white-bg {
    background-color: #ffffff;
}
.page-heading {
    border-top: 0;
    padding: 0 10px 20px 10px;
}

.forum-post-container .media {
  margin: 10px 10px 10px 10px;
  padding: 20px 10px 20px 10px;
  border-bottom: 1px solid #f1f1f1;
}
.forum-avatar {
  float: left;
  margin-right: 20px;
  text-align: center;
  width: 110px;
}
.forum-avatar .img-circle {
  height: 48px;
  width: 48px;
}
.author-info {
  color: #676a6c;
  font-size: 11px;
  margin-top: 5px;
  text-align: center;
}
.forum-post-info {
  padding: 9px 12px 6px 12px;
  background: #f9f9f9;
  border: 1px solid #f1f1f1;
}
.media-body > .media {
  background: #f9f9f9;
  border-radius: 3px;
  border: 1px solid #f1f1f1;
}
.forum-post-container .media-body .photos {
  margin: 10px 0;
}
.forum-photo {
  max-width: 140px;
  border-radius: 3px;
}
.media-body > .media .forum-avatar {
  width: 70px;
  margin-right: 10px;
}
.media-body > .media .forum-avatar .img-circle {
  height: 38px;
  width: 38px;
}
.mid-icon {
  font-size: 66px;
}
.forum-item {
  margin: 10px 0;
  padding: 10px 0 20px;
  border-bottom: 1px solid #f1f1f1;
}
.views-number {
  font-size: 24px;
  line-height: 18px;
  font-weight: 400;
}
.forum-container,
.forum-post-container {
  /* padding: 30px !important; */
}
.forum-item small {
  color: #999;
}
.forum-item .forum-sub-title {
  color: #999;
  margin-left: 50px;
}
.forum-title {
  margin: 15px 0 15px 0;
}
.forum-info {
  text-align: center;
}
.forum-desc {
  color: #999;
}
.forum-icon {
  float: left;
  width: 30px;
  margin-right: 20px;
  text-align: center;
}
a.forum-item-title {
  color: inherit;
  display: block;
  font-size: 18px;
  font-weight: 600;
}
a.forum-item-title:hover {
  color: inherit;
}
.forum-icon .fa {
  font-size: 30px;
  margin-top: 8px;
  color: #9b9b9b;
}
.forum-item.active .fa {
  color: #0B9D9E;
}
.forum-item.active a.forum-item-title {
  color: #0B9D9E;
}
.forum-item.active h6 {
  color: #616161;
  font-weight: bold
}
@media (max-width: 992px) {
  .forum-info {
    margin: 15px 0 10px 0;
    /* Comment this is you want to show forum info in small devices */
    display: none;
  }
  .forum-desc {
    float: none !important;
  }
}





.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox.collapsed .ibox-content {
  display: none;
}
.ibox.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.ibox.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}
.ibox:after,
.ibox:before {
  display: table;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 3px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 14px 15px 7px;
  min-height: 48px;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  /* padding: 15px 20px 20px 20px; */
  border-color: #e7eaec;
  border-image: none;
  border-width: 1px 0;
}
.ibox-footer {
  color: inherit;
  border-top: 1px solid #e7eaec;
  font-size: 90%;
  background: #ffffff;
  padding: 10px 15px;
}

.message-input {
    height: 90px !important;
}
.form-control, .single-line {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    font-size: 14px;
}
.text-navy {
    color: #0B9D9E;
}
.mid-icon {
    font-size: 66px !important;
}
.m-b-sm {
    margin-bottom: 10px;
}
</style>