@extends('layouts.app')

@section('title', __('accounting-reports::lang.chart_of_accounts'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang('accounting-reports::lang.chart_of_accounts')</h1>
</section>

<!-- Main content -->
<section class="content">
    @component('components.widget', ['class' => 'box-primary'])
        <div class="row">
            <div class="col-md-12">
                <div class="btn-group">
                    <a href="{{ route('accounting-reports.chart-of-accounts.create') }}" class="btn btn-success">
                        <i class="fa fa-plus"></i> @lang('accounting-reports::lang.add_account')
                    </a>
                </div>
            </div>
        </div>
        <br>
        
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('filter_account_group', __('accounting-reports::lang.account_group') . ':') !!}
                    {!! Form::select('filter_account_group', [
                        '' => __('lang_v1.all'),
                        'assets_current' => 'Current Assets',
                        'assets_non_current' => 'Non-Current Assets',
                        'liabilities_current' => 'Current Liabilities',
                        'liabilities_non_current' => 'Non-Current Liabilities',
                        'equity' => 'Equity',
                        'income' => 'Income',
                        'cogs' => 'Cost of Goods Sold',
                        'expenses' => 'Expenses',
                        'other_income' => 'Other Income',
                        'other_expenses' => 'Other Expenses',
                    ], null, ['class' => 'form-control select2', 'id' => 'filter_account_group']) !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('filter_account_type', __('accounting-reports::lang.account_type') . ':') !!}
                    {!! Form::select('filter_account_type', [
                        '' => __('lang_v1.all'),
                        'asset' => 'Asset',
                        'liability' => 'Liability',
                        'equity' => 'Equity',
                        'income' => 'Income',
                        'expense' => 'Expense',
                    ], null, ['class' => 'form-control select2', 'id' => 'filter_account_type']) !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('filter_is_active', __('accounting-reports::lang.status') . ':') !!}
                    {!! Form::select('filter_is_active', [
                        '' => __('lang_v1.all'),
                        '1' => __('accounting-reports::lang.active'),
                        '0' => __('accounting-reports::lang.inactive'),
                    ], null, ['class' => 'form-control select2', 'id' => 'filter_is_active']) !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('search', __('lang_v1.search') . ':') !!}
                    {!! Form::text('search', null, ['class' => 'form-control', 'id' => 'search', 'placeholder' => __('lang_v1.search_placeholder')]) !!}
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover" id="chart_of_accounts_table" style="width:100%;">
                <thead>
                    <tr>
                        <th>@lang('accounting-reports::lang.account_code')</th>
                        <th>@lang('accounting-reports::lang.account_name')</th>
                        <th>@lang('accounting-reports::lang.account_type')</th>
                        <th>@lang('accounting-reports::lang.account_group')</th>
                        <th>@lang('accounting-reports::lang.parent_account')</th>
                        <th>@lang('accounting-reports::lang.balance')</th>
                        <th>@lang('accounting-reports::lang.status')</th>
                        <th>@lang('messages.action')</th>
                    </tr>
                </thead>
            </table>
        </div>
    @endcomponent
</section>

@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        var chart_of_accounts_table = $('#chart_of_accounts_table').DataTable({
            processing: true,
            serverSide: false,
            ajax: {
                url: '{{ route("accounting-reports.chart-of-accounts.get-data") }}',
                dataSrc: function(json) {
                    // Filter data client-side
                    var filtered = json;
                    if ($('#filter_account_group').val()) {
                        var filterGroup = $('#filter_account_group').val();
                        filtered = filtered.filter(function(item) {
                            return item.account_group.toLowerCase().replace(/\s+/g, '_') == filterGroup;
                        });
                    }
                    if ($('#filter_account_type').val()) {
                        var filterType = $('#filter_account_type').val();
                        filtered = filtered.filter(function(item) {
                            return item.account_type.toLowerCase() == filterType;
                        });
                    }
                    if ($('#filter_is_active').val() !== '') {
                        var filterActive = $('#filter_is_active').val() == '1';
                        filtered = filtered.filter(function(item) {
                            return item.is_active == filterActive;
                        });
                    }
                    if ($('#search').val()) {
                        var search = $('#search').val().toLowerCase();
                        filtered = filtered.filter(function(item) {
                            return item.account_code.toLowerCase().includes(search) || 
                                   item.account_name.toLowerCase().includes(search);
                        });
                    }
                    return filtered;
                }
            },
            columns: [
                { data: 'account_code', name: 'account_code' },
                { data: 'account_name', name: 'account_name' },
                { data: 'account_type', name: 'account_type' },
                { data: 'account_group', name: 'account_group' },
                { data: 'parent_name', name: 'parent_name', defaultContent: '-' },
                { 
                    data: 'current_balance', 
                    name: 'current_balance',
                    render: function(data, type, row) {
                        if (data == null) return '0.00';
                        return parseFloat(data).toFixed(2);
                    }
                },
                { 
                    data: 'is_active', 
                    name: 'is_active',
                    render: function(data, type, row) {
                        if (data) {
                            return '<span class="label label-success">@lang("accounting-reports::lang.active")</span>';
                        } else {
                            return '<span class="label label-danger">@lang("accounting-reports::lang.inactive")</span>';
                        }
                    }
                },
                { 
                    data: 'action', 
                    name: 'action', 
                    orderable: false, 
                    searchable: false,
                    render: function(data, type, row) {
                        var html = '<div class="btn-group">';
                        html += '<a href="{{ url("accounting-reports/chart-of-accounts") }}/' + row.id + '" class="btn btn-info btn-xs" title="@lang("messages.view")"><i class="fa fa-eye"></i></a>';
                        html += '<a href="{{ url("accounting-reports/chart-of-accounts") }}/' + row.id + '/edit" class="btn btn-primary btn-xs" title="@lang("messages.edit")"><i class="fa fa-edit"></i></a>';
                        if (!row.has_transactions && !row.has_children) {
                            html += '<button type="button" data-href="{{ url("accounting-reports/chart-of-accounts") }}/' + row.id + '" class="btn btn-danger btn-xs delete_account" title="@lang("messages.delete")"><i class="fa fa-trash"></i></button>';
                        }
                        html += '</div>';
                        return html;
                    }
                }
            ],
            order: [[0, 'asc']],
        });

        // Filter on change
        $('#filter_account_group, #filter_account_type, #filter_is_active').on('change', function() {
            chart_of_accounts_table.draw();
        });

        // Search on keyup with debounce
        var searchTimeout;
        $('#search').on('keyup', function() {
            clearTimeout(searchTimeout);
            var self = this;
            searchTimeout = setTimeout(function() {
                chart_of_accounts_table.draw();
            }, 500);
        });

        // Delete account
        $(document).on('click', '.delete_account', function() {
            var url = $(this).data('href');
            swal({
                title: LANG.sure,
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        method: 'DELETE',
                        url: url,
                        dataType: 'json',
                        success: function(result) {
                            if (result.success) {
                                toastr.success(result.msg);
                                chart_of_accounts_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    });
                }
            });
        });
    });
</script>
@endsection