@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">Konfirmasi Kehadiran</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>
                                            #
                                        </th>
                                        <th>
                                            Lokasi / Ruang
                                        </th>
                                        <th>
                                            Nama Kegiatan
                                        </th>
                                        <th>
                                            Status Kegiatan
                                        </th>
                                        <th>
                                            Nama Pimpinan
                                        </th>
                                        <th>
                                            Waktu
                                        </th>
                                        <th>
                                            Status
                                        </th>
                                        <th>
                                            Catatan
                                        </th>
                                        <th>
                                            Action
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->
    @endsection
    @push('after-script')
    <script type="text/javascript">
        $('#datatables').DataTable({
            "pagingType": "full_numbers",
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            ajax: window.location,
            responsive: true,
            processing: true,
            serverSide: true,
            lengthChange: false,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            },
            order: [[5, 'desc']],
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false, className: "text-center" },
                { data: 'id', name: 'undangan_pimpinan_tugas.id', visible: false },
                { data: 'ruang', name: 'kegiatan.ruangan.name', className: "text-center", defaultContent: "-" },
                { data: 'kegiatan.name', name: 'kegiatan.name', className: "text-center", defaultContent: "-" },
                { data: 'status2', name: 'status2', className: "nama text-center", defaultContent: "-" },
                { data: 'pimpinan.name', name: 'pimpinan.name', className: "text-center", defaultContent: "-" },
                { data: 'waktu', name: 'kegiatan.date_start', className: "text-center" },
                { data: 'status.konfirmasi', name: 'status.code_nm', className: "text-center", defaultContent: "-" },
                { data: 'note', name: 'note', className: "text-center" },
                { data: 'action', },
            ]

        });
            // 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();
                        }
                    })
                }
            })
        });
    </script>
    @endpush