@extends('layouts.app')
@section('content')
<div class="row">
    <div class="col-md-12 col">
        <div class="x_panel">
            <div class="x_title">
                <h2>App Errors</h2>

                <div class="clearfix"></div>
            </div>

            <div class="x_content">
                <div class="col-md-12 col-xs-12">
                    <form class="form-horizontal form-label-left input_mask" id="appfrmfilter" name="appfrmfilter">
                        <div class="item form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Admin Users</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="device_type_filter" name="filter_user" class="form-control">
                                    <option value="">Select Device</option>
                                    <option value="ios">IOS</option>
                                    <option value="android">Android</option>
                                </select>
                            </div>
                        </div>

                        <div class="item form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Device Model</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="device_model_filter" name="filter_user" class="form-control">
                                    <option value="">Select Device Model</option>
                                    @foreach($deviceModel as $modal)
                                    @if(!empty($modal->vDeviceModel))
                                    <option value="{{ $modal->vDeviceModel }}">{{ $modal->vDeviceModel }}</option>
                                    @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="item form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Device OS</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="device_os_filter" name="filter_user" class="form-control">
                                    <option value="">Device OS</option>
                                    @foreach($deviceOS as $os)
                                    @if(!empty($os->vDeviceOS))
                                    <option value="{{ $os->vDeviceOS }}">{{ $os->vDeviceOS }}</option>
                                    @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="item form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Version</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="version_filter" name="filter_user" class="form-control">
                                    <option value="">Select Version</option>
                                    @foreach($version as $ver)
                                    @if(!empty($ver->vAppVersion))
                                    <option value="{{ $ver->vAppVersion }}">{{ $ver->vAppVersion }}</option>
                                    @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3 text-center">
                                <button type="button" class="btn btn-primary" id="app-btn-reset">Cancel</button>
                                <button type="button" class="btn btn-success" id="app-btn-filter">Apply</button>
                            </div>
                        </div>
                        <div class="clearfix"></div>

                        <div class="ln_solid"></div>
                    </form>

                </div>

                <div class="x_content">
                    <table id="appErrors" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th style="width: 10%">Id </th>
                                <th style="width: 10%">User Id</th>
                                <th style="width: 10%">Device Type</th>
                                <th style="width: 20%">Device Model</th>
                                <th style="width: 20%">Device OS</th>
                                <th style="width: 20%">Version</th>
                                <th style="width: 10%">Error Message</th>
                                <th style="width: 10%">Created At</th>
                            </tr>
                        </thead>


                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endsection



    @push('scripts')

    <script type="module">
        $(document).ready(function() {
            var appError = $('#appErrors').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                pageLength: 50,
                scrollX: true,
                ajax: {
                    url: '{{ route("app.error.data") }}',
                    type: 'POST',
                    data: function(d) {
                        d._token = $('meta[name="csrf-token"]').attr("content");
                        d.device_type_filter = $('#device_type_filter').val();
                        d.device_model_filter = $('#device_model_filter').val();
                        d.device_os_filter = $('#device_os_filter').val();
                        d.version_filter = $('#version_filter').val();
                    }

                },
                order: [
                    [0, "desc"]
                ],
                columns: [{
                        data: 'iAppErrorId',
                        name: 'iAppErrorId'
                    },
                    {
                        data: 'iUserId',
                        name: 'iUserId'
                    },

                    {
                        data: 'vDeviceType',
                        name: 'vDeviceType'
                    },
                    {
                        data: 'vDeviceModel',
                        name: 'vDeviceModel'
                    },
                    {
                        data: 'vDeviceOS',
                        name: 'vDeviceOS'
                    },
                    {
                        data: 'vAppVersion',
                        name: 'vAppVersion'
                    },
                    {
                        data: 'vErrorMessage',
                        name: 'vErrorMessage'
                    },
                    {
                        data: 'dDateCreated',
                        name: 'dDateCreated'
                       
                    }
                    


                ],
                columnDefs: [{
                targets: '_all',
                orderSequence: ["asc", "desc"]
            }]
            });


            $('#app-btn-filter').on('click', function() {
                appError.ajax.reload();
            });

            // Reset Filter
            $('#app-btn-reset').on('click', function() {
                $('#device_type_filter').val('');
                $('#device_model_filter').val('');
                $('#device_os_filter').val('');
                $('#version_filter').val('');
                appError.ajax.reload();
            });

        });
    </script>


    @endpush