@extends('admin.layouts.app')

@section('content')
    <div class="conatiner-fluid content-inner mt-n5 py-0" style="margin-top: 100px !important;">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="flex-wrap d-flex justify-content-between align-items-center">
                            <div>
                                <div class="header-title">
                                    <h2 class="card-title">Kategori</h2>
                                    <p>List data</p>
                                </div>
                            </div>
                            <div>
                                <a href="{{ url("/admin/category/create") }}" class="btn btn-md btn-success">
                                    <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12.0001 8.32739V15.6537" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M15.6668 11.9904H8.3335" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6857 2H7.31429C4.04762 2 2 4.31208 2 7.58516V16.4148C2 19.6879 4.0381 22 7.31429 22H16.6857C19.9619 22 22 19.6879 22 16.4148V7.58516C22 4.31208 19.9619 2 16.6857 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                    Tambah Data
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <br>
                        <div class="table-responsive">
                            <table id="datatable" class="table table-striped" data-toggle="data-table">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Name</th>
                                        <th>Subject</th>
                                        <th>Divisi</th>
                                        <th>Created At</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var divisi_id = "{{$session_data['divisi_id']}}";
        var user_level_id = "{{$session_data['user_level_id']}}";
        var where = "";

        if (user_level_id == 3) {
            where = "{'status':'Menunggu konfirmasi', 'complain_category_id':"+divisi_id+"}";
        } else {
            where = "{'status':'Menunggu konfirmasi'}";
        }

        $('#datatable').DataTable( {
            order: [[ 0, 'asc' ]],
            lengthMenu: [[ 5, 10, 25, 100, -1 ], [ 5, 10, 25, 100, 'All' ]],
            pageLength: 10,
            processing: true,
            serverSide: true,
            autoWidth: false,
            scrollX: true,
            ajax: function(data, callback, settings) {
                var sort_col_id = data.order[0].column;
                var sort_col_order = data.order[0].dir;
                var sort_col_name = data.columns[data.order[0].column].data;
                $.ajaxSetup({
                    headers:{
                        'Authorization': "Bearer {{$session_token}}"
                    }
                });
                $.get('/api/complain', {
                    where: where,
                    per_page: data.length,
                    page: (data.start / data.length) + 1,
                    sort: sort_col_name + ':' + sort_col_order,
                    search: data.search.value
                },
                function(json) {
                    callback({
                        recordsTotal: json.metadata.total_data,
                        recordsFiltered: json.metadata.total_data,
                        data: json.data
                    });
                });
            },
            columns: [
                {
                    data: 'id'
                },
                {
                    data: 'name',
                    render: function (data, type, row, meta) {
                        return '<span style="white-space: normal;">' + data + '</span>';
                    }
                },
                {
                    data: 'subject',
                    render: function (data, type, row, meta) {
                        return '<span style="white-space: normal;">' + data + '</span>';
                    }
                },
                {
                    data: 'complain_category_name',
                    render: function (data, type, row, meta) {
                        return '<span style="white-space: normal;">' + data + '</span>';
                    }
                },
                {
                    data: 'created_at',
                    render: function (data, type, row, meta) {
                        return '<span style="white-space: normal;">' + convertStringToDateTime(data) + '</span>';
                    }
                },
                {
                    data: 'status',
                    render: function (data, type, row, meta) {
                        if(data == 'Menunggu konfirmasi') {
                            return '<span class="badge bg-gray">'+data+'</span>';
                        } else if(data == 'Diarahkan ke bidang yg berwenang') {
                            return '<span class="badge bg-info">'+data+'</span>';
                        } else if(data == 'Dalam proses' ) {
                            return '<span class="badge bg-primary">'+data+'</span>';
                        } else if(data == 'Komplain selesai') {
                            return '<span class="badge bg-success">'+data+'</span>';
                        } else if(data == 'Komplain ditolak') {
                            return '<span class="badge bg-danger">'+data+'</span>';
                        } else {
                            return '<span class="badge bg-secondary">'+data+'</span>';
                        }
                    }
                },
                {
                    data: 'id',
                    render: function (data, type, row, meta) {
                        var btn_detail = `
                            <a href="#" class="btn btn-sm btn-icon btn-info flex-end" data-bs-toggle="tooltip" aria-label="Detail" data-bs-original-title="Detail">
                                <span class="btn-inner">
                                    <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M21.25 16.334V7.665C21.25 4.645 19.111 2.75 16.084 2.75H7.916C4.889 2.75 2.75 4.635 2.75 7.665L2.75 16.334C2.75 19.364 4.889 21.25 7.916 21.25H16.084C19.111 21.25 21.25 19.364 21.25 16.334Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M16.0861 12H7.91406" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.3223 8.25205L16.0863 12L12.3223 15.748" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                    Aksi
                                </span>
                            </a>`;
                        return '<div style="display: flex;">'+btn_detail+'</div>';
                    }
                }
            ],
            columnDefs: [
                {targets: [0], width: "5%"},
                {targets: [1], width: "15%"},
                {targets: [2], width: "15%"},
                {targets: [3], width: "15%"},
                {targets: [4], width: "20%"},
                {targets: [5], width: "10%", orderable: false}
            ],
        });

        function removeData(id) {
            Swal.fire({
                title: "Are you sure want to delete?",
                showDenyButton: true,
                showCancelButton: false,
                confirmButtonText: "Yes",
                denyButtonText: "No",
                confirmButtonColor: '#1AA053',
            }).then((result) => {
                if (result.isConfirmed) {

                    // delete
                    $.ajaxSetup({
                        headers:{
                            'Authorization': "Bearer {{$session_token}}"
                        }
                    });
                    $.ajax({
                        url: '/api/complain_category/'+id,
                        type: "DELETE",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        processData: false,
                        success: function (result) {
                            if(result['success'] == true) {
                                Swal.fire({
                                    icon: "success",
                                    title: "Success",
                                    text: result['message'],
                                    confirmButtonColor: '#3A57E8',
                                }).then((result) => {
                                    window.location.replace("{{ url('/admin/category') }}");
                                });
                            } else {
                                Swal.fire({
                                    icon: "error",
                                    title: "Oops...",
                                    text: result['message'],
                                    confirmButtonColor: '#3A57E8',
                                });
                            }
                        }
                    });
                }
            });
        }
    </script>
@endsection