@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 tính toán, vui lòng chờ...</div>
            </div>
            <div class="card-body" style="background-color: #9fb69f">
                <form class="row" id="search-withdraw">
                    @csrf
                    @role('admin|support')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ __('partner') }}</span>
                                    </div>
                                    <select name="partner" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::getPartners() as $partner)
                                            <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    @role('accountant')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ __('partner') }}</span>
                                    </div>
                                    <select name="partner" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::getPartnerAccountantCanView() as $partner)
                                            <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('transaction_type') }}</span>
                                </div>
                                <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>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('status') }}</span>
                                </div>
                                <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>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('Mã tra soát') }}</span>
                                </div>
                               <input class="form-control" name="request_id" id="request_id" placeholder="Nhập mã tra soát">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('time') }}</span>
                                </div>
                                <input type="datetime-local" class="form-control" name="from_date"
                                    value="{{ now()->format('Y-m-d') }}T00:00">
                                <input type="datetime-local" class="form-control" name="to_date"
                                    value="{{ now()->format('Y-m-d', strtotime('+1 day')) }}T23:59:59">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <button type="submit" class="btn btn-primary" id="btn-search"><i
                                class="fa fa-search"></i>{{ __('search') }}</button>
                        @can('report_total_withdraw')
                            <button type="submit" class="btn btn-primary" id="btn-total-withdraw">{{ __('report') }}</button>
                        @endcan
                    </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
                    @can('withdraw_create')
                        <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>
                    @endcan
                    @role('partner')
                        <a href="{{ route('app.withdraw.createWithdrawUSDT') }}" class="btn btn-warning btn-sm"
                            title="{{ __('create_withdraw_usdt') }}">
                            <i class="fas fa-add"></i>
                            <span>{{ __('create_withdraw_usdt') }}</span>
                        </a>
                    @endrole
                    <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>{{ __('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>
@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>
        $('#export-withdraw').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: "{{ route('app.exportWithdraw') }}",
                data: $('#search-withdraw').serialize(),
                dataType: 'JSON',
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(function() {
                            window.open('/file-managers', '_blank');
                        }, 3000);
                    }
                },
                error: function(error) {
                    toastr.error(error);
                },
                complete: () => {
                    $('#loading-overlay').addClass('d-none');
                }
            });
        });
    </script>
    <script>
        function getQrCode(url) {
            $('#loading-overlay').removeClass('d-none');
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'JSON',
                success: function (response) {
                    if (response.success) {
                        $('#qr-code-modal').modal('show');
                        $('#qr-code-image').attr('src', response.data.qr_code);
                    } else {
                        toastr.error(response.message || 'Có lỗi xảy ra.');
                    }
                },
                error: function (xhr) {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) || 'Có lỗi xảy ra, vui lòng thử lại.';
                    toastr.error(msg);
                },
                complete: function () {
                    $('#loading-overlay').addClass('d-none');
                }
            });
        }
    </script>
    <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, -1],
                    [20, 50, 'All']
                ],
                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 `Rút tiền về ngân hàng`;
                            } else if (data === 'withdraw_usdt') {
                                return `Rút tiền USDT`;
                            } else if (data === 'transfer_balance') {
                                return `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">Từ chối</span>`
                            } else if (data === 'pending') {
                                return `<span class="badge bg-warning">Chờ xử lí</span>`
                            } else if (data === 'processed') {
                                return `<span class="badge bg-success">Đã xử lí</span>`
                            } else {
                                return '';
                            }
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'is_approved',
                        render: (data) => {
                            if (data === 0) {
                                return `<span class="badge bg-warning">Chờ duyệt</span>`
                            } else {
                                return `<span class="badge bg-success">Đã duyệt</span>`
                            }
                        },
                        className: 'text-center',
                    },
                    {
                        data: 'created_at',
                        className: 'text-center',
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        className: 'text-center',
                        visible: userRole,
                    }
                ],
                order: [
                    [0, 'desc']
                ],
            });
            $(document).on('click', '#btn-search', function(event) {
            event.preventDefault();
            dataTables.ajax.reload();
            });
        });

        // Action: Từ chối / Hoàn thành — Swal confirm + AJAX, reload datatable in place.
        // Placed outside document.ready so it binds even if the ready callback throws.
        $(document).on('click', '.js-action-decline, .js-action-approve', function (e) {
            e.preventDefault();
            var $btn = $(this);
            if ($btn.prop('disabled')) return;
            if (typeof Swal === 'undefined') {
                if (!confirm('Bạn có chắc chắn muốn thực hiện?')) return;
                return doWithdrawAction($btn);
            }
            var title     = $btn.data('title') || 'Xác nhận?';
            var body      = $btn.data('body') || '';
            var isApprove = $btn.hasClass('js-action-approve');
            var label     = $btn.data('label') || (isApprove ? 'Hoàn thành' : 'Từ chối');
            Swal.fire({
                title: title,
                html: body,
                icon: isApprove ? 'question' : 'warning',
                showCancelButton: true,
                confirmButtonColor: isApprove ? '#28a745' : '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: label,
                cancelButtonText: 'Hủy',
                reverseButtons: true,
                allowOutsideClick: false,
            }).then(function (result) {
                if (result.isConfirmed) doWithdrawAction($btn);
            });
        });

        function doWithdrawAction($btn) {
            var url = $btn.data('url');
            var dt  = $.fn.dataTable.isDataTable('#listWithdraws') ? $('#listWithdraws').DataTable() : null;
            $btn.prop('disabled', true);
            $('#loading-overlay').removeClass('d-none');
            $.ajax({
                url: url,
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', _method: 'PUT' },
                dataType: 'json',
                success: function (resp) {
                    if (resp && resp.success) {
                        toastr.success(resp.message || 'Thành công');
                        if (dt) dt.ajax.reload(null, false);
                    } else {
                        toastr.error((resp && resp.message) || 'Có lỗi xảy ra.');
                        $btn.prop('disabled', false);
                    }
                },
                error: function (xhr) {
                    var msg = 'Có lỗi xảy ra, vui lòng thử lại.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    toastr.error(msg);
                    $btn.prop('disabled', false);
                },
                complete: function () {
                    $('#loading-overlay').addClass('d-none');
                }
            });
        }

        // Action: QR code button
        $(document).on('click', '.js-action-qrcode', function (e) {
            e.preventDefault();
            if (typeof getQrCode === 'function') {
                getQrCode($(this).data('url'));
            }
        });

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

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

        $('#btn-total-withdraw').click(function(e) {
            e.preventDefault();
            $('#loading-overlay').removeClass('d-none');
            var partner = $('#search-withdraw [name="partner"]').val();
            var status = $('#search-withdraw [name="status"]').val();
            var type = $('#search-withdraw [name="type"]').val();
            var from_date = $('#search-withdraw [name="from_date"]').val();
            var to_date = $('#search-withdraw [name="to_date"]').val();
            $.ajax({
                url: '{{ route('app.withdraw.reportTotalWithdraw') }}',
                type: 'GET',
                data: {
                    partner: partner,
                    status: status,
                    type: type,
                    from_date: from_date,
                    to_date: to_date
                },
                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('Đã xảy ra lỗi khi lấy dữ liệu tổng rút số dư.');
                }
            });
        });
    </script>
@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">
    <style>
        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;
        }
    </style>
@endsection