@extends('backend.layouts.app')
@section('content')
    <div class="main-panel">
        <div class="content-wrapper">
            <div class="row">
                <div class="col-lg-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">List Peminjaman Tempat</h4>
                            <div class="table-responsive">
                                <table class="table-striped table-hover wrap" id="datatables" style="width: 100%;">
                                    <thead style="text-align: center;">
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            Lokasi
                                        </th> <th>
                                            Ruangan
                                        </th>
                                        <th>
                                            Nama Kegiatan
                                        </th>
                                        <th>
                                            Start - End
                                        </th>
{{--                                        <th>--}}
{{--                                            Undangan File--}}
{{--                                        </th>--}}
                                        <th>
                                            Peminjam
                                        </th>
                                        <th>
                                            OPD
                                        </th>
                                        <th>
                                            Status Pinjam
                                        </th>
                                        <th>
                                            Catatan
                                        </th>
                                        <th>
                                            Action
                                        </th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal starts -->
        @endsection
        @push('after-style')
            <style>
                @media print {

                    /* Hide every other element */
                    body * {
                        visibility: hidden;
                    }

                    /* Then displaying print container element */
                    .print-container,
                    .print-container * {
                        visibility: visible;
                    }

                    /* Adjusting the position to always start from top left */
                    /* .print-container { */
                    /* width: max-content; */
                    /* position: absolute; */
                    /* left: 0px; */
                    /* top: 0px; */
                    /* } */
                }
            </style>
        @endpush
        @push('after-script')
            <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
            <script type="text/javascript">
                $('#datatables').DataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    order: [[5, 'desc']],
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    lengthChange: false,
                    ajax: '{{route('kegiatan.index', ['type' => 'konfirmasi_ruang'])}}',
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search records",
                    },
                    columns: [
                        { data: 'DT_RowIndex', orderable: false, searchable: false, className: "text-center" },
                        { data: 'ruangan.lokasi.name', name: "ruangan.lokasi.name", className: "ruangan text-center", defaultContent: "-",  searchable: false },
                        { data: 'ruang', className: "ruangan text-center", searchable: false, defaultContent: "-" },
                        { data: 'name', name: 'name', className: "nama text-center", width:200 },
                        { data: 'tgl', name: 'date_start', className: "tgl text-center", width:150 },
                        // { data: 'lampiran_name', name: 'lampiran_name', className: "text-center" },
                        { data: 'user.name', className: "text-center" },
                        { data: 'user.opd.name',name: "user.opd.name", defaultContent: "-", className: "text-center" },
                        { data: 'pinjam',name: 'statusPinjam.code_nm', className: "text-center" },
                        { data: 'lokasi_note',name: 'lokasi_note', orderable: false, searchable: false },
                        { data: 'action2',  orderable: false, searchable: false, className: "text-center" },
                    ]

                });
                // var table = $('#datatables').DataTable();
                // $('.card .material-datatables label').addClass('form-group');
            </script>
            <script>
                $(document).on('click', '.delete-data-table', function (a) {
                    a.preventDefault();
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "Do you realy want to delete this records? This process cannot be undone.",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Delete!'
                    }).then((result) => {
                        if (result.value) {
                            a.preventDefault();
                            var url = $(this).attr('href');
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });

                            $.ajax({
                                url: url,
                                method: 'delete',
                                success: function () {
                                    Swal.fire(
                                        'Deleted!',
                                        'Data has been deleted.',
                                        'success'
                                    )
                                    $('#datatables').DataTable().ajax.reload();
                                }
                            })
                        }
                    })
                });

                $(document).on("click", ".open-AddBookDialog", function () {
                    var $row = $(this).closest("tr");    // Find the row
                    var $text = $row.find(".ruangan").text(); // Find the text
                    var $nama = $row.find(".nama").text(); // Find the text
                    var $tgl = $row.find(".tgl").text(); // Find the text

                    // Let's test it out
                    // alert($text);
                    var myBookId = $(this).data('qr');
                    // var myBookId2 = $(this).data('title');
                    document.getElementById("exampleModalLabel").innerHTML = $nama;
                    document.getElementById("exampleModalLabel2").innerHTML = $text;
                    document.getElementById("exampleModalLabel3").innerHTML = $tgl;
                    var qrc = document.getElementById("qrcode").innerHTML = '';
                    var qrc = new QRCode(document.getElementById("qrcode"), myBookId);
                });
            </script>
    @endpush