@extends('tenant.settings.general.all-general-settings')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.general_settings') => route('tenant.settings.general.show-page', ['type' => 'company-information']),
            __('breadcrumb.payment_methods') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.general.payment_methods'])
@endsection

@section('settings-content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <div class="d-flex align-items-center justify-content-between">
            <h4>@lang('settings/general/payment_method.receivable_payment_methods')</h4>

            <button class="btn btn-sm orange-btn my-3" data-bs-toggle="modal" data-bs-target="#addPaymentMethodModal">
                <i class="fas fa-plus-circle"></i> @lang('settings/general/payment_method.add_new_method')
            </button>
        </div>

        {{-- Payment methods as table --}}
        <div>
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th class="xs-td">#</th>
                        <th class="xs-td"> @lang('settings/general/payment_method.logo')</th>
                        <th class="sm-td"> @lang('settings/general/payment_method.method_type')</th>
                        <th class="md-td">@lang('settings/general/payment_method.method_title')</th>
                        <th class="xs-td">@lang('settings/general/payment_method.days_count')</th>
                        <th class="sm-td">@lang('settings/general/payment_method.account')</th>
                        <th class="sm-td">@lang('settings/general/payment_method.commission_account')</th>
                        <th class="sm-td">@lang('settings/general/payment_method.status')</th>
                        <th class="xs-td">@lang('settings/general/payment_method.procedures')</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach ($methods as $method)
                        <tr>
                            <td class="xs-td">{{ $loop->iteration }}</td>
                            <td class="sm-td">
                                @if ($method->logo)
                                    <img src="{{ $method->logo }}" alt="Logo Image" class="preview-image">
                                @endif
                            </td>
                            <td class="sm-td">{{ $method->way_type_as_text }}</td>
                            <td class="md-td">{{ $method->title }}</td>
                            <td class="xs-td">
                                {{ $method->way_type != 'cards'
                                    ? ($method->days_count == 1 || $method->days_count == 0
                                        ? $method->days_count . ' ' . trans('settings/general/payment_method.day')
                                        : $method->days_count . ' ' . trans('settings/general/payment_method.days'))
                                     : '---' 
                                 }}

                            </td>

                            <td class="sm-td">
                                @if ($method->way_type != 'receivable')
                                    @foreach ($method->connected_accounts as $connected_account)
                                        <span>
                                            {{ $connected_account->branch?->name }} -
                                            {{ $connected_account->account?->name }}
                                        </span> <br>
                                    @endforeach
                                @else
                                    ---
                                @endif
                            </td>

                            <td class="sm-td">
                                @if ($method->way_type == 'cards')
                                    @foreach ($method->connected_accounts as $connected_account)
                                        <span>
                                            {{ $connected_account->branch->name }} -
                                            {{ $connected_account->commission_account?->name }}
                                        </span> <br>
                                    @endforeach
                                @else
                                    ---
                                @endif
                            </td>

                            <td class="sm-td">
                                @if ($method->status)
                                    <form
                                        action="{{ route('tenant.settings.general.receivable-payment-methods.change-status', ['id' => $method->id]) }}"
                                        method="POST">
                                        @csrf
                                        <span>@lang('settings/general/payment_method.active')</span>
                                        <button type="button" class="btn btn-outline-danger btn-sm rounded-pill"
                                            name="un-active">@lang('settings/general/payment_method.d_activate')</button>
                                    </form>
                                @else
                                    <form
                                        action="{{ route('tenant.settings.general.receivable-payment-methods.change-status', ['id' => $method->id]) }}"
                                        method="POST">
                                        @csrf
                                        <span>@lang('settings/general/payment_method.inactive')</span>
                                        <button type="button" class="btn btn-outline-success btn-sm rounded-pill"
                                            name="active">@lang('settings/general/payment_method.activate')</button>
                                    </form>
                                @endif
                            </td>

                            <td class="xs-td">
                                <x-operations-btn>
                                    <li>
                                        <button class="btn edit-method-btn"
                                            data-paymentMethod="{{ json_encode($method) }}">
                                            <i class="fas fa-edit"></i> @lang('settings/general/payment_method.edit')
                                        </button>
                                    </li>

                                    <li>
                                        <form
                                            action="{{ route('tenant.settings.general.receivable-payment-methods.destroy', ['receivable_payment_method' => $method->id]) }}"
                                            method="post">
                                            @csrf
                                            @method('delete')

                                            <button class="btn" name="delete" type="button">
                                                <i class="fas fa-trash-alt"></i> @lang('settings/general/payment_method.delete')
                                            </button>
                                        </form>
                                    </li>
                                </x-operations-btn>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Add new payment method modal --}}
        <div class="modal fade" id="addPaymentMethodModal" tabindex="-1" aria-labelledby="addPaymentMethodModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="addPaymentMethodModalLabel">@lang('settings/general/payment_method.add_new_payment_method')</h1>
                        <button type="button" class="btn-close mx-0" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <form action="{{ route('tenant.settings.general.receivable-payment-methods.store') }}"
                            method="post" id="addPaymentMethodForm" enctype="multipart/form-data">
                            @csrf

                            <div class="form-group my-2">
                                <label for="title" class="rs">@lang('settings/general/payment_method.title')</label>
                                <input type="text" placeholder="{{__('settings/general/payment_method.method_title')}}" id="title" name="title"
                                    class="form-control" value="{{ request()->old('title') }}" required>
                            </div>
                            <div class="my-2 d-flex">
                                <div>
                                    <label for="logo" class="upload-file-appearence">@lang('settings/general/payment_method.logo') </label>
                                    <input type="file" name="logo" id="logo" class="form-control"
                                        accept="image/*">
                                </div>

                                <div class="preview-image-layout"></div>
                            </div>

                            <button type="button" class="btn btn-outline-danger btn-sm remove-logo-btn"
                                id="remove-logo-btn">@lang('settings/general/payment_method.delete')</button>

                            <div class="form-group my-2">
                                <label class="rs">@lang('settings/general/payment_method.payment_type')</label>
                                <div class="d-flex gap-3">
                                    <div>
                                        <label for="receivable_way_type">@lang('settings/general/payment_method.receivables')</label>
                                        <input type="radio" name="way_type" id="receivable_way_type" value="receivable"
                                            {{ request()->old('way_type') == 'receivable' || request()->old('way_type') == '' ? 'checked' : '' }}>
                                    </div>

                                    <div>
                                        <label for="cash_payment_way">@lang('settings/general/payment_method.cash')</label>
                                        <input type="radio" name="way_type" id="cash_payment_way" value="cash"
                                            {{ request()->old('way_type') == 'cash' ? 'checked' : '' }}>
                                    </div>

                                    <div>
                                        <label for="cards_payment_way">@lang('settings/general/payment_method.cards')</label>
                                        <input type="radio" name="way_type" id="cards_payment_way" value="cards"
                                            {{ request()->old('way_type') == 'cards' ? 'checked' : '' }}>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group my-3 days_count_layout">
                                <label for="days_count_input" class="rs">@lang('settings/general/payment_method.days_count')</label>
                                <input type="number" min="0" placeholder="{{__('settings/general/payment_method.days_count')}}" id="days_count_input"
                                    name="days_count" class="form-control" value="{{ request()->old('days_count') }}">
                            </div>

                            @if (count($branches) >= 1)
                                <div class="account_id my-3">
                                    <ul class="nav nav-tabs">
                                        @foreach ($branches as $branch)
                                            <li class="nav-item">
                                                <button class="nav-link {{ $loop->iteration == 1 ? 'active' : '' }}"
                                                    id="a-b-{{ $branch->id }}-account-btn" data-bs-toggle="tab"
                                                    data-bs-target="#a-b-{{ $branch->id }}-account-tab" type="button"
                                                    role="tab" aria-selected="true">
                                                    {{ $branch->name }}
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>

                                    <div class="tab-content">
                                        @foreach ($branches as $branch)
                                            <div class="tab-pane fade {{ $loop->iteration == 1 ? 'show active' : '' }}"
                                                id="a-b-{{ $branch->id }}-account-tab" role="tabpanel">
                                                <label for="account_id_branch_{{ $branch->id }}"
                                                    class="rs fw-bold">@lang('settings/general/payment_method.account')</label>
                                                <select name="branches_accounts[{{ $branch->id }}][account_id]"
                                                    id="account_id_branch_{{ $branch->id }}"
                                                    class="form-control default-select" required>
                                                    <option value="">@lang('settings/general/payment_method.select_account')</option>
                                                    @foreach ($accounts as $account)
                                                        <option value="{{ $account->id }}"
                                                            {{ request()->old('account_id') == $account->id ? 'selected' : '' }}>
                                                            {{ $account->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="commission_account_id my-3">
                                    <ul class="nav nav-tabs">
                                        @foreach ($branches as $branch)
                                            <li class="nav-item">
                                                <button class="nav-link {{ $loop->iteration == 1 ? 'active' : '' }}"
                                                    id="a-b-{{ $branch->id }}-commission-btn" data-bs-toggle="tab"
                                                    data-bs-target="#a-b-{{ $branch->id }}-commission-tab"
                                                    type="button" role="tab" aria-selected="true">
                                                    {{ $branch->name }}
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>

                                    <div class="tab-content">
                                        @foreach ($branches as $branch)
                                            <div class="tab-pane fade {{ $loop->iteration == 1 ? 'show active' : '' }}"
                                                id="a-b-{{ $branch->id }}-commission-tab" role="tabpanel">
                                                <label for="commission_account_id_branch_{{ $branch->id }}"
                                                    class="rs fw-bold">@lang('settings/general/payment_method.commission_account')</label>
                                                <select
                                                    name="branches_accounts[{{ $branch->id }}][commission_account_id]"
                                                    id="commission_account_id_branch_{{ $branch->id }}"
                                                    class="form-control default-select" required>
                                                    <option value="">@lang('settings/general/payment_method.select_account')</option>

                                                    @foreach ($accounts as $account)
                                                        <option value="{{ $account->id }}"
                                                            {{ request()->old('commission_account_id') == $account->id ? 'selected' : '' }}>
                                                            {{ $account->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @endforeach
                                    </div>
                                    <hr>
                                </div>
                            @else
                                <p class="my-3 text-center"> @lang('settings/general/payment_method.no_accounts_found') </p>
                            @endif

                            <div class="form-group my-3 commission_ratio_layout">
                                <label for="commission_ratio_input" class="rs">@lang('settings/general/payment_method.commission_ratio')</label>
                                <input type="number" min="0" placeholder="{{__('settings/general/payment_method.commission_ratio')}}"
                                    id="commission_ratio_input" name="commission_ratio" class="form-control"
                                    value="{{ request()->old('commission_ratio') }}">
                            </div>

                            @can('pos')
                                <div class="form-group my-2">
                                    <label for="show_in_pos" class="rs"> @lang('settings/general/payment_method.appear_in_pos') </label>
                                    <input type="checkbox" id="show_in_pos" name="show_in_pos" class="custom-checkbox"
                                        value="1" {{ request()->old('show_in_pos') ? 'checked' : '' }}>
                                </div>
                            @endcan
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button class="btn orange-btn" id="addFormButton">@lang('settings/general/payment_method.add')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('settings/general/payment_method.cancel')</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Edit payment method modal --}}
        <div class="modal fade" id="editPaymentMethodModal" tabindex="-1" aria-labelledby="editPaymentMethodModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="editPaymentMethodModalLabel"> @lang('settings/general/payment_method.edit_receivable_payment_method')</h1>
                        <button type="button" class="btn-close mx-0" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <form action="#" method="post" id="editPaymentMethodForm" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="form-group my-2">
                                <label for="edit_title" class="rs">@lang('settings/general/payment_method.title')</label>
                                <input type="text" placeholder="{{__('settings/general/payment_method.method_title')}}" id="edit_title" name="title"
                                    class="form-control" required>
                            </div>

                            <div class="my-2 d-flex">
                                <div>
                                    <label for="logo" class="upload-file-appearence">@lang('settings/general/payment_method.logo') </label>
                                    <input type="file" name="logo" id="edit_logo" class="form-control"
                                        accept="image/*">
                                </div>

                                <div class="preview-image-layout">
                                    <img src="" alt="Logo Image" class="preview-image preview-image-edit">
                                </div>
                            </div>

                            <button type="button" class="btn btn-outline-danger btn-sm remove-logo-btn"
                                id="remove-logo-btn">
                                حذف
                            </button>

                            <div class="form-group my-2">
                                <label class="rs">@lang('settings/general/payment_method.payment_type')</label>
                                <div class="d-flex gap-3">
                                    <div>
                                        <label for="edit_receivable_way_type">@lang('settings/general/payment_method.receivables')</label>
                                        <input type="radio" name="way_type" id="edit_receivable_way_type"
                                            value="receivable"
                                            {{ request()->old('way_type') == 'receivable' || request()->old('way_type') == '' ? 'checked' : '' }}>
                                    </div>

                                    <div>
                                        <label for="edit_cash_payment_way">@lang('settings/general/payment_method.cash')</label>
                                        <input type="radio" name="way_type" id="edit_cash_payment_way" value="cash"
                                            {{ request()->old('way_type') == 'cash' ? 'checked' : '' }}>
                                    </div>

                                    <div>
                                        <label for="edit_cards_payment_way">@lang('settings/general/payment_method.cards')</label>
                                        <input type="radio" name="way_type" id="edit_cards_payment_way" value="cards"
                                            {{ request()->old('way_type') == 'cards' ? 'checked' : '' }}>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group my-3 edit_days_count_layout">
                                <label for="edit_days_count_input" class="rs"> @lang('settings/general/payment_method.days_count')</label>
                                <input type="number" min="0" placeholder="{{__('settings/general/payment_method.days_count')}}" id="edit_days_count_input"
                                    name="days_count" class="form-control" value="{{ request()->old('days_count') }}">
                            </div>

                            @if (count($branches) >= 1)
                                <div class="edit_account_id my-3">
                                    <ul class="nav nav-tabs">
                                        @foreach ($branches as $branch)
                                            <li class="nav-item">
                                                <button class="nav-link {{ $loop->iteration == 1 ? 'active' : '' }}"
                                                    id="e-b-{{ $branch->id }}-account-btn" data-bs-toggle="tab"
                                                    data-bs-target="#e-b-{{ $branch->id }}-account-tab" type="button"
                                                    role="tab" aria-selected="true">
                                                    {{ $branch->name }}
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>

                                    <div class="tab-content">
                                        @foreach ($branches as $branch)
                                            <div class="tab-pane fade {{ $loop->iteration == 1 ? 'show active' : '' }}"
                                                id="e-b-{{ $branch->id }}-account-tab" role="tabpanel">
                                                <label for="edit_account_id_branch_{{ $branch->id }}"
                                                    class="rs fw-bold">@lang('settings/general/payment_method.account')</label>
                                                <select name="branches_accounts[{{ $branch->id }}][account_id]"
                                                    id="edit_account_id_branch_{{ $branch->id }}"
                                                    class="form-control default-select" required>
                                                    <option value="">@lang('settings/general/payment_method.select_account')</option>
                                                    @foreach ($accounts as $account)
                                                        <option value="{{ $account->id }}"
                                                            {{ request()->old('account_id') == $account->id ? 'selected' : '' }}>
                                                            {{ $account->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="edit_commission_account_id my-3">
                                    <ul class="nav nav-tabs">
                                        @foreach ($branches as $branch)
                                            <li class="nav-item">
                                                <button class="nav-link {{ $loop->iteration == 1 ? 'active' : '' }}"
                                                    id="e-b-{{ $branch->id }}-commission-btn" data-bs-toggle="tab"
                                                    data-bs-target="#e-b-{{ $branch->id }}-commission-tab"
                                                    type="button" role="tab" aria-selected="true">
                                                    {{ $branch->name }}
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>

                                    <div class="tab-content">
                                        @foreach ($branches as $branch)
                                            <div class="tab-pane fade {{ $loop->iteration == 1 ? 'show active' : '' }}"
                                                id="e-b-{{ $branch->id }}-commission-tab" role="tabpanel">
                                                <label for="edit_commission_account_id_branch_{{ $branch->id }}"
                                                    class="rs fw-bold">@lang('settings/general/payment_method.commission_account')</label>
                                                <select
                                                    name="branches_accounts[{{ $branch->id }}][commission_account_id]"
                                                    id="edit_commission_account_id_branch_{{ $branch->id }}"
                                                    class="form-control default-select" required>
                                                    <option value="">@lang('settings/general/payment_method.select_account')</option>

                                                    @foreach ($accounts as $account)
                                                        <option value="{{ $account->id }}"
                                                            {{ request()->old('commission_account_id') == $account->id ? 'selected' : '' }}>
                                                            {{ $account->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @endforeach
                                        <hr>
                                    </div>
                                </div>
                            @else
                                <p class="my-3 text-center account_id "> @lang('settings/general/payment_method.no_accounts_found')</p>
                            @endif

                            <div class="form-group my-3 edit_commission_ratio_layout">
                                <label for="edit_commission_ratio_input" class="rs">@lang('settings/general/payment_method.commission_ratio')</label>
                                <input type="number" min="0" placeholder="{{__('settings/general/payment_method.commission_ratio')}}"
                                    id="edit_commission_ratio_input" name="commission_ratio" class="form-control"
                                    value="{{ request()->old('commission_ratio') }}">
                            </div>

                            @can('pos')
                                <div class="form-group my-2">
                                    <label for="e_show_in_pos" class="rs"> @lang('settings/general/payment_method.appear_in_pos') </label>
                                    <input type="checkbox" id="e_show_in_pos" name="show_in_pos" class="custom-checkbox"
                                        value="1" {{ request()->old('show_in_pos') ? 'checked' : '' }}>
                                </div>
                            @endcan
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button class="btn orange-btn" id="editFormButton"> @lang('settings/general/payment_method.edit') </button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('settings/general/payment_method.cancel')</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

        $(() => {
            $('.remove-logo-btn').on('click', function() {
                $(this).closest('form').append('<input type="hidden" name="remove_logo" value="1">');
                $('.preview-image-layout').html('');
            });

            $('#logo').on('change', function(event) {
                let file = event.target.files[0];
                let img = `<img src='${URL.createObjectURL(file)}' class='preview-image' >`;
                $('.preview-image-layout').html(img);
                $(this).closest('form').find('input[name="remove_logo"]').remove();
            });

            $('#edit_logo').on('change', function(event) {
                let file = event.target.files[0];
                let img =
                    `<img src='${URL.createObjectURL(file)}' class='preview-image preview-image-edit' >`;
                $('.preview-image-layout').show().html(img);
                $(this).closest('form').find('input[name="remove_logo"]').remove();
            });

            const way_type = $('input[name="way_type"]').val();
            changeUiBasedOnWayType($('input[name="way_type"]'), way_type);

            $('#addFormButton').on('click', function(e) {
                e.preventDefault();

                let unfilledSelects = $('#addPaymentMethodModal select:required').filter(function() {
                    return $(this).val() == '' || $(this).val() == null || $(this).val() ==
                        "اختيار الحساب";
                });

                let unfilledInputs = $('#addPaymentMethodModal input:required').filter(function() {
                    return $(this).val() == '';
                });

                if (unfilledSelects.length !== 0 || unfilledInputs.length !== 0) {
                    let requiredTabId = unfilledSelects.closest('.tab-pane').first().attr('id');
                    $('.nav-tabs button[data-bs-target="#' + requiredTabId + '"]').tab('show');
                } else {
                    confirmAndSubmit('addPaymentMethodForm', {
                        type: 'green'
                    });
                }
            });

            $('#editFormButton').on('click', function(e) {
                e.preventDefault();

                let unfilledSelects = $('#editPaymentMethodModal select:required').filter(function() {
                    return $(this).val() == '' || $(this).val() == null || $(this).val() ==
                        "اختيار الحساب";
                });

                let unfilledInputs = $('#editPaymentMethodModal input:required').filter(function() {
                    return $(this).val() == '';
                });

                if (unfilledSelects.length !== 0 || unfilledInputs.length !== 0) {
                    let requiredTabId = unfilledSelects.closest('.tab-pane').first().attr('id');
                    $('.nav-tabs button[data-bs-target="#' + requiredTabId + '"]').tab('show');
                } else {
                    confirmAndSubmit('editPaymentMethodForm', {
                        type: 'green'
                    });
                }
            });

            $('input[name="way_type"]').on('change', function() {
                const way_type = $(this).val();
                changeUiBasedOnWayType(this, way_type);
            });

            // Delete receivable payment method
            $('button[name="delete"]').on('click', function(e) {
                $.confirm({
                    title: $lang(
                        'settings.general.payment_method.are_you_sure_you_want_to_delete_the_payment_method'
                    ),
                    content: $lang(
                        'settings.general.payment_method.this_will_be_deleted_completely'
                    ),
                    type: 'red',
                    buttons: {
                        ok: {
                            text: $lang('settings.general.payment_method.yes'),
                            btnClass: 'btn-primary',
                            keys: ['enter'],
                            action: () => {
                                $(this).closest('form').submit();
                            }
                        },
                        cancel: {
                            text: $lang('settings.general.payment_method.cancel'),
                            btnClass: 'btn-default',
                            keys: ['esc']
                        }
                    }
                });
            });

            // Activate of recievable payment method
            $('button[name="active"]').on('click', function(e) {
                $.confirm({
                    title: $lang('settings.general.payment_method.are_you_sure_you_want_to_activate'),
                    content: $lang('settings.general.payment_method.the_receivable_payment_method_will_be_activated') ,
                    type: 'green',
                    buttons: {
                        ok: {
                            text: $lang('settings.general.payment_method.yes'),
                            btnClass: 'btn-primary',
                            keys: ['enter'],
                            action: () => {
                                $(this).closest('form').submit();
                            }
                        },
                        cancel: {
                            text: $lang('settings.general.payment_method.cancel'),
                            btnClass: 'btn-default',
                            keys: ['esc']
                        }
                    }
                });
            });

            // Unactivate of recievable payment method
            $('button[name="un-active"]').on('click', function(e) {
                $.confirm({
                    title: $lang('settings.general.payment_method.the_payment_method_will_be_activated'),
                    content: $lang('settings.general.payment_method.the_payment_method_will_be_deactivated'),
                    type: 'red',
                    buttons: {
                        ok: {
                            text: $lang('settings.general.payment_method.yes'),
                            btnClass: 'btn-primary',
                            keys: ['enter'],
                            action: () => {
                                $(this).closest('form').submit();
                            }
                        },
                        cancel: {
                            text: $lang('settings.general.payment_method.cancel'),
                            btnClass: 'btn-default',
                            keys: ['esc']
                        }
                    }
                });
            });

            $('.edit-method-btn').on('click', function() {
                const paymentMethod = JSON.parse($(this).attr('data-paymentMethod'));

                let form = $('#editPaymentMethodForm');
                form.attr('action', "/settings/general/receivable-payment-methods/" + paymentMethod.id);
                form.find('#edit_title').val(paymentMethod.title);

                if (paymentMethod.logo) {
                    form.find('.remove-logo-btn,.preview-image-layout').show();
                    form.find('.preview-image-edit').attr('src', paymentMethod.logo);
                } else {
                    form.find('.remove-logo-btn,.preview-image-layout').hide();
                }

                form.find('.edit_days_count_layout #edit_days_count_input').val(paymentMethod.days_count);

                paymentMethod.connected_accounts.forEach((connected_accounts) => {
                    form.find(
                        `.edit_account_id #e-b-${connected_accounts.branch_id}-account-tab select`
                    ).val(`${connected_accounts.account_id}`);
                    form.find(
                        `.edit_commission_account_id #e-b-${connected_accounts.branch_id}-commission-tab option[value="${connected_accounts.commission_account_id}"]`
                    ).prop('selected', true);
                });

                form.find('input:radio[name="way_type"]').filter(`[value="${paymentMethod.way_type}"]`)
                    .attr('checked', true);
                form.find('#edit_commission_ratio_input').val(paymentMethod.commission_ratio);
                form.find('#e_show_in_pos').attr('checked', paymentMethod.show_in_pos == 1);

                changeUiBasedOnWayType(form.find('input:radio[name="way_type"]'), paymentMethod.way_type);
                $('#editPaymentMethodModal').modal('show');
            });
        });

        let changeUiBasedOnWayType = function(that, way_type) {
            let show_days_count = false;
            let show_account_id = false;
            let show_commission_inputs = false;
            const closestForm = $(that).closest('form');
            let is_edit_form = (closestForm.attr('id') == 'editPaymentMethodForm');
            const prefix_ids = `.${(is_edit_form)? 'edit_' : ''}`;

            const days_count_layout = closestForm.find(prefix_ids + 'days_count_layout');
            const account_layout = closestForm.find(prefix_ids + 'account_id');
            const commission_account_layout = closestForm.find(prefix_ids + 'commission_account_id');
            const commission_ratio_layout = closestForm.find(prefix_ids + 'commission_ratio_layout');

            switch (way_type) {
                case 'receivable':
                    show_days_count = true;
                    break;
                case 'cash':
                    show_account_id = true;
                    break;
                case 'cards':
                    show_account_id = true;
                    show_commission_inputs = true;
                    break;
            }

            days_count_layout.find('input').prop('required', show_days_count);
            (show_days_count) ? days_count_layout.show(): days_count_layout.hide();

            account_layout.find('select').prop('required', show_account_id);
            (show_account_id) ? account_layout.show(): account_layout.hide();

            commission_account_layout.find('select').prop('required', show_commission_inputs);
            (show_commission_inputs) ? commission_account_layout.show(): commission_account_layout.hide();

            commission_ratio_layout.find('input').prop('required', show_commission_inputs);
            (show_commission_inputs) ? commission_ratio_layout.show(): commission_ratio_layout.hide();

        }
    </script>
@endpush