@php
    $layout = match ($module) {
        'rentals' => 'tenant.rentals.rentals-tabs',
        'accounting' => 'tenant.accounting.accounting-tabs',
        'warehouses' => 'tenant.warehouses.warehouses-tabs',
        'pos' => 'tenant.pos.pos-tabs',
        default => 'tenant.accounting.accounting-tabs',
    };
@endphp
@section('style')
    <link rel="stylesheet" href="{{ asset('css/accounting/receivables/index.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css')}}">
@endsection
@extends($layout)
@section('breadcrumb')
    @php
        $breadcrumb_items[__('breadcrumb.home')] = '/';

        if ($module == 'warehouses') {
            $breadcrumb_items[__('breadcrumb.warehouses')] = '/warehouses/branches';
        } elseif ($module == 'accounting') {
            $breadcrumb_items[__('breadcrumb.accounting')] = '/accounting/accounts';
        } elseif ($module == 'rentals') {
            $breadcrumb_items[__('breadcrumb.rentals')] = '#';
        } elseif ($module == 'pos') {
            $breadcrumb_items[__('breadcrumb.point_of_sale')] = '/pos';
        }

        $breadcrumb_items[__('breadcrumb.receivables')] = route('tenant.receivables.index', ['module' => $module]);
    @endphp

    @include('tenant.layouts.breadcrumb', ['items' => $breadcrumb_items])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => "{$module}.receivables"])
@endsection

@section('content-field')
<div class="position-relative">

        @php
            $data = [
                'module' => $module,
                'tree_accounts' => $tree_accounts,
                'receivable_types' => $receivable_types,
                'receivable_accounts' => $receivable_accounts,
                'statement_data' => $statement_data
            ];
        @endphp

        <receivables-accounts-main-page :data="{{ json_encode($data) }}"></receivables-accounts-main-page>

        {{-- Add New Receivable Account Modal --}}
        <div class="modal fade" id="addReceivableModal" role="dialog" aria-labelledby="addReceivableModalLabel"
            aria-hidden="true" style="overflow:hidden;">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addReceivableModalLabel"> @lang('receivables/index.add_new_account_type')</h5>
                        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <form action="{{ route('tenant.receivables.receivable-types.store', ['module' => $module]) }}"
                            method="post" id="addReceivableForm">
                            @csrf

                            <div>
                                <label for="accountName"> @lang('receivables/index.account_name') *</label>
                                <input type="text" name="name" id="accountName" class="form-control"
                                    placeholder="{{__('receivables/index.account_name')}}" required>
                            </div>

                            <div class="mt-3">
                                <label for="add_account_id" style="max-width:100%; width: 100%;">
                                    <span class="rs">@lang('receivables/index.link_to_accounting')</span> <br>

                                    <select name="account_id" id="add_account_id" required>
                                        <option value="" selected disabled> @lang('receivables/index.select_account')</option>
                                        @foreach ($tree_accounts as $tree_account)
                                            <option value="{{ $tree_account->id }}">{{ $tree_account->name }}</option>
                                        @endforeach
                                    </select>
                                </label>
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" form="addReceivableForm" class="btn orange-btn form-btn">@lang('general.add')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('general.close')</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Import the receivables from the excel --}}
        <div class="modal fade" id="importReceivablesModal" role="dialog" aria-labelledby="importReceivablesModalLabel"
            aria-hidden="true" style="overflow:hidden;">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="importReceivablesModalLabel"> @lang('receivables/index.import_receivables')</h5>
                        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <form action="{{ route('tenant.files.download') }}" method="post" target="_blank"
                            name="download-receivable-file-form">
                            @csrf
                            <input type="hidden" name="filename"
                                value="{{ public_path('storage/initial_files/standard_receivables_import_file.xlsx') }}"
                                required>
                            <button class="btn btn-link">@lang('receivables/index.download_initial_file')</button>

                            <x-tooltip content="{{__('receivables/index.account_name')}}"></x-tooltip>
                        </form>

                        <form action="{{ route('tenant.receivables.accounts.excel-import', ['module' => $module]) }}"
                            method="post" id="importReceivablesForm" enctype="multipart/form-data">
                            @csrf

                            <div>
                                <label for="exce-file">@lang('receivables/index.file') *</label>
                                <input type="file" name="file" id="exce-file" class="form-control" required>
                            </div>

                            @if ($module != 'rentals')
                                <div>
                                    <label for="receivable_type_id"> @lang('receivables/index.receivables_type')</label>
                                    <select name="receivable_type_id" id="receivable_type_id">
                                        @foreach ($receivable_types as $receivable_type)
                                            <option value="{{ $receivable_type->id }}">{{ $receivable_type->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @else
                                @php $tenants_receivable_type_id = $receivable_types->where('key', 'tenants-receivables')->first()?->id; @endphp
                                <input type="hidden" name="receivable_type_id" value="{{ $tenants_receivable_type_id }}"
                                    required>
                            @endif
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" form="importReceivablesForm"
                            class="btn orange-btn form-btn"> @lang('receivables/index.import')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal"> @lang('general.close')</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    @scriptag('build/js/vue-components/receivables-accounts-main-page.js')

    <script type="module">
        import printSection from '/tenancy/assets/js/print.js';
        $(() => {
            $('body').on('click', '.print-table-view-btn', function() {
                let target = $('#printable-table').clone();
                let title = "حسابات الذمم";
                const print_data = @json(Session::get('print_data'));
                printSection.print(target, print_data, title, null, true);
            });

            $('.add-account-btn').on('click', function() {
                $('.add-account-layout').slideToggle();
            });
        });
    </script>
@endpush