@extends('layouts.app')
@section('content')
<div class="container mb-5">
    <div class="row my-3">
      <div class="col-auto">
        <div class="d-flex justify-content-start">
          @if($evaluation->leader_name !== null)
            <p><span class="text-muted">Leader Name:</span> {{$evaluation->leader_name}}</p>
          @endif
        </div>
      </div>
      <div class="col-auto ms-auto">
          <div class=" d-flex justify-content-end">
            <a class="text-primary" href="{{url('report/compaire-evaluation?evaluation='.\App\Helpers\Helper::encriptId($evaluation_id))}}">Compare</a>
          </div>
      </div>
      <div class="col-auto">
        <div class=" d-flex justify-content-end">
          <a target="_blank" request_id="{{ \App\Helpers\Helper::encriptId($evaluation_id) }}" class="text-primary download_request_btn cursor-pointer" ><i class="fa fa-download"></i> Download</a>
        </div>
    </div>
    </div>
  
    
    @include('report/reportview') 
    <div class="row mt-4">
      <div class="d-grid gap-2 col-2 ms-auto"><a href="{{ url()->previous() }}" class="btn btn-secondary btn-rounded" type="submit">Back </a></div>
    </div>
    <br><br>
</div>
@endsection

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

<script>
  var APP_URL  = "{{ url('')}}";
  var leader = "{{$evaluation->leader_name}}";
  var evaluation_id = "{{$evaluation->id}}";
  $(document).ready(function() {

    $(document).on('click', '.download_request_btn', function(e){
      $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Downloading...')
        var request_id = $(this).attr('request_id');
        console.log(request_id);
        var chart1 = localStorage.getItem("radar_chart1");
        var chart2 = localStorage.getItem("radar_chart2");
        var chart3 = localStorage.getItem("radar_chart3");
        var chart4 = localStorage.getItem("radar_chart4");
        $.ajaxSetup({
               headers: {
                   'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
               }
        });   
        e.preventDefault();
        $.ajax({
            type: "post",
            url: APP_URL + "/report/download-report",
            data: {request_id: request_id, evaluation_id:evaluation_id, chart1: chart1, chart2: chart2, chart3: chart3, chart4: chart4 },
            xhrFields: {
                responseType: 'blob'
            },
            success: function(response){
            var blob = new Blob([response]);
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
        
            link.download = leader+Date.now()+"-report.pdf";
            link.click();
            location.reload();
            },
            error: function(blob){
              console.log(blob);
            }
        });
    });

    $(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>