@section('optional_css')
    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

    <link rel="stylesheet" href="{{ asset('plugins/daterangepicker/daterangepicker.css') }}">
@endsection
@section('optional_js')
    <!-- Select2 -->
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>

    <script src="{{ asset('plugins/fileinput/fileinput.min.js') }}"></script>

    <!-- Date Picker -->
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/daterangepicker/daterangepicker.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.select2').select2({
                theme: 'bootstrap4'
            })

            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            })
        })

        function copyToClipboard(element) {
            var $temp = $("<input>");
            $("body").append($temp);
            $temp.val($(element).text()).select();
            document.execCommand("copy");
            $temp.remove();
        }
    </script>
@endsection
<x-member-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('Payment') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    <x-card class="col-sm-12">
        <x-slot name="title">{{ __('Virtual Account') }}</x-slot>
        <div class="invoice p-3 mb-3">
            <!-- info row -->
            <div class="row invoice-info">
                <div class="col-sm-6 invoice-col">
                    Invoice<br>
                    <strong>{{ $userinvoice->kode }}</strong><br>
                    Virtual Account<br>
                    <strong>Bank BCA</strong><br>
                    Virtual Account Number<br>
                    <strong id="va_number">{{ "13677".$userinvoice->number_bca }}</strong>
                    <button class="btn btn-info" onclick="copyToClipboard('#va_number')">Copy</button>
                </div>
                <div class="col-sm-6 invoice-col">
                    Jumlah Pembayaran<br>
                    <strong>{{ $userinvoice->total_tagihan }}</strong><br>
                    Status<br>
                    <strong>{{ $userinvoice->status_text() }}</strong><br>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </x-card>
    <h3 class="m-0">{{ __('Cara Pembayaran') }}</h3>
    <x-card class="col-sm-12 collapsed-card">
        <x-slot name="title">ATM BCA</x-slot>
        <x-slot name="tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-plus"></i>
            </button>
        </x-slot>
        <ol>
            <li>Masukkan kartu ATM BCA & PIN</li>
            <li>Pilih transaksi lainnya</li>
            <li>Pilih transfer</li>
            <li>Pilih rekening BCA Virtual Account</li>
            <li>Masukkan nomor BCA Virtual Account</li>
            <li>Masukkan jumlah yang ingin dibayarkan</li>
            <li>Validasi pembayaran anda</li>
            <li>Pembayaran selesai</li>
        </ol>
    </x-card>
    <x-card class="col-sm-12 collapsed-card">
        <x-slot name="title">BCA Mobile (m-BCA)</x-slot>
        <x-slot name="tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-plus"></i>
            </button>
        </x-slot>
        <ol>
            <li>Lakukan Log in pada aplikasi BCA Mobile</li>
            <li>Pilih m-BCA</li>
            <li>Masukkan kode akses m-BCA</li>
            <li>Pilih m-Transfer</li>
            <li>Pilih BCA Virtual Account</li>
            <li>Masukkan nomor BCA Virtual Account</li>
            <li>Masukkan PIN m-BCA</li>
            <li>Pembayaran selesai</li>
        </ol>
    </x-card>
    <x-card class="col-sm-12 collapsed-card">
        <x-slot name="title">KlikBCA Individual</x-slot>
        <x-slot name="tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-plus"></i>
            </button>
        </x-slot>
        <ol>
            <li>Lakukan Log In pada aplikasi KlikBCA Individual</li>
            <li>Masukkan User ID dan PIN</li>
            <li>Pilih transfer dana</li>
            <li>Pilih transfer ke BCA Virtual Account</li>
            <li>Masukkan nomor BCA Virtual Account</li>
            <li>Masukkan jumlah yang ingin dibayarkan</li>
            <li>Validasi pembayaran</li>
            <li>Pembayaran selesai</li>
        </ol>
    </x-card>
    <x-card class="col-sm-12 collapsed-card">
        <x-slot name="title">KlikBCA Bisnis</x-slot>
        <x-slot name="tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-plus"></i>
            </button>
        </x-slot>
        <ol>
            <li>Lakukan Log In pada aplikasi KlikBCA Bisnis</li>
            <li>Pilih Transfer Dana > Daftar Transfer > Tambah</li>
            <li>Masukkan nomor BCA Virtual Account kemudian kirim</li>
            <li>Pilih transfer dana ke Rekening Virtual Account</li>
            <li>Pilih rekening sumber dana dan rekening BCA Virtual Account Tujuan</li>
            <li>Masukkan jumlah yang ingin dibayarkan</li>
            <li>Validasi pembayaran</li>
            <li>Pilih transfer dana > Otorisasi transaksi</li>
            <li>Pilih transaksi yang ingin diotorisasi</li>
            <li>Pembayaran selesai</li>
        </ol>
    </x-card>
    <x-card class="col-sm-12 collapsed-card">
        <x-slot name="title">M-BCA (Menu Simcard)</x-slot>
        <x-slot name="tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-plus"></i>
            </button>
        </x-slot>
        <ol>
            <li>Pilih m-Banking</li>
            <li>Pilih m-BCA</li>
            <li>Pilih m-payment</li>
            <li>Pilih lainnya</li>
            <li>Ketik TVA</li>
            <li>Masukkan nomor BCA Virtual Account, kemudian masukkan PIN</li>
            <li>Validasi pembayaran dan masukkan jumlah pembayaran</li>
            <li>Pembayaran selesai</li>
        </ol>
    </x-card>
</x-member-layout>