@extends('admin.layouts.app')

@section('title', __('admin/product-config-options.title'))

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="__('admin/product-config-options.title')"
        icon="fas fa-sliders-h"
        :buttons="[
            ['label' => __('admin/product-config-options.buttons_create'), 'route' => route('admin.product-config-options.create'), 'icon' => 'fas fa-plus', 'color' => 'primary', 'permission' => 'create product config options'],
            ['label' => __('admin/product-config-options.titles_groups'), 'route' => route('admin.product-config-option-groups.index'), 'icon' => 'fas fa-layer-group', 'color' => 'outline-secondary', 'permission' => 'view product config option groups'],
        ]"
    />

    <x-admin.card>
        <x-admin.data-table id="productConfigOptions" :records-url="route('api.admin.product-config-options.records')"
                            :filterable="true">
            <th>{{ __('admin/product-config-options.fields_name') }}</th>
            <th>{{ __('admin/product-config-options.fields_group') }}</th>
            <th>{{ __('admin/product-config-options.fields_description') }}</th>
            <th>{{ __('admin/product-config-options.fields_type') }}</th>
            <th>{{ __('admin/product-config-options.fields_order') }}</th>
            <th>{{ __('admin/product-config-options.fields_status') }}</th>
            <th>{{ __('admin/product-config-options.fields_actions') }}</th>
            <x-slot:filters>
                <div class="row g-2">
                    <div class="col-md-3">
                        <select class="form-select form-select-sm" data-archived-filter>
                            <option value="no">{{ __('admin/product-config-options.filter_active_only') }}</option>
                            <option value="all">{{ __('admin/common.all') }}</option>
                            <option value="only">{{ __('admin/product-config-options.filter_archived_only') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select form-select-sm" data-type-filter>
                            <option value="">{{ __('admin/product-config-options.filter_all_types') }}</option>
                        </select>
                    </div>
                </div>
            </x-slot:filters>
        </x-admin.data-table>
    </x-admin.card>
</div>
@endsection

@push('scripts')
<script>
    window.permissions = {
        productConfigOptions: {
            create: {{ json_encode(Auth::user()->can('create', App\Models\ProductConfigOption::class)) }},
            update: {{ json_encode(Auth::user()->can('updateAny', App\Models\ProductConfigOption::class)) }},
            delete: {{ json_encode(Auth::user()->can('deleteAny', App\Models\ProductConfigOption::class)) }}
        }
    };

    window.routes = {
        productConfigOptions: {
            edit: '{{ route("admin.product-config-options.edit", ":id") }}',
            delete: '{{ route("api.admin.product-config-options.destroy", ":id") }}'
        }
    };

    // Durum etiketleri için çeviriler
    window.pageConfig = window.pageConfig || {};
    window.pageConfig.translations = Object.assign({}, window.pageConfig.translations || {}, {
        status_active: @json(__('admin/product-config-options.status_active')),
        status_hidden: @json(__('admin/product-config-options.status_hidden')),
        status_archived: @json(__('admin/product-config-options.status_archived')),
    });
</script>
@vite('resources/js/admin/product-config-options/index.js')
@endpush
