@extends('layouts.app')

@section('content')
    <h5 class="text-primary">LINE OA Webhook Directory</h5>

    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table" id="tbl-webhook-data">
                    <thead class="table-primary text-center">
                        <th>Type</th>
                        <th>Source</th>
                        <th>Message</th>
                        <th>Line event payloads</th>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@includeIf('admin.inc.profile-result-modal')

@push('custom-script')
    <script type="module">
        $(document).ready(function(){
            $('#tbl-webhook-data').dataTable({
                processing: true,
                responsive: true,
                serverSide: true,
                columns: [
                    {
                        data: 'type',
                        className: 'text-center',
                        searchable: true,
                    },
                    {
                        data: 'source',
                        searchable: true,
                    },
                    {
                        data: 'message',
                        searchable: true,
                    },
                    {
                        data: 'payloads'
                    }
                ],
                ajax: {
                    type: 'POST',
                    url: "{{ route('admin.api.dt.get-webhook-logs') }}",
                    data: {
                        _token: "{{csrf_token()}}"
                    }
                }
            })
        })

        $(document).on('click', '[data-action="search"]', function(){
            const type = $(this).data('type')
            const uid = $(this).data('id')
            const modal = new bootstrap.Modal(document.getElementById('profile-result-modal'))

            $('#profile-result-modal').find('.profile-uid').html('')
            $('#profile-result-modal').find('.profile-name').html('')
            $('#profile-result-modal').find('.profile-img').attr('src', '')

            systemLoader()

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.api.get-profile') }}",
                data: {
                    _token: '{{ csrf_token() }}',
                    uid: uid,
                    type: type,
                },
                success: function(result){
                    const data = result.data

                    if(type == 'user'){
                        $('#profile-result-modal').find('.profile-uid').html(data.userId)
                        $('#profile-result-modal').find('.profile-name').html(data.displayName)
                        $('#profile-result-modal').find('.profile-img').attr('src', data.pictureUrl)
                    }else if(type == 'group'){
                        $('#profile-result-modal').find('.profile-uid').html(data.groupId)
                        $('#profile-result-modal').find('.profile-name').html(data.groupName)
                        $('#profile-result-modal').find('.profile-img').attr('src', data.pictureUrl)
                    }

                    systemLoader(false)

                    modal.show()
                },
                error: function(error){
                    const errorData = error.responseJSON
                    triggerAlert('swal', 'error', errorData.message)
                }
            })
        })
    </script>
@endpush