@extends('rental-company.layout.master')

@section('title', __('admin.categories'))

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-lg-12 mb-4 order-0">
            <div class="card">
                <div class="d-flex align-items-end row">
                    <div class="col-12">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="card-title text-primary">{{ __('admin.categories') }}</h5>
                                {{-- <a href="{{ route('admin.categories.create') }}" class="btn btn-primary">
                                    <i class="ti ti-plus"></i> {{ __('admin.add_new') }}
                                </a> --}}
                            </div>

                            @if(session('success'))
                                <div class="alert alert-success alert-dismissible" role="alert">
                                    {{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

                            @if(session('error'))
                                <div class="alert alert-danger alert-dismissible" role="alert">
                                    {{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

                            <!-- Filters -->
                            {{-- <div class="row mb-4">
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="search" placeholder="{{ __('admin.search_by_name') }}" value="{{ request('search') }}">
                                </div>
                                <div class="col-md-2">
                                    <select class="form-select" id="status_filter">
                                        <option value="">{{ __('admin.all_statuses') }}</option>
                                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>{{ __('admin.active') }}</option>
                                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>{{ __('admin.inactive') }}</option>
                                        <option value="coming_soon" {{ request('status') == 'coming_soon' ? 'selected' : '' }}>{{ __('admin.coming_soon') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-select" id="sub_categories_filter">
                                        <option value="">{{ __('admin.all_categories') }}</option>
                                        <option value="1" {{ request('has_sub_categories') == '1' ? 'selected' : '' }}>{{ __('admin.with_sub_categories') }}</option>
                                        <option value="0" {{ request('has_sub_categories') == '0' ? 'selected' : '' }}>{{ __('admin.without_sub_categories') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-secondary" onclick="applyFilters()">
                                        <i class="ti ti-filter"></i> {{ __('admin.apply_filters') }}
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="clearFilters()">
                                        <i class="ti ti-refresh"></i> {{ __('admin.clear') }}
                                    </button>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-select" id="per_page_filter">
                                        <option value="10" {{ request('per_page') == '10' ? 'selected' : '' }}>10 {{ __('admin.per_page') }}</option>
                                        <option value="25" {{ request('per_page') == '25' ? 'selected' : '' }}>25 {{ __('admin.per_page') }}</option>
                                        <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50 {{ __('admin.per_page') }}</option>
                                        <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100 {{ __('admin.per_page') }}</option>
                                    </select>
                                </div>
                            </div> --}}

                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>{{ __('admin.id') }}</th>
                                            <th>{{ __('admin.image') }}</th>
                                            <th>{{ __('admin.name') }}</th>
                                            <th>{{ __('admin.sub_categories') }}</th>
                                            <th>{{ __('admin.status') }}</th>
                                            {{-- <th>{{ __('admin.actions') }}</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($categories as $category)
                                            <tr>
                                                <td>{{ $category->id }}</td>
                                                <td>
                                                    <img src="{{ $category->image_url }}" alt="{{ $category->name }}" 
                                                         class="rounded" style="width: 50px; height: 50px; object-fit: cover;">
                                                </td>
                                                <td>
                                                    <div>
                                                        <strong>{{ $category->getTranslation('name', 'ar') }}</strong>
                                                        <br>
                                                        <small class="text-muted">{{ $category->getTranslation('name', 'en') }}</small>
                                                    </div>
                                                </td>
                                                <td>
                                                    @if($category->has_sub_categories)
                                                        <span class="badge bg-success">{{ __('admin.has_sub_categories') }}</span>
                                                    @else
                                                        <span class="text-muted">{{ __('admin.no_sub_categories') }}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <span class="badge bg-{{ $category->status === 'active' ? 'success' : ($category->status === 'coming_soon' ? 'warning' : 'danger') }}">
                                                        {{ __('admin.' . $category->status) }}
                                                    </span>
                                                </td>
                                                {{-- <td>
                                                    <div class="btn-group" role="group">
                                                        <a href="{{ route('admin.sub-categories.index', ['parent_id' => $category->id]) }}" 
                                                           class="btn btn-sm btn-outline-info" title="{{ __('admin.view_sub_categories') }}">
                                                            <i class="ti ti-list"></i>
                                                        </a>
                                                        <a href="{{ route('admin.categories.edit', $category->id) }}" 
                                                           class="btn btn-sm btn-outline-primary" title="{{ __('admin.edit') }}">
                                                            <i class="ti ti-edit"></i>
                                                        </a>
                                                        <a href="{{ route('admin.categories.destroy', $category->id) }}" 
                                                           class="btn btn-sm btn-outline-danger"
                                                           onclick="return confirm('{{ __('admin.are_you_sure') }}')"
                                                           title="{{ __('admin.delete') }}">
                                                            <i class="ti ti-trash"></i>
                                                        </a>
                                                    </div>
                                                </td> --}}
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center">{{ __('admin.no_categories_found') }}</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            {{-- @if($categories->hasPages()) --}}
                                <div class="d-flex justify-content-center mt-4">
                                    {{ $categories->links() }}
                                </div>
                            {{-- @endif --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
function applyFilters() {
    const search = document.getElementById('search').value;
    const status = document.getElementById('status_filter').value;
    const subCategories = document.getElementById('sub_categories_filter').value;
    const perPage = document.getElementById('per_page_filter').value;
    
    const params = new URLSearchParams();
    if (search) params.append('search', search);
    if (status) params.append('status', status);
    if (subCategories) params.append('has_sub_categories', subCategories);
    if (perPage) params.append('per_page', perPage);
    
    window.location.href = '{{ route("admin.categories.index") }}?' + params.toString();
}

function clearFilters() {
    window.location.href = '{{ route("admin.categories.index") }}';
}

// Auto-submit on Enter key in search
document.getElementById('search').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        applyFilters();
    }
});

// Auto-submit on select change
document.getElementById('status_filter').addEventListener('change', applyFilters);
document.getElementById('sub_categories_filter').addEventListener('change', applyFilters);
document.getElementById('per_page_filter').addEventListener('change', applyFilters);
</script>