@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">{{ __('Pembayaran Kasir') }}</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>
                    Metode Pembayaran<br>
                    <strong>Kasir Karunia</strong><br>
                </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">
        <x-slot name="title">Pembayaran Di kasir</x-slot>
        <ol>
            <li>Print Kwitansi <a href="{{ route('print-invoice', base64_encode($userinvoice->kode)) }}" target="_blank">Download di sini</a></li>
            <li>Datang Langsung Ke Karunia Medical Clinik</li>
            <li>Menuju Ke Meja Pndaftaran</li>
            <li>Berikan Print Invoice kepada kasir</li>
        </ol>
    </x-card>
</x-member-layout>