@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">{{ __('Bank Transfer') }}</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>
                    Bank Transfer<br>
                    <strong>Bank Transfer BNI</strong><br>
                    Atas Nama<br>
                    <strong>PT. Karunia Prima Medika</strong><br>
                    Account Number<br>
                    <strong id="va_number">8808008073</strong>
                    <button class="btn btn-info" onclick="copyToClipboard('#va_number')">Copy</button>
                </div>
                <div class="col-sm-6 invoice-col">
                    Jumlah Pembayaran<br>
                    <strong>Rp {{ number_format($userinvoice->total_tagihan, '0', ',', '.') }}</strong><br>
                    Jatuh Tempo<br>
                    <strong>{{ $userinvoice->tanggal_jatuh_tempo_invoice }}</strong><br>
                    Status<br>
                    <strong>{{ $userinvoice->status_text() }}</strong><br>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </x-card>
    <h3 class="m-0">{{ __('Konfirmasi Pembayaran') }}</h3>
    @if(!empty($bank_transfer))
        <x-alert-success>
            Bukti Pembayaran sudah dikirim ke system, harap tunggu admin untuk konfirmasi
        </x-alert-success>
    @endif
    <form class="form-horizontal" action="{{ route('member.invoice.payment-transfer-bni-store', $userinvoice->id) }}" method="POST" enctype="multipart/form-data">
        <x-card class="col-sm-12">
            @csrf
            <x-slot name="title">Konfirmasi Pembayaran</x-slot>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Bukti Transfer') }} <span class="text-danger">*</span></x-label>
                <div class="col-sm-10">
                    <div class="fileinput fileinput-new" data-provides="fileinput">
                        <div class="fileinput-preview img-thumbnail text-center mb-2" data-trigger="fileinput">
                            @if(!empty($bank_transfer->bukti_transfer))
                                <img src="{{ Storage::url($bank_transfer->bukti_transfer) }}" width="200">
                            @else
                                <img src="{{ Storage::url(Setting::getSetting('company-logo')) }}" width="200">
                            @endif
                        </div>
                        <div>
                            <span class="btn btn-info btn-file">
                                <span class="fileinput-new">Select Image</span>
                                <input type="file" name="bukti_transfer">
                            </span>
                            <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                        </div>
                        <p style="margin-top: 15px"><em>Upload image if add image</em></p>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Memo') }}</x-label>
                <div class="col-sm-10">
                    <textarea class="form-control" name="memo">{{ old('memo', $bank_transfer->memo??'') }}</textarea>
                    @if ($errors->has('memo'))
                        <small class="error invalid-feedback">{{ $errors->first('memo') }}</small>
                    @endif
                </div>
            </div>
            <x-slot name="footer">
                <x-button class="float-right">{{ __('Save') }}</x-button>
            </x-slot>
        </x-card>
    </form>
    <h3 class="m-0">{{ __('Cara Pembayaran') }}</h3>
    <x-card class="col-sm-12">
        <x-slot name="title">ATM BNI</x-slot>
        <ol>
            <li>Masukkan kartu ATM dengan posisi yang sesuai petunjuk di mesin</li>
            <li>Pilih bahasa namun pastikan memilih Bahasa Indonesia jika tidak terbiasa menggunakan ATM dengan Bahasa Inggris</li>
            <li>Masukkan PIN dan tutupi dengan tangan saat mulai mengetik PIN guna menghindari hal-hal yang tidak diinginkan</li>
            <li>Pilih Menu Lain lalu pilih transfer</li>
            <li>Pilih ke rekening BNI dan masukkan nominal yang hendak ditransfer</li>
            <li>Saat muncul halaman konfirmasi, cek kembali data dan informasi yang ada dan tekan ya jika sudah benar</li>
            <li>Struk keluar setelah transaksi berhasil</li>
            <li>Ambil kartu ATM dan jangan tinggal di mesin</li>
            <li>Ambil Foto/Screenshot Bukti Transfer</li>
            <li>Masukan Memo berisikan pemilik rekening dan nomer rekening</li>
            <li>Konfirmasi di halaman pembayaran</li>
        </ol>
    </x-card>
</x-member-layout>