@extends('admin.layouts.app')
@section('content')
<section class="forms">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 addlink">
                <button type="button" class="btn btn-primary mb-1" onclick="javascript:$('.divFilter').toggle();"><i class="fa fa-filter"></i> Filters <span id="filterCount"></span></button>
            </div>
            <div class="col-lg-12 divFilter" style="display:none">
                <div class="form-group row">
                    <div class="col-sm-3">
                        <label class="form-control-label">First Name</label>
                        <input type="text" name="first_name" id="first_name" class="form-control">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Last Name</label>
                        <input type="text" name="last_name" id="last_name" class="form-control">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Email</label>
                        <input type="text" name="email" id="email" class="form-control">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Phone</label>
                        <input type="text" name="phone" id="phone" class="form-control">
                    </div>

                    <div class="col-sm-3">
                        <label class="form-control-label">Gender</label>
                        <select name="gender" id="gender" class="form-control">
                            <option value="">Select</option>
                            @foreach(gender() as $gender)
                            <option value="{!! $gender !!}">{!! $gender !!}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Marital Status</label>
                        <select name="marital_status" id="marital_status" class="form-control">
                            <option value="">Select</option>
                            @foreach(maritalstatus() as $marital_status)
                            <option value="{!! $marital_status !!}">{!! $marital_status !!}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Profile Type</label>
                        <select name="profile_type" id="profile_type" class="form-control">
                            <option value="">Select</option>
                            @foreach(['Primary','Adult','Child'] as $profileType)
                            <option value="{!! $profileType !!}">{!! $profileType !!}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Relationship</label>
                        <select name="relationship" id="relationship" class="form-control">
                            <option value="">Select</option>
                            @foreach(relationships() as $relationships)
                            <option value="{!! $relationships->name !!}">{!! $relationships->name !!}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-sm-3">
                        <label class="form-control-label">Age Range : <span id="age"></span></label>
                        <div id="age-range" style="margin:0.8em;"></div>
                        <input type="hidden" name="age_from" id="age_from" class="form-control">
                        <input type="hidden" name="age_to" id="age_to" class="form-control">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Baptized From</label>
                        <input type="text" name="baptized_from" id="baptized_from" class="form-control clsManualDatePicker">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Baptized To</label>
                        <input type="text" name="baptized_to" id="baptized_to" class="form-control clsManualDatePicker">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Baptized at Meck?</label>
                        <select name="baptized_here" id="baptized_here" class="form-control">
                            <option value="">Select</option>
                            @foreach(["Yes","No"] as $baptized_here)
                            <option value="{!! $baptized_here !!}">{!! $baptized_here !!}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-sm-3">
                        <label class="form-control-label">User Created From</label>
                        <input type="text" name="created_from" id="created_from" class="form-control clsManualDatePicker">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">User Created To</label>
                        <input type="text" name="created_to" id="created_to" class="form-control clsManualDatePicker">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Interest From Date</label>
                        <input type="text" class="form-control clsManualDatePicker" name="interested_from" id="interested_from" value="{!! request()->get('interested_from') !!}">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Interest To Date</label>
                        <input type="text" class="form-control clsManualDatePicker" name="interested_to" id="interested_to" value="{!! request()->get('interested_to') !!}">
                    </div>

                    <div class="col-sm-6">
                        <label class="form-control-label">Events</label>
                        <select class="form-control" name="event_ids" id="event_ids" multiple>
                            @foreach($events as $event)
                            <option value="{!! $event->id !!}">{!! $event->name !!} ({!! $event->slug !!})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-control-label">Classes</label>
                        <select class="form-control" name="class_ids" id="class_ids" multiple>
                            @foreach($classes as $class)
                            <option value="{!! $class->id !!}">{!! $class->name !!} ({!! $class->slug !!})</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-sm-6">
                        <label class="form-control-label">Serve Area</label>
                        <select class="form-control" name="servearea_ids" id="servearea_ids" multiple>
                            @foreach($serveareas as $servearea)
                            <option value="{!! $servearea->id !!}">{!! $servearea->name !!}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-control-label">Contents</label>
                        <select class="form-control" name="content_ids" id="content_ids" multiple>
                            @foreach($contents as $content)
                            <option value="{!! $content->id !!}">{!! "(".($content->type->name ?? "").($content->series ? " > ".$content->series->name : "").") ".$content->name !!}</option>
                            @endforeach
                        </select>
                    </div>

                    @if(@count(@$elexioGroups) > 0)
                    <div class="col-sm-6">
                        <label class="form-control-label">Elexio Groups</label>
                        <select class="form-control" name="elexio_group_ids" id="elexio_group_ids" multiple>
                            <option value="">Select</option>
                            @foreach($elexioGroups as $elexioGroup)
                            <option value="{!! $elexioGroup['gid'] !!}">{!! $elexioGroup['name'] !!}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <div class="col-sm-3">
                        <label class="form-control-label">Order Item Search</label>
                        <input type="text" name="order_item_search" id="order_item_search" class="form-control" placeholder="e.g Caramel Macchiato">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Order Created From</label>
                        <input type="text" name="order_created_from" id="order_created_from" class="form-control clsManualDatePicker">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Order Created To</label>
                        <input type="text" name="order_created_to" id="order_created_to" class="form-control clsManualDatePicker">
                    </div>

                    <div class="col-sm-3">
                        <label class="form-control-label">Loyalty Balance :</label>
                        <div class="d-flex">
                            <input type="number" name="loyalty_balance_from" id="loyalty_balance_from" class="form-control" min="0" placeholder="From">
                            <input type="number" name="loyalty_balance_to" id="loyalty_balance_to" class="form-control" min="0" placeholder="To">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <label class="form-control-label">Loyalty Lifetime Points :</label>
                        <div class="d-flex">
                            <input type="number" name="loyalty_lifetime_points_from" id="loyalty_lifetime_points_from" class="form-control" min="0" placeholder="From">
                            <input type="number" name="loyalty_lifetime_points_to" id="loyalty_lifetime_points_to" class="form-control" min="0" placeholder="To">
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <label class="form-control-label">Registration Source :</label>
                        <select name="elexio_group_id" id="elexio_group_id" class="form-control">
                            <option value="">Select</option>
                            @foreach(config('constants.REGISTRATION_SOURCE') as $k=>$v)
                            <option value="{!! $v !!}">{!! ucwords(str_replace("_"," ",$k)) !!}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-12 text-md-center">
                    <button onclick="javascript:refreshTable()" class="btn btn-primary mb-1" id="btnSearch"><i class="fa fa-search"></i> Search</button>
                    <button onclick="javascript:$('.loader').show();window.location.href='{!! route('admin.'.request()->segment(2).'.index') !!}'" class="btn btn-info mb-1"><i class="fa fa-close"></i> Reset</button>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <table class="table text-center" id="data-table">
                            <thead>
                                <tr>
                                    <th>Avatar</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Email</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@section('js')
