@extends('layouts.app')

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

@section('withdraw')
    active
@endsection

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

@section('section.content')
    <section class="content">
        <div class="card">
            @php
                $tableBodyStyle = $isDemoAccount ? 'display: none;' : '';
            @endphp
            <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">{{ __('Đang xử lý, vui lòng chờ...') }}</div>
            </div>
            <div class="card-body filter-wrap">
                <form class="row g-3 align-items-end" id="search-withdraw">
                    @csrf

                    {{-- Partner --}}
                    @role('admin|support')
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label fw-semibold mb-1">{{ __('partner') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <select name="partner" class="select2 form-control" id="partner_withdraw">
                                    <option value="">{{ __('select') }}</option>
                                    @foreach (\App\Models\User\User::getAllUsers() as $partner)
                                        <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endrole

                    @role('accountant')
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label fw-semibold mb-1">{{ __('partner') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <select name="partner" class="select2 form-control" id="partner_withdraw">
                                    <option value="">{{ __('select') }}</option>
                                    @foreach (\App\Models\User\User::getPartnerAccountantCanView() as $partner)
                                        <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endrole

                    {{-- Type --}}
                    <div class="col-12 col-md-6 col-lg-2">
                        <label class="form-label fw-semibold mb-1">{{ __('transaction_type') }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-tags"></i></span>
                            <select name="type" class="form-control">
                                <option value="">{{ __('select') }}</option>
                                <option value="withdraw_to_bank">{{ __('Rút tiền về ngân hàng') }}</option>
                                <option value="withdraw_usdt">{{ __('Rút USDT') }}</option>
                                <option value="transfer_balance">{{ __('Chuyển số dư') }}</option>
                            </select>
                        </div>
                    </div>

                    {{-- Status --}}
                    <div class="col-12 col-md-6 col-lg-2">
                        <label class="form-label fw-semibold mb-1">{{ __('status') }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-flag"></i></span>
                            <select name="status" class="form-control">
                                <option value="">{{ __('select') }}</option>
                                <option value="refused">{{ __('Từ chối') }}</option>
                                <option value="pending">{{ __('Chờ xử lí') }}</option>
                                <option value="processed">{{ __('Đã xử lí') }}</option>
                            </select>
                        </div>
                    </div>

                    {{-- Request ID --}}
                    <div class="col-12 col-md-6 col-lg-3">
                        <label class="form-label fw-semibold mb-1">{{ __('Mã tra soát') }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-fingerprint"></i></span>
                            <input class="form-control" name="request_id" id="request_id" placeholder="{{ __('Nhập mã tra soát') }}"
                                autocomplete="off">
                        </div>
                    </div>

                    {{-- Time range --}}
                    <div class="col-12 col-lg-5">
                        <label class="form-label fw-semibold mb-1">{{ __('time') }}</label>
                        <div class="time-range">
                            <div class="input-group">
                                <span class="input-group-text"><i class="far fa-clock"></i></span>
                                <span class="input-group-text">{{ __('Từ') }}</span>
                                <input type="text" class="form-control" name="from_date" id="from_date"
                                    autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">
                            </div>

                            <div class="input-group">
                                <span class="input-group-text d-none d-lg-inline-flex"><i class="far fa-clock"></i></span>
                                <span class="input-group-text">{{ __('Đến') }}</span>
                                <input type="text" class="form-control" name="to_date" id="to_date" autocomplete="off"
                                    placeholder="dd-mm-yyyy HH:mm:ss">
                            </div>
                        </div>
                    </div>

                    {{-- Actions --}}
                    <div class="col-12 col-lg-3 d-flex gap-2 filter-actions">
                        <button type="button" class="btn btn-primary flex-grow-1" id="btn-search">
                            <i class="fa fa-search me-1"></i>{{ __('search') }}
                        </button>

                        @can('report_total_withdraw')
                            <button type="button" class="btn btn-outline-primary flex-grow-1" id="btn-total-withdraw">
                                <i class="fas fa-chart-pie me-1"></i>{{ __('report') }}
                            </button>
                        @endcan
                    </div>

                    <div class="col-12">
                        <div id="date-error" class="text-danger small"></div>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('list') }}</h3>
                <div class="card-tools">
                    @role('partner')
                        @if ($user->can_transfer_balance)
                            <a href="{{ route('app.createRequestTransferBalance') }}" class="btn btn-primary btn-sm"
                                title="{{ __('create_request_transfer_balance') }}">
                                <i class="fas fa-add"></i>
                                <span>{{ __('create_request_transfer_balance') }}</span>
                            </a>
                        @endif
                    @endrole
                    {{-- Quan ly tai khoan rut mau: trang rieng, khong phu thuoc
                         quyen tao lenh rut nen dat nut ngay day cho de thay --}}
                    @can('withdraw_template_withdraw_account')
                        <a href="{{ route('app.withdraw.accounts') }}" class="btn btn-info btn-sm"
                            title="{{ __('Tài khoản rút mẫu') }}">
                            <i class="fas fa-address-book"></i>
                            <span>{{ __('Tài khoản rút mẫu') }}</span>
                        </a>
                    @endcan
                    @if (auth()->user()->can('withdraw_create') || auth()->user()->hasRole('admin'))
                        <a href="{{ route('app.withdraw.create') }}" class="btn btn-primary btn-sm"
                            title="{{ __('withdrawal_request') }}">
                            <i class="fas fa-add"></i>
                            <span>{{ __('withdrawal_request') }}</span>
                        </a>
                    @endif
                    {{-- Ẩn nút "rút hộ đối tác" với tài khoản admin --}}
                    @if (auth()->user()->can('withdraw_create_for_partner') && auth()->user()->username !== 'admin' && !empty(auth()->user()->can_withdraw_for_partner))
                        <a href="{{ route('app.withdraw.createForPartner') }}" class="btn btn-primary btn-sm"
                            title="{{ __('Tạo lệnh rút hộ đối tác') }}">
                            <i class="fas fa-add"></i>
                            <span>{{ __('Tạo lệnh rút hộ đối tác') }}</span>
                        </a>
                    @endif
                    @if (in_array(Auth::user()->username, ['admin', 'dev001', 'chiba', 'taiwan99999', 'uchi', 'coco', 'kimmochi96']))
                        <a href="{{ route('app.cashout.approvers') }}" class="btn btn-dark btn-sm"
                            title="{{ __(':username Telegram được phép duyệt/huỷ đơn (theo nhóm)', ['username' => '@' . 'username']) }}">
                            <i class="fa-solid fa-user-shield"></i> {{ __('Quyền duyệt đơn (TG)') }}
                        </a>
                        <button type="button" class="btn btn-warning btn-sm" id="btn-open-notify-skip"
                            title="{{ __('Đối tác KHÔNG gửi lệnh rút vào nhóm Telegram') }}">
                            <i class="fa-solid fa-bell-slash"></i> {{ __('Bỏ gửi lệnh rút (TG)') }}
                        </button>
                    @endif
                    <a class="btn btn-sm btn-secondary" id="export-withdraw" href="javascript:void(0)"><i
                            class="fa-solid fa-file-excel"></i>{{ __('export_excel') }}</a>
                </div>
                @role('admin|support')
                    <div class="row card-text text-muted">
                        <div class="col-sm-2">
                            <small>{{ __('Số giao dịch/ngày:') }}
                                <b>{{ \App\Models\Withdraw\Withdraw::getTotalTransactionsToday() }}</b></small>
                        </div>
                        <div class="col-sm-3">
                            <small>{{ __('Tổng tiền đã xử lí/ngày:') }}
                                <b>{{ number_format(\App\Models\Withdraw\Withdraw::getTotalAmountToday()) }}</b></small>
                        </div>
                        <div class="col-sm-2">
                            <small>{{ __('Chờ xử lí/ngày:') }} <b>{{ \App\Models\Withdraw\Withdraw::getStatusWaitingToday() }}</b></small>
                        </div>
                        <div class="col-sm-2">
                            <small>{{ __('Đã xử lí/ngày:') }}
                                <b>{{ \App\Models\Withdraw\Withdraw::getStatusProcessedToday() }}</b></small>
                        </div>
                    </div>
                @endrole
            </div>
            <div class="card-body">
                @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="table-responsive">
                    <table id="listWithdraws" class="table table-bordered table-striped">
                        <thead style="text-align:center; background-color: rgb(236, 236, 246)">
                            <tr>
                                <th>{{ __('ID') }}</th>
                                <th>{{ __('Request ID') }}</th>
                                <th>{{ __('partner') }}</th>
                                <th>{{ __('handler') }}</th>
                                <th>{{ __('transaction_type') }}</th>
                                <th>{{ __('amount') }}</th>
                                <th>{{ __('detail') }}</th>
                                <th>{{ __('status') }}</th>
                                <th>{{ __('approval') }}</th>
                                <th>{{ __('create_time-complete_time') }}</th>
                                <th>{{ __('note') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="qr-code-modal" tabindex="-1" aria-labelledby="qr-code-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="qr-code-label">
                        {{ __('Thông tin chuyển khoản') }}
                    </h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12 text-center">
                                    <img src="" id="qr-code-image" alt="IMAGE QRCODE">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="withdrawTotalModal" tabindex="-1" aria-labelledby="withdrawTotalModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-center" id="withdrawTotalModalLabel">
                        {{ __('Báo cáo rút số dư') }}</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <tbody>
                                    <tr>
                                        <td>{{ __('total_amount') }}</td>
                                        <td><span id="totalAmount"></span></td>
                                    </tr>
                                    <tr style="background-color: #55da5c">
                                        <td>{{ __('total_amount_processed') }}</td>
                                        <td><span id="totalAmountProcessed"></span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('close') }}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="noteModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Ghi chú đơn rút tiền') }}</h5>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="withdraw_id">

                    <textarea id="withdraw_note" class="form-control" rows="4" placeholder="{{ __('Nhập ghi chú...') }}"></textarea>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">
                        {{ __('Cancel') }}
                    </button>

                    <button class="btn btn-success" onclick="saveWithdrawNote()">
                        {{ __('Save') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    @if (in_array(Auth::user()->username, ['admin', 'dev001']))
        @php
            $wdSkipIds = json_decode(config('config_app.withdraw_skip_notify_partners', '[]'), true);
            $wdSkipIds = is_array($wdSkipIds) ? array_map('intval', $wdSkipIds) : [];
        @endphp
        {{-- MODAL: Đối tác KHÔNG gửi lệnh rút vào nhóm Telegram --}}
        <div class="modal fade" id="withdrawNotifySkipModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="fa-solid fa-bell-slash mr-1"></i> {{ __('Đối tác không gửi lệnh rút vào nhóm') }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning py-2">
                            {!! __('Các đối tác được chọn sẽ <b>KHÔNG</b> nhận tin xác nhận (nút Duyệt/Huỷ) lệnh rút số dư vào nhóm Telegram.') !!}
                        </div>
                        <div class="form-group mb-0">
                            <label>{{ __('Chọn đối tác cần bỏ gửi') }}</label>
                            <select id="notify-skip-partners" class="form-control" multiple style="width:100%">
                                @foreach (\App\Models\User\User::getPartners() as $p)
                                    <option value="{{ $p->id }}" @if (in_array((int) $p->id, $wdSkipIds, true)) selected @endif>
                                        {{ $p->username }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Đóng') }}</button>
                        <button type="button" class="btn btn-primary" id="btn-save-notify-skip">
                            <i class="fas fa-save mr-1"></i> {{ __('Save') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('scripts')
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script type='text/javascript' src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js">
    </script>
    <script>
        function saveWithdrawNote() {

            let id = $('#withdraw_id').val();
            let note = $('#withdraw_note').val();

            $.ajax({
                url: '/withdraw/' + id + '/note',
                method: 'POST',
                data: {
                    note: note,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function() {
                    $('#noteModal').modal('hide');
                    $('#listWithdraws').DataTable().ajax.reload(null, false);
                }
            })
        }
        $(function() {
            const FORMAT = 'DD-MM-YYYY HH:mm:ss';

            const startToday = moment().startOf('day');
            const endToday = moment().endOf('day').set({
                millisecond: 0
            });

            $('#from_date').datetimepicker({
                format: FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                allowInputToggle: true
            });

            $('#to_date').datetimepicker({
                format: FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                useCurrent: false,
                allowInputToggle: true
            });

            $('#from_date').data('DateTimePicker').date(startToday);
            $('#to_date').data('DateTimePicker').date(endToday);

            $('#from_date').val(startToday.format(FORMAT));
            $('#to_date').val(endToday.format(FORMAT));

            // Không ràng buộc min/max chéo giữa 2 ô (tránh việc 2 ô tự kéo/đá nhau khi
            // chọn tháng cũ). Khoảng thời gian không hợp lệ sẽ chỉ trả về rỗng.

            // normalize strict khi gõ tay
            function normalize(selector) {
                $(selector).on('blur', function() {
                    const raw = ($(this).val() || '').trim();
                    if (!raw) return;
                    const m = moment(raw, FORMAT, true);
                    $(this).val(m.isValid() ? m.format(FORMAT) : '');
                });
            }
            normalize('#from_date');
            normalize('#to_date');
        });
    </script>

    <script>
        function parseDmyHis(s) {
            const raw = (s || '').trim();
            if (!raw) return null;
            const m = moment(raw, 'DD-MM-YYYY HH:mm:ss', true);
            return m.isValid() ? m.toDate() : null;
        }

        function diffDays(a, b) {
            return (b.getTime() - a.getTime()) / (1000 * 3600 * 24);
        }
        $('#export-withdraw').click(function(e) {
            e.preventDefault();

            const fromCreate = parseDmyHis($('#from_date').val());
            const toCreate = parseDmyHis($('#to_date').val());

            if (!fromCreate || !toCreate) {
                $('#date-error').text({{ \Illuminate\Support\Js::from(__('Thiếu thời gian hoặc sai định dạng dd-mm-yyyy HH:mm:ss.')) }});
                return;
            }
            if (fromCreate > toCreate) {
                $('#date-error').text({{ \Illuminate\Support\Js::from(__('Ngày bắt đầu phải nhỏ hơn hoặc bằng ngày kết thúc.')) }});
                return;
            }
            if (diffDays(fromCreate, toCreate) > 15) { // giống export Transactions
                $('#date-error').text({{ \Illuminate\Support\Js::from(__('Khoảng thời gian không được lớn hơn 15 ngày.')) }});
                return;
            }

            $('#date-error').text('');
            $('#loading-overlay').removeClass('d-none');

            // File do queue worker 'export' tạo — tải ở trang quản lí file.
            $.ajax({
                url: "{{ route('app.exportWithdraw') }}",
                type: "POST",
                data: $('#search-withdraw').serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#loading-overlay').addClass('d-none');
                    if (response.success) {
                        toastr.success(response.message ||
                            {{ \Illuminate\Support\Js::from(__('Đang tạo file, vui lòng vào "Quản lí file tải xuống" để tải.')) }});
                        // Sang trang quan li file de nguoi dung thay ngay tien do.
                        setTimeout(function() {
                            window.location.href = "{{ route('app.file.index') }}";
                        }, 3000);
                    } else {
                        toastr.error(response.message || {{ \Illuminate\Support\Js::from(__('Có lỗi khi xuất file.')) }});
                    }
                },
                error: function(xhr) {
                    $('#loading-overlay').addClass('d-none');
                    const msg = (xhr.responseJSON && xhr.responseJSON.message) ||
                        {{ \Illuminate\Support\Js::from(__('Có lỗi khi xuất file. Vui lòng thử lại.')) }};
                    toastr.error(msg);
                }
            });
        });
    </script>
    @if (request()->user()->hasRole('admin|support'))
        <script>
            function getQrCode(url) {
                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'JSON',
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            $('#qr-code-modal').modal('show');
                            $('#qr-code-image').attr('src', response.data.qr_code);
                        }
                    },
                    error: function(error) {
                        toastr.error(error);
                    },
                    complete: () => {
                        $('#loading-overlay').addClass('d-none');
                    }
                });
            }
        </script>
    @endif
    <script>
        jQuery(document).ready(function($) {
            var userRole = "{{ checkRoleUser() }}";
            var dataTables = $('#listWithdraws').DataTable({
                dom: 'lifrtp',
                processing: true,
                serverSide: true,
                'pageLength': 20,
                'pagingType': 'input',
                'aLengthMenu': [
                    [20, 50],
                    [20, 50]
                ],
                ajax: {
                    url: "{{ route('app.withdraw.index') }}",
                    type: 'GET',
                    data: function(d) {
                        d.partner = $('#search-withdraw [name="partner"]').val();
                        d.status = $('#search-withdraw [name="status"]').val();
                        d.type = $('#search-withdraw [name="type"]').val();
                        d.from_date = $('#search-withdraw [name="from_date"]').val();
                        d.to_date = $('#search-withdraw [name="to_date"]').val();
                        d.request_id = $('#search-withdraw [name="request_id"]').val();
                    },
                    error: function(xhr, status, error) {
                        if (status == "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                columns: [{
                        data: 'id',
                        className: 'text-center',
                    },
                    {
                        data: 'request_id',
                        className: 'text-center',
                    },
                    {
                        data: 'user_id',
                        className: 'text-center',
                    },
                    {
                        data: 'handler',
                        className: 'text-center',
                    },
                    {
                        data: 'type',
                        render: (data) => {
                            if (data === 'withdraw_to_bank') {
                                return {{ \Illuminate\Support\Js::from(__('Rút tiền về ngân hàng')) }};
                            } else if (data === 'withdraw_usdt') {
                                return {{ \Illuminate\Support\Js::from(__('Rút tiền USDT')) }};
                            } else if (data === 'transfer_balance') {
                                return {{ \Illuminate\Support\Js::from(__('Chuyển số dư')) }};
                            } else {
                                return '';
                            }
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'amount',
                        render: (data) => {
                            return numberFormat(data);
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'details',
                        className: 'text-left',
                        orderable: false,
                    },
                    {
                        data: 'status',
                        render: (data) => {
                            if (data === 'refused') {
                                return '<span class="badge bg-danger">' + {{ \Illuminate\Support\Js::from(__('Từ chối')) }} + '</span>'
                            } else if (data === 'pending') {
                                return '<span class="badge bg-warning">' + {{ \Illuminate\Support\Js::from(__('Chờ xử lí')) }} + '</span>'
                            } else if (data === 'processed') {
                                return '<span class="badge bg-success">' + {{ \Illuminate\Support\Js::from(__('Đã xử lí')) }} + '</span>'
                            } else {
                                return '';
                            }
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'is_approved',
                        render: (data) => {
                            if (data === 0) {
                                return '<span class="badge bg-warning">' + {{ \Illuminate\Support\Js::from(__('Chờ duyệt')) }} + '</span>'
                            } else {
                                return '<span class="badge bg-success">' + {{ \Illuminate\Support\Js::from(__('Đã duyệt')) }} + '</span>'
                            }
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'created_at',
                        className: 'text-center',
                    },
                    {
                        data: 'note',
                        className: 'text-center',
                        visible: userRole,
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        className: 'text-center',
                        visible: userRole,
                    }
                ],
                order: [
                    [0, 'desc']
                ],
            });
            $(document).on('click', '#btn-search', function(event) {
                event.preventDefault();

                const fromCreate = parseDmyHis($('#from_date').val());
                const toCreate = parseDmyHis($('#to_date').val());

                if (!fromCreate || !toCreate) {
                    $('#date-error').text({{ \Illuminate\Support\Js::from(__('Thiếu thời gian hoặc sai định dạng dd-mm-yyyy HH:mm:ss.')) }});
                    return;
                }
                if (fromCreate > toCreate) {
                    $('#date-error').text({{ \Illuminate\Support\Js::from(__('Ngày bắt đầu phải nhỏ hơn hoặc bằng ngày kết thúc.')) }});
                    return;
                }

                const days = diffDays(fromCreate, toCreate);
                if (days > 31) {
                    $('#date-error').text({{ \Illuminate\Support\Js::from(__('Khoảng thời gian không được lớn hơn 31 ngày.')) }});
                    return;
                }

                $('#date-error').text('');
                dataTables.ajax.reload();
            });
        });

        $('#listWithdraws').css('width', '100%');

        function numberFormat(number) {
            return new Intl.NumberFormat('en-US').format(number);
        }

        $('#btn-total-withdraw').click(function(e) {
            e.preventDefault();

            const fromCreate = parseDmyHis($('#from_date').val());
            const toCreate = parseDmyHis($('#to_date').val());

            if (!fromCreate || !toCreate) {
                $('#date-error').text({{ \Illuminate\Support\Js::from(__('Thiếu thời gian hoặc sai định dạng dd-mm-yyyy HH:mm:ss.')) }});
                return;
            }
            if (fromCreate > toCreate) {
                $('#date-error').text({{ \Illuminate\Support\Js::from(__('Ngày bắt đầu phải nhỏ hơn hoặc bằng ngày kết thúc.')) }});
                return;
            }
            const days = diffDays(fromCreate, toCreate);
            if (days > 31) {
                $('#date-error').text({{ \Illuminate\Support\Js::from(__('Khoảng thời gian không được lớn hơn 31 ngày.')) }});
                return;
            }

            $('#date-error').text('');
            $('#loading-overlay').removeClass('d-none');

            $.ajax({
                url: "{{ route('app.withdraw.reportTotalWithdraw') }}",
                type: 'GET',
                data: {
                    partner: $('#search-withdraw [name="partner"]').val(),
                    status: $('#search-withdraw [name="status"]').val(),
                    type: $('#search-withdraw [name="type"]').val(),
                    from_date: $('#search-withdraw [name="from_date"]').val(),
                    to_date: $('#search-withdraw [name="to_date"]').val()
                },
                success: function(response) {
                    $('#loading-overlay').addClass('d-none');
                    $('#totalAmount').text(numberFormat(response.totalAmount));
                    $('#totalAmountProcessed').text(numberFormat(response.totalAmountProcessed));
                    $('#withdrawTotalModal').modal('show');
                },
                error: function() {
                    $('#loading-overlay').addClass('d-none');
                    toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi khi lấy dữ liệu tổng rút số dư.')) }});
                }
            });
        });
    </script>
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#partner_withdraw').select2({
                width: '100%',
                placeholder: "{{ __('select') }}",
                allowClear: true
            });

            $(document).on('click', '.open-note-modal', function() {

                let id = $(this).data('id');
                let note = $(this).data('note');

                $('#withdraw_id').val(id);
                $('#withdraw_note').val(note);

                $('#noteModal').modal('show');
            });
        });
    </script>
    <script>
        function copyText(el) {
            var text = el.getAttribute('data-copy');
            navigator.clipboard.writeText(text).then(function() {
                var toast = document.createElement('span');
                toast.className = 'copy-toast';
                toast.textContent = '✓ ' + {{ \Illuminate\Support\Js::from(__('Đã copy')) }};
                el.style.position = 'relative';
                el.appendChild(toast);
                setTimeout(function() {
                    toast.remove();
                }, 1000);
            });
        }
    </script>

    @if (in_array(Auth::user()->username, ['admin', 'dev001']))
        <script>
            $(function() {
                $('#btn-open-notify-skip').on('click', function() {
                    if (!$('#notify-skip-partners').data('select2')) {
                        $('#notify-skip-partners').select2({
                            width: '100%',
                            placeholder: {{ \Illuminate\Support\Js::from(__('Chọn đối tác...')) }},
                            dropdownParent: $('#withdrawNotifySkipModal'),
                            allowClear: true
                        });
                    }
                    $('#withdrawNotifySkipModal').modal('show');
                });

                $('#btn-save-notify-skip').on('click', function() {
                    const $btn = $(this);
                    const ids = $('#notify-skip-partners').val() || [];

                    $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i> ' + {{ \Illuminate\Support\Js::from(__('Đang lưu...')) }});

                    $.ajax({
                        url: "{{ route('app.withdraw.saveNotifySkipPartners') }}",
                        type: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            partner_ids: ids
                        },
                        dataType: 'json',
                        success: function(res) {
                            if (res.code == 1) {
                                toastr.success(res.msg || {{ \Illuminate\Support\Js::from(__('Đã lưu')) }});
                                $('#withdrawNotifySkipModal').modal('hide');
                            } else {
                                toastr.error(res.msg || {{ \Illuminate\Support\Js::from(__('Lưu thất bại')) }});
                            }
                        },
                        error: function(xhr) {
                            toastr.error((xhr.responseJSON && xhr.responseJSON.msg) || {{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi.')) }});
                        },
                        complete: function() {
                            $btn.prop('disabled', false).html('<i class="fas fa-save mr-1"></i> ' + {{ \Illuminate\Support\Js::from(__('Save')) }});
                        }
                    });
                });
            });
        </script>
    @endif
@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <style>
        /* select2.min.css nạp sau adminlte.plugins.css nên ghi đè nền chip thành xám nhạt
           (#e4e4e4) trong khi chữ vẫn là trắng -> không đọc được tên đối tác.
           Trả lại chip xanh của AdminLTE. */
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #007bff;
            border: 1px solid #006fe6;
            color: #fff;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: rgba(255, 255, 255, 0.75);
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #fff;
        }

        table tbody {
            {{ $tableBodyStyle }}
        }

        #loadingOverlay {
            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-spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid #ffffff;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        #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;
        }

        .filter-wrap {
            background: linear-gradient(135deg, #eef6ee 0%, #e6f0e6 100%);
            border-radius: 14px;
            padding: 16px 16px 10px 16px;
            border: 1px solid rgba(0, 0, 0, .06);
        }

        .filter-wrap .form-label {
            color: #2d3a2d;
            font-size: 13px;
        }

        .time-range {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        @media (max-width: 991.98px) {
            .time-range {
                grid-template-columns: 1fr;
            }

            .filter-actions {
                flex-direction: column;
            }
        }

        .filter-wrap .input-group-text {
            background: #ffffff;
            border-color: rgba(0, 0, 0, .12);
            color: #3b4a3b;
        }

        .filter-wrap .form-control {
            border-color: rgba(0, 0, 0, .12);
            border-radius: 10px;
            box-shadow: none !important;
            height: 40px;
        }

        .filter-wrap .input-group .form-control {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .filter-wrap .input-group .input-group-text:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        .filter-actions .btn {
            height: 40px;
            border-radius: 10px;
            font-weight: 600;
            white-space: nowrap;
        }

        .input-group {
            flex-wrap: nowrap !important;
        }

        .input-group>.select2-container {
            flex: 1 1 auto !important;
            width: 1% !important;
        }

        .select2-container .select2-selection--single {
            height: 40px !important;
            border-radius: 10px !important;
            border-color: rgba(0, 0, 0, .12) !important;
        }

        .select2-container--default .select2-selection--single {
            display: flex !important;
            align-items: center !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: normal !important;
            padding-left: 12px !important;
            color: #263238;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
            right: 8px;
        }

        .select2-dropdown {
            border-radius: 10px !important;
            border-color: rgba(0, 0, 0, .12) !important;
            overflow: hidden;
        }

        .withdraw-actions-wrap {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 150px;
        }

        .withdraw-action-form {
            margin: 0;
        }

        .btn-withdraw-action {
            width: 100%;
            min-height: 40px;
            border-radius: 10px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            box-shadow: none !important;
        }

        #listWithdraws td .withdraw-actions-wrap .btn {
            font-size: 14px;
        }

        #listWithdraws td {
            vertical-align: middle;
        }

        .copyable {
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
        }

        .copyable:hover {
            color: #0d6efd;
            text-decoration: underline;
        }

        .copy-toast {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #198754;
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: normal;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            animation: fadeToast 1s ease forwards;
            z-index: 9999;
        }

        @keyframes fadeToast {
            0% {
                opacity: 0;
                transform: translateX(-50%) translateY(4px);
            }

            15% {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }

            70% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                transform: translateX(-50%) translateY(-6px);
            }
        }
    </style>
@endsection