@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.e_wallets') => '#',
        ],
    ])
@endsection

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

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

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

            {{-- Create new ewallet modal --}}
            <div class="modal fade" id="createEwallet" data-bs-keyboard="false" tabindex="-1"
                aria-labelledby="createEwalletLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <x-tooltip content="{{ __('settings/accounting/ewallet-accounts.note') }}"></x-tooltip>
                            <h5 class="modal-title" id="createEwalletLabel">@lang('settings/accounting/ewallet-accounts.add_new_ewallet')</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="addEwallet">
                            @csrf

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


                                <input type="hidden" name="parent_id" value="{{ $ewallet_parent_id }}">
                            </div>

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

            {{-- Ewallets table --}}
            <div class="fake-form">
                <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/ewallet-accounts.account_from_tree')</th>
                            <th class="md-td">@lang('settings/accounting/ewallet-accounts.account_owner_name')</th>
                            <th class="xs-td">@lang('settings/accounting/ewallet-accounts.select_account')</th>
                            <th class="sm-td">@lang('settings/accounting/ewallet-accounts.procedures')</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($ewallets as $ewalletAccount)
                            <tr>
                                @php
                                    $ewallet_data = $ewalletAccount->ewallet_data;
                                    $formId = 'ewalletAccountForm' . $ewalletAccount->id;
                                @endphp

                                <td class="xs-td">
                                    <span>{{ $loop->iteration }}</span>
                                    <form
                                        action="{{ route('tenant.settings.accounting.ewallet-accounts.update', ['account' => $ewalletAccount->id]) }}"
                                        method="post" id="{{ $formId }}">
                                        @csrf @method('PUT')
                                    </form>
                                </td>
                                <td class="md-td" style="min-width: 150px;">{{ $ewalletAccount->name }}</td>
                                <td class="md-td">
                                    <input type="text" name="owner_name" id="owner_name" class="form-control"
                                        value="{{ $ewallet_data?->owner_name }}" form="{{ $formId }}" required>
                                </td>
                                <td class="xs-td">
                                    <input type="text" name="phone_number" id="phone_number" class="form-control"
                                        value="{{ $ewallet_data?->phone_number }}" form="{{ $formId }}" required>
                                </td>

                                <td class="sm-td">
                                    @can('accountingSettings-ewalletAccounts-edit')
                                        <input type="hidden" name="account_id" value="{{ $ewalletAccount->id }}"
                                            form="{{ $formId }}">
                                        <button class="btn orange-btn save_btn" form="{{ $formId }}">
                                            <i class="fas fa-save"></i> @lang('general.save')
                                        </button>
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

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

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

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