@extends('admin.app') {{-- change layout if needed --}}

@section('content')
<div class="container-fluid px-3 mt-5">

    <h2 class="mb-3">Blogs</h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <a href="{{ route('blogs.create') }}" class="btn btn-primary mb-3">
        + Add Blog
    </a>

    {{-- Responsive Table Wrapper --}}
    <div class="table-responsive">
        <table class="table table-bordered align-middle" id="blogsTable">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Status</th>
                    <th width="180">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($blogs as $blog)
                <tr>
                    <td>{{ $loop->iteration }}</td>

                    <td style="min-width:220px;">
                        {{ $blog->title }}
                    </td>

                    <td style="min-width:150px;">
                        {{ $blog->category->name ?? '-' }}
                    </td>

                    <td>
                        <span class="badge {{ $blog->status == 'published' ? 'bg-success' : 'bg-secondary' }}">
                            {{ ucfirst($blog->status) }}
                        </span>
                    </td>

                    <td class="text-nowrap">
        
                        <a href="{{ route('blogs.edit', $blog->id) }}" class="btn btn-sm btn-warning mb-1">
                            Edit
                        </a>

                        <form action="{{ route('blogs.destroy', $blog->id) }}"
                              method="POST"
                              class="d-inline"
                              onsubmit="return confirm('Are you sure?')">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm btn-danger mb-1">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center">No blogs found</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

</div>
@endsection

@push('styles')
<style>
/* Mobile table polish */
@media (max-width: 768px) {
    table th,
    table td {
        font-size: 14px;
    }
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function () {
    $('#blogsTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        scrollX: true,
        autoWidth: false
    });
});
</script>
@endpush