@extends('layouts.app')

@section('title')
    {{ __('combine_money_setting') }}
@endsection

@section('setting_combine_money')
    active
@endsection
@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('combine_money_setting') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a
                                href="{{ route('app.settings.index') }}">{{ __('combine_money_setting') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ __('setting') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <form action="{{ route('app.settings.save') }}" method="POST">
            @csrf
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">{{ __('Danh sách tài khoản được chọn') }}</h3>
                        <button type="submit" id="saveSettingsBtn" class="btn btn-primary">{{ __('Lưu cài đặt') }}</button>
                    </div>
                </div>
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead style="text-align: center">
                                <tr>
                                    <th>{{ __('ID') }}</th>
                                    <th>{{ __('Tài khoản chuyển') }}</th>
                                    <th>{{ __('transaction_type') }}</th>
                                    <th>{{ __('Tài khoản nhận') }}</th>
                                    <th>{{ __('Số dư tối thiểu') }}</th>
                                </tr>
                            </thead>
                            <tbody style="text-align: center">
                                @php $id = 1; @endphp
                                @foreach ($selectedAccountsInfo as $index => $accountInfo)
                                    @php
                                        $paymentInterface = payment($accountInfo->bank->name);
                                        $paymentInterface->setBankAccount($accountInfo);
                                    @endphp
                                    <tr>
                                        <td>{{ $accountInfo->id }}</td>
                                        <td>
                                            <span>{{ $accountInfo->acc_no ?? '' }} </span> <br>
                                            <small>{{ $accountInfo->acc_name ?? '' }}</small><br>
                                            <small>{{ $accountInfo->username }}</small>
                                        </td>
                                        <td>
                                            {{ $paymentInterface->getIcon() }} <br>
                                            {{ $paymentInterface->getDisplayName() }}
                                        </td>
                                        <td>
                                            <select name="settings[{{ $index }}][receiver_account]"
                                                class="receiver-account" style="padding: 10px">
                                                @foreach ($accountReceivings as $item)
                                                    @php
                                                        $paymentInterface = payment($item->bank->name);
                                                        $paymentInterface->setBankAccount($item);
                                                    @endphp
                                                    <option value="{{ $item->id }}">
                                                        {{ $item->acc_no }} -
                                                        {{ $item->acc_name }} -
                                                        {{ $paymentInterface->getDisplayName() }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" name="settings[{{ $index }}][balance_minium]"
                                                class="min-balance" value="">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </section>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(document).on('change', '.receiver-account', function() {
            var selectedValue = $(this).val();
            $('.receiver-account').val(selectedValue);

        });

        $(document).on('input', '.min-balance', function() {
            var inputValue = $(this).val();
            $('.min-balance').val(inputValue);
        });

        $(document).on('click', '#saveSettingsBtn', function(e) {
            e.preventDefault();
            var settings = [];
            $('tbody tr').each(function() {
                var setting = {
                    bank_account_id_from: $(this).find('td:nth-child(1)').text(),
                    bank_account_id_to: $(this).find('.receiver-account').val(),
                    balance_minium: $(this).find('.min-balance').val()
                };
                settings.push(setting);
            });

            $.ajax({
                url: '{{ route('app.settings.save') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    settings: settings
                },
                success: function(response) {
                    if (response.code == 1) {
                        toastr.success(response.msg);
                        setTimeout(function() {
                            window.location.href = '{{ route('app.settings.index') }}';
                        }, 2000);
                    } else if (response.code == 0) {
                        toastr.error(response.msg);
                    }
                },
                error: function(error) {
                    toastr.error('Có lỗi xảy ra: ', error);
                }
            });
        });
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@endsection