@extends('admin.layout.master')
@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Laporan</h1>
                    </div>
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="card card-danger card-outline">
                    <div class="card-header">
                    </div>
                    <div class="card-body">
                        <table id="table-datatable" class="table table-striped " style="width:100%">
                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Koperasi</th>
                                <th>Pelapor</th>
                                <th>Judul</th>
                                <th>Isi Laporan</th>
                                <th>Status</th>
                                <th>Selesai</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>

            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('#table-datatable').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: '{{url('complaints')}}',
                columnDefs: [
                    {
                        render: function (data, type, row) {
                            let html = ``;
                            if (row[5] === 'proses') {
                                html += `
                                    <div class="form-check">
                                      <input onclick="updateStatus(` + row[0] + `)" class="form-check-input" type="checkbox" value="" id="checkStatus` + row[0] + `">
                                    </div>
                                `;
                            }

                            return html;
                        },
                        targets: -1,
                    },
                    {
                        render: function (data, type, row) {
                            let buttonClass = `btn-warning`;
                            if (row[5] === 'selesai') {
                                buttonClass = 'btn-success';
                            }

                            return `
                                <button class="btn btn-sm ` + buttonClass + `">` + row[5] + `</button>
                            `;

                            return html;
                        },
                        targets: -2,
                    },
                ]
            });
        });

        function updateStatus(id) {
            window.location = '/complaint/' + id + '/finish';
        }
    </script>
@endsection