@extends('layouts.layoutMaster')

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

@section('vendor-style')
@vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
])
@endsection

@section('vendor-script')
@vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
@endsection

@section('content')
<x-breadcrumb
    :title="__('Product Categories')"
    :breadcrumbs="[
        ['name' => __('System Core'), 'url' => route('systemcore.dashboard')],
        ['name' => __('Product Categories')]
    ]"
/>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">{{ __('Product Categories') }}</h5>
        <a href="{{ route('systemcore.product-categories.create') }}" class="btn btn-primary">
            <i class="bx bx-plus"></i> {{ __('Add Product Category') }}
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="productCategoriesTable" class="table table-hover">
                <thead>
                    <tr>
                        <th>{{ __('Code') }}</th>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Parent Category') }}</th>
                        <th>{{ __('Description') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
const pageData = {
    urls: {
        datatable: '{{ route("systemcore.product-categories.ajax") }}',
        store: '{{ route("systemcore.product-categories.store") }}',
        update: (id) => '{{ route("systemcore.product-categories.index") }}/' + id,
        destroy: (id) => '{{ route("systemcore.product-categories.index") }}/' + id
    },
    labels: {
        confirmDelete: @json(__('Are you sure?')),
        deleteWarning: @json(__('You will not be able to recover this product category!')),
        yesDelete: @json(__('Yes, delete it!')),
        cancel: @json(__('Cancel')),
        success: @json(__('Success')),
        deleteSuccess: @json(__('Product category deleted successfully')),
        error: @json(__('Error')),
        deleteError: @json(__('Failed to delete product category')),
        searchPlaceholder: @json(__('Search categories...')),
        processing: @json(__('Processing...')),
        lengthMenu: @json(__('Show _MENU_ entries')),
        info: @json(__('Showing _START_ to _END_ of _TOTAL_ entries')),
        infoEmpty: @json(__('No entries to show')),
        infoFiltered: @json(__('(filtered from _MAX_ total entries)')),
        emptyTable: @json(__('No data available')),
        zeroRecords: @json(__('No matching records found')),
        paginate: {
            first: @json(__('First')),
            last: @json(__('Last')),
            next: @json(__('Next')),
            previous: @json(__('Previous'))
        }
    }
};
</script>
@vite(['Modules/SystemCore/resources/assets/js/product-categories.js'])
@endsection
