@extends('layouts.app')
@section('title', 'Categories & Brands')

@section('breadcrumb')
<li class="breadcrumb-item active">Categories & Brands</li>
@endsection

@section('content')

<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1 class="page-title">
            <i class="bi bi-tag me-2" style="color:#1d4ed8;"></i>Categories &amp; Brands
        </h1>
        <p class="page-subtitle">Manage product categories, sub-categories and brands</p>
    </div>
    <div class="d-flex gap-2">
        @can_permission('categories.create')
        <button class="btn btn-warning text-dark" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
            <i class="bi bi-plus-lg me-1"></i> Add Category
        </button>
        @endcan_permission
        @can_permission('brands.create')
        <button class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#createBrandModal">
            <i class="bi bi-plus-lg me-1"></i> Add Brand
        </button>
        @endcan_permission
    </div>
</div>

{{-- Tabs --}}
<ul class="nav nav-tabs mb-3" id="catBrandTabs">
    <li class="nav-item">
        <a class="nav-link {{ $activeTab !== 'brands' ? 'active' : '' }}"
           href="{{ route('categories.index') }}">
            <i class="bi bi-tag me-1"></i> Categories
            <span class="badge bg-secondary ms-1">{{ $categoryCount }}</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link {{ $activeTab === 'brands' ? 'active' : '' }}"
           href="{{ route('categories.index', ['tab' => 'brands']) }}">
            <i class="bi bi-award me-1"></i> Brands
            <span class="badge bg-secondary ms-1">{{ $brandCount }}</span>
        </a>
    </li>
</ul>

{{-- ══ CATEGORIES TAB ═══════════════════════════════════════════════════════ --}}
@if($activeTab !== 'brands')

