@extends('layout')
@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Kontak</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                                <li class="breadcrumb-item active">Daftar Kontak Masuk</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title" style="float: left;">Daftar Kontak Masuk</h4>
                        </div>
                        <div class="card-body">
                            <table id="datatable-category-bisnis" class="table table-bordered dt-responsive "
                                   style="min-width: 100%;">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Nama Lengkap</th>
                                    <th>Email</th>
                                    <th>Nomor Whatsapp</th>
                                    <th style="width: 250px;">Kota / Kabupaten</th>
                                    <th>Tahu Voss Dari</th>
                                </tr>
                                </thead>


                                <tbody>

                                </tbody>
                            </table>

                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->
        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
    <!-- sample modal content -->
    <div id="myModal" class="modal bs-example-modal-center" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="myModalLabel">Filter Pertanyaan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-5 col-form-label">Sudah/Belum dijawab</label>
                    </div>
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-5 col-form-label">Status User</label>
                        <div class="col-md-7">
                            <select class="form-control" id="filterStatus" >
                                <option value="">Semua</option>
                                <option value="GUEST">GUEST</option>
                                <option value="MEMBER">MEMBER</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
                    <button onclick="filter()" type="button" class="btn btn-primary waves-effect waves-light">Tampilkan</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        function filter(){
            $("#myModal").modal('hide');
            $('#datatable-category-bisnis').DataTable().ajax.reload()
        }
        $(document).ready(function (e) {
            $('#datatable-category-bisnis').DataTable({
                "ordering": false,
                "pageLength": 10,
                "serverSide": true,
                "processing": true,
                "order": [[0, "asc"]],
                "ajax": {
                    url: '{{url('/contact/list')}}',
                    type: 'POST',
                    "data": function (d) {
                        d._token = "{{ csrf_token() }}";
                        d.status = $("#filterStatus").val();
                    },
                    beforeSend: function () {
                        // Here, manually add the loading message.
                        $('#tableTransaction > tbody').html(
                            '<tr class="odd">' +
                            '<td valign="top" colspan="2" class="dataTables_empty">Loading&hellip;</td>' +
                            '</tr>'
                        );
                    }
                },

                // "scrollX": true,
                // "scrollCollapse": true,
                "paging": true,
                "columns": [
                    {
                        "data": "id", render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {"data": "first_name"},
                    {"data": "email"},
                    {"data": "phonenumber"},
                    {"data": "address"},
                    {
                        "data": "know_from", 
                        render: function (data, type, row, meta) {
                            let stringText = data;
                            if(data == 'media_sosial'){
                                stringText = 'Media Sosial';
                            }else if(data == 'search_engine'){
                                stringText = 'Web / Internet';
                            }else if(data == 'ads_google'){
                                stringText = 'Iklan di Google';
                            }else if(data == 'ads_socmed'){
                                stringText = 'Iklan di Social media (FB/IG)';
                            }else if(data == 'event'){
                                stringText = 'Event';
                            }else if(data == 'referensi_teman'){
                                stringText = 'Referensi Teman';
                            }
                            return stringText;
                        }
                    },


                ]

            });
        });
    </script>
@endsection