@extends('root')
@section('title', 'Expense Categories')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Expense Categories',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.expenses.index'), 'label' => 'Expenses'],
        ],
        'current' => 'Categories'
    ])

    <div class="card card-body">
        <div class="d-flex justify-content-between mb-3">
            <h5 class="mb-0">Daftar Kategori Expense</h5>
            <button class="btn btn-primary btn-create" data-url="{{ route('admin.expense-categories.create') }}">
                <i class="ti ti-plus me-1"></i> Tambah Kategori
            </button>
        </div>
        
        <div class="table-responsive">
            <table class="table table-striped" id="datatable">
                <thead>
                    <tr>
                        <th width="50">#</th>
                        <th>Nama</th>
                        <th>Icon</th>
                        <th>Warna</th>
                        <th>Total Expenses</th>
                        <th>Status</th>
                        <th width="120">Opsi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#datatable').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('admin.expense-categories.data') }}',
            dataSrc: 'data'
        },
        columns: [
            { 
                data: 'sort_order',
                className: 'text-center'
            },
            { 
                data: 'name',
                render: function(data, type, row) {
                    return '<i class="' + row.icon + ' me-2" style="color:' + row.color + '"></i>' + data;
                }
            },
            { 
                data: 'icon',
                render: function(data) {
                    return '<code>' + data + '</code>';
                }
            },
            { 
                data: 'color',
                render: function(data) {
                    return '<span class="badge" style="background-color:' + data + '">' + data + '</span>';
                }
            },
            { 
                data: null,
                render: function(data, type, row) {
                    return '<strong>' + row.expenses_count + '</strong> transaksi<br>' +
                           '<small class="text-muted">' + row.formatted_total + '</small>';
                }
            },
            { 
                data: 'is_active',
                render: function(data) {
                    return data 
                        ? '<span class="badge bg-success">Aktif</span>'
                        : '<span class="badge bg-secondary">Nonaktif</span>';
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                className: 'text-center',
                render: function(data, type, row) {
                    var editUrl = '{{ route('admin.expense-categories.edit', ':id') }}'.replace(':id', row.id);
                    var deleteUrl = '{{ route('admin.expense-categories.destroy', ':id') }}'.replace(':id', row.id);

                    var deleteBtn = row.expenses_count > 0 
                        ? '<button class="btn btn-secondary btn-sm" disabled title="Tidak dapat dihapus karena memiliki expenses"><i class="ti ti-trash"></i></button>'
                        : '<button class="btn btn-danger btn-sm btn-delete" data-url="' + deleteUrl + '" title="Hapus"><i class="ti ti-trash"></i></button>';

                    return `
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-warning btn-create" data-url="${editUrl}" title="Edit">
                                <i class="ti ti-pencil"></i>
                            </button>
                            ${deleteBtn}
                        </div>
                    `;
                }
            }
        ],
        order: [[0, 'asc']],
        language: {
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ - _END_ dari _TOTAL_ data"
        }
    });
});
</script>
@endpush