MINI Sh3ll

@extends('layouts.main')
@section('title', 'Support and Portal Admin')
@section('content')
<div class="m-content">
    <div class="row" >
        <div class="m-portlet m-portlet--mobile filter_row">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                           Support and Portal Admin Filter
                        </h3>
                    </div>
                </div>
            </div>
            <form class="m-form m-form--fit m-form--label-align-right" autocomplete="off" id="roleForm" role="form" data-parsley-validate="parsley">
                <div class="m-portlet__body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group m-form__group">
                                <label class="show_status">  Name </label>
                                <input type="text" class="form-control m-input" id="user_name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group m-form__group">
                                <label class="show_status">  Select Role </label>
                                <select class="form-control m-input" id="user_role">
                                    <option value="" >All</option>
                                    @foreach($roles as $role)
                                    <option value="{{$role->id}}" >{{$role->role_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__foot--fit">
                    <div class="m-form__actions">
                        <button type="button" id="roleBtn" class="btn btn-sm btn-accent m-btn m-btn--custom m-btn--icon m-btn--air  search_plant">
                            Search  <i class="la la-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="m-portlet m-portlet--mobile filter_row">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Support and Portal Admin List
                        </h3>
                    </div>
                </div>
                <div class="m-portlet__head-tools">
                    <a href="{{ route('support.create') }}" class="btn btn-sm btn-accent m-btn m-btn--custom m-btn--icon m-btn--air">
                        <span>
                            <i class="la la-user"></i>
                            <span>
                                Add
                            </span>
                        </span>
                    </a>
                </div>
            </div>
            <div class="m-portlet__body">
                <!--begin: Datatable -->
                <div class="m_datatable" id="local_data">
                    <table id="user_data" class="display" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Status</th>
                                <th>Role</th>
                                <th>Created Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <!--end: Datatable -->
            </div>
        </div>
    </div>  
</div>

@endsection
@section('script')
<!--begin::Page Resources -->
<script>
var base_url = window.location.origin;
        var url = '{{ route('getSupportAndPortal') }}';
        loadDataTable(url);

function loadDataTable(url) {
    $('#user_data').DataTable({
        "order": [],
        "bAutoWidth": false,
        "processing": false,
        "serverSide": false,
        "bDestroy": true,
        "scrollX": true,
        "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
        "pageLength": 10,
        "columnDefs": [{
                "targets": 'no-sort',
                "orderable": false,
            }],
        "ajax": url,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search...",
            "lengthMenu": "Show _MENU_"
        }
    })
}

$(document).on('click', '.delete_user', function (event) {
    var id = $(this).attr("data-id");
    var deleteUrl = '{{ route("delete") }}';
    $('#deleteModal').modal('show');
    $(".delete").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: deleteUrl,
            dataType: "json",
            data: {
                "id": id,
                "_token": "{{ csrf_token() }}",
            },
            success: function (response) {
                if (response.status == 1) {
                    $('#deleteModal').modal('hide');
                    location.reload(true);
                    toastr.success(response.success);
                }
            }
        });
    });
});

$(document).on("click", "#roleBtn", function () {
    var role = $('#user_role').val();
    var user_name = $('#user_name').val();
    var url = '{{ route('getSupportAndPortal') }}';
    url = url + "?role=" + role + "&user_name="+user_name;
    loadDataTable(url);
});
</script>

@endsection