@extends('../layout/' . $layout)
@section('subhead')
    <title>Atarud MIS - Billings</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">Billings</h2>
        <div class="w-full xl:w-auto flex items-center mt-3 xl:mt-0">
            <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">Period Type</th>
                                <th class="whitespace-nowrap">Amount</th>
                                <th class="whitespace-nowrap">Description</th>
                                <th class="whitespace-nowrap">ACTIONS</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($billings as $row)
                            @php
                                $account = App\Models\ChartofAccount::where('id', $row->account_id)->first();
                                $accountName = $account != null ? $account->name :'';
                            @endphp
                                <tr class="intro-x">
                                    <td>#{{ $loop->index + 1 }}</td>
                                    <td>{{ $accountName }}</td>
                                    <td>{{ $row->period_type }}</td>
                                    <td>{{ $row->amount }}</td>
                                    <td>{{ $row->description }}</td>
                                    <td>
                                            <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">
                                                <i data-lucide="edit" class="mr-1"></i>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">
                                                <i data-lucide="trash-2" class="mr-1"></i>Delete
                                            </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!-- END: Data List -->
            </div>
        </div>
    </div>
    @include('../pages/billings/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