@extends('layouts.main')
@section('breadcrumb')
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <h4 class="page-title">GLESEC Cybersecurity News</h4>
                <ol class="breadcrumb float-right">
                  <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="/news">GLESEC Cybersecurity News</a></li>
                    <li class="breadcrumb-item active">{{$news->title}}</li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
@endsection
@section('content')

  <div class="row">
      <div class="col-12">
          <div class="card-box bg-card news-top-content boxed_style">
              <div class="row">
                  <div class="col-12">
                    <h2 class="title_news">
                      {{$news->title}}
                      @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::CRP))
                        @if(in_array($news->id,$crn_list))
                          <a href="/news?crn=Y" title="News selected for reporting, click to filter all selected news" class="top_checked"><i class="fa fa-check-square-o" aria-hidden="true"></i></a>
                        @endif
                      @endif
                  </h2>
                    @if($news->html_text)
                      {!!$news->html_text!!}
                    @else
                        <p>{!!$news->description!!}</p>
                    @endif
                    <div class="bottom_link m-t-20">
                      @if($news->source_type)
                        <b>{{\App\Tickler::$id_sources[$news->source_type]}}</b>
                      @else
                        <b>GLESEC</b>
                      @endif
                    </div>
                    <div class="row">
                      <div class="col-sm-12">
                          <hr>
                      </div>
                    </div>

                    <div class="col-sm-12 m-t-5">
                      <div class="row">
                        <strong>Categories: {!!\App\Models\News\NewsCategoryRelation::getCategoryNames($news->id)!!}</strong>
                      </div>
                    </div>
                    <div class="col-sm-12 m-t-10">
                      <div class="row">
                        <strong>Industries: </strong> {!!\App\Models\News\NewsIndustryRelation::getIndustryNames($news->id)!!}
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-12">
                          <hr>
                      </div>
                    </div>
                    <div class="bottom_link m-t-10 form-group">
                      <div class="centered-buttons">
                        <a href="#" class="btn btn-warning pull-left make_cases">Does this impact my organization?</a>

                        @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::CRP))
                          @if(!in_array($news->id,$crn_list))
                          <a href="/news/report/{{$news->id}}" class="btn btn-success pull-left add-to-custom-r"><i class="fa fa-square-o" aria-hidden="true"></i> Add to Custom Report</a>
                          @else
                            <a href="/news/report/{{$news->id}}" class="btn btn-primary pull-left add-to-custom-r"><i class="fa fa-check-square-o" aria-hidden="true"></i> Remove from Custom Report</a>
                          @endif
                        @endif
                      </div>
                      <a href="#" class="btn btn-new pull-left back_i">Back</a>
                    </div>
                  </div>
          </div>
      </div>

  </div>


  <div id="modal-impact" class="modal-demo">
        <div class="custom-modal-text" style="overflow:hidden;position:relative;">
          <button type="button" class="close" onclick="Custombox.modal.close();">
              <span>×</span><span class="sr-only">Close</span>
          </button>
          <p class="text-center form-group m-t-20">You are going to send a case to GLESEC for Preliminary Investigation<br/> of how the news impacts your organization.<br/> Do you want to proceed?</p>

          <div class="form-group tabled_form">
            <a href="#" class="btn btn-danger"  onclick="Custombox.modal.close();">Cancel</a>
              <a href="/news/cases/{{$news->id}}" class="btn btn-primary pull-left">Yes, proceed</a>

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

  <style type="text/css">
    .heading-h3{
      font-size: 18px;
      font-weight: bold;
    }
    .tabled_form{
      display: table;
      margin: 0px auto;
      float:none;
    }
    .tabled_form a{
      margin-left: 3px;
      margin-right: 3px;
    }
    .badge{
      display: inline-block;
      margin-left: 7px;
    }
    .bottom_link *{
      font-size: 14px;
      line-height: 25px;
    }
    .top_checked{
      color: #00b19d !important;
      position: absolute;
      top: -8px;
      right: 7px;
      font-size: 22px;
    }
    .boxed_style{
      position: relative;
    }
    .news-top-content h2 {
      font-size: 28px;
      color: #fff;
    }
    .bottom_link{
      position: relative;
    }
    .news-top-content .bottom_link b{
      font-weight: bold !important;
      position: relative;
      top: 7px;
    } 
    .make_cases{
      margin-right: 10px;
    }
    .centered-buttons{
      position: absolute;
      left: 50%;
      top: 0;

      transform: translateX(-50%);
    }
    .news-top-content h2.title_news{
          margin-bottom: 20px;
          padding-top: 15px;
          font-size: 2rem;
    }
    .news-top-content{
      float: none;
      max-width: 1250px;
      width: 100%;
      padding:20px;
      /* margin: 0px auto; */
    }
    .news-top-content figcaption{
      text-align: center;
      padding-top: 5px;
      width: 100%;
      float:left;
    }
     img[src=""] {
       display: none !important;
    }
    span[itemprop="description"]{
      display: none !important;
    }
    span[itemprop="name"]{
      display: none !important;
    } 
    .news-top-content img[itemprop="thumbnailUrl"]{
      display: none !important;
    }
        .news-top-content code{
                background-color: #3d4853;
        color: #fff;
        padding: 3px !important;
        }
        figure{
          width: 100%;
          float: left;
        }
        figure>span{
          width: 100%;
          float: left;
        }
      .news-top-content pre {
          background-color: #3d4853;
          color: #98a6ad;
          padding: 15px !important;
          display: block;
          margin-top: 5px;
          width: 100%;
          margin-bottom: 3px;
          white-space: pre-line;
          overflow-x: hidden;
      }
    .news-top-content b{
        font-weight: normal !important;
    }
    .news-top-content figcaption{
        padding-bottom: 6px;
    }
    .news-top-content table{
       float: none;
        margin: 0px auto;
    }

    .news-top-content img{
      max-width: 600px;
      display: table;
      float:none; 
      margin-bottom: 20px;
      position: relative;
      top:10px;
      border-radius: 6px;
    }
    .news-top-content svg{
      max-width: 200px;
      display: table;
      float:none;
      margin: 0px auto;
    }
  </style>
@endsection

@section('scripts')

<script type="text/javascript">
 $('.back_i').attr('href',document.referrer);
 $('.add-to-custom-r').attr('href',$('.add-to-custom-r').attr('href')+'?back='+document.referrer);

 var modal_impact = new Custombox.modal({
                             content: {
                               effect: 'fadein',
                               target: '#modal-impact'
                             }
                           });

   $(document).on('click','.make_cases',function(e){
     e.preventDefault();
     modal_impact.open();
   });
</script>
@endsection