@extends('admin::layouts.master')

@section('content')

<style>
/* Make table container scrollable on mobile */
.card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.datatable {
    min-width: 600px; /* Forces table to maintain width, triggering scroll on mobile */
    width: 100%;
    margin-bottom: 0;
}

.datatable td:last-child {
    white-space: nowrap; /* Prevents action buttons from wrapping */
}

/* Improve button accessibility on mobile */
.datatable .btn {
    padding: 0.4rem 0.6rem;
    margin: 2px;
    min-height: 38px; /* Better touch target size */
    min-width: 38px;
}

/* Stack form and button properly */
.datatable td:last-child form {
    display: inline-block;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .datatable {
        min-width: 500px; /* Adjust based on your content */
    }
    
    .datatable th,
    .datatable td {
        padding: 0.75rem 0.5rem;
    }
}

/* Optional: Add visual indicator for scrollable content on mobile */
@media (max-width: 576px) {
    .card-body {
        background: linear-gradient(to right, white 30%, rgba(255,255,255,0)),
                    linear-gradient(to left, white 30%, rgba(255,255,255,0));
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%;
        background-position: 0 0, 100% 0;
        background-attachment: scroll, scroll;
    }
}
</style>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Forum Categories</h5>

        <a href="{{ route('forum.categories.create') }}"
           class="btn btn-primary btn-sm">
            <i class="fas fa-plus"></i> Add
        </a>
    </div>

    <div class="card-body">
        <table class="table table-bordered table-hover datatable">
            <thead>
                <tr>
                    <th width="60">SN</th>
                    <th>Title</th>
                    <th>Status</th>
                    <th width="120">Actions</th>
                </tr>
            </thead>

            <tbody>
                @forelse($categories as $index => $category)
                <tr>
                    <td>{{ $index + 1 }}</td>

                    <td>{{ $category->title }}</td>

                    <td>
                        @if($category->is_active)
                            <span class="badge badge-success">Active</span>
                        @else
                            <span class="badge badge-secondary">Inactive</span>
                        @endif
                    </td>

                    <td>
                        <a href="{{ route('forum.categories.edit', $category->id) }}"
                           class="btn btn-sm btn-primary">
                            <i class="fas fa-edit"></i>
                        </a>

					   <form action="{{ route('forum.categories.destroy', $category->id) }}"
						method="POST">
                            @csrf
                            @method('DELETE')

                            <button type="submit"
                                    class="btn btn-sm btn-danger"
                                    onclick="return confirm('Delete this category?')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form> 
						 
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="text-center">
                        No categories found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection