@extends('layouts.app')
@section('content')
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>User List <small>V2</small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content update_xcontent">
                    <div class="col-md-12 col-xs-12 col-sm-12">
                        <form class="form-horizontal form-label-left input_mask" id="frm-filter-1" name="frm-filter-1">
                            <div class="item form-group col-md-6 col-xs-6 col-sm-6">
                                <label class="control-label col-md-4 col-sm-4 col-xs-12">Program</label>
                                <div class="col-md-8 col-sm-8 col-xs-12">
                                    <select id="filter_program" name="filter_program"
                                        class="form-control col-md-12 col-xs-12">
                                        <option value="">Select Program</option>
                                                                            </select>
                                </div>
                            </div>

                            <div class="item form-group col-md-6 col-xs-6 col-sm-6">
                                <label class="control-label col-md-4 col-sm-4 col-xs-12">User ID</label>
                                <div class="col-md-8 col-sm-8 col-xs-12">
                                    <input id="filter_userid" name="filter_userid" type="text" class="form-control"
                                        placeholder="User ID" data-error="You have to enter user id for apply filter" />
                                </div>
                            </div>

                            <div class="item form-group col-md-6 col-xs-6 col-sm-6">
                                <label class="control-label col-md-4 col-sm-4 col-xs-12">Email</label>
                                <div class="col-md-8 col-sm-8 col-xs-12">
                                    <input id="filter_email" name="filter_email" type="email" class="form-control"
                                        placeholder="Email" data-error="You have to enter email address for apply filter" />
                                </div>
                            </div>

                            <div class="item form-group col-md-6 col-xs-6 col-sm-6">
                                <label class="control-label col-md-4 col-sm-4 col-xs-12">Mobile Number</label>
                                <div class="col-md-8 col-sm-8 col-xs-12">
                                    <input id="filter_mobile" name="filter_mobile" type="text" class="form-control"
                                        placeholder="Mobile"
                                        data-error="You have to enter mobile number for apply filter" />
                                </div>
                            </div>

                            <div class="item form-group col-md-6 col-xs-6 col-sm-6">
                                <label class="control-label col-md-4 col-sm-4 col-xs-12">UDID</label>
                                <div class="col-md-8 col-sm-8 col-xs-12">
                                    <input id="filter_udid" name="filter_udid" type="text" class="form-control"
                                        placeholder="UDID" data-error="You have to enter UDID for apply filter" />
                                </div>
                            </div>
                            <div class="item form-group col-md-6 col-xs-6 col-sm-6">
                                <label class="control-label col-md-4 col-sm-4 col-xs-12">External UserId</label>
                                <div class="col-md-8 col-sm-8 col-xs-12">
                                    <input id="filter_external_userid" name="filter_external_userid" type="text"
                                        class="form-control" placeholder="External UserId"
                                        data-error="You have to enter External UserId for apply filter" />
                                </div>
                            </div>
                            <div class="col-md-12 col-xs-12 col-sm-12">
                                <div class="text-center">
                                    <input type="hidden" id="filter_match-1" name="filter_match-1" value="">
                                    <button type="button" class="btn btn-primary" id="btn-reset-1">Cancel</button>
                                    <button type="button" class="btn btn-success btn-filter-1" data-value="exact">Exact
                                        Match</button>
                                    <button type="button" class="btn btn-success btn-filter-1" data-value="fuzzy">Fuzzy
                                        Match</button>
                                </div>
                                <div class="clearfix"></div>
                                <div class="ln_solid"></div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="x_content table-responsive">
                    <table id="user-table-1" class="table table-bordered table-striped ">
                        <thead>
                            <tr>
                                <th style="width: 2%">User ID</th>
                                <th style="width: 5%">External User ID</th>
                                <th style="width: 5%">Mobile</th>
                                <th style="width: 5%">Email</th>
                                <th style="width: 5%">Active Program</th>
                                <th style="width: 5%">Active Day ID</th>
                                <th style="width: 5%">Last Login</th>
                                <th style="width: 5%">Created At</th>
                                <th style="width: 5%">UDID</th>
                                <th style="width: 5%">Active</th>
                                <th style="width: 5%">Deleted</th>
                                <th style="width: 8%">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>User List <small>Subscription</small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="col-md-12 col-xs-12 col-sm-12">
                        <form class="form-horizontal form-label-left input_mask" id="frm-filter-2" name="frm-filter-2">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-2 col-sm-2 col-xs-12">Subscription ID</label>
                                <div class="col-md-10 col-sm-10 col-xs-12">
                                    <input id="filter_subscriptionid" name="filter_subscriptionid" type="text"
                                        class="form-control" placeholder="Subscription ID" value="">
                                </div>
                            </div>

                            <div class="col-md-12 col-xs-12 col-sm-12">
                                <div class="text-center">
                                    <button type="button" class="btn btn-primary" id="btn-reset-2">Cancel</button>
                                    <button type="button" class="btn btn-success btn-filter-2"
                                        data-value="exact">Apply</button>
                                </div>
                                <div class="clearfix"></div>
                                <div class="ln_solid"></div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="x_content table-responsive">
                    <table id="user-table-2" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="width: 2%">User ID</th>
                                <th style="width: 5%">Active Program</th>
                                <th style="width: 5%">Active Day ID</th>
                                <th style="width: 5%">Subscribed</th>
                                <th style="width: 5%">Subscription ID</th>
                                <th style="width: 5%">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Search by Filter</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content update_xcontent ">
                    <div class="col-md-12 col-xs-12 col-sm-12">
                        <form class="form-horizontal form-label-left input_mask" id="frm-filter-3" name="frm-filter-3">
                            <div class="col-md-4 col-xs-12 col-sm-4">
                                <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                    <label class="control-label col-md-4 col-sm-4 col-xs-12">From Date</label>
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <input type="date" name="filter_from_date" id="filter_from_date"
                                            class="form-control col-md-12 col-xs-12">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-12 col-sm-4">
                                <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                    <label class="control-label col-md-4 col-sm-4 col-xs-12">To Date</label>
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <input type="date" name="filter_to-date" id="filter_to_date"
                                            class="form-control col-md-12 col-xs-12">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 col-xs-12 col-sm-4">
                                <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                    <label class="control-label col-md-4 col-sm-4 col-xs-12">Country</label>
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <select id="filter_country" name="filter_country"
                                            class="form-control col-md-12 col-xs-12">
                                            <option value="">All Country</option>
                                            @foreach ($countries as $country)
                                                <option value="{{ $country->vCountry }}">{{ $country->vCountry }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 col-xs-12 col-sm-4">
                                <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                    <label class="control-label col-md-4 col-sm-4 col-xs-12">Name</label>
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <input id="filter_name" name="filter_name" type="text"
                                            class="form-control col-md-12 col-xs-12" placeholder="Name">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 col-xs-12 col-sm-4">
                                <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                    <label class="control-label col-md-4 col-sm-4 col-xs-12">App Version</label>
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <input id="filter_app_version" name="filter_app_version" type="text"
                                            class="form-control col-md-12 col-xs-12" placeholder="App Version">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 col-xs-12 col-sm-4">
                                <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                    <label class="control-label col-md-4 col-sm-4 col-xs-12">Device Details</label>
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <input id="filter_deviceDetails" name="filter_deviceDetails" type="text"
                                            class="form-control col-md-12 col-xs-12" placeholder="Device Details">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 col-xs-12 col-sm-12">
                                <div class="text-center">
                                    <input type="hidden" id="filter_match-3" name="filter_match-3" value="">
                                    <button type="button" class="btn btn-primary" id="btn-reset-3">Cancel</button>
                                    <button type="button" class="btn btn-success btn-filter-3" data-value="exact">Exact
                                        Match</button>
                                    <button type="button" class="btn btn-success btn-filter-3" data-value="fuzzy">Fuzzy
                                        Match</button>
                                </div>
                                <div class="clearfix"></div>
                                <div class="ln_solid"></div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="x_content table-responsive">
                    <table id="user-table-3" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="width: 5%">User ID</th>
                                <th style="width: 15%">Name</th>
                                <th style="width: 15%">Email</th>
                                <th style="width: 10%">Mobile</th>
                                <th style="width: 10%">Country</th>
                                <th style="width: 5%">Active Program</th>
                                <th style="width: 5%">Active DayId</th>
                                <th style="width: 5%">Smoking Status</th>
                                <th style="width: 10%">Date Created</th>
                                <th style="width: 10%">Last Login</th>
                                <th style="width: 5%">AppVersion</th>
                                <th style="width: 10%">Device Details</th>
                                <th style="width: 10%">Deleted</th>
                                <th style="width: 10%">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module">
        $(document).ready(function() {
            var userTable1 = $('#user-table-1').DataTable({
                processing: true,
                searching: true,
                pageLength: 50,
                data: [],
                order: [
                    [0, 'desc']
                ],
                columnDefs: [{
                    targets: '_all',
                    orderSequence: ['asc', 'desc']
                }],
                columns: [{
                        data: 'iUserID',
                        name: 'iUserID'
                    },
                    {
                        data: 'vEUserID',
                        name: 'vEUserID'
                    },
                    {
                        data: 'vMobile',
                        name: 'vMobile'
                    },
                    {
                        data: 'vEmail',
                        name: 'vEmail'
                    },
                    {
                        data: 'activeProgram',
                        name: 'activeProgram'
                    },
                    {
                        data: 'iActiveDayID',
                        name: 'iActiveDayID'
                    },
                    {
                        data: 'dLastLogin',
                        name: 'dLastLogin'
                    },
                    {
                        data: 'dDateCreated',
                        name: 'dDateCreated'
                    },
                    {
                        data: 'vUDID',
                        name: 'vUDID'
                    },
                    {
                        data: 'bActive',
                        name: 'bActive'
                    },
                    {
                        data: 'bDeleted',
                        name: 'bDeleted'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }

                ],
            });

            $('#btn-reset-1').click(function() {
                $('#frm-filter-1 #filter_match-1').val('');
                $('#frm-filter-1').trigger('reset');
                userTable1.clear().draw();
            });

            $('.btn-filter-1').click(function() {
                $('#frm-filter-1 #filter_match-1').val($(this).data('value'));
                fillUserTable1();
            });

            $('#frm-filter-1 input').on("keypress", function(event) {
                var keyPressed = event.keyCode || event.which;
                if (keyPressed === 13) {
                    event.preventDefault();
                    if ($(this).val() != "") {
                        $('#frm-filter-1 #filter_match-1').val('exact');
                        fillUserTable1();
                        return;
                    }
                    var msg = $(this).data('error') ?? "Please provide some value to apply filter";
                    dalert.alert(msg, "Warning!");
                    return false;
                }
            });

            function fillUserTable1() {
                var hasError = true;
                if ($('#frm-filter-1 #filter_program').val() > 0) {
                    if (
                        $('#frm-filter-1 #filter_userid').val() != '' ||
                        $('#frm-filter-1 #filter_email').val() != '' ||
                        $('#frm-filter-1 #filter_mobile').val() != '' ||
                        $('#frm-filter-1 #filter_udid').val() != '' ||
                        $('#frm-filter-1 #filter_external_userid').val() != ''
                    ) {
                        hasError = false;
                    }
                } else if (
                    $('#frm-filter-1 #filter_userid').val() != '' ||
                    $('#frm-filter-1 #filter_email').val() != '' ||
                    $('#frm-filter-1 #filter_mobile').val() != '' ||
                    $('#frm-filter-1 #filter_udid').val() != '' ||
                    $('#frm-filter-1 #filter_external_userid').val() != ''
                ) {
                    hasError = false;
                }
                if (hasError) {
                    dalert.alert("You have to select a filter to apply", "Warning!");
                    return;
                }
                $('.loaderPage').removeClass('d-none');
                $.ajax({
                    url: '{{ route('users.list-1') }}',
                    type: 'POST',
                    data: {
                        match: $('#frm-filter-1 #filter_match-1').val(),
                        filter: {
                            iProgramID: $('#frm-filter-1 #filter_program').val(),
                            iUserID: $('#frm-filter-1 #filter_userid').val(),
                            vEmail: $('#frm-filter-1 #filter_email').val(),
                            vMobile: $('#frm-filter-1 #filter_mobile').val(),
                            vUDID: $('#frm-filter-1 #filter_udid').val(),
                            vEUserID: $('#frm-filter-1 #filter_external_userid').val(),
                        }
                    }
                }).done(function(response) {
                    userTable1.clear().draw();
                    userTable1.rows.add(response.data).draw();

                    $('.loaderPage').addClass('d-none');
                });
            }

            var userTable2 = $('#user-table-2').DataTable({
                processing: true,
                searching: true,
                pageLength: 50,
                data: [],
                columns: [{
                        data: 'iUserID',
                        name: 'iUserID'
                    },
                    {
                        data: 'activeProgram',
                        name: 'activeProgram'
                    },
                    {
                        data: 'iActiveDayID',
                        name: 'iActiveDayID'
                    },
                    {
                        data: 'bSubscribed',
                        name: 'bSubscribed'
                    },
                    {
                        data: 'vSubscriptionID',
                        name: 'vSubscriptionID'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
            });

            $('#btn-reset-2').click(function() {
                $('#frm-filter-2').trigger('reset');
                userTable2.clear().draw();
            });

            $('.btn-filter-2').click(function() {
                fillUserTable2();
            });

            $('#frm-filter-2 input').on("keypress", function(event) {
                var keyPressed = event.keyCode || event.which;
                if (keyPressed === 13) {
                    event.preventDefault();
                    if ($(this).val() != "") {
                        fillUserTable2();
                    }
                    return false;
                }
            });

            function fillUserTable2() {
                if ($('#frm-filter-2 #filter_subscriptionid').val() == '') {
                    dalert.alert("You have to enter subscription id for apply filter", "Warning!");
                    return;
                }
                $('.loaderPage').removeClass('d-none');
                $.ajax({
                    url: '{{ route('users.list-2') }}',
                    type: 'POST',
                    data: {
                        filter: {
                            vSubscriptionID: $('#frm-filter-2 #filter_subscriptionid').val(),
                        }
                    }
                }).done(function(response) {
                    userTable2.clear().draw();
                    userTable2.rows.add(response.data).draw();

                    $('.loaderPage').addClass('d-none');
                });
            }

            var userTable3 = $('#user-table-3').DataTable({
                processing: true,
                searching: true,
                pageLength: 50,
                data: [],
                columns: [{
                        data: 'iUserID',
                        name: 'iUserID'
                    },
                    {
                        data: 'vName',
                        name: 'vName',
                    },
                    {
                        data: 'vEmail',
                        name: 'vEmail',
                    },
                    {
                        data: 'vMobile',
                        name: 'vMobile',
                    },
                    {
                        data: 'vCountry',
                        name: 'vCountry',
                    },
                    {
                        data: 'activeProgram',
                        name: 'activeProgram',
                    },
                    {
                        data: 'iActiveDayID',
                        name: 'iActiveDayID',
                    },
                    {
                        data: 'SmokingStatus',
                        name: 'SmokingStatus'
                    },
                    {
                        data: 'dDateCreated',
                        name: 'dDateCreated'
                    },
                    {
                        data: 'dLastLogin',
                        name: 'dLastLogin'
                    },
                    {
                        data: 'vAppVersion',
                        name: 'vAppVersion',
                    },
                    {
                        data: 'vDeviceDetails',
                        name: 'vDeviceDetails',
                    },
                    {
                        data: 'bDeleted',
                        name: 'bDeleted'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
            });

            $('#btn-reset-3').click(function() {
                $('#frm-filter-3 #filter_match-3').val('');
                $('#frm-filter-3').trigger('reset');
                userTable3.clear().draw();
            });

            $('.btn-filter-3').click(function() {
                $('#frm-filter-3 #filter_match-3').val($(this).data('value'));
                fillUserTable3();
            });

            $('#frm-filter-3 input').on("keypress", function(event) {
                var keyPressed = event.keyCode || event.which;
                if (keyPressed === 13) {
                    event.preventDefault();
                    if ($(this).val() != "") {
                        $('#frm-filter-3 #filter_match-3').val('exact')
                        fillUserTable3();
                    }
                    return false;
                }
            });

            function fillUserTable3() {
                var hasError = true;
                if (
                    $('#frm-filter-3 #filter_from_date').val() != '' ||
                    $('#frm-filter-3 #filter_to_date').val() != '' ||
                    $('#frm-filter-3 #filter_country').val() != '' ||
                    $('#frm-filter-3 #filter_name').val() != '' ||
                    $('#frm-filter-3 #filter_app_version').val() != '' ||
                    $('#frm-filter-3 #filter_deviceDetails').val() != ''
                ) {
                    hasError = false;
                }
                if (hasError) {
                    dalert.alert("You have to select a filter to apply", "Warning!");
                    return;
                }
                $('.loaderPage').removeClass('d-none');
                $.ajax({
                    url: '{{ route('users.list-3') }}',
                    type: 'POST',
                    data: {
                        match: $('#frm-filter-3 #filter_match-3').val(),
                        filter: {
                            fromDate: $('#frm-filter-3 #filter_from_date').val(),
                            toDate: $('#frm-filter-3 #filter_to_date').val(),
                            vCountry: $('#frm-filter-3 #filter_country').val(),
                            vName: $('#frm-filter-3 #filter_name').val(),
                            vAppVersion: $('#frm-filter-3 #filter_app_version').val(),
                            vDeviceDetails: $('#frm-filter-3 #filter_deviceDetails').val(),
                        }
                    }
                }).done(function(response) {
                    userTable3.clear().draw();
                    userTable3.rows.add(response.data).draw();

                    $('.loaderPage').addClass('d-none');
                });
            }
        });
    </script>
@endpush