@extends('admin.layouts.dashboard')
@section('title', 'All Users')
@section('content')
<style>
.faslli {
    margin: 0 1px;
    color: #bdbdbd;
    background-color: #f5f2f4;
    padding: 6px 9px;
    border-radius: 3px;
}
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 mb-3 mt-3">
            <h3 class="mb-2 main-heading">Customers</h3>
        </div>
        <div class="col-md-6  mb-3 mt-3">
            <div class="input-group rounded-2 border-0">
                <input type="" class="form-control" name="search" value="" id="ajaxSearchItem" placeholder="Search..">
                <div class="input-group-append">
                    <button class="btn btn-primary search-btn" type="button">
                        <i class="fas fa-search fa-sm"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="ajaxSearchData">
        <div class="col-lg-12">
            <div class="table-responsive rounded-4 bg-white p-3 mb-3">
                <table class=" table table-justified" id="example">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Address</th>
                            <th>City</th>
                            <!-- <th>Rental Booking</th> -->
                            <!-- <th title="Date of Registration">DOR</th> -->
                            <!-- <th>Status</th>-->
                            <th>Action</th>
                        </tr>
                    </thead>
                    @if(!empty($users))
                    @foreach($users as $key =>$user)
                    <tr>
                        <td scope="row">{{ $key +1}}</td>
                        <td>{{ $user->name ?? 'NA' }}</td>
                        <td>{{ $user->email ?? 'NA' }}</td>
                        <td>{{ $user->phone }}</td>
                        <td>{{ optional($user->addresses->first())->address ?? 'N/A' }}</td>
                        <td>{{ optional($user->addresses->first())->city ?? 'N/A' }}</td>
                        {{-- <td>{{ $user->orders->where('item_type', 'rent')->count() }}</td> --}}
                        <td><a href="{{ route('admin.users.edit', $user->id) }}" title="Edit"><i
                                    class="fas faslli fa-pen"></i></a></td>
                        {{-- <td>{{ $user->created_at->format('d-M-Y') }}</td> --}}
                        {{-- <td>
                                        @if($user->is_active)
                                        @php $statusBtn = '<a title="Deactivate" href="'. route('change_status', ['type' => 'user', 'id' => $user->id, 'status' => '0']) .'" class="btn btn-danger btn-sm"><i class="fa fa-user-times" aria-hidden="true"></i></a>' @endphp
                                            Active
                                        @else
                                            @php $statusBtn = '<a title="Activate" href="'. route('change_status', ['type' => 'user', 'id' => $user->id, 'status' => '1']) .'" class="btn btn-success btn-sm"><i class="fa fa-user-plus" aria-hidden="true"></i></a>' @endphp
                                            Deactive
                                        @endif
                                    <td>
                                        <div class="actions">
                                            {!! $statusBtn !!}
                                        <a href="{{ route('admin.users.show', $user->id) }}" title="View"><i
                            class="fas faslli fa-eye"></i></a>
                        <span> <a href="{{ route('admin.users.edit', $user->id) }}" title="Edit"><i
                                    class="fas faslli fa-pen"></i></a> </span>
                        <!-- <a href="{{url('/admin/users/order/'. $user->id) }}" title="order"><i class="fas faslli fa-donate "></i></a> -->
                        <span> <a href="#" title="Profile"><i class="fas faslli fa-user"></i></a> </span>
                        <span> <a href="#" title="Mail"><i class="fas faslli fa-mail-bulk"></i></a> </span>
            </div>
            </td>
            --}}
            </tr>
            @endforeach
            <tr>
                <td colspan="11">
                    {!! $users->links() !!}
                </td>
            </tr>
            @else
            <div class="text-center">
                <h3>No User Found</h3>
            </div>
            @endif

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js" defer></script> -->

<!-- jquery-validation Js -->
<script src="{{asset('vroom/assets/js/plugins/jquery.validate.min.js')}}"></script>
<!-- form-picker-custom Js -->
<script src="{{asset('vroom/assets/js/pages/form-validation.js')}}"></script>


<script>
$(document).ready(function() {


    $('#ajaxSearchItem').keyup(function() {
        var value = $(this).val();


        $.ajax({
            type: 'GET',
            url: '{{ url("admin/user/search") }}',
            data: {
                search: value,
                page: 1
            },
            success: function(data) {
                $('#ajaxSearchData').html(data);
            },
            error: function(error) {
                alert('error: ', error);
            }
        });

    });
});
</script>