@extends('layouts.main', ['title' => 'Detail Tagihan Siswa'])

@push('styles')
    <link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">
@endpush

@push('scripts')
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <script>
        function printElement() {
            //print #print-element with landscape orientation
            // printJS({
            //     printable: 'print-element',
            //     type: 'html',
            //     targetStyles: ['*'],
            //     documentTitle: 'Bukti Pembayaran',
            //     scanStyles: false,
            //     style: '@page { size: landscape; } body { padding:0px !important; }',
            //     css:"{{ url('css/main.css') }}"
            // });
            document.getElementById('view-pdf').contentWindow.print();
        }
        document.onkeydown = function(e) {
            if (e.ctrlKey && e.keyCode == 'P'.charCodeAt(0)) {
                e.preventDefault();
                //your saving code
                printElement();
            }
        }
    </script>
@endpush

@section('content')
    <section class="section main-section">
        <div class="card mb-6">
            <header class="card-header">
                <p class="card-header-title">
                    <span class="icon"><i class="mdi mdi-ballot"></i></span>
                    Detail Tagihan Siswa
                </p>
            </header>
            <div class="card-content">
                <ul>
                    <li>
                        NIS : {{ $data->nis }}
                    </li>
                    <li>
                        Nama : {{ $data->nama_siswa }}
                    </li>
                    <li>
                        Kelas : {{ $data->kelas->nama_kelas }}
                    </li>
                </ul>
                <hr>
                <iframe src="{{route('tagihan.pdf',$data->id)}}" class="w-full" style="height: 700px;" frameborder="0" id="view-pdf"></iframe>
                <hr>
                <div class="flex justify-between">
                    <button class="button is-primary blue" onclick="printElement()">Cetak</button>
                    <a href="{{ route('tagihan.index') }}" class="button is-danger">Kembali</a>
                </div>
            </div>
        </div>


    </section>
@endsection