<!-- <script src="{!! asset('assets/backend/js/pages/'.request()->segment(2).'.js') !!}"></script> -->
<script>
$('.divFilter input').keypress(function (e) {
    if (e.which == 13) {
        $('#btnSearch').trigger('click');
        return false;    //<---- Add this line
    }
});
$("#user_id,#event_ids,#class_ids,#cms_ids,#servearea_ids,#content_ids,#elexio_group_ids").select2({
    placeholder: "Select",
    allowClear: true
});
$('.select2-search__field').css('width', '100%');
$(document).ready(function(){
    data_table();
    'use strict';
});

$("#age-range").slider({
    range: true,
    min: 0,
    max: 100,
    // values: [50, 300],
    slide: function(event, ui) {
        var min = ui.values[0],
            max = ui.values[1];

        $("#age").html(min + 'y to ' +max+'y');
        $("#age_from").val(min);
        $("#age_to").val(max);
    }
});
$("#age").html($("#age-range").slider("values", 0) + 'y to ' +$("#age-range").slider("values", 1)+'y');

var table;
function data_table()
{
    $.fn.dataTable.ext.errMode = 'none';
    table = $('#data-table').DataTable({
        processing: true,
        serverSide: true,
        // displayLength: 1,
        ajax: {
            type: "POST",
            headers: {
                'X-CSRF-TOKEN': _token
            },
            url: baseUrl+segments[2]+"/ajax",
            data: function ( d ) {
                d.first_name = $('#first_name').val();
                d.last_name = $('#last_name').val();
                d.email = $('#email').val();
                d.phone = $('#phone').val();
                d.gender = $('#gender').val();
                d.marital_status = $('#marital_status').val();
                d.profile_type = $('#profile_type').val();
                d.relationship = $('#relationship').val();
                d.age_from = $('#age_from').val();
                d.age_to = $('#age_to').val();
                d.baptized_from = $('#baptized_from').val();
                d.baptized_to = $('#baptized_to').val();
                d.baptized_here = $('#baptized_here').val();
                d.created_from = $('#created_from').val();
                d.created_to = $('#created_to').val();
                d.elexio_group_id = $('#elexio_group_id').val();

                d.interested_from = $('#start_date').val();
                d.interested_to = $('#end_date').val();
                d.event_ids = $('#event_ids').val();
                d.class_ids = $('#class_ids').val();
                d.cms_ids = $('#cms_ids').val();
                d.servearea_ids = $('#servearea_ids').val();
                d.content_ids = $('#content_ids').val();
                d.elexio_group_ids = $('#elexio_group_ids').val();
                d.order_item_search = $('#order_item_search').val();
                d.order_created_from = $('#order_created_from').val();
                d.order_created_to = $('#order_created_to').val();
                d.loyalty_balance_from = $('#loyalty_balance_from').val();
                d.loyalty_balance_to = $('#loyalty_balance_to').val();
                d.loyalty_lifetime_points_from = $('#loyalty_lifetime_points_from').val();
                d.loyalty_lifetime_points_to = $('#loyalty_lifetime_points_to').val();
            },
        },
        "drawCallback": function (settings) {
            // Here the response
            var response = settings.json;
            if(response.filterCount > 0) {
                $("#filterCount").html("("+response.filterCount+")");
            } else {
                $("#filterCount").html("");
            }
        },
        "order": [],
        columns: [
            {data: 'avatar',name: 'avatar',orderable: false},
            {data: 'first_name',name: 'first_name'},
            {data: 'last_name',name: 'last_name'},
            {data: 'email',name: 'email'},
            {data: 'action',name: 'action',orderable: false},
        ],
        oLanguage: {
            sSearch: "",
            sSearchPlaceholder: "Search",
            sEmptyTable: "No data found.",
            sProcessing: '<div class="loader"><span class="loader-image"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></span></div>'
        }
    });
    $('input[type=search]').addClass("form-control");
    $('#data-table').wrap('<div class="table-responsive"></div>');
}
function refreshTable()
{
    // $('.divFilter').toggle();
    if($.fn.DataTable.isDataTable( '#data-table' )) {
        table.draw();
    } else {
        data_table();
    }
}
</script>
@stop
@endsection