@extends('layouts.app')

@section('title')
    {{ __('Quyền duyệt đơn Cashout & Rút số dư (Telegram)') }}
@endsection

@section('cashout')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Quyền duyệt/huỷ đơn Cashout & Rút số dư qua Telegram') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="{{ route('app.cashout.index') }}">{{ __('Cashout') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ __('Quyền duyệt đơn') }}</li>
                    </ol>
                </div>
            </div>
            <hr>
        </div>
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="container-fluid">
            <div class="alert alert-info">
                Khi có đơn <b>cashout</b> (chưa duyệt) hoặc đơn <b>rút số dư</b> của đối tác, bot gửi vào nhóm Telegram kèm 2 nút
                <b>✅ Duyệt</b> / <b>❌ Huỷ</b>. Với mỗi nhóm, chỉ những tài khoản Telegram có <b>@username</b>
                trong danh sách mới bấm được 2 nút này (áp dụng chung cho cả cashout và rút số dư).
                <br>
                <b>Lưu ý:</b> nhóm <u>chưa set @username nào</u> thì giữ nguyên như hiện tại — bất kỳ ai trong nhóm cũng bấm được.
            </div>

            <div class="card">
                <div class="card-header text-center" style="font-weight: bold; background-color: rgb(231, 236, 238)">
                    {{ __('Danh sách nhóm đối tác Telegram') }}
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead style="text-align: center; vertical-align: middle;">
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>{{ __('Nhóm / Đối tác') }}</th>
                                    <th style="width: 150px;">{{ __('Chat ID') }}</th>
                                    <th style="width: 90px;">{{ __('Trạng thái') }}</th>
                                    <th>{{ __('@username được phép (mỗi dòng 1 tài khoản)') }}</th>
                                    <th style="width: 110px;">{{ __('Thao tác') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($groups as $index => $group)
                                    <tr>
                                        <td class="text-center align-middle">{{ $index + 1 }}</td>
                                        <td class="align-middle">
                                            <b>{{ $group->group_name }}</b>
                                            @if ($group->username)
                                                <br><small class="text-muted">@ {{ $group->username }}</small>
                                            @endif
                                        </td>
                                        <td class="text-center align-middle">{{ $group->chat_id }}</td>
                                        <td class="text-center align-middle">
                                            @if ($group->status)
                                                <span class="badge bg-success">{{ __('Bật') }}</span>
                                            @else
                                                <span class="badge bg-secondary">{{ __('Tắt') }}</span>
                                            @endif
                                        </td>
                                        <td class="align-middle">
                                            <textarea class="form-control cashout-approvers-input" rows="3"
                                                id="approvers-{{ $group->id }}"
                                                placeholder="@nhanvien1&#10;@nhanvien2">{{ collect($group->getApproverUsernames())->map(fn ($u) => '@' . $u)->implode("\n") }}</textarea>
                                        </td>
                                        <td class="text-center align-middle">
                                            <button type="button" class="btn btn-primary btn-sm btn-save-approvers"
                                                data-group-id="{{ $group->id }}"
                                                data-url="{{ route('app.cashout.saveCashoutApprovers', ['id' => $group->id]) }}">
                                                <i class="fas fa-save"></i> {{ __('Lưu') }}
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">{{ __('Chưa có nhóm Telegram nào.') }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

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

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(document).on('click', '.btn-save-approvers', function() {
            var $btn = $(this);
            var groupId = $btn.data('group-id');
            var url = $btn.data('url');
            var usernames = $('#approvers-' + groupId).val();

            $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> {{ __('Lưu') }}');

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    telegram_usernames: usernames
                },
                dataType: 'json',
                success: function(res) {
                    if (res.code == 1) {
                        toastr.success(res.msg);
                        var normalized = (res.usernames || []).map(function(u) {
                            return '@' + u;
                        }).join('\n');
                        $('#approvers-' + groupId).val(normalized);
                    } else {
                        toastr.error(res.msg || 'Lưu thất bại.');
                    }
                },
                error: function(xhr) {
                    var msg = (xhr.responseJSON && xhr.responseJSON.msg) ?
                        xhr.responseJSON.msg : 'Đã xảy ra lỗi khi lưu danh sách.';
                    toastr.error(msg);
                },
                complete: function() {
                    $btn.prop('disabled', false).html('<i class="fas fa-save"></i> {{ __('Lưu') }}');
                }
            });
        });
    </script>
@endsection