@extends('layouts.app')

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

@section('admin')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Cài đặt thứ tự ưu tiên tài khoản') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a
                                href="{{ route('app.payment.editPriorityAccount') }}">{{ __('Cài đặt ưu tiên') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ __('Thứ tự') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="col-lg-12 col-md-12 mx-auto">
            <div class="row">
                <div class="col-lg-6">
                    <form id="priorityAutoAccountForm" method="POST"
                        action="{{ route('app.payment.addPriorityAccount') }}">
                        @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 auto đang on') }}</h3>
                                    <button type="submit" id="saveAutoAccountBtn"
                                        class="btn btn-primary">{{ __('Lưu cài đặt') }}</button>
                                </div>
                            </div>
                            <div class="card-body">
                                <table class="table table-bordered table-striped">
                                    <thead style="text-align: center">
                                        <tr>
                                            <th>{{ __('ID') }}</th>
                                            <th>{{ __('type') }}</th>
                                            <th>{{ __('account') }}</th>
                                            <th>{{ __('Thứ tự ưu tiên') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody style="text-align: center">
                                        @foreach ($bankAccounts as $bankAccount)
                                            @php
                                                $paymentInterface = payment($bankAccount->bank->name);
                                                $paymentInterface->setBankAccount($bankAccount);
                                            @endphp
                                            <tr>
                                                <td class="auto-account-id">{{ $bankAccount->id }}</td>
                                                <td>
                                                    {{ $paymentInterface->getIcon() }} <br>
                                                    {{ $paymentInterface->getDisplayName() }}
                                                </td>
                                                <td>
                                                    <span>{{ $bankAccount->acc_no ?? '' }}</span><br>
                                                    <small>{{ $bankAccount->acc_name ?? '' }}</small><br>
                                                    <small>{{ $bankAccount->username }}</small>
                                                </td>
                                                <td>
                                                    <input type="number" class="input-group-sm text-center p-1"
                                                        style="width: 100px;" name="priority_auto_account"
                                                        value="{{ $bankAccount->priority }}">
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-lg-6">
                    <form id="priorityManualAccountForm" method="POST"
                        action="{{ route('app.account.addPriorityAccount') }}">
                        @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 thủ công đang on') }}</h3>
                                    <button type="submit" id="saveManualAccountBtn"
                                        class="btn btn-primary">{{ __('Lưu cài đặt') }}</button>
                                </div>
                            </div>
                            <div class="card-body">
                                <table class="table table-bordered table-striped">
                                    <thead style="text-align: center">
                                        <tr>
                                            <th>{{ __('ID') }}</th>
                                            <th>{{ __('type') }}</th>
                                            <th>{{ __('account') }}</th>
                                            <th>{{ __('Thứ tự ưu tiên') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody style="text-align: center">
                                        @foreach ($bankManualAccounts as $bankManualAccount)
                                            <tr>
                                                <td class="manual-account-id">{{ $bankManualAccount->id }}</td>
                                                <td>
                                                    {{ $bankManualAccount->type }}
                                                </td>
                                                <td>
                                                    <span>{{ $bankManualAccount->acc_no ?? '' }}</span><br>
                                                    <small>{{ $bankManualAccount->acc_name ?? '' }}</small><br>
                                                </td>
                                                <td>
                                                    <input type="number" class="input-group-sm text-center p-1"
                                                        style="width: 100px;" name="priority_manual_account"
                                                        value="{{ $bankManualAccount->priority }}">
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </section>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(document).on('click', '#saveAutoAccountBtn', function(e) {
            e.preventDefault();
            var updatedPriorities = [];

            $('#priorityAutoAccountForm tbody tr').each(function(index, element) {
                var accountId = $(element).find('.auto-account-id').text();
                var priorityAutoAccount = $(element).find('input[name="priority_auto_account"]').val();

                updatedPriorities.push({
                    accountId: accountId,
                    priorityAutoAccount: priorityAutoAccount
                });
            });
            $.ajax({
                url: '{{ route('app.payment.addPriorityAccount') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    priorities: updatedPriorities
                },
                success: function(response) {
                    if (response.code == 1) {
                        toastr.success(response.msg);
                    } else if (response.code == 0) {
                        toastr.error(response.msg);
                    }
                },
                error: function(error) {
                    toastr.error('Có lỗi xảy ra: '.error);
                }
            });
        });

        $(document).on('click', '#saveManualAccountBtn', function(e) {
            e.preventDefault();
            var updatedPriorityManualAccounts = [];

            $('#priorityManualAccountForm tbody tr').each(function(index, element) {
                var accountId = $(element).find('.manual-account-id').text();
                var priorityManualAccount = $(element).find('input[name="priority_manual_account"]').val();

                updatedPriorityManualAccounts.push({
                    accountId: accountId,
                    priorityManualAccount: priorityManualAccount
                });
            });
            $.ajax({
                url: '{{ route('app.account.addPriorityAccount') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    priorities: updatedPriorityManualAccounts
                },
                success: function(response) {
                    if (response.code == 1) {
                        toastr.success(response.msg);
                    } 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