@extends('tenant.accounting.accounting-tabs')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.home') => '/',
            __('breadcrumb.accounting') => '/accounting/accounts',
            __('breadcrumb.reports') => '/accounting/reports',
            __('breadcrumb.total_account_balances') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', [
        'activeItem' => 'accounting.reports.accounts.total-account-balance',
    ])
@endsection

@php
    $activeTab = 'reports-totalAccountBalance';
@endphp

@section('style')
<link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css')}}">
<link rel="stylesheet" href="{{ asset('css/components/rounding.css')}}">
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.0/dist/css/tom-select.min.css" rel="stylesheet">

    <style>
        .light-mode .parent-account {
            background: #ededed;
        }

        .dark-mode .parent-account {
            background: rgb(78 78 78)
        }
    </style>
@endsection

@section('content-field')
    <div>
        <x-tenant.accounting.reports.accounts.totalAccountBalance :request="$request">
        </x-tenant.accounting.reports.accounts.totalAccountBalance>
    </div>
@endsection

@push('script')
    <script type="module">
        import printSection from '/tenancy/assets/js/print.js';
        $('body').on('click', '.print_report_btn', function() {
            let target = $('#printable-section').clone();
            let title = "إجمالي أرصدة الحسابات";
            const print_data = @json(Session::get('print_data'));
            printSection.print(target, print_data, title);
        });
    </script>
    {{-- add the tom-select library to delete the multiple select options --}}
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.0/dist/js/tom-select.complete.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const tomSelect = new TomSelect("#accounts_ids", {
                persist: false,
                create: false,
                plugins: ['remove_button'],
                render: {
                    item: function (data, escape) {
                        return `<div>${escape(data.text)}`;
                    }
                },
                placeholder: ''
            }); 
            const inputElement = document.querySelector('#accounts_ids-ts-control');
            if (tomSelect.items.length === 0) {
                inputElement.placeholder = 'الكل';
            } else {
                inputElement.placeholder = '';
            }
            inputElement.addEventListener('focus', () => {
                if (tomSelect.items.length > 0) {
                    inputElement.placeholder = '';
                }
            });
            
            inputElement.addEventListener('blur', updatePlaceholder);
        });
    </script>
@endpush