@extends('layouts.admin')
@section('content')
<section class="content-header">
    <label>
        Pengaduan
    </label>
    <ol class="breadcrumb">
        <li>
            <a href="{{ url('admin/dashboard') }}"><i class="fa fa-line-chart"></i> Dashboard</a>
        </li>
        <li class="active">Pengaduan</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <button class="btn btn-info btn-sm" onclick="reload()">
                        <i class="fa fa-refresh"></i> Refresh
                    </button>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Nama Lengkap</label>
                                <div class="input-group">
                                    <span class="input-group-addon"><li class="fa fa-user"></li></span>
                                    <input type="text" class="form-control" placeholder="Nama lengkap" id="src_name" name="src_name">
                                </div>    
                            </div>
                        </div>
                    </div>
                </div>
            </div>                
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box box-success">
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12">
                            <table id="ajax-datatables" class="table table-bordered table-hover table-striped" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th width="5%">#</th>
                                        <th>Nama Lengkap</th>
                                        <th>No.Telpon</th>
                                        <th>Email</th>
                                        <th>Pengaduan</th>
                                        <th width="8%">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- delete modal -->
<div class="modal fade" id="md-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Hapus Pengaduan</h4>
            </div>
            <div class="modal-body text-center">
                <p style="text-align: center">
                    <i class="fa fa-exclamation-triangle" style="font-size: 35px;color:#C23F44" ></i>&nbsp
                    <label style="font-size: 35px;"> Apakah anda yakin ? </label>
                </p>
                <input type="hidden" id="del_complaint_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="btn-del-com" onclick="delComplaint()">Hapus</button>
            </div>
        </div>
    </div>
</div>

<script>
    var table;
    $(document).ready(function() {
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

        $("#src_name").keypress(function(e) {
            if (e.which == 13) {
                table.ajax.reload(null, false);
            }
        });

        table = $('#ajax-datatables').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            responsive: true,
            ajax: {
                url: "{{ route('getComplaint') }}",
                data: function(d) {
                    d.src_name = $('#src_name').val()
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false

                },
                {
                    data: 'fullname',
                    name: 'fullname'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'id',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        return '<button class="btn btn-danger btn-xs" onclick="getComplaintId('+data+')" data-toggle="modal" data-target="#md-delete"><i class="fa fa-trash"></i></button>';
                    }
                },
            ]
        });

    });

    function reload() {
        table.ajax.reload(null, false);
        $("#src_name").val("");
    }

    function getComplaintId(id) {
        $('#del_complaint_id').val(id);
    }

    function delComplaint() {
        var id = $('#del_complaint_id').val();
        if (!id) return;
        var _token = $('meta[name="csrf-token"]').attr('content');
        $('#btn-del-com').attr('disabled', true).html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
        $.ajax({
            url: "{{ route('deleteComplaint') }}",
            type: "DELETE",
            data: { id: id, _token: _token },
            dataType: "json",
            success: function(res) {
                if (res.status == 'success') {
                    $('#md-delete').modal('hide');
                    table.ajax.reload(null, false);
                }
                notif(res.message, res.status);
            },
            error: function() {
                notif('Gagal menghapus data', 'error');
            },
            complete: function() {
                $('#btn-del-com').removeAttr('disabled').html('Hapus');
            }
        });
    }
</script>
@endsection