@extends('admin.layouts.layout')
@section('content')
    <!-- Begin Page Content -->
    <div class="container-fluid">
        <div class="page-inner">
            <h4 class="page-title">Rider {{ trans('admin_lang.manage') }}  </h4>
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex align-items-center float-right">
                                {{-- <a href="{{routeUser($pagePath.'.create')}}" >
                                <button class="btn btn-primary btn-round ml-auto" data-toggle="modal" data-target="#addRowModal" id="addbanner">
                                <i class="fas fa-plus"></i> &nbsp; {{  trans('admin_lang.add')}} User </button>
                            </a> --}}
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="mb-2">
                                        <label>Status filter</label>
                                        <select id="status" name="status" class="form-control form-control-sm">
                                            <option value="-1">All</option>
                                            <option value="1">Activated</option>
                                            <option value="0">Deactivated</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-2">
                                        <label>From Date</label>
                                        <input class="form-control form-control-sm" placeholder="Enter the from date"
                                            name="from_date" id="from_date" type="date">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-2">
                                        <label>To Date</label>
                                        <input class="form-control form-control-sm" placeholder="Enter the to date"
                                            name="to_date" id="to_date" type="date">
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table id="basic-datatables" class="table table-bordered" id="dataTable" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th class="action">Profile Picture</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Mobile No.</th>
                                            <th class="action">Number of rides</th>
                                            <th>Registration date and time</th>
                                            <th class="action">{{ trans('admin_lang.status') }}</th>
                                            <th class="action">{{ trans('admin_lang.action') }}</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.container-fluid -->
    <div id="openModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Denied Reason</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        &times;</button>
                </div>
                <form method="get" id="formId" action="">
                    @csrf
                    <input type="hidden" class="id" name="id" value="">
                    <input type="hidden" class="status" name="status" value="">
                    <div class="modal-body">
                        <textarea name="denie_reason" class="form-control denie_reason" id="denie_message" required></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success formSubmit">Denied</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('public/assets/js/jquery.form.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var tables = $('#basic-datatables').DataTable({
                "scrollX": true,
                "bProcessing": true,
                "serverSide": true,
                "pageLength": 10,
                "order": [
                    [0, "desc"]
                ],
                "ajax": {
                    url: "{{ routeUser('user.index', ['type' => $typePath]) }}",
                    "dataType": "json",
                    "type": "GET",
                    "data": function(data) {
                        var status = $('#status').val();
                        var from_date = $('#from_date').val();
                        var to_date = $('#to_date').val();

                        // Append to data
                        data._token = "{{ csrf_token() }}";
                        data.status = status;
                        data.from_date = from_date;
                        data.to_date = to_date;
                    }
                },
                "aoColumns": [{
                        mData: 'DT_RowId'
                    },
                    {
                        mData: 'profile_image'
                    },
                    {
                        mData: 'full_name'
                    },
                    {
                        mData: 'email'
                    },
                    {
                        mData: 'mobile_number'
                    },
                    {
                        mData: 'total_rides'
                    },
                    {
                        mData: 'created_at'
                    },
                    {
                        mData: 'status'
                    },
                    {
                        mData: 'actions'
                    },

                ],
                language: {
                    searchPlaceholder: "Search by name or email"
                },
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": ['action']
                }],
            });

            $('#status').change(function() {
                tables.draw();
            });

            $('#from_date').change(function() {
                tables.draw();
            });

            $('#to_date').change(function() {
                tables.draw();
            });

            $(document).on("click", ".status-change", function(e) {
                e.preventDefault();
                var status = $(this).attr('status');
                var id = $(this).attr('id');
                var path = $(this).attr('data-path');
                var url = path;
                var self = this;

                $(".id").val(id);
                $(".status").val(status);
                if (status != 1) {
                    if (confirm("Are you sure you want to active this user?")) {
                        status_change(url, id, status, self, "", tables);
                    } else {
                        return false;
                    }
                } else {
                    $("#openModal").modal('show');
                    $("#formId").attr('action', url);
                    // if (confirm("Are you sure you want to deactive this user?")) {
                    //     status_change(url, id, status, self, "", tables);
                    // } else {
                    //     return false;
                    // }
                }
            });

            $(".formSubmit").click(function(e) {
                e.preventDefault();
                if ($("#denie_message").val()) {
                    status_change($("#formId").attr('action'), $(".id").val(), $(".status").val(), self, $(
                        "#denie_message").val(), tables);
                }
            });


            function status_change(url, id, status, self, denie_reason, tables) {
                if (status == 1) {
                    var status_val = 0;
                } else {
                    var status_val = 1;
                }
                $(".loding_img").show();
                var postData = {
                    id: id,
                    status: status_val,
                    denie_reason: denie_reason
                };
                $.get(url, postData, function(data) {
                    if (data) {
                        $(".loding_img").hide();
                        $("#openModal").modal('hide');
                        $(".flash-message").show();

                        $(".flash-message").html(
                            '<p class="alert alert-success" >Record updated successfully <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a></p>'
                        );
                        setTimeout(() => {
                            $(".flash-message").hide();
                        }, 2000);
                        tables.draw();
                    }
                })
            }
        });

        function confirmation() {
            return confirm('Are you sure that you want to delete!!');
        }
    </script>
@endsection