@extends('layouts.admin')

@section('content')
<section class="py-4">
    <div class="container-fluid px-lg-4">

        <h4 class="fw-bold mb-3">Halaman Blog Artikel</h4>

        <a href="{{ route('blog.create') }}" class="btn btn-primary mb-3">
            Buat Artikel
        </a>

        @if (session()->has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>Informasi :</strong> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="table-responsive">
            <table class="table table-bordered align-middle">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Image</th>
                        <th>Judul</th>
                        <th width="150">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($artikels as $no => $artikel)
                        <tr>
                            <td>{{ $no + 1 }}</td>
                            <td>
                                <img src="{{ asset('storage/artikel/' . $artikel->image) }}"
                                     class="img-fluid rounded"
                                     style="max-height:90px">
                            </td>
                            <td>{{ $artikel->judul }}</td>
                            <td>
                                <a href="{{ route('blog.edit', $artikel->id) }}"
                                   class="btn btn-warning btn-sm mb-1 w-100">
                                   Edit
                                </a>

                                <form action="{{ route('blog.destroy', $artikel->id) }}" method="POST">
                                    @csrf
                                    <button onclick="return confirm('Apakah yakin akan dihapus ?')"
                                            class="btn btn-danger btn-sm w-100">
                                        Hapus
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

    </div>
</section>
@endsection