@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</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-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">Active Day</label>
                                <div class="col-md-8 col-sm-8 col-xs-12">
                                    <select id="filter_day" name="filter_day" class="form-control col-md-12 col-xs-12">
                                        <option value="">Select Active Day</option>
                                        @foreach ($allProgramDay as $day)
                                            <option value="{{ $day }}">{{ $day }}</option>
                                        @endforeach
                                    </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">Smoking Status</label>
                                <div class="col-md-8 col-sm-8 col-xs-12">
                                    <select id="filter_status" name="filter_status"
                                        class="form-control col-md-12 col-xs-12">
                                        <option value="">Select Smoking Status</option>
                                        @foreach ($smokingStatus as $status)
                                            <option value="{{ $status }}">{{ $status }}</option>
                                        @endforeach
                                    </select>
                                </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-1">Reset</button>
                                    <button type="button" class="btn btn-success btn-filter-1">Apply</button>
                                </div>
                                <div class="clearfix"></div>
                                <div class="ln_solid"></div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="x_content">
                    <table id="user-table-1" class="table table-bordered table-striped table-responsive">
                        <thead>
                            <tr>
                                <th style="width: 20%">Name</th>
                                <th style="width: 20%">Email</th>
                                <th style="width: 5%">Program Id</th>
                                <th style="width: 5%">Active Day</th>
                                <th style="width: 5%">Smoking Status</th>
                                <th style="width: 12%">Created Date</th>
                                <th style="width: 12%">Last Login</th>
                                <th style="width: 5%">On Board Complete</th>
                                <th style="width: 5%">Subscribed</th>
                                <th style="width: 5%">Partner Id</th>
                                <th style="width: 5%">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,
                order: [
                    [5, "desc"]
                ],
                columnDefs: [{
                    targets: '_all',
                    orderSequence: ['asc', 'desc']
                }],
                data: [],
                dom: "<'row'<'col-sm-6'B><'col-sm-6 text-right'f>>" + // buttons + search
                    "<'row'<'col-sm-12'tr>>" + // table
                    "<'row'<'col-sm-5'i><'col-sm-7 text-right'p>>", // info + pagination,
                buttons: [{
                        extend: 'copyHtml5',
                        text: 'Copy',
                        className: 'btn btn-sm btn-primary',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        }
                    },
                    {
                        extend: 'csvHtml5',
                        text: 'CSV',
                        className: 'btn btn-sm btn-success',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        }
                    }
                ],
                columns: [{
                        data: 'vName',
                        name: 'vName'
                    },
                    {
                        data: 'vEmail',
                        name: 'vEmail'
                    },
                    {
                        data: 'iProgramId',
                        name: 'iProgramId'
                    },
                    {
                        data: 'activeDay',
                        name: 'activeDay'
                    },
                    {
                        data: 'smokingStatus',
                        name: 'smokingStatus'
                    },
                    {
                        data: 'dDateCreated',
                        name: 'dDateCreated'
                    },
                    {
                        data: 'dLastLogin',
                        name: 'dLastLogin'
                    },
                    {
                        data: 'onBoardComplete',
                        name: 'onBoardComplete'
                    },
                    {
                        data: 'subscribed',
                        name: 'subscribed'
                    },
                    {
                        data: 'partnerId',
                        name: 'partnerId'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }

                ],
            });
            fillUserTable1();

            function fillUserTable1() {

                $('.loaderPage').removeClass('d-none');
                $.ajax({
                    url: @json(route('users.data', ['partner' => $partnerId])),
                    type: 'GET',
                    data: {}
                }).done(function(response) {
                    userTable1.clear().draw();
                    userTable1.rows.add(response.data).draw();

                    $('.loaderPage').addClass('d-none');
                });
            }
            $('.btn-filter-1').click(function() {
                var ActiveDay = $('#filter_day').val();
                var SmokingStatus = $('#filter_status').val();

                $.fn.dataTable.ext.search.push(
                    function(settings, data, dataIndex) {
                        let activeDayCol = data[3]; // activeDay column
                        let smokingStatusCol = data[4]; // smokingStatus column

                        if (ActiveDay && SmokingStatus) {
                            return activeDayCol == ActiveDay && smokingStatusCol == SmokingStatus;
                        }
                        if (ActiveDay) {
                            return activeDayCol == ActiveDay;
                        }
                        if (SmokingStatus) {
                            return smokingStatusCol == SmokingStatus;
                        }
                        return true;
                    }
                );

                userTable1.draw();
                $.fn.dataTable.ext.search.pop();
            });

            $('#btn-reset-1').click(function() {
                $('#frm-filter-1')[0].reset();
                $.fn.dataTable.ext.search = []; // clear filters
                userTable1.draw(); // just redraw
            });

        });
    </script>
@endpush