@extends('admin.layouts.app')

@section('title', __('Categories Management'))

@section('breadcrumb')
    <li class="breadcrumb-item active">{{ __('Categories') }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('Categories Management') }}</h1>
        <p class="text-muted mb-0">{{ __('Manage product categories with multilingual support') }}</p>
    </div>
    <div>
        <a href="{{ route('admin.categories.create') }}" class="btn btn-primary-custom">
            <i class="fas fa-plus me-2"></i>
            {{ __('Add Category') }}
        </a>
    </div>
@endsection

@push('styles')
    <style>
        .category-image {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 0.375rem;
        }

        .category-hierarchy {
            padding-left: 1.5rem;
            border-left: 2px solid #e5e7eb;
            margin-left: 1rem;
        }

        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            font-weight: 500;
        }

        .status-active {
            background: #dcfce7;
            color: #166534;
        }

        .status-inactive {
            background: #fee2e2;
            color: #991b1b;
        }

        .bulk-actions {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
            display: none;
        }

        .bulk-actions.show {
            display: block;
        }

        .filter-section {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .draggable-row {
            cursor: move;
        }

        .draggable-row:hover {
            background-color: #f9fafb;
        }
    </style>
@endpush

@section('content')
    {{-- Statistics Cards --}}
    <div class="stats-grid">
        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-icon bg-primary me-3">
                    <i class="fas fa-tags"></i>
                </div>
                <div>
                    <h6 class="mb-0 text-muted">{{ __('Total Categories') }}</h6>
                    <h3 class="mb-0">{{ $stats['total'] }}</h3>
                </div>
            </div>
        </div>

        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-icon bg-success me-3">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div>
                    <h6 class="mb-0 text-muted">{{ __('Active') }}</h6>
                    <h3 class="mb-0">{{ $stats['active'] }}</h3>
                </div>
            </div>
        </div>

        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-icon bg-warning me-3">
                    <i class="fas fa-pause-circle"></i>
                </div>
                <div>
                    <h6 class="mb-0 text-muted">{{ __('Inactive') }}</h6>
                    <h3 class="mb-0">{{ $stats['inactive'] }}</h3>
                </div>
            </div>
        </div>

        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-icon bg-info me-3">
                    <i class="fas fa-sitemap"></i>
                </div>
                <div>
                    <h6 class="mb-0 text-muted">{{ __('Root Categories') }}</h6>
                    <h3 class="mb-0">{{ $stats['root'] }}</h3>
                </div>
            </div>
        </div>

        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-icon bg-secondary me-3">
                    <i class="fas fa-layer-group"></i>
                </div>
                <div>
                    <h6 class="mb-0 text-muted">{{ __('Subcategories') }}</h6>
                    <h3 class="mb-0">{{ $stats['child'] }}</h3>
                </div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="admin-card">
        <div class="card-header-custom">
            <h5 class="mb-0">
                <i class="fas fa-filter me-2"></i>
                {{ __('Filters & Search') }}
            </h5>
        </div>
        <div class="card-body-custom">
            <form method="GET" action="{{ route('admin.categories.index') }}" id="filterForm">
                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="search" class="form-label">{{ __('Search') }}</label>
                            <input type="text"
                                   class="form-control"
                                   id="search"
                                   name="search"
                                   value="{{ request('search') }}"
                                   placeholder="{{ __('Search by name, code...') }}">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="mb-3">
                            <label for="status" class="form-label">{{ __('Status') }}</label>
                            <select class="form-control" id="status" name="status">
                                <option value="">{{ __('All Status') }}</option>
                                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>
                                    {{ __('Active') }}
                                </option>
                                <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>
                                    {{ __('Inactive') }}
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="parent" class="form-label">{{ __('Parent Category') }}</label>
                            <select class="form-control" id="parent" name="parent">
                                <option value="">{{ __('All Categories') }}</option>
                                <option value="root" {{ request('parent') === 'root' ? 'selected' : '' }}>
                                    {{ __('Root Categories Only') }}
                                </option>
                                @foreach($parentCategories as $parent)
                                    <option value="{{ $parent->id }}" {{ request('parent') == $parent->id ? 'selected' : '' }}>
                                        {{ $parent->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="mb-3">
                            <label for="sort" class="form-label">{{ __('Sort By') }}</label>
                            <select class="form-control" id="sort" name="sort">
                                <option value="order" {{ request('sort', 'order') === 'order' ? 'selected' : '' }}>
                                    {{ __('Order') }}
                                </option>
                                <option value="name" {{ request('sort') === 'name' ? 'selected' : '' }}>
                                    {{ __('Name') }}
                                </option>
                                <option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>
                                    {{ __('Newest') }}
                                </option>
                                <option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>
                                    {{ __('Oldest') }}
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="mb-3">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary-custom">
                                    <i class="fas fa-search"></i>
                                </button>
                                <a href="{{ route('admin.categories.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Bulk Actions --}}
    <div class="bulk-actions" id="bulkActions">
        <form method="POST" action="{{ route('admin.categories.bulk-action') }}" id="bulkForm">
            @csrf
            <div class="d-flex align-items-center gap-3">
                <span class="fw-bold">
                    <span id="selectedCount">0</span> {{ __('categories selected') }}
                </span>

                <select name="action" class="form-control" style="width: auto;" required>
                    <option value="">{{ __('Choose Action') }}</option>
                    <option value="activate">{{ __('Activate') }}</option>
                    <option value="deactivate">{{ __('Deactivate') }}</option>
                    <option value="delete">{{ __('Delete') }}</option>
                </select>

                <button type="submit" class="btn btn-primary-custom">
                    {{ __('Apply') }}
                </button>

                <button type="button" class="btn btn-secondary" onclick="clearSelection()">
                    {{ __('Clear Selection') }}
                </button>
            </div>
        </form>
    </div>

    {{-- Categories Table --}}
    <div class="admin-card">
        <div class="card-header-custom">
            <h5 class="mb-0">
                <i class="fas fa-list me-2"></i>
                {{ __('Categories') }} ({{ $categories->total() }})
            </h5>
        </div>
        <div class="card-body-custom p-0">
            @if($categories->count() > 0)
                <div class="table-responsive">
                    <table class="table admin-table mb-0" id="categoriesTable">
                        <thead>
                        <tr>
                            <th width="40">
                                <input type="checkbox" id="selectAll" class="form-check-input">
                            </th>
                            <th width="60">{{ __('Image') }}</th>
                            <th>{{ __('Category') }}</th>
                            <th>{{ __('Code') }}</th>
                            <th>{{ __('Products') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Order') }}</th>
                            <th>{{ __('Created') }}</th>
                            <th width="120">{{ __('Actions') }}</th>
                        </tr>
                        </thead>
                        <tbody id="sortableTable">
                        @foreach($categories as $category)
                            <tr class="draggable-row" data-id="{{ $category->id }}">
                                <td>
                                    <input type="checkbox"
                                           name="categories[]"
                                           value="{{ $category->id }}"
                                           class="form-check-input category-checkbox">
                                </td>
                                <td>
                                    @if($category->image)
                                        <img src="{{ Storage::url($category->image) }}"
                                             alt="{{ $category->name }}"
                                             class="category-image">
                                    @else
                                        <div class="category-image bg-light d-flex align-items-center justify-content-center">
                                            <i class="fas fa-tag text-muted"></i>
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <div>
                                        <h6 class="mb-1">
                                            @if($category->parent)
                                                <small class="text-muted">{{ $category->parent->name }} /</small>
                                            @endif
                                            {{ $category->name }}
                                        </h6>
                                        @if($category->description)
                                            <small class="text-muted">{{ Str::limit($category->description, 50) }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <code>{{ $category->code }}</code>
                                </td>
                                <td>
                                        <span class="badge bg-info">
                                            {{ $category->products->count() }} {{ __('products') }}
                                        </span>
                                </td>
                                <td>
                                        <span class="status-badge {{ $category->is_active ? 'status-active' : 'status-inactive' }}">
                                            {{ $category->is_active ? __('Active') : __('Inactive') }}
                                        </span>
                                </td>
                                <td>
                                    <span class="badge bg-secondary">{{ $category->sort_order }}</span>
                                </td>
                                <td>
                                    <small class="text-muted">
                                        {{ $category->created_at->format('M d, Y') }}
                                    </small>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ route('admin.categories.show', $category) }}"
                                           class="btn btn-outline-info btn-sm"
                                           data-bs-toggle="tooltip"
                                           title="{{ __('View') }}">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.categories.edit', $category) }}"
                                           class="btn btn-outline-primary btn-sm"
                                           data-bs-toggle="tooltip"
                                           title="{{ __('Edit') }}">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button"
                                                class="btn btn-outline-danger btn-sm"
                                                data-bs-toggle="tooltip"
                                                title="{{ __('Delete') }}"
                                                onclick="deleteCategory({{ $category->id }}, '{{ $category->name }}')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>

                            {{-- Show subcategories if any --}}
                            @if($category->children->count() > 0)
                                @foreach($category->children as $child)
                                    <tr class="draggable-row" data-id="{{ $child->id }}">
                                        <td>
                                            <input type="checkbox"
                                                   name="categories[]"
                                                   value="{{ $child->id }}"
                                                   class="form-check-input category-checkbox">
                                        </td>
                                        <td>
                                            @if($child->image)
                                                <img src="{{ Storage::url($child->image) }}"
                                                     alt="{{ $child->name }}"
                                                     class="category-image">
                                            @else
                                                <div class="category-image bg-light d-flex align-items-center justify-content-center">
                                                    <i class="fas fa-tag text-muted"></i>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="category-hierarchy">
                                                <h6 class="mb-1">
                                                    <i class="fas fa-level-up-alt text-muted me-1"></i>
                                                    {{ $child->name }}
                                                </h6>
                                                @if($child->description)
                                                    <small class="text-muted">{{ Str::limit($child->description, 50) }}</small>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <code>{{ $child->code }}</code>
                                        </td>
                                        <td>
                                                <span class="badge bg-info">
                                                    {{ $child->products->count() }} {{ __('products') }}
                                                </span>
                                        </td>
                                        <td>
                                                <span class="status-badge {{ $child->is_active ? 'status-active' : 'status-inactive' }}">
                                                    {{ $child->is_active ? __('Active') : __('Inactive') }}
                                                </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ $child->sort_order }}</span>
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ $child->created_at->format('M d, Y') }}
                                            </small>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ route('admin.categories.show', $child) }}"
                                                   class="btn btn-outline-info btn-sm"
                                                   data-bs-toggle="tooltip"
                                                   title="{{ __('View') }}">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('admin.categories.edit', $child) }}"
                                                   class="btn btn-outline-primary btn-sm"
                                                   data-bs-toggle="tooltip"
                                                   title="{{ __('Edit') }}">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button"
                                                        class="btn btn-outline-danger btn-sm"
                                                        data-bs-toggle="tooltip"
                                                        title="{{ __('Delete') }}"
                                                        onclick="deleteCategory({{ $child->id }}, '{{ $child->name }}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div class="card-body-custom">
                    {{ $categories->appends(request()->query())->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-tags fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">{{ __('No categories found') }}</h5>
                    <p class="text-muted mb-4">{{ __('Start by creating your first category') }}</p>
                    <a href="{{ route('admin.categories.create') }}" class="btn btn-primary-custom">
                        <i class="fas fa-plus me-2"></i>
                        {{ __('Create Category') }}
                    </a>
                </div>
            @endif
        </div>
    </div>

    {{-- Delete Confirmation Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Confirm Delete') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('Are you sure you want to delete the category') }} "<span id="categoryName"></span>"?</p>
                    <p class="text-danger"><small>{{ __('This action cannot be undone.') }}</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {{ __('Cancel') }}
                    </button>
                    <form method="POST" id="deleteForm" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            {{ __('Delete Category') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Select All functionality
        document.getElementById('selectAll').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.category-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateBulkActions();
        });

        // Individual checkbox functionality
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('category-checkbox')) {
                updateBulkActions();
            }
        });

        // Update bulk actions visibility
        function updateBulkActions() {
            const checkedBoxes = document.querySelectorAll('.category-checkbox:checked');
            const bulkActions = document.getElementById('bulkActions');
            const selectedCount = document.getElementById('selectedCount');

            if (checkedBoxes.length > 0) {
                bulkActions.classList.add('show');
                selectedCount.textContent = checkedBoxes.length;

                // Update hidden inputs for bulk form
                const bulkForm = document.getElementById('bulkForm');
                bulkForm.querySelectorAll('input[name="categories[]"]').forEach(input => input.remove());

                checkedBoxes.forEach(checkbox => {
                    const hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'categories[]';
                    hiddenInput.value = checkbox.value;
                    bulkForm.appendChild(hiddenInput);
                });
            } else {
                bulkActions.classList.remove('show');
            }
        }

        // Clear selection
        function clearSelection() {
            document.querySelectorAll('.category-checkbox').forEach(checkbox => {
                checkbox.checked = false;
            });
            document.getElementById('selectAll').checked = false;
            updateBulkActions();
        }

        // Delete category
        function deleteCategory(id, name) {
            document.getElementById('categoryName').textContent = name;
            document.getElementById('deleteForm').action = `/admin/categories/${id}`;
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        }

        // Bulk form submission
        document.getElementById('bulkForm').addEventListener('submit', function(e) {
            const action = this.querySelector('select[name="action"]').value;
            if (!action) {
                e.preventDefault();
                alert('{{ __("Please select an action") }}');
                return;
            }

            if (action === 'delete') {
                if (!confirm('{{ __("Are you sure you want to delete the selected categories?") }}')) {
                    e.preventDefault();
                }
            }
        });

        // Initialize tooltips
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });

        // Auto-submit filters on change
        document.querySelectorAll('#filterForm select').forEach(select => {
            select.addEventListener('change', function() {
                document.getElementById('filterForm').submit();
            });
        });

        // Search with delay
        let searchTimeout;
        document.getElementById('search').addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                document.getElementById('filterForm').submit();
            }, 500);
        });
    </script>
@endpush