<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="d-flex gap-2">
            <input type="hidden" name="tab" value="categories">
            <input type="text" name="search" class="form-control" style="max-width:320px;"
                   placeholder="Search categories..." value="{{ $search }}">
            <button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
            @if($search)
            <a href="{{ route('categories.index') }}" class="btn btn-outline-danger"><i class="bi bi-x"></i></a>
            @endif
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-tag me-2"></i>All Categories ({{ $categories->total() }})</span>
        <small class="text-muted">Top-level categories with sub-categories</small>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th width="60">Image</th>
                        <th>Category Name</th>
                        <th>Sub-categories</th>
                        <th>Products</th>
                        <th>Sort</th>
                        <th>Status</th>
                        <th width="150">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($categories as $category)
                    <tr>
                        <td>
                            @if($category->image)
                            <img src="{{ Storage::url($category->image) }}" alt="{{ $category->name }}"
                                 style="width:40px;height:40px;object-fit:cover;border-radius:8px;">
                            @else
                            <div style="width:40px;height:40px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#94a3b8;">
                                <i class="bi bi-tag"></i>
                            </div>
                            @endif
                        </td>
                        <td>
                            <div class="fw-semibold">{{ $category->name }}</div>
                            <small class="text-muted">{{ $category->slug }}</small>
                            @if($category->children->count())
                            <div class="mt-1">
                                @foreach($category->children->take(4) as $child)
                                <span class="badge bg-light text-dark border" style="font-size:.68rem;">{{ $child->name }}</span>
                                @endforeach
                                @if($category->children->count() > 4)
                                <span class="text-muted" style="font-size:.75rem;">+{{ $category->children->count() - 4 }} more</span>
                                @endif
                            </div>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-info">{{ $category->children->count() }}</span>
                            @can_permission('categories.create')
                            <button class="btn btn-sm btn-link p-0 ms-1 text-info"
                                    style="font-size:.75rem;"
                                    onclick="openSubCategoryModal({{ $category->id }}, '{{ addslashes($category->name) }}')"
                                    title="Add sub-category">
                                <i class="bi bi-plus-circle"></i>
                            </button>
                            @endcan_permission
                        </td>
                        <td><span class="badge bg-secondary">{{ $category->products_count }}</span></td>
                        <td>{{ $category->sort_order }}</td>
                        <td>
                            <span class="badge {{ $category->is_active ? 'bg-success' : 'bg-danger' }}">
                                {{ $category->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td>
                            <div class="d-flex gap-1 flex-wrap">
                                @can_permission('categories.edit')
                                <a href="{{ route('categories.edit', $category) }}"
                                   class="btn btn-sm btn-outline-primary" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @endcan_permission
                                @can_permission('categories.delete')
                                <form method="POST" action="{{ route('categories.destroy', $category) }}"
                                      onsubmit="return confirm('Delete \'{{ $category->name }}\'?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endcan_permission
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            <i class="bi bi-tag" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                            No categories found.
                            @can_permission('categories.create')
                            <div class="mt-2">
                                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
                                    <i class="bi bi-plus-lg me-1"></i> Add First Category
                                </button>
                            </div>
                            @endcan_permission
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($categories->hasPages())
    <div class="card-footer">{{ $categories->links() }}</div>
    @endif
</div>

@else
{{-- ══ BRANDS TAB ═══════════════════════════════════════════════════════════ --}}

<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="d-flex gap-2">
            <input type="hidden" name="tab" value="brands">
            <input type="text" name="search" class="form-control" style="max-width:320px;"
                   placeholder="Search brands..." value="{{ $search }}">
            <button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
            @if($search)
            <a href="{{ route('categories.index', ['tab' => 'brands']) }}" class="btn btn-outline-danger">
                <i class="bi bi-x"></i>
            </a>
            @endif
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <i class="bi bi-award me-2"></i>All Brands ({{ $brands->total() }})
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th width="70">Logo</th>
                        <th>Brand Name</th>
                        <th>Products</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th width="120">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($brands as $brand)
                    <tr>
                        <td>
                            @if($brand->logo)
                            <img src="{{ Storage::url($brand->logo) }}" alt="{{ $brand->name }}"
                                 style="width:44px;height:44px;object-fit:contain;border-radius:8px;border:1px solid #e2e8f0;padding:4px;background:#fff;">
                            @else
                            <div style="width:44px;height:44px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#94a3b8;">
                                <i class="bi bi-award"></i>
                            </div>
                            @endif
                        </td>
                        <td><div class="fw-semibold">{{ $brand->name }}</div></td>
                        <td><span class="badge bg-secondary">{{ $brand->products_count }}</span></td>
                        <td>
                            <span class="text-muted" style="font-size:.85rem;">
                                {{ Str::limit($brand->description, 60) }}
                            </span>
                        </td>
                        <td>
                            <span class="badge {{ $brand->is_active ? 'bg-success' : 'bg-danger' }}">
                                {{ $brand->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                @can_permission('brands.edit')
                                <a href="{{ route('brands.edit', $brand) }}"
                                   class="btn btn-sm btn-outline-primary" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @endcan_permission
                                @can_permission('brands.delete')
                                <form method="POST" action="{{ route('brands.destroy', $brand) }}"
                                      onsubmit="return confirm('Delete \'{{ $brand->name }}\'?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endcan_permission
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            <i class="bi bi-award" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                            No brands found.
                            @can_permission('brands.create')
                            <div class="mt-2">
                                <button class="btn btn-sm btn-info text-white" data-bs-toggle="modal" data-bs-target="#createBrandModal">
                                    <i class="bi bi-plus-lg me-1"></i> Add First Brand
                                </button>
                            </div>
                            @endcan_permission
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($brands->hasPages())
    <div class="card-footer">{{ $brands->links() }}</div>
    @endif
</div>

@endif
{{-- ══ END TABS ═════════════════════════════════════════════════════════════ --}}


{{-- ══ CREATE CATEGORY MODAL ══════════════════════════════════════════════ --}}
@can_permission('categories.create')
<div class="modal fade" id="createCategoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:14px;border:none;">
            <form method="POST" action="{{ route('categories.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">
                        <i class="bi bi-tag me-2 text-warning"></i>Add Category
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Category Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g. Laptops">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Parent Category</label>
                        <select name="parent_id" class="form-select">
                            <option value="">— Top Level Category —</option>
                            @foreach($parentCategories as $parent)
                            <option value="{{ $parent->id }}">{{ $parent->name }}</option>
                            @endforeach
                        </select>
                        <small class="text-muted">Empty রাখলে top-level category হবে</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Image</label>
                        <input type="file" name="image" class="form-control" accept="image/*">
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <label class="form-label fw-semibold">Sort Order</label>
                            <input type="number" name="sort_order" class="form-control" value="0" min="0">
                        </div>
                        <div class="col-6 d-flex align-items-end pb-1">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_active" value="1" id="catActive" checked>
                                <label class="form-check-label" for="catActive">Active</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning text-dark">
                        <i class="bi bi-check-circle me-1"></i>Save Category
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Sub-category Modal --}}
<div class="modal fade" id="subCategoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:14px;border:none;">
            <form method="POST" action="{{ route('categories.store') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="parent_id" id="subParentId">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">
                        <i class="bi bi-diagram-3 me-2 text-info"></i>
                        Add Sub-category under: <span id="subParentName" class="text-primary"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Sub-category Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g. Gaming Laptops">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Image</label>
                        <input type="file" name="image" class="form-control" accept="image/*">
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                        <label class="form-check-label">Active</label>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-info text-white">
                        <i class="bi bi-check-circle me-1"></i>Save Sub-category
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan_permission


{{-- ══ CREATE BRAND MODAL ══════════════════════════════════════════════════ --}}
@can_permission('brands.create')
<div class="modal fade" id="createBrandModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:14px;border:none;">
            <form method="POST" action="{{ route('brands.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">
                        <i class="bi bi-award me-2 text-info"></i>Add Brand
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Brand Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g. HP, Dell, Lenovo">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Logo</label>
                        <input type="file" name="logo" class="form-control" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Description</label>
                        <textarea name="description" class="form-control" rows="2"
                                  placeholder="Optional brand description"></textarea>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                        <label class="form-check-label">Active</label>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-info text-white">
                        <i class="bi bi-check-circle me-1"></i>Save Brand
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan_permission

@endsection

@push('scripts')
<script>
function openSubCategoryModal(parentId, parentName) {
    document.getElementById('subParentId').value       = parentId;
    document.getElementById('subParentName').textContent = parentName;
    new bootstrap.Modal(document.getElementById('subCategoryModal')).show();
}
</script>
@endpush