@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">
                    Kwitansi<br>
                    <strong>{{ $userinvoice->kode }}</strong><br>
                    Virtual Account<br>
                    <strong>Bank Mandiri</strong><br>
                    Virtual Account Number<br>
                    <strong id="va_number">{{ $how_to_pay->virtual_account_info->virtual_account_number }}</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>{{ $how_to_pay->virtual_account_info->status }}</strong><br>
                    Jatuh Tempo<br>
                    <strong>{{ date('Y-m-d H:i:s',strtotime($how_to_pay->virtual_account_info->expired_date)) }}</strong><br>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </x-card>
    @if(!empty($how_to_pay->payment_instruction))
        <h3 class="m-0">{{ __('Cara Pembayaran') }}</h3>
        @foreach($how_to_pay->payment_instruction as $instruction)
            <x-card class="col-sm-12 collapsed-card">
                <x-slot name="title">{{ $instruction->channel }}</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>
                    @foreach($instruction->step as $step)
                        <li>{{ $step }}</li>
                    @endforeach
                </ol>
            </x-card>
        @endforeach
    @endif
</x-member-layout>