@extends('admin.layouts.app')

@section('title', __('admin/expenses.categories_title'))

@section('content')
    <div class="container-fluid px-4">
        <x-admin.page-header
            :title="__('admin/expenses.categories_title')"
            :subtitle="__('admin/expenses.categories_subtitle')"
            icon="fas fa-tags"
            :buttons="[
                ['label' => __('admin/expenses.categories_create'), 'id' => 'btnAddCategory', 'icon' => 'fas fa-plus', 'color' => 'primary'],
            ]"
        />

        <x-admin.card :padding="false">
            <x-admin.data-table
                id="categoriesTable"
                :records-url="route('api.admin.expense-categories.records')"
            >
                <th>{{ __('admin/expenses.categories_col_name') }}</th>
                <th>{{ __('admin/expenses.categories_col_icon') }}</th>
                <th>{{ __('admin/expenses.categories_col_status') }}</th>
                <th>{{ __('admin/expenses.categories_col_usage') }}</th>
                <th>{{ __('admin/expenses.columns_actions') }}</th>
            </x-admin.data-table>
        </x-admin.card>
    </div>

    <x-admin.modal id="categoryModal" :title="__('admin/expenses.categories_create')">
        <form id="categoryForm">
            <input type="hidden" name="id" value="">
            <div class="mb-3">
                <label class="form-label">{{ __('admin/expenses.categories_col_name') }} <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" maxlength="255" required>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('admin/expenses.categories_col_icon') }}</label>
                <input type="text" name="icon" class="form-control" maxlength="100" placeholder="fas fa-tag">
                <div class="form-text small">{{ __('admin/expenses.categories_icon_help') }}</div>
            </div>
            <div class="form-check form-switch">
                <input type="checkbox" name="is_active" class="form-check-input" id="categoryActive" value="1" checked>
                <label class="form-check-label" for="categoryActive">{{ __('admin/expenses.field_active') }}</label>
            </div>
        </form>
        <x-slot:footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin/common.buttons_cancel') }}</button>
            <button type="button" class="btn btn-primary" id="saveCategory">{{ __('admin/common.save') }}</button>
        </x-slot:footer>
    </x-admin.modal>

    <x-admin.modal id="deleteCategoryModal" :title="__('admin/expenses.categories_confirm_delete')">
        <p>{{ __('admin/expenses.categories_confirm_delete_text') }}</p>
        <x-slot:footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin/common.buttons_cancel') }}</button>
            <button type="button" class="btn btn-danger" id="confirmDeleteCategory">{{ __('admin/common.buttons_delete') }}</button>
        </x-slot:footer>
    </x-admin.modal>
@endsection

@push('scripts')
<script>
    window.pageConfig = window.pageConfig || {};
    window.pageConfig.routes = {
        store: '{{ route("api.admin.expense-categories.store") }}',
        update: '{{ route("api.admin.expense-categories.update", ":id") }}',
        delete: '{{ route("api.admin.expense-categories.destroy", ":id") }}',
    };
    window.permissions = {
        expense_categories: {
            view: {{ json_encode(auth()->user()->can('manage expense settings')) }},
            update: {{ json_encode(auth()->user()->can('manage expense settings')) }},
            delete: {{ json_encode(auth()->user()->can('manage expense settings')) }},
        },
    };
    window.translations = {
        create_title: '{{ __("admin/expenses.categories_create") }}',
        edit_title: '{{ __("admin/expenses.categories_edit") }}',
        status_active: '{{ __("admin/expenses.status_active") }}',
        status_inactive: '{{ __("admin/expenses.status_inactive") }}',
        buttons_edit: '{{ __("admin/common.buttons_edit") }}',
        buttons_delete: '{{ __("admin/common.buttons_delete") }}',
        save_error: '{{ __("admin/expenses.messages_save_error") }}',
    };
</script>
@vite('resources/js/admin/expense-categories/index.js')
@endpush
