@extends('layouts.master')
@section('title', __('accounting.account_book'))
@section('content_title', __('accounting.account_book'))
@section('content_summary', __('accounting.account_book_summary'))

@section('main_content')
    <div class="row">
        {{-- account book summary --}}
        <div class="col-md-4">
            <div class="main-card mb-3 card">
                <div class="card-body">
                    <table class="mb-0 table">
                        <tbody>
                            <tr>
                                <td>
                                    <h5><b>{{ __('accounting.account_name') }} :</b></h5>
                                </td>
                                <td>{{ $data['payment_account']->account_name }}</td>
                            </tr>
                            <tr>
                                <td>
                                    <h5><b>{{ __('accounting.account_type') }} :</b></h5>
                                </td>
                                <td>{{ $data['payment_account']->paymentAccountType->account_type }}</td>
                            </tr>
                            <tr>
                                <td>
                                    <h5><b>{{ __('accounting.account_no') }} :</b></h5>
                                </td>
                                <td>{{ $data['payment_account']->account_no }}</td>
                            </tr>
                            <tr>
                                <td>
                                    <h5><b>{{ __('accounting.opening_balance') }} :</b></h5>
                                </td>
                                <td id="opening-balance">{{ $data['payment_account']->opening_balance }}</td>
                            </tr>
                            <tr>
                                <td>
                                    <h5><b>{{ __('accounting.total_debit') }} :</b></h5>
                                </td>
                                <td id="total-debit">
                                    <div class="loader">
                                        <div class="ball-clip-rotate">
                                            <div></div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h5><b>{{ __('accounting.total_credit') }} :</b></h5>
                                </td>
                                <td id="total-credit">
                                    <div class="loader">
                                        <div class="ball-clip-rotate">
                                            <div></div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h5><b>{{ __('accounting.final_balance') }} :</b></h5>
                                </td>
                                <td id="final-balance">
                                    <div class="loader">
                                        <div class="ball-clip-rotate">
                                            <div></div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {{-- filter --}}
        <div class="col-md-8">
            <div class="main-card mb-3 card">
                <div class="card-body">
                    {{-- Filter form start --}}
                    <form id="payment-account-transaction-filter" method="GET">
                        <h4>{{ __('core.filter') }}</h4>
                        <div class="row">
                            <div class="position-relative col-md-6 mb-3">
                                <label for="start_date">{{ __('core.start_date') }}</label>
                                <input type="text" class="form-control" name="start_date" id="start_date"
                                    placeholder="{{ __('core.date') }}" data-toggle="datepicker"
                                    value="{{ now()->format('Y-m-d') }}">
                            </div>

                            <div class="position-relative col-md-6 mb-3">
                                <label for="end_date">{{ __('core.end_date') }}</label>
                                <input type="text" class="form-control" name="end_date" id="end_date"
                                    placeholder="{{ __('core.date') }}" data-toggle="datepicker"
                                    value="{{ now()->format('Y-m-d') }}">
                            </div>

                            <div class="position-relative col-md-6 mb-3">
                                <label for="accounce_type">{{ __('accounting.accounce_type') }}</label>
                                <select name="accounce_type" id="accounce_type" class="form-control filter-dropdown">
                                    <option value="">{{ __('core.all') }}</option>
                                    <option value="debit">{{ __('accounting.debit') }}</option>
                                    <option value="credit">{{ __('accounting.credit') }}</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    {{-- Filter form end --}}
                </div>
            </div>
        </div>
    </div>
    <div class="main-card mb-3 card">
        <div class="card-body">
            <div class="tab-pane active" id="tab-eg10-0" role="tabpanel">
                @include('accounting::payment_account.partials.account_book_transaction')
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            // Initialize DataTable
            $('#transaction').DataTable({
                responsive: true,
            });

            let paymentAccountId = {{ json_encode($data['payment_account']->id) }};

            // filter ajax part
            $('#payment-account-transaction-filter input, #payment-account-transaction-filter select').on('change',
                function() {
                    let formData = $('#payment-account-transaction-filter').serialize(); // Serialize form data

                    $.ajax({
                        method: "GET",
                        url: "{{ route('accounting.payment_account.account_book', ':id') }}".replace(
                            ':id',
                            paymentAccountId),
                        data: formData,
                        success: function(response) {
                            // Destroy the existing DataTable instance
                            if ($.fn.DataTable.isDataTable('#transaction')) {
                                $('#transaction').DataTable().destroy();
                            }

                            // Replace the table body with the new data
                            $('#transaction-data').html(response.transactionData);
                            $('#total-debit').html(response.totalDebit);
                            $('#total-credit').html(response.totalCredit);
                            $('#final-balance').html(parseFloat($('#opening-balance').html()) +
                                response
                                .totalDebit -
                                response.totalCredit);

                            // Reinitialize the DataTable
                            $('#transaction').DataTable({
                                responsive: true
                            });
                        },
                        error: function(xhr, status, error) {}
                    });
                })

            // Load data
            function loadTransaction() {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('accounting.payment_account.account_book', ':id') }}".replace(':id',
                        paymentAccountId),
                    success: function(response) {
                        // Destroy the existing DataTable instance
                        if ($.fn.DataTable.isDataTable('#transaction')) {
                            $('#transaction').DataTable().destroy();
                        }

                        // Replace the table body with the new data
                        $('#transaction-data').html(response.transactionData);
                        $('#total-debit').html(response.totalDebit);
                        $('#total-credit').html(response.totalCredit);
                        $('#final-balance').html(parseFloat($('#opening-balance').html()) + response
                            .totalDebit -
                            response.totalCredit);

                        // Reinitialize the DataTable
                        $('#transaction').DataTable({
                            responsive: true
                        });
                    },
                    error: function(response) {}
                });
            }

            /*
            // Destroy
            var destroyUrl = '';
            $(document).on('click', '.destroy', function(e) {
                e.preventDefault();
                destroyUrl = $(this).attr('href');
                $('#confirm-destroy').data('destroy-url', destroyUrl); // Store destroy URL
            });

            // Confirm destroy modal
            $(document).on('click', '#confirm-destroy', function() {
                destroyUrl = $(this).data('destroy-url'); // Retrieve destroy URL
                $.ajax({
                    method: 'DELETE',
                    url: destroyUrl,
                    success: function(response) {
                        $('#destroyModal').modal('hide');
                        loadData();
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });

            });*/

            // Initial load
            loadTransaction();
        });
    </script>
@endpush