@extends('backend.layouts.app')

@section('content')
<div class="p-3">
    <div class="p-2 header-title-container">
        <span class="mb-0 mx-2">Blogs</span>
    </div>
    <button type="button" class="btn m-2" style="width: 10%; background-color: #fa6f10;"><a href="{{ url('admin/blogs/create') }}" class="text-decoration-none text-white">Add Blog</a></button>
</div>

<div class="p-3">
    <div class="card-body">
        <table id="myTable" class="table table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Title</th>
                    <th>Date</th>
                    <th>Author</th>
                    <th>Content</th>
                    <th>Tag</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                @foreach ($blogs as $items)
                <tr>
                    <td class="w-25"><img src="{{ asset('uploads/blogs/' . $items->image) }}" height="80" alt=""></td>
                    <td>{{ $items->title }}</td>
                    <td>{{ $items->date }}</td>
                    <td>{{ $items->author }}</td>
                    <td>{{ Str::limit(html_entity_decode(strip_tags($items->content)), 80, '...') }}</td>
                    <td>{{ $items->tag }}</td>
                    <td>
                        <a href="{{ url('admin/blogs/' . $items->id) }}/edit">
                            <button class="btn btn-primary btn-block mb-2 ">Edit</button>
                        </a>
                        <a href="{{ url('admin/blogs/' . $items->id) }}/archive">
                            <button class="btn btn-warning btn-block mb-2 ">Archive</button>
                        </a>
                        <form method="POST" action="{{ url('admin/blogs/' . $items->id) }}">@csrf @method('DELETE')
                            <button class="btn btn-danger btn-block mb-2 ">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<style>
    select {
        color: #fa6f10;
        font-weight: bold;
    }

    option {
        font-weight: bold;
    }

    input {
        color: #fa6f10;
        font-weight: bold;
    }

    .paginate_button {
        color: #fa6f10 !important;
        font-weight: bold !important;
    }
</style>
@endsection