@extends('admin.layouts.app')
@section('title','Project Categories')
@section('breadcrumb') <span>/</span> CSR Management <span>/</span> Categories @endsection

@section('content')
<div class="page-header">
    <div><h1>Project Categories</h1><p class="page-subtitle">Manage CSR project categories</p></div>
    @if(auth()->user()->hasPermission('project_categories.create'))
    <a href="{{ route('admin.csr.categories.create') }}" class="btn btn-primary"><i class="fas fa-plus me-2"></i>Add Category</a>
    @endif
</div>

<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-700"><i class="fas fa-tags text-primary me-2"></i>All Categories</h6>
        <span class="badge bg-primary">{{ $categories->total() }}</span>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead style="background:#f8fafc;">
                <tr>
                    <th class="ps-3">S.N.</th>
                    <th>Name</th>
                    <th>Slug</th>
                    <th>Description</th>
                    <th>Projects</th>
                    <th>Status</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($categories as $i => $cat)
                <tr>
                    <td class="ps-3 text-muted">{{ ($categories->currentPage()-1)*$categories->perPage()+$i+1 }}</td>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            @if($cat->color)
                            <div style="width:10px;height:10px;border-radius:50%;background:{{ $cat->color }};"></div>
                            @endif
                            @if($cat->icon)
                            <i class="fas {{ $cat->icon }} text-primary"></i>
                            @endif
                            <span style="font-weight:600;">{{ $cat->name }}</span>
                        </div>
                    </td>
                    <td><code style="font-size:11px;background:#f1f5f9;padding:2px 6px;border-radius:4px;">{{ $cat->slug }}</code></td>
                    <td style="font-size:12px;color:#64748b;">{{ Str::limit($cat->description,60) ?: '—' }}</td>
                    <td><span class="badge bg-light text-dark border">{{ $cat->projects_count }}</span></td>
                    <td>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input status-toggle" type="checkbox"
                                {{ $cat->status==='active'?'checked':'' }}
                                data-url="{{ route('admin.csr.categories.toggle-status',$cat) }}"
                                @if(!auth()->user()->hasPermission('project_categories.edit')) disabled @endif>
                        </div>
                    </td>
                    <td class="text-center">
                        <div class="d-flex gap-1 justify-content-center">
                            @if(auth()->user()->hasPermission('project_categories.edit'))
                            <a href="{{ route('admin.csr.categories.edit',$cat) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i></a>
                            @endif
                            @if(auth()->user()->hasPermission('project_categories.delete'))
                            <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete('{{ route('admin.csr.categories.destroy',$cat) }}','{{ $cat->name }}')"><i class="fas fa-trash"></i></button>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="text-center py-4 text-muted">No categories found</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($categories->hasPages())
    <div class="card-footer bg-white py-3">{{ $categories->links() }}</div>
    @endif
</div>
@endsection
@push('scripts')
<script>
document.querySelectorAll('.status-toggle').forEach(t => {
    t.addEventListener('change',function(){
        const el=this;
        fetch(this.dataset.url,{method:'POST',headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Content-Type':'application/json'}})
        .then(r=>r.json()).then(d=>{if(d.success)toastr.success('Status updated');else{el.checked=!el.checked;toastr.error('Failed');}})
        .catch(()=>{el.checked=!el.checked;toastr.error('Network error');});
    });
});
</script>
@endpush