@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">
    <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">


    <div class="row" id="news_and_blogs">
        <div id="tableHover" class="col-lg-12 col-12 layout-spacing">
            <div class="statbox widget box box-shadow">
                <div class="widget-header">
                    <div class="row">
                        <div class="col-sm-10 col-lg-10">
                            <div class=" p-3 ">
                                <div class="d-flex justify-content-center">
                                    <h5><i class="fa fa-newspaper fa-fw"></i> 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-sm btn-danger" onclick="deleteNb()" disabled style="float:"><b><i class="fa fa-trash fa-lg fa-fw"></i></b></button> -->
                                <a href="/nb_new_post" class="btn btn-sm btn-primary" style="float:right"><i
                                        class="fa fa-plus fa-lg fa-fw"></i> New</b></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area">
                    <div class="table-responsive">
                        @include('layouts.admin.alerts')

                        @if (count($nb_information)>0)
                        <table class="table table-bordered table-hover mb-4">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>Type</th>
                                    <th>Image</th>
                                    <th colspan="2">Action</th>

                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($nb_information as $key => $item)
                                <tr>
                                    <!-- <td>
                                        <input class="form-check-input" type="checkbox" style="transform : scale(2);"
                                            onchange="selNews(this,'{{$item->id}}');">
                                        <label class="form-check-label" for="inlineCheckbox1"></label>
                                    </td> -->
                                    <td>{{ $key+1 }}</td>

                                    <td>{{ Illuminate\Support\Str::limit($item->title, 30, $end='...') }}</td>
                                    <td><span style="text-transform: capitalize;">{{ $item->type }}</td>
                                    <td><img style="max-width: 200px;max-height:200px" src="{{$item->img_path}}"
                                            alt="{{$item->type}}.img" id="img_path_">
                                    </td>
                                    <td>
                                        <a href="{{ route('news_blogs_edit',$item->id) }}"
                                            class="btn btn-outline-warning btn-sm"><b><i
                                                    class="fa fa-edit fa-lg fa-fw"></i></b> Edit</a>
                                    </td>
                                    <td>
                                    <form action="{{ route('news_blog.delete',$item->id) }}" id="delete-entry_{{$item->id}}" method="post" style="">
                                            @csrf                                           
                                            
                                            <button type="submit" class="btn btn-outline-danger btn-sm" onclick="deleteEntry(event,'delete-entry_{{$item->id}}');"><b><i
                                                        class="fa fa-trash fa-lg fa-fw" ></i></b> Delete</button>
                                     </form> 

                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @else
                        <table class="table table-bordered table-hover mb-4">
                            <tbody>
                                <tr>
                                    <td colspan="5"> No News/Blog Added Yet</td>
                                </tr>
                            </tbody>
                        </table>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection