@extends('client.layouts.client')
@section('title', 'Nạp tiền')
@section('content')
<div class="row">
 
  
    <div class="col-md-12 mb-3">
        <div class="card">
            
           <div class="card-body">
               <div class="row">
                <div class="col-6 d-grid gap-2">
                     <a href="{{ route('account.recharge')}}" class="btn btn-outline-primary status-btn mb-3 active col-md-12">Ngân hàng</a>
                </div>
                <div class="col-6 d-grid gap-2">
                    <a href="{{ route('account.card')}}" class="btn btn-outline-primary status-btn mb-3 col-md-12">Thẻ cào</a>
                </div>
            </div>
               <div class="alert alert-warning bg-danger-100 text-dark mb-3">
                        <ul>
                            <li class="text-sm fw-semibold">- Copy thông tin bên dưới hoặc chụp quét mã QR hệ thống cung cấp.</li>
                            <li class="text-sm fw-semibold">- Vui lòng chuyển khoản đúng nội dung và nạp từ 10.000đ đổ lên.</li>
                            <li class="text-sm fw-semibold">- Hệ thống sẽ tự động cộng tiền vào tài khoản sau vài phút.</li>
                            <li class="text-sm fw-semibold">- Nạp dưới số tiền tối thiểu không xử lý, nạp sai nội dung trừ 10%.</li>
                            <li class="text-sm fw-semibold">- Sau 15p nếu chưa thấy cộng tiền, hãy liên hệ Admin để được hỗ trợ.</li>
                        </ul>
                    </div>
        <div class="row mb-3">
            
            @if ($momo->status === 'active')
            <div class="col-md-6">
                <div class="card border shadow">
                    <div class="card-body">
                    <div class="d-flex justify-content-center justify-content-lg-between align-items-center flex-column flex-lg-row gap-3">
                        <div>
                            <div class="mb-2 ">
                            <img src="/theme/css/images/momo (1).png" alt="Logo momo" width="100" class="text-center">
                        </div>
                        <div class="mb-2">
                            Số Tài khoản:
                            <b class="fw-bold cursor-pointer text-primary"
                                onclick="coppy('{{ $momo->account_number }}')">
                            {{ $momo->account_number }} <i class="fas fa-copy"></i>
                            </b>
                        </div>
                        <div class="mb-2">
                            Chủ tài khoản: <b>{{ $momo->account_name }}</b>
                        </div>
                        <div class="mb-2">
                            Nạp tối thiểu: <b>{{ number_format($momo->min_recharge) }} VNĐ</b>
                        </div>
                        <div class="mb-2">
                            Nội dung chuyển khoản:
                            <b onclick="coppy('{{ siteValue('transfer_code') }}{{ Auth::user()->id }}')"
                                class="cursor-pointer text-primary">
                            {{ siteValue('transfer_code') }}{{ Auth::user()->id }} <i
                                class="fas fa-copy"></i>
                            </b>
                        </div>
                        </div>
                        
                        <div class="d-flex align-items-center">
                                            
                                                <img src="https://momosv3.apimienphi.com/api/QRCode?phone={{ $momo->account_number }}&note={{ siteValue('transfer_code') }}{{ Auth::user()->id }}&amount="
                                        alt="QR CODE"  width="180" height="180">
                                               
                                        </div>
                        
                    </div>
                        
                         
                    </div>
                     
                </div>
            </div>
            @endif
            @if ($vietcombank->status === 'active')
            <div class="col-md-6">
                <div class="card border shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-center justify-content-lg-between align-items-center flex-column flex-lg-row gap-3">
                        <div>
                        <div class="mb-2 ">
                            <img src="/theme/css/images/vietcombank.png" alt="Logo vietcombank" width="100"
                                class="text-center">
                        </div>
                        <div class="mb-2">
                            Số Tài khoản:
                            <b class="fw-bold cursor-pointer text-primary"
                                onclick="coppy('{{ $vietcombank->account_number }}')">
                            {{ $vietcombank->account_number }} <i class="fas fa-copy"></i>
                            </b>
                        </div>
                        <div class="mb-2">
                            Chủ tài khoản: <b>{{ $vietcombank->account_name }}</b>
                        </div>
                        <div class="mb-2">
                            Nạp tối thiểu: <b>{{ number_format($vietcombank->min_recharge) }} VNĐ</b>
                        </div>
                        <div class="mb-2">
                            Nội dung chuyển khoản:
                            <b onclick="coppy('{{ siteValue('transfer_code') }}{{ Auth::user()->id }}')"
                                class="cursor-pointer text-primary">
                            {{ siteValue('transfer_code') }}{{ Auth::user()->id }} <i
                                class="fas fa-copy"></i>
                            </b>
                        </div>
                        </div>
                        
                        
                        <div class="d-flex align-items-center">
                                            
                                                <img src="https://img.vietqr.io/image/vietcombank-{{ $vietcombank->account_number }}-qr_only.jpg?accountName={{ $vietcombank->account_name }}&addInfo={{ siteValue('transfer_code') }}{{ Auth::user()->id }}&amount=" class="img-fluid" alt="" width="180" height="180">
                                               
                                        </div>
                        </div>
 
                    </div>
                    <!-- Modal -->
                     
                </div>
            </div>
            @endif
            @if ($acb->status === 'active')
            <div class="col-md-6">
                <div class="card border shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-center justify-content-lg-between align-items-center flex-column flex-lg-row gap-3">
                        <div>
                        <div class="mb-2 ">
                            <img src="/theme/css/images/acb.png" alt="Logo ACB" width="100" class="text-center">
                        </div>
                        <div class="mb-2">
                            Số Tài khoản:
                            <b class="fw-bold cursor-pointer text-primary"
                                onclick="coppy('{{ $acb->account_number }}')">
                            {{ $acb->account_number }} <i class="fas fa-copy"></i>
                            </b>
                        </div>
                        <div class="mb-2">
                            Chủ tài khoản: <b>{{ $acb->account_name }}</b>
                        </div>
                        <div class="mb-2">
                            Nạp tối thiểu: <b>{{ number_format($acb->min_recharge) }} VNĐ</b>
                        </div>
                        <div class="mb-2">
                            Nội dung chuyển khoản:
                            <b onclick="coppy('{{ siteValue('transfer_code') }}{{ Auth::user()->id }}')"
                                class="cursor-pointer text-primary">
                            {{ siteValue('transfer_code') }}{{ Auth::user()->id }} <i
                                class="fas fa-copy"></i>
                            </b>
                        </div>
                         
                        </div>
                        
                        
                        <div class="d-flex align-items-center">
                                            
                                                <img src="https://img.vietqr.io/image/ACB-{{ $acb->account_number }}-qr_only.jpg?accountName={{ $acb->account_name }}&addInfo={{ siteValue('transfer_code') }}{{ Auth::user()->id }}&amount=" class="img-fluid" alt="" width="180" height="180">
                                               
                                        </div>
                        </div>
                    </div>
                    <!-- Modal -->
                     
                </div>
            </div>
            @endif
            @if ($bidv->status === 'active')
            <div class="col-md-6">
                <div class="card border shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-center justify-content-lg-between align-items-center flex-column flex-lg-row gap-3">
                        <div>
                        <div class="mb-2 ">
                            <img src="https://i.imgur.com/lL912bq.png" alt="Logo Binance" width="100" class="text-center">
                        </div>
                        <div class="mb-2">
                            Binance email: 
                            <b class="fw-bold cursor-pointer text-primary"
                                onclick="coppy('{{ $bidv->account_number }}')">
                            {{ $bidv->account_number }} <i class="fas fa-copy"></i>
                            </b>
                        </div>
                        <div class="mb-2">
                            USDT Address Tron (TRC20): <b>{{ $bidv->account_name }}</b>
                        </div>
                        <div class="mb-2">
                            Binance ID: 46574352 | Price 1USDT =<b>{{ number_format($bidv->min_recharge) }} VNĐ</b>
                        </div>
                        <div class="mb-2">
                            Nội dung chuyển khoản:
                            <b onclick="coppy('{{ siteValue('transfer_code') }}{{ Auth::user()->id }}')"
                                class="cursor-pointer text-primary">
                            {{ siteValue('transfer_code') }}{{ Auth::user()->id }} <i
                                class="fas fa-copy"></i>
                            </b>
                        </div>
                        
                        </div>
                        
                        <div class="d-flex align-items-center">
                                            
                                                <img src="https://likeauto24h.com/public/uploads/484249052_1435989860704304_6448304996867752404_n.jpg" class="img-fluid" alt="" width="180" height="180">
                                               
                                        </div>
                        
                        </div>
                    </div>
                    <!-- Modal -->
                     
                </div>
            </div>
            @endif
            @if ($mbbank->status === 'active')
            <div class="col-md-6">
                <div class="card border shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-center justify-content-lg-between align-items-center flex-column flex-lg-row gap-3">
                        <div>
                        <div class="mb-2 ">
                            <img src="/theme/css/images/mbbank.png" alt="Logo mbbank" width="100"
                                class="text-center">
                        </div>
                        <div class="mb-2">
                            Số Tài khoản:
                            <b class="fw-bold cursor-pointer text-primary"
                                onclick="coppy('{{ $mbbank->account_number }}')">
                            {{ $mbbank->account_number }} <i class="fas fa-copy"></i>
                            </b>
                        </div>
                        <div class="mb-2">
                            Chủ tài khoản: <b>{{ $mbbank->account_name }}</b>
                        </div>
                        <div class="mb-2">
                            Nạp tối thiểu: <b>{{ number_format($mbbank->min_recharge) }} VNĐ</b>
                        </div>
                        <div class="mb-2">
                            Nội dung chuyển khoản:
                            <b onclick="coppy('{{ siteValue('transfer_code') }}{{ Auth::user()->id }}')"
                                class="cursor-pointer text-primary">
                            {{ siteValue('transfer_code') }}{{ Auth::user()->id }} <i
                                class="fas fa-copy"></i>
                            </b>
                        </div>
                         
                        </div>
                        
                        <div class="d-flex align-items-center">
                                            
                                                <img src="https://img.vietqr.io/image/mbbank-{{ $mbbank->account_number }}-qr_only.jpg?accountName={{ $mbbank->account_name }}&addInfo={{ siteValue('transfer_code') }}{{ Auth::user()->id }}&amount=" class="img-fluid" alt="" width="180" height="180">
                                               
                                        </div>
                        </div>
                    </div>
                    <!-- Modal -->
                     
                </div>
            </div>
            @endif
            
        </div>
        <div class="py-2 text-center bg-primary text-white" style="border-radius: 10px 10px 0 0">
                        Nội dung: (bắt buộc ghi đúng nội dung dưới đây)
                    </div>
                    <div class="border-primary border py-3" style="border-radius: 0 0 10px 10px">
                        <div class="text-center cursor-pointer"
                            onclick="coppy('{{ siteValue('transfer_code') }}{{ Auth::user()->id }}')">
                            <strong class="text-primary fs-3">{{ siteValue('transfer_code') }}{{ Auth::user()->id }}</strong>
                            <div class="text-xs fw-semibold">Nhấn vào để sao chép</div>
                        </div>
                    </div>
         </div>
         </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
               <div class="card-title">LỊCH SỬ NẠP TIỀN </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="data-table" class="table table-striped table-bordered nowrap mt-2">
                        <thead>
                            <tr>
                                <th class="text-center">ID</th>
                                <th class="text-center">Mã giao dịch</th>
                                <th class="text-center">Loại giao dịch</th>
                                <th class="text-center">Cổng thanh toán</th>
                                <th class="text-center">Người chuyển</th>
                                <th class="text-center">Số tiền</th>
                                <th class="text-center">Nội dung</th>
                                <th class="text-center">Trạng thái</th>
                                <th class="text-center">Thời gian</th>
                                <th class="text-center">Thao tác</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($history as $historys)
                            <tr>
                                <td>{{ $historys->id }}</td>
                                <td><span class="badge bg-success"> {{$historys->bank_code }}</span></td>
                                <td><span class="badge bg-primary"> {{ $historys->payment_method }}</span></td>
                                <td>{{ $historys->bank_name }}</td>
                                <td>Không xác định</td>
                                <td>{{ number_format($historys->real_amount) }} VNĐ</td>
                                <td><textarea class="form-control" rows="2" style="width: 200px;"
                                    readonly>{{ $historys->note }}</textarea></td>
                                <td>{!! statusRecharge($historys->status, true) !!}</td>
                                <td>{{ $historys->created_at }}</td>
                                <td>
                                    @if ($historys->status == 'Pending')
                                    <a href="{{ route('account.recharge.payment', ['id' => $historys->order_code]) }}"
                                        class="btn btn-primary btn-sm btn-icon" data-bs-toggle="tooltip"
                                        title="Xem chi tiết">
                                    <i class="la la-eye"></i>
                                    </a>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                            @if ($history->isEmpty())
                                @include('admin.components.table-search-not-found', ['colspan' => 12])
                            @endif
                        </tbody>
                    </table>
                    <div class="d-flex jsutify-content-center align-items-center">
                        {{ $history->appends(request()->all())->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    const promotion = 0;
    
    function changeAmount(amount, type) {
        // const amountPay = document.getElementById('amountPay');
        // const amountReceives = document.getElementById('amountReceives');
        // amountPay.innerText = Intl.NumberFormat().format(amount);
        // const receives = amount - (amount * promotion / 100);
        // amountReceives.innerText = Intl.NumberFormat().format(receives);
    
        const amountPayMbbank = document.getElementById('amountPayMbbank');
        const amountReceivesMbbank = document.getElementById('amountReceivesMbbank');
        const amountPayVietcombank = document.getElementById('amountPayVietcombank');
        const amountReceivesVietcombank = document.getElementById('amountReceivesVietcombank');
        const amountPayACB = document.getElementById('amountPayACB');
        const amountReceivesACB = document.getElementById('amountReceivesACB');
        
        const amountPayBIDV = document.getElementById('amountPayBIDV');
        const amountReceivesBIDV = document.getElementById('amountReceivesBIDV');
        
        const amountPayViettin = document.getElementById('amountPayViettin');
        const amountReceivesViettin = document.getElementById('amountReceivesViettin');
    
    
        if (type === 0) {
            amountPayMbbank.innerText = Intl.NumberFormat().format(amount);
            const receives = amount - (amount * promotion / 100);
            amountReceivesMbbank.innerText = Intl.NumberFormat().format(receives);
        } else if (type === 1) {
            amountPayVietcombank.innerText = Intl.NumberFormat().format(amount);
            const receives = amount - (amount * promotion / 100);
            amountReceivesVietcombank.innerText = Intl.NumberFormat().format(receives);
        } else if (type === 2) {
            amountPayACB.innerText = Intl.NumberFormat().format(amount);
            const receives = amount - (amount * promotion / 100);
            amountReceivesACB.innerText = Intl.NumberFormat().format(receives);
        } else if (type === 3) {
            amountPayViettin.innerText = Intl.NumberFormat().format(amount);
            const receives = amount - (amount * promotion / 100);
            amountReceivesViettin.innerText = Intl.NumberFormat().format(receives);
        }else if (type === 8) {
            amountPayBIDV.innerText = Intl.NumberFormat().format(amount);
            const receives = amount - (amount * promotion / 100);
            amountReceivesBIDV.innerText = Intl.NumberFormat().format(receives);
        }
    }
</script>

@endsection