@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">
        <section class="content">
            <div class="card">
                <div id="loading-overlay" class="overlay d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <div class="loading-text">Hệ thống đang xử lí, vui lòng chờ.... <span id="countdown"></span> giây</div>
                </div>
                <div class="card-header">
                    <h3 class="card-title">{{ __('Setup list') }}</h3>
                    <div class="card-tools">
                        <button class="btn btn-sm btn-secondary d-none" id="deleteAllBtn">
                            Xoá
                        </button>
                        <button type="submit" class="btn btn-sm btn-primary" id="btn-auto-combine-money">{{ __('Gather money')}}</button>
                    </div>
                </div>
                @if (Session::has('success'))
                    <div id="message-alert" class="alert alert-success">
                        {{ Session::get('success') }}
                    </div>
                @endif
                @if (Session::has('error'))
                    <div id="message-alert" class="alert alert-danger">
                        {{ Session::get('error') }}
                    </div>
                @endif
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="listAccountsSetting">
                            <thead style="text-align: center">
                                <tr>
                                    <th><input type="checkbox" id="select-all" class="checkbox-select-all"><label></label>
                                    </th>
                                    <th>{{ __('ID') }}</th>
                                    <th style="background-color: #4fe9ac">{{ __('Transfer account') }}</th>
                                    <th style="background-color: #4fe9ac">{{ __('transaction_type') }}</th>
                                    <th style="background-color: #67def4">{{ __('Receiving account') }}</th>
                                    <th style="background-color: #67def4">{{ __('transaction_type') }}</th>
                                    <th>{{ __('Minimum balance') }}</th>
                                    <th>{{ __('operation') }}</th>
                                </tr>
                            </thead>
                            <tbody style="text-align: center">
                                @if (count($accountSettings) > 0)
                                    @foreach ($accountSettings as $item)
                                        @php
                                            $bankAccountFrom = \App\Models\Bank\BankAccount::find(
                                                $item->bank_account_id_from,
                                            );
                                            $bankAccountTo = \App\Models\Bank\BankAccount::find(
                                                $item->bank_account_id_to,
                                            );

                                            $paymentInterfaceFrom = null;
                                            $paymentInterfaceTo = null;

                                            if ($bankAccountFrom && $bankAccountFrom->bank) {
                                                $paymentInterfaceFrom = payment($bankAccountFrom->bank->name);
                                                $paymentInterfaceFrom->setBankAccount($bankAccountFrom);
                                            }

                                            if ($bankAccountTo && $bankAccountTo->bank) {
                                                $paymentInterfaceTo = payment($bankAccountTo->bank->name);
                                                $paymentInterfaceTo->setBankAccount($bankAccountTo);
                                            }
                                        @endphp
                                        <tr>
                                            <td><input type="checkbox" name="bankAccountCheckbox"
                                                    class="checkbox-select-row" value="{{ $item->id }}">
                                            </td>
                                            <td>{{ $item->id }}</td>
                                            <td style="background-color: #9ff7d4">
                                                <span>{{ $bankAccountFrom->acc_no ?? '' }} </span> <br>
                                                <small>{{ $bankAccountFrom->acc_name ?? '' }}</small><br>
                                                <small>{{ $bankAccountFrom->username ?? '' }}</small>
                                            </td>
                                            <td style="background-color: #9ff7d4">
                                                @if ($paymentInterfaceFrom)
                                                    {!! $paymentInterfaceFrom->getIcon() !!} <br>
                                                    {{ $paymentInterfaceFrom->getDisplayName() }}
                                                @else
                                                    N/A
                                                @endif
                                            </td>
                                            <td style="background-color: #d0f1f7">
                                                <span>{{ $bankAccountTo->acc_no ?? '' }} </span> <br>
                                                <small>{{ $bankAccountTo->acc_name ?? '' }}</small><br>
                                                <small>{{ $bankAccountTo->username ?? '' }}</small>
                                            </td>
                                            <td style="background-color: #d0f1f7">
                                                @if ($paymentInterfaceTo)
                                                    {!! $paymentInterfaceTo->getIcon() !!} <br>
                                                    {{ $paymentInterfaceTo->getDisplayName() }}
                                                @else
                                                    N/A
                                                @endif
                                            </td>
                                            <td>{{ $item->balance_minium }}</td>
                                            <td>
                                                <a href="{{ route('app.settings.edit', ['id' => $item->id]) }}"
                                                    class="btn btn-secondary">
                                                    <i class="fas fa-edit"></i>
                                                    <span>{{ __('Edit') }}</span>
                                                </a><br>
                                                <form action="{{ route('app.settings.delete', ['id' => $item->id]) }}"
                                                    method="POST" onsubmit="return confirm('Bạn có chắc chắn muốn xoá?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit"
                                                        style="background: none; border: none; padding: 0; cursor: pointer;">
                                                        <i class="fas fa-trash"></i>
                                                        <span>{{ __('Delete') }}</span>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="9">Không có dữ liệu</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </section>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#select-all').change(function() {
                if (this.checked) {
                    $('.checkbox-select-row').prop('checked', true);
                } else {
                    $('.checkbox-select-row').prop('checked', false);
                }
                toggleDeleteAllBtn();
            });

            $('.checkbox-select-row').change(function() {
                if ($('.checkbox-select-row:checked').length == $('.checkbox-select-row').length) {
                    $('#select-all').prop('checked', true);
                } else {
                    $('#select-all').prop('checked', false);
                }
                toggleDeleteAllBtn();
            });
        });

        function toggleDeleteAllBtn() {
            if ($('input[name="bankAccountCheckbox"]:checked').length > 0) {
                $('button#deleteAllBtn').text('Xoá (' + $('input[name="bankAccountCheckbox"]:checked')
                    .length + ')').removeClass('d-none');
            } else {
                $('button#deleteAllBtn').addClass('d-none');
            }
        }

        $(document).on('click', 'button#deleteAllBtn', function() {
            var checkedBankAccounts = [];
            $('input[name="bankAccountCheckbox"]:checked').each(function() {
                checkedBankAccounts.push($(this).val());
            });
            if (checkedBankAccounts.length > 0) {
                var csrfToken = '{{ csrf_token() }}';
                swal.fire({
                    title: 'Are you sure?',
                    html: 'You want to delete <b>(' + checkedBankAccounts.length +
                        ')</b> bank accounts',
                    showCancelButton: true,
                    showCloseButton: true,
                    confirmButtonText: 'Yes, Delete',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#556ee6',
                    cancelButtonColor: '#d33',
                    width: 400,
                    allowOutsideClick: false,
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: '{{ route('app.settings.deleteSelectedAccounts') }}',
                            type: 'DELETE',
                            data: {
                                ids: checkedBankAccounts,
                                _token: csrfToken
                            },
                            dataType: 'json',
                            success: function(data) {
                                if (data.code == 1) {
                                    toastr.success(data.msg);
                                    location.reload();
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error(xhr.responseText);
                            }
                        });
                    }
                })
            }
        });

        $(document).on('click', '#btn-auto-combine-money', function(e) {
            e.preventDefault();
            const countdownTime = {{ $countdownTime }};
            let countdown = countdownTime;
            const countdownElement = document.getElementById('countdown');

            countdownElement.textContent = countdown;

            const interval = setInterval(function () {
                countdown--;
                countdownElement.textContent = countdown;

                if (countdown <= 0) {
                    clearInterval(interval);
                }
            }, 1000); 
            $('#loading-overlay').removeClass('d-none');

            $.ajax({
                url: '{{ route('app.settings.combineMoney') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                },
                success: function(response) {
                    $('#loading-overlay').addClass('d-none');
                    if (response.code === 1) {
                        toastr.success(response.msg);
                    } else if (response.code === 0) {
                        $('#loading-overlay').addClass('d-none');
                        toastr.error(response.msg);
                    }
                },
                error: function(error) {
                    $('#loading-overlay').addClass('d-none');
                    console.error('Lỗi trong quá trình xử lý dồn tiền:', 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">
    <style>
        #loading-overlay {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        #loading-overlay .spinner-border {
            width: 4rem;
            height: 4rem;
            margin-bottom: 10px;
        }

        #loading-overlay .loading-text {
            font-size: 18px;
            color: #fff;
        }
    </style>
@endsection