@extends('layouts.app')
@section('title', __('expense.expense_categories'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm">
              <a class="text-white opacity-5" href="{{action([\App\Http\Controllers\ExpenseController::class, 'index'])}}">
                <i class="fa fas fa-money-check-alt text-sm-i opacity-10"></i> @lang('expense.expenses')
              </a>
            </li>
            <li class="breadcrumb-item text-sm">
                <a class="opacity-7 text-white" href="javascript:;">@lang( 'expense.expense_categories' )</a>
            </li>
             <li class="breadcrumb-item text-sm text-white">
                @lang( 'expense.manage_your_expense_categories' )
            </li>
        </ol>
    </nav>
</section>
<!-- Main content -->
<section class="content">
    <div class="pad-15"> 
        @component('components.widget', ['class' => 'box-primary', 'icon' => 'fa fa-coins text-danger', 'title' => __( 'expense.all_your_expense_categories' )])
            <hr class="line-light">
            @slot('tool')
                <div class="box-tools mt-50">
                    <button type="button" class="btn bg-gradient-add white btn-ht-lg-add pull-right btn-modal" title="@lang('messages.add')"
                          data-toggle="tooltip"
                    data-href="{{action([\App\Http\Controllers\ExpenseCategoryController::class, 'create'])}}" 
                    data-container=".expense_category_modal">
                    <i class="fa fa-plus fa-lg"></i> </button>
                </div>
            @endslot
            <div class="card">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0 full-width" id="expense_category_table">
                        <thead class="thead-light">
                            <tr>
                                <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang( 'expense.category_name' )</th>
                                <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang( 'expense.category_code' )</th>
                                <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang( 'messages.action' )</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        @endcomponent
    </div>
    <div class="modal fade expense_category_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>

</section>
<!-- /.content -->

@endsection