@extends('layouts.admin.admin')<style>
    .element {
   display: block;
   position: absolute;
   top: 75px;
   border-radius: 20px 20px 20px 20px;
   right:1px;
   top: -10px\0/; /* ie8 and 9 */
   right:-10px\0/; /* ie8 and 9 */
   -ms-transform:rotate(40deg); /* IE9 */
   -moz-transform: rotate(40deg);  /* FF3.5/3.6 */
   -o-transform: rotate(40deg);  /* Opera 10.5 */
   -webkit-transform: rotate(40deg);  /* Saf3.1+ */
   transform: rotate(40deg);  /* Newer browsers */
   /*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); *//* IE6,IE7, but produces nasty results, so I disabled it */
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

  :root .element { top: 10px\0/IE9; }  /* back to right value in IE9 */

.image-label{
 width:80px;
 height: 15px;
 display:flex;
 justify-content:center;
 align-items:center;
 /* border-radius:100%; */
 background:#FFCC33;
 color: black;
 font-size:10px;
 position:absolute;
 /* transform:translate(50%,-50%); */
}
</style>
@section('content')

<div class="container-fluid">
<hr />
     <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">

    <div class="row">

        <div class="col-sm-8 col-lg-8 ">
            <div class=" p-3 ">
                 <div class="d-flex justify-content-center">
                  <h5>All News and Blogs</h5>
                </div>
            </div>
        </div>
        <div class="col-sm-2 col-lg-2">
            <div class=" p-3">
                <button type="button" id="delete_action" class="btn btn-danger" onclick="deleteNb()" disabled style="float:right"><b><i class="fa fa-trash fa-lg fa-fw"></i></b> Delete Post</button>

            </div>
        </div>
        <div class="col-sm-2 col-lg-2">
            <div class=" p-3">
                <a href="/nb_new_post" class="btn btn-primary btn-block"><i class="fa fa-plus fa-lg fa-fw"></i>Create New Post</b></a>
            </div>
        </div>
    </div>
    <hr />
    <div class="row" id="news_and_blogs">
        @forelse ($nb_information as $nb_info)
        <div class="col-sm-3 col-lg-3">
            {{-- <div class="card p-3">
                <div class="row" style="margin-bottom:10px; ">
                    <div class="col-sm-6 col-lg-6 col-md-6 border">
                        <a href="/nb-edit/{{$nb_info->id}}" class="btn btn-red text-blue"><b><i class="fa fa-edit fa-lg fa-fw"></i>Edit</b></a>
                        {{-- <button type="button" class="btn btn-red text-blue" onclick="editNb('{{json_encode($nb_info->img_path)}}');"><b><i class="fa fa-edit fa-lg fa-fw"></i>Edit</b></button> --}}
                        {{-- <button type="button"id="delete_action" class="btn btn-red text-red" onclick="deleteNb('{{json_encode($nb_info->id)}}')"><b><i class="fa fa-trash fa-lg fa-fw"></i>Delete</b></button> --}}
                    {{-- </div>

                 <div class="col-sm-6 col-lg-6 col-md-6 border d-flex content-justify-end">
                        <div class="form-check form-check-inline" style="float: right;">
                            <input class="form-check-input" type="checkbox" style="transform : scale(2);" onchange="selVideos(this,'{{$nb_info->id}}');" >
                            <label class="form-check-label" for="inlineCheckbox1"></label>
                        </div>

                </div>
                  </div>

                  <div class="tg-prohistory tg-haslayout">
                            <article class="tg-post">
                                <figure class="tg-postimg border">
                                        <img src="{{$nb_info->img_path}}" alt="{{$nb_info->type}}.img" id="img_path_">
                                      <div  style="background-color: rgba(126, 124, 124, 0.205); padding:5px; font-size: 11px;">
                                       <span>posted on {{$nb_info->created_at->format('d M Y H:i:s')}}</span>
                                      </div>
                                </figure>
                                 <div class="border-bottom tg-description" style="font-size: 15px;">
                                    <p id="" >
                                        {{ Illuminate\Support\Str::limit($nb_info->title, 20, $end='...') }}

                                   </p>
                                </div>
                                {{--<div class="tg-description">
                                    <p id="sub_title_">{{$nb_info->sub_title}}</p>
                                </div> --}}
                                {{-- <div style="display: none">
                                    <span id="content_">{!!$nb_info->content!!}</span>
                                </div>
                            </article>
                </div>


            </div> --}}



            <div class="card text-">
                <div class="card-header text-muted">
                                <a href="/nb-edit/{{$nb_info->id}}" class="btn btn-red text-blue"><b><i class="fa fa-edit fa-lg fa-fw"></i>Edit</b></a>
                        <div class="ml-auto">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" style="transform : scale(2);" onchange="selNews(this,'{{$nb_info->id}}');" >
                                <label class="form-check-label" for="inlineCheckbox1"></label>
                              </div>
                        </div>
                </div>
                   <div class="card-body">
                    <a href="javascript:void(0)" class="mb-3">
                        <div class="">
                            <img src="{{$nb_info->img_path}}" alt="{{$nb_info->type}}.img" id="img_path_">
                        </div>
                        </a>
                        <hr />
                        <span>posted on {{$nb_info->created_at->format('d M Y H:i:s')}}</span>
                    </div>
                  <div class="card-footer text-muted">
                   <div class="d-flex align-items-center px-2">
                    <div>
                        <div> <p id="" class="card-user_occupation d-block text-muted">
                            {{ Illuminate\Support\Str::limit($nb_info->title, 20, $end='...') }}

                       </p></div>
                    </div>
                    <div class="ml-auto text-muted">

                    </div>
                </div>
               </div>
              </div>
        </div>
        @empty
        <div class="col-lg-12 col-sm-12 col-md-12" style="text-align: center">
            <div style="">
                <span>This section is Empty</span>
            </div>
        </div>
        @endforelse
     </div>
     {{-- <div class="modal fade" id="Nb_Modal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" style="float: left;" id="modal_title"></h4>
            </div>
            <div class="modal-body">
            <div class="card bg-none b-none">
                                <div class="card-body pt-0">
                                    <div class="table-responsive">
                                        <input type="text" name="banner_no" id="banner_no" style="display: none;">
                                        <div id="image_preview">

                                        </div>
                                        <span>File Name:<span><b id="file_name"></b></span></span><br />
                                        <span>File Size:<span><b id="file_size"></b></span></span>
                                        <div id="progress_div">
                                        <label class="d-block">Progress <span class="float-right" id="percent">0%</span></label>
                    <div class="progress progress-sm">
                        <div class="progress-bar" id="progress_bar" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                        </div>
                    </div>
                </div>
                                    </div></div></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary done" onclick="location.reload();">Done</button>
                <button type="button" class="btn btn-primary operation" onclick="$('.operation').hide();$('.done').show();$('#progress_div').show();uploadNow();">Start Upload</button>
              <button type="button" class="btn btn-default operation" data-dismiss="modal">Cancel</button>
            </div>
          </div>

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


@endsection