@extends('admin.admin_app')

@section('content')
<div class="content-wrapper">

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <h5 class="card-header">Users</h5>
            <div  class="card-body">

                <div id="login_success">
                    @if(session()->has('success'))
                    <div class="alert alert-success" role="alert">
                        {{ session()->get('success') }}
                    </div>
                    @endif
                </div>

                <form>
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <label for="date_from" class="form-label">Date From :</label>
                            <input type="text" class="form-control" id="date_from" name="date_from" />
                        </div>
                        <div class="col-md-2">
                            <label for="date_to" class="form-label">Date To :</label>
                            <input type="text" class="form-control" id="date_to" name="date_to" />
                        </div>
                        <div class="col-md-3">
                            <label for="date_to" class="form-label">Search :</label>
                            <input type="text" class="form-control" id="search_listing" name="search_listing" />
                        </div>
                        <div class="col-md-2">
                            <label for="date_from" class="form-label">Status :</label>
                            <select id="status" name="status" class="form-select">
                                <option value=""> --- Select Status ---</option>
                                <option value="Active">Active</option>
                                <option value="Inactive">Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" id="get_data" name="submit" class="btn btn-primary mt-4">Apply</button>
                            <button type="button" id="reset" class="btn btn-primary mt-4"><i class="bx bx-reset"></i></button>
                        </div>
                    </div>
                </form>

                <div class="table-responsive text-nowrap mt-3">

                    <table class="table table-bordered" id="user_table">

                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Login Type</th>
                                <th>Platform Type</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="load_users">

                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <div class="col-md-12 mb-12 col-sm-12 grid-margin" style="margin-top: 10px;">
                        <center>
                            <a href="javascript:;" class="btn btn-primary mt-4 load-more-leads btn-sm">
                                Load More
                            </a>
                        </center>
                        <input type="hidden" name="page_number" id="page_number" value="0">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">

    search_by_order_leads();

    function search_by_order_leads() {
        var page_number = $('#page_number').val();
        $('#row').val('0');
        $(".load-more-leads").text('Load More');
        $('.load-more-leads').css("background", "rgb(0,123,255)");
        order_by_value = $('#search_by_order_leads :selected').val();
        order_by_key = $('#search_by_order_leads :selected').attr('data-order');

        // search = $('#search_listing').val();
        var row = Number($('#row').val());

        search = $('#search_listing').val();
        date_from = $('#date_from').val();
        date_to = $('#date_to').val();
        status = $('#status').val();
        // alert(search);

        $('#loadData').html('<tr><td colspan="15"><center><span class="spinner-border spinner-border-lg" role="status" aria-hidden="true"></span></center></td></tr>');

        $(".load-more-leads").text('Loading...');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        url = "{{ route('users.list') }}";
        $.ajax({
            url: url,
            type: 'post',
            data: {
                search: search,
                date_from: date_from,
                date_to: date_to,
                status: status,
                page_number: page_number,
                order_by_value: order_by_value,
                order_by_key: order_by_key
            },
            beforeSend: function () {
                // $(".load-more-leads").text("Loading...");
            },
            success: function (response) { // Setting little delay while displaying new content

                setTimeout(function () {
                    $("#get_data").html('Apply');
                    $("#load_users").append(response.html);
                    if (search != '') {
                        $(".total_record_found").html(response.total_record_found);
                    } else {
                        $(".total_record_found").html(response.total_record);
                    }
                    if (parseInt(response.total_results) <= 9) {
                        $('.load-more-leads').hide();
                        if (parseInt(response.total_results) == 0) {
                            $("#load_users").append("<tr ><td colspan='8'><center>No more record found</center></td></tr>");
                        }

                    } else {
                        $('.load-more-leads').show();
                    }

                    $(".total_leads").html(response.total_record);
                    $(".load-more-leads").text('Load More');
                    //
                }, 500);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if (jqXHR.status == 500) {
                    //alert('Internal error: ' + jqXHR.responseText);
                } else {
                    // window.location.reload();
                }
            }
        });
    }

    $(document).ready(function () {
        // Load more data
        $('body').on('click', '.load-more-leads', function () {
            var page_number = $('#page_number').val();
            page_number = parseInt(page_number) + 10;
            page_number = $('#page_number').val(page_number);
            search_by_order_leads();
        });

    });

    $(document).on('click', '#get_data', function () {
        $('#page_number').val(0);
        $("#load_users").html('');
        $("#get_data").html('Searching...');
        search_by_order_leads();
    });

    $('#reset').click(function () {
        $('#date_from').val('');
        $('#date_to').val('');
        $('#search_listing').val('');
        $('#page_number').val(0);
        $("#load_users").html('');
        search_by_order_leads();
        $('#status').val('');
        //   $('#user_table').dataTable().fnDraw();
    });

    function delete_user(id) {
        var idd = id;
        if (confirm("Are you sure you want to delete User?") == true) {
            $.ajax({
                type: 'POST',
                url: '{{ route("users.delete") }}',
                data: {id: idd, "_token": "{{ csrf_token() }}"},
                success: function (data) {
                    $("#login_success").html('');
                    if (data.status == '1') {
                        $('#login_success').html('<div class="alert alert-success" role="alert">User Deleted successfully.</div>');
                        $('.remove_row' + idd).remove();
                        // $('#user_table').DataTable().ajax.reload();
                    }
                }
            });
        }
    }

    $("#date_from").datepicker({
        numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() + 1);
            $("#date_to").datepicker("option", "minDate", dt);
        }
    });
    $("#date_to").datepicker({
        numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() - 1);
            $("#date_from").datepicker("option", "maxDate", dt);
        }
    });
</script>
@endsection