@extends('backEnd.layouts.master')
@section('title','Categories')
@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-0 fw-bold"><i class="fas fa-sitemap me-2 text-success"></i>Categories</h4>
            <small class="text-muted">Manage product categories</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.categories.tree') }}" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-project-diagram me-1"></i> Tree View
            </a>
            <a href="{{ route('admin.categories.create') }}" class="btn btn-success btn-sm">
                <i class="fas fa-plus me-1"></i> Add Category
            </a>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th width="50">#</th>
                            <th width="60">Image</th>
                            <th>Name</th>
                            <th>Parent</th>
                            <th class="text-center">Sub-cats</th>
                            <th class="text-center">Products</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $i => $cat)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>
                                @if($cat->image)
                                <img src="{{ asset($cat->image) }}" alt="{{ $cat->name }}" class="rounded" style="width:45px;height:45px;object-fit:cover">
                                @else
                                <div class="rounded bg-light d-flex align-items-center justify-content-center" style="width:45px;height:45px">
                                    <i class="fas fa-image text-muted"></i>
                                </div>
                                @endif
                            </td>
                            <td>
                                <div class="fw-semibold">{{ $cat->name }}</div>
                                <small class="text-muted">{{ $cat->slug }}</small>
                            </td>
                            <td>
                                @if($cat->parent)
                                <span class="badge bg-light text-dark">{{ $cat->parent->name }}</span>
                                @else
                                <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="badge bg-info">{{ $cat->children_count }}</span>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-primary">{{ $cat->products_count }}</span>
                            </td>
                            <td class="text-center">
                                <div class="form-check form-switch d-flex justify-content-center mb-0">
                                    <input class="form-check-input toggle-status" type="checkbox" data-id="{{ $cat->id }}"
                                        {{ $cat->status ? 'checked' : '' }}>
                                </div>
                            </td>
                            <td class="text-center">
                                <a href="{{ route('admin.categories.edit', $cat->id) }}" class="btn btn-sm btn-outline-primary me-1" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.categories.destroy', $cat->id) }}" method="POST" class="d-inline" id="del-cat-{{ $cat->id }}">
                                    @csrf @method('DELETE')
                                    <button type="button" class="btn btn-sm btn-outline-danger delete-confirm"
                                            data-form="#del-cat-{{ $cat->id }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @if($cat->children->count())
                        @foreach($cat->children as $child)
                        <tr class="table-light">
                            <td></td>
                            <td>
                                @if($child->image)
                                <img src="{{ asset($child->image) }}" class="rounded" style="width:35px;height:35px;object-fit:cover">
                                @else
                                <div class="rounded bg-light d-flex align-items-center justify-content-center" style="width:35px;height:35px">
                                    <i class="fas fa-level-down-alt text-muted small"></i>
                                </div>
                                @endif
                            </td>
                            <td>
                                <div class="ms-3"><i class="fas fa-level-down-alt text-muted me-1 small"></i>{{ $child->name }}</div>
                                <small class="text-muted ms-3">{{ $child->slug }}</small>
                            </td>
                            <td><span class="badge bg-success-subtle text-success">{{ $cat->name }}</span></td>
                            <td class="text-center"><span class="badge bg-info">{{ $child->children_count ?? 0 }}</span></td>
                            <td class="text-center"><span class="badge bg-primary">{{ $child->products_count ?? 0 }}</span></td>
                            <td class="text-center">
                                <span class="badge {{ $child->status ? 'bg-success' : 'bg-secondary' }}">
                                    {{ $child->status ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="text-center">
                                <a href="{{ route('admin.categories.edit', $child->id) }}" class="btn btn-sm btn-outline-primary me-1"><i class="fas fa-edit"></i></a>
                                <form action="{{ route('admin.categories.destroy', $child->id) }}" method="POST" class="d-inline" id="del-cc-{{ $child->id }}">
                                    @csrf @method('DELETE')
                                    <button type="button" class="btn btn-sm btn-outline-danger delete-confirm" data-form="#del-cc-{{ $child->id }}"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                        @endif
                        @empty
                        <tr><td colspan="8" class="text-center py-4 text-muted">No categories found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
document.querySelectorAll('.toggle-status').forEach(function(el) {
    el.addEventListener('change', function() {
        fetch('/admin/categories/' + this.dataset.id + '/toggle', {
            method: 'POST',
            headers: {'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content}
        });
    });
});
</script>
@endpush