@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">Report Kegiatan</h4>
                        @include('backend.pages.report._ruangan_filters')

                        <div class="table-responsive">
                            <table class="table table-striped" id="datatables" style="width: 100%;">
                                <thead style="text-align: center;">
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            Lokasi
                                        </th>
                                        <th>
                                            Ruangan
                                        </th>
                                        <th>
                                            Kegiatan
                                        </th>
                                        <th>
                                            Start - End
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    @push('after-script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // DataTable
            var table = $('#datatables').DataTable({
                dom: 'Bfrtip',
                buttons: 'excel',
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 25, 50, -1],
                    [10, 25, 50, "All"]
                ],
                responsive: true,
                processing: true,
                serverSide: true,
                lengthChange: true,
                searching: true,
                ajax: window.location,
                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" },
                    { data: 'ruang', className: "ruangan text-center" },
                    { data: 'name', name: 'name', className: "nama text-center" },
                    { data: 'tgl', className: "tgl text-center" },
                ]
            });

            table.buttons().container()
                .appendTo($('.col-sm-6:eq(0)', table.table().container()));

            // filter data
            $('#ruangan, #tanggal_mulai, #tanggal_selesai').change(function () {
                table.ajax.url(`{{ url('report') }}?ruangan=${$('#ruangan').val()}&tanggalmulai=${$('#tanggal_mulai').val()}&tanggalselesai=${$('#tanggal_selesai').val()}`).load();
            });

            $('#lokasi').on('change', function () {
                axios.post('{{ route("dependent-dropdown.get") }}', { id: $(this).val() })
                    .then(function (response) {
                        $('#ruangan').empty();
                        $('#ruangan').html('<option value="">Pilih Ruangan</option>');

                        $.each(response.data, function (id, name) {
                            $('#ruangan').append(new Option(name, id))
                        })
                    });
                table.ajax.url(`{{ url('report') }}?lokasi=${$('#lokasi').val()}`).load();
            });
            // end filter data

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