@extends('layouts.app')
@section('content')

<div class="row">
    <div class="col-md-12 col">
        <div class="x_panel">
            <div class="x_title">
                <h2>La Salle</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">ActiveDay Id</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="ActiveDayIdFilter" name="ActiveDayIdFilter" class="form-control">
                                    <option value="-1">Select Active Day</option>
                                    @foreach($activeDayID as $activeDay)
                                    <option value="{{ $activeDay->iActiveDayID }}">{{ $activeDay->iActiveDayID }}</option>
                                    @endforeach
                                </select>

                            </div>

                        </div>

                        <div class="item form-group">
                            <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="SmokingStatusIdFilter" name="SmokingStatusIdFilter" class="form-control">
                                    <option value="">Select Smoking Status</option>
                                    @foreach($smokingStatus as $smoking)
                                    <option value="{{ $smoking->SmokingStatus }}">{{ $smoking->SmokingStatus }}</option>
                                    @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="researchus-btn-reset">Cancel</button>
                                <button type="button" class="btn btn-success" id="researchus-btn-filter">Apply</button>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="ln_solid"></div>
                    </form>
                </div>

                <div class="x_content table-responsive">
                    <table id="datatableAdminResearchUs" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th style="width: 10%">User Id</th>
                                <th style="width: 10%">Name</th>
                                <th style="width: 20%">Email</th>
                                <th style="width: 20%">Program Id</th>
                                <th style="width: 10%">Active Day Id</th>
                                <th style="width: 10%">Smoking Status</th>
                                <th style="width: 10%">Created Date</th>
                                <th style="width: 10%">Last Login</th>
                                <th style="width: 10%">Subscribed</th>
                                <th style="width: 10%"></th>

                            </tr>
                        </thead>


                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @endsection

    @push('scripts')
    <script type="module">
        $(document).ready(function() {
            var research = $('#datatableAdminResearchUs').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                pageLength: 50,
                scrollX: true,
                ajax: {
                    url: '{{ route("researchUs.data") }}',
                    type: 'POST',
                    data: function(d) {
                        d._token = $('meta[name="csrf-token"]').attr("content");
                        d.ActiveDayId = $('#ActiveDayIdFilter').val();
                        d.SmokingStatusId = $('#SmokingStatusIdFilter').val();

                    }

                },
                order: [
                    [0, "desc"]
                ],
                columns: [{
                        data: 'iUserID',
                        name: 'iUserID'
                    },
                    {
                        data: 'vName',
                        name: 'vName'
                    },

                    {
                        data: 'vEmail',
                        name: 'vEmail'
                    },
                    {
                        data: 'iProgramID',
                        name: 'iProgramID'
                    },
                    {
                        data: 'iActiveDayID',
                        name: 'iActiveDayID'
                    },
                    {
                        data: 'SmokingStatus',
                        name: 'SmokingStatus'
                    },
                    {
                        data: 'dDateCreated',
                        name: 'dDateCreated'
                    },
                    {
                        data: 'dLastLogin',
                        name: 'dLastLogin'
                    },
                    {
                        data: 'bSubscribed'
                    },

                    {
                        data: 'view',
                        name: 'view',
                        orderable: false
                    }



                ],
            });


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

            // Reset Filter
            $('#researchus-btn-reset').on('click', function() {
                $('#ActiveDayIdFilter').val('-1');
                $('#SmokingStatusIdFilter').val('');

                research.ajax.reload();
            });

        });
    </script>

    @endpush