@extends('admin.layouts.master')

@section('head')
{{--    <style>--}}
{{--        .channel_icon img{width: 20px;}--}}
{{--    </style>--}}
@endsection





@section('breadcrumb')
    <section class="content-header">
        <h1>
            Customer Emails
        </h1>

    </section>
@stop

@section('content')
    <div>

        <table id="customerEmailTable" class="table">
            <thead>
            <tr>
                <th>Subject</th>
                <th>Name</th>
                <th>Email</th>
                <th>Body</th>
                <th>Date</th>
            </tr>
            </thead>
            <tbody>
            @foreach ($customer_support_emails as $support_email)
                <tr>
                    <td>{{ $support_email->subject }}</td>
                    <td>{{ $support_email->name }}</td>
                    <td>{{ $support_email->email }}</td>
                    <td>{{ $support_email->body }}</td>
                    <td>{{ $support_email->created_at }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
@endsection


@section('last_scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#customerEmailTable').DataTable(
                {
                    // processing: true,
                    // serverSide: true,
                    "searching": true,
                    "paging": true,
                    // 'bSortable': true,
                    // "bInfo": true,
                    iDisplayLength: 50,
                    "lengthChange": true,
                    "autoWidth": false,
                    responsive: true,
{{--                    sAjaxSource: '{{ route('store_logs_listing_ajax') }}',--}}
//
//                     order: [[5, "desc"]],


                    });


            // Filters on change events
            $('#shop_id').on('keyup click change', function (e) {
                table.draw();
            });

            $('#connector_channel_id,#webhook_status,#trigger_at').on('change', function () {
                table.draw();
            });

            $('#shop_id').select2({
                placeholder: "Select shop",
                ajax: {
                    url: "{{ route('stores_select2_format') }}",
                    minimumInputLength: 1,
                    cache: true,
                    data: function (params) {
                        var query = {
                            search: params.term
                        }
                        return query;
                    }
                }
            });

        });


        var channel_query_param = {
            offset: "",
            search: "",
        }
        function get_channels() {
            $('.connector_channel_id').select2({
                placeholder: "Select Channel",
                allowClear: true,
                ajax: {
                    url: "{{ route('get_channels') }}",
                    minimumInputLength: 1,
                    cache: true,
                    data: function (params) {
                        return channel_query_param;
                    },
                    processResults: function (data, params) {
                        channel_query_param.offset = data.offset || "";
                        channel_query_param.search = params.term || "";
                        return {
                            results: data.results,
                            pagination: {
                                more: (data.pagination && data.pagination.more) ? data.pagination.more : false
                            }

                        };
                    }
                }
            }).on('select2:close', function (e) {
                channel_query_param.offset = "";
                channel_query_param.search = "";
            });
        }

        get_channels();

        function clearLogFilters() {
            $('#webhook_status').val('');
            $('#trigger_at').val('');
            $("#connector_channel_id").empty().trigger('change');
            table.search("").draw();
        }
    </script>
@stop