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

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
        __('breadcrumb.accounting_settings') => route('tenant.settings.accounting.taxes.index', ['type' => 'taxes']),
        __('breadcrumb.bank_accounts') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.accounting.accounts-banks'])
@endsection

@section('accounting-settings-content')
    @php
        $bank_parent_id = App\Models\Accounting\Account::where('account_type', 'banks')->first()->id;
    @endphp

    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        {{-- Banks Section --}}
        <div>
            <div class="d-flex justify-content-between">
                <h4>@lang('settings/accounting/accounts-banks.bank_accounts')</h4>
                <button class="btn btn-sm orange-btn" type="button" data-bs-toggle="modal" data-bs-target="#createBank">
                    <i class="fas fa-plus-circle"></i> @lang('settings/accounting/accounts-banks.add_new_bank')
                </button>
            </div>

            {{-- Create new bank modal --}}
            <div class="modal fade" id="createBank" data-bs-keyboard="false" tabindex="-1"
                aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <x-tooltip content="{{__('settings/accounting/accounts-banks.add_new_bank')}}"></x-tooltip>
                            <h5 class="modal-title " id="staticBackdropLabel"> @lang('settings/accounting/accounts-banks.add_new_bank')</h5>
                            <button type="button" class="btn-close ms-0" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <form action="{{ route('tenant.accounting.accounts.hot-store') }}" method="POST" id="addNewBank">
                            @csrf

                            <div class="modal-body">
                                <div>
                                    <label for="accountName" class="rs"> @lang('settings/accounting/accounts-banks.bank_name')</label>
                                    <input type="text" name="name" id="accountName" class="form-control"
                                        placeholder="{{__('settings/accounting/accounts-banks.bank_name')}}" required>
                                </div>

                                <div class="my-4">
                                    <small class="text-danger"></small>
                                </div>
                                <input type="hidden" name="parent_id" value="{{ $bank_parent_id }}">
                            </div>

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

            {{-- banks table --}}
            <div>
                <table class="table table-bordered table-striped w-100">
                    <thead>
                        <tr>
                            <th class="xs-td">#</th>
                            <th class="md-td" style="min-width: 150px;">@lang('settings/accounting/accounts-banks.account_from_tree')</th>
                            <th class="md-td">@lang('settings/accounting/accounts-banks.checks_collection')</th>
                            <th class="md-td"> @lang('settings/accounting/accounts-banks.postdated_checks')</th>
                            <th class="md-td"> @lang('settings/accounting/accounts-banks.account_owner_name')</th>
                            <th class="sm-td"> @lang('settings/accounting/accounts-banks.account_number')</th>
                            <th class="sm-td"> @lang('settings/accounting/accounts-banks.procedures')</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($banks as $bank)
                            <tr class="fake-form">
                                @php
                                    $accountBank = $bank->bank_data;
                                    $formId = 'bankAccountForm' . $bank->id;
                                @endphp
                                <td class="xs-td">
                                    <span>{{ $loop->iteration }}</span>
                                    <form action="{{ route('tenant.settings.accounting.accounts-banks.connect-bank') }}"
                                        method="post" id="{{ $formId }}">
                                        @csrf
                                    </form>
                                </td>
                                <td class="md-td" style="min-width: 150px;">{{ $bank->name }}</td>
                                <td class="md-td">
                                    <select name="underCollectionCheck_id" style="width: 100%;" form="{{ $formId }}"
                                        required>
                                        <option value=""> @lang('settings/accounting/accounts-banks.select_account')</option>
                                        @foreach ($underCollectionChecks as $checkAccount)
                                            <option value="{{ $checkAccount->id }}"
                                                {{ $accountBank?->underCollectionCheck_id == $checkAccount->id ? 'selected' : '' }}>
                                                {{ $checkAccount->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="md-td">
                                    <select name="postPaidCheck_id" style="width: 100%;" form="{{ $formId }}"
                                        required>
                                        <option value="">@lang('settings/accounting/accounts-banks.select_account')</option>
                                        @foreach ($postPaidChecks as $checkAccount)
                                            <option value="{{ $checkAccount->id }}"
                                                {{ $accountBank?->postPaidCheck_id == $checkAccount->id ? 'selected' : '' }}>
                                                {{ $checkAccount->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="md-td">
                                    <input type="text" name="owner_name" id="owner_name" class="form-control"
                                        value="{{ $accountBank?->owner_name }}" form="{{ $formId }}">
                                </td>
                                <td class="sm-td">
                                    <input type="text" name="bank_number" id="bank_number" class="form-control"
                                        value="{{ $accountBank?->bank_number }}" form="{{ $formId }}" required>
                                </td>
                                <input type="hidden" name="bank_id" value="{{ $bank->id }}"
                                    form="{{ $formId }}" required>

                                @can('accountingSettings-bankAccountsConnecting-connect')
                                    <td class="sm-td">
                                        <button class="btn orange-btn save_btn" form="{{ $formId }}">
                                            <i class="fas fa-save"></i> @lang('settings/accounting/accounts-banks.save')
                                        </button>
                                    </td>
                                @endcan
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script type="module">
        import {
            confirmAndSubmit
        } from '/tenancy/assets/js/helpers.js';

        $(() => {
            $('#addNewBank').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('addNewBank', {
                    type: 'green'
                });
            });

            $('.save_btn').on('click', function(e) {
                const formId = $(this).attr('form');
                confirmAndSubmit(formId, {
                    type: 'green'
                });
            });
        });
    </script>
@endpush