@extends("backend.layouts.app")

@section("title")
    {{ __($module_action) }} {{ __($module_title) }}
@endsection

@section("breadcrumbs")
    <x-backend.breadcrumbs>
        <x-backend.breadcrumb-item route='{{ route("backend.$module_name.index") }}' icon="{{ $module_icon }}">
            {{ __($module_title) }}
        </x-backend.breadcrumb-item>

        <x-backend.breadcrumb-item type="active">{{ __($module_action) }}</x-backend.breadcrumb-item>
    </x-backend.breadcrumbs>
@endsection

@section("content")
    <x-backend.layouts.create>
        <x-backend.section-header>
            <i class="{{ $module_icon }}"></i>
            {{ __($module_title) }}
            <small class="text-muted">{{ __($module_action) }}</small>

            <x-slot name="toolbar">
                <x-backend.buttons.create route='{{ route("backend.$module_name.create") }}' :small="true" />
            </x-slot>
        </x-backend.section-header>

        <!-- Filter Section -->
        <div class="card mb-4">
            <div class="card-body">
                <form action="{{ route('backend.blogs.index') }}" method="GET" class="row g-3">
                    <div class="col-md-3">
                        <label for="category_id" class="form-label">Filter by Category</label>
                        <select class="form-select" id="category_id" name="category_id">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category }}" {{ request('category') == $category ? 'selected' : '' }}>
                                    {{ $category }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="status" class="form-label">Filter by Status</label>
                        <select class="form-select" id="status" name="status">
                            <option value="">All Status</option>
                            <option value="published" {{ request('status') == 'published' ? 'selected' : '' }}>Published</option>
                            <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                            <option value="archived" {{ request('status') == 'archived' ? 'selected' : '' }}>Archived</option>
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                        <a href="{{ route('backend.blogs.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-sync"></i> Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <div class="row mt-4">
            <!-- Blog Table -->
            <div class="card shadow">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped align-middle text-center mb-0">
                            <thead>
                                <tr>
                                    <th>Blog ID</th>
                                    <th>Title</th>
                                    <!--<th>Author</th>-->
                                    <th>Category</th>
                                    <th>Date Published</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(count($$module_name) > 0)
                                    @foreach($$module_name as $key => $blog)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td class="text-start">
                                                <div class="d-flex align-items-center">
                                                    @if($blog->featured_image)
                                                        <img src="{{ asset($blog->featured_image) }}" alt="{{ $blog->title }}" 
                                                            class="img-thumbnail me-2" style="width: 50px; height: 50px; object-fit: cover;">
                                                    @else
                                                        <div class="bg-light d-flex align-items-center justify-content-center me-2" 
                                                            style="width: 50px; height: 50px; border-radius: 3px;">
                                                            <i class="fas fa-image text-secondary"></i>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <a href="{{ route('backend.blogs.edit', $blog->id) }}" class="fw-bold text-dark">
                                                            {{ Str::limit($blog->title, 40) }}
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                            <!--<td>{{ $blog->user->name ?? 'Unknown' }}</td>-->
                                            <td>{{ $blog->category ?? 'Uncategorized' }}</td>
                                            <td>
                                                @if($blog->published_at)
                                                    {{ $blog->published_at->format('M d, Y') }}
                                                @else
                                                    <span class="text-muted">--</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($blog->status == 'published')
                                                    <span class="badge text-bg-success">Published</span>
                                                @elseif($blog->status == 'draft')
                                                    <span class="badge text-bg-warning">Draft</span>
                                                @else
                                                    <span class="badge text-bg-secondary">Archived</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ route('backend.blogs.edit', $blog->id) }}" class="btn btn-outline-primary btn-sm">
                                                    <i class="fas fa-edit"></i> Edit
                                                </a>
                                                <form action="{{ route('backend.blogs.destroy', $blog->id) }}" method="POST" class="d-inline delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-outline-danger btn-sm delete-confirm">
                                                        <i class="fas fa-trash"></i> Delete
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="7" class="text-center py-4">
                                            <h4>No blog posts found</h4>
                                            <!--<p class="text-muted">Get started by creating a new blog post</p>
                                            <a href="{{-- route('backend.blogs.create') --}}" class="btn btn-primary">
                                                <i class="fas fa-plus"></i> Create Blog Post
                                            </a>-->
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="mt-3">
                        {{ $$module_name->links() }}
                    </div>
                </div>
            </div>
        </div>
    </x-backend.layouts.create>
@endsection

@push('after-scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Delete confirmation
    $(document).on('click', '.delete-confirm', function(e) {
        e.preventDefault();
        var form = $(this).closest('form');
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
</script>
@endpush