@extends('../layout/' . $layout)
@section('subhead')
    <title>Atarud MIS - Charts of Accounts</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection

@section('subcontent')
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Charts of Accounts</h2>

        <div class="w-full xl:w-auto flex items-center mt-3 xl:mt-0">
            <select class="form-select w-56" onchange="filterAccount(this.value)">
                <option value="all">All Accounts</option>
                <option value="expense">Expenses</option>
                <option value="income">Income/Revenue</option>
                <option value="equity">Equity</option>
                <option value="asset">Assets</option>
                <option value="dividients">Completed</option>
            </select>
            <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-account" class="btn btn-primary w-20 ml-2">
                <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
            </a>
        </div>
    </div>

    <div class="grid grid-cols-12 gap-6 mt-6">
        <!-- BEGIN: Data List -->
        <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

            <div class="grid grid-cols-12 gap-6 mt-5">
                <!-- BEGIN: Data List -->
                <div class="intro-y col-span-12 overflow-auto 2xl:overflow-visible">
                    <table class="table table-report -mt-2">
                        <thead>
                            <tr>
                                <th class="whitespace-nowrap">#</th>
                                <th class="whitespace-nowrap">ACCOUNT NAME</th>
                                <th class="whitespace-nowrap">ACCOUNT TYPE</th>
                                <th class="text-center whitespace-nowrap">STATUS</th>
                                <th class="text-right whitespace-nowrap">
                                    <div class="pr-16">OPENNING BALANCE</div>
                                </th>
                                <th class="text-center whitespace-nowrap">ACTIONS</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($accounts as $account)
                                <tr class="intro-x">
                                    <td class="w-40 !py-4">#{{ $loop->index + 1 }}</td>
                                    <td class="w-40">{{ $account->name }}</td>
                                    <td>{{ strToUpper($account->account_type) }}</td>
                                    <td class="text-center">
                                        <div class="flex items-center justify-center whitespace-nowrap text-{{($account->status == 'Active') ? 'success' : 'danger'}}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" icon-name="check-square" data-lucide="check-square" class="lucide lucide-check-square w-4 h-4 mr-2"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path></svg> {{ $account->status }}
                                        </div>
                                    </td>
                                    <td class="w-40 text-right">{{ $account->openning_balance }}</td>
                                    <td class="table-report__action">
                                        @if($account->isLocked == 0)
                                            <div class="flex justify-center items-center">
                                                <a class="flex items-center text-primary whitespace-nowrap mr-5" href="javascript:;" onclick="edit(this)" data-id="{{ $account->id }}" data-tw-toggle="modal" data-tw-target="#large-modal-size-preview">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" icon-name="edit" data-lucide="edit" class="lucide lucide-edit w-4 h-4 mr-1"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path></svg> Edit
                                                </a>
                                                <a class="flex items-center text-danger whitespace-nowrap" href="javascript:;" onclick="deleteRecord(this)" data-id="{{ $account->id }}"  data-tw-toggle="modal" data-tw-target="#delete-modal-preview">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" icon-name="trash-2" data-lucide="trash-2" class="lucide lucide-trash-2 w-4 h-4 mr-1"><polyline points="17 11 21 7 17 3"></polyline><line x1="21" y1="7" x2="9" y2="7"></line><polyline points="7 21 3 17 7 13"></polyline><line x1="15" y1="17" x2="3" y2="17"></line></svg> Delete
                                                </a>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!-- END: Data List -->
            </div>
        </div>
    </div>
    @include('../pages/account/create')
    @include('../pages/account/edit')
    @include('../pages/account/delete')
@endsection


@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $('#current_account').hide();
            $('#openning_balance').hide();
            $('#income').hide();
            $('#expense').hide();
            from_account_change();
        });

        function filterAccount(account){

        }

        function account_change(account) {
            let accType = '';
            if (account == 'equity' || account == 'current_assets' || account == 'liable'){
                $('#openning_balance').show();
                $('#expense').show();
                accType = 'expense';
                $('#income').hide();
            }

            if (account == 'income'){
                $('#expense').show();
                $('#openning_balance').show();

                $('#income').hide();
                accType = 'expense';

                $('#current_account').show();
            }
            if (account == 'expense'){
                $('#income').show();
                $('#openning_balance').hide();

                $('#expense').hide();
                accType = 'income';
 
            }
            $.ajax({
                method: 'GET',
                url: "{{ url('/transaction/getaccounts') }}",
                data: {
                    accType: accType,
                },
                success: function(response) {
                    jQuery('#debit_account').html(response);
                    console.log(response);
                }
            });

        }

        function from_account_change(type) {
            if (type == 'debit') {
                $('#debit').show();
                $('#credit').hide();
            } else if (type == 'credit') {
                $('#debit').hide();
                $('#credit').show();
            } else {
                $('#debit').hide();
                $('#credit').hide();
            }
        }
        //edit functionalities

        function edit(elem){
            var acc_id = elem.dataset.id;
            jQuery('#edit_openning_balance').hide();
            jQuery('#debit_from_acc_type').hide();
            jQuery('#credit_from_acc_type').hide();
            jQuery('#current_account').hide();

            $.ajax({
                method: 'GET',
                url: "{{ url('/account/edit') }}",
                data: {
                    id: acc_id,
                },
                success: function(response) {
                    jQuery('#account_id').val(response[0]['id']);
                    jQuery('#editName').val(response[1]);
                    jQuery('#edit_op_ba').val(response[2]);
                    jQuery('#accountEdit').html(response[3]);
                    if(response[0]['debit_account_id'] != 0 && response[0]['debit_account_id'] != '' && response[0]['debit_account_id'] != null){
                        jQuery('#debit_from_acc_type').show();
                        jQuery('#edit_debit_account_id').html(response[4]);
                    }
                    if(response[0]['credit_account_id'] != 0 && response[0]['credit_account_id'] != '' && response[0]['credit_account_id'] != null){
                        jQuery('#credit_from_acc_type').show();
                        jQuery('#edit_credit_account_id').html(response[5]);
                    }
                    if(response[0]['account_type'] == 'income'){
                        jQuery('#current_account').show();
                        jQuery('#edit_current_account_id').html(response[6]);

                    }
                    console.log(response);

                }
            });
        }

    $(document).ready(function(){
        account = $('#accountEdit').val();
        if (account == 'equity' || account == 'current_assets' || account == 'liable')
            $('#edit_openning_balance').show();
        else
            $('#edit_openning_balance').hide();
    });

    $('#accountEdit').val();

    function deleteRecord(elem){
            var acc_id = elem.dataset.id;
            jQuery('#delete_id').val(acc_id);
        }
    </script>
@endsection