@extends('admin.layouts.master')

@push('css')
<style>
    .user-image {
        max-width: 50px;
        height: auto;
        object-fit: cover;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <h4>User Listings</h4>

    <div class="card">
        <h5 class="card-header row">
            <form class="row" action="">
                <div class="col-md-4 mb-3">
                    <input class="form-control form-control-sm" name="search" type="text"
                        placeholder="Search User Details..." value="{{ request()->get('search') }}">
                </div>

                <!-- Status Filter -->
                <div class="col-md-3 mb-3">
                    <select name="status" class="form-select form-select-sm">
                        <option value="">All Status</option>
                        <option value="1" {{ request('status')=='1' ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ request('status')=='0' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>

                <!-- Role Filter -->
                <div class="col-md-3 mb-3">
                    <select name="role" class="form-select form-select-sm">
                        <option value="">All Roles</option>
                        <option value="admin" {{ request('role')=='admin' ? 'selected' : '' }}>Admin</option>
                        <option value="staff" {{ request('role')=='user' ? 'selected' : '' }}>Staff</option>
                    </select>
                </div>

                <div class="col-md-2 mb-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-secondary waves-effect waves-light w-100 me-2">Search</button>
                    <a href="{{ route('admin.users.create') }}"
                        class="btn btn-primary waves-effect waves-light w-100 text-white">
                        <i class="tf-icons ri ri-add-fill"></i>&nbsp;Create
                    </a>
                </div>
            </form>
        </h5>
        <div class="table-responsive text-nowrap">
            <table class="table table-striped table-responsive table-hover">
                <thead>
                    <tr>
                        <th>SN</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Phone</th>
                        <th>Address</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @if(count($users) > 0)
                    @foreach($users as $key => $user)
                    <tr>
                        <td>{{ ($users->currentPage() - 1) * $users->perPage() + $key + 1 }}</td>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>{{ ucfirst($user->role) }}</td>
                        <td>
                            @if($user->status)
                            <span class="badge rounded-pill bg-label-success me-1">Active</span>
                            @else
                            <span class="badge rounded-pill bg-label-warning me-1">Inactive</span>
                            @endif
                        </td>
                        <td>{{ $user->phone ?? 'N/A' }}</td>
                        <td>{{ $user->address ?? 'N/A' }}</td>
                        <td>
                            <div class="dropdown">
                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                    data-bs-toggle="dropdown">
                                    <i class="ri-more-2-line"></i>
                                </button>
                                <div class="dropdown-menu">
                                    <a href="{{ route('admin.users.edit', $user->id) }}"
                                        class="dropdown-item waves-effect">
                                        <i class="ri-pencil-line me-1"></i>Edit
                                    </a>
                                    <a class="dropdown-item waves-effect delete-user" href="javascript:void(0);"
                                        data-url="{{ route('admin.users.destroy', $user->id) }}">
                                        <i class="ri-delete-bin-6-line me-1"></i>Delete
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="8" class="text-center pt-5">
                            <h5>😢 No users found @if (count(request()->all()) > 0) <a
                                    href="{{ route('admin.users.index') }}">Reset Filter</a> @endif
                            </h5>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>

            <hr>
            {{ $users->appends(request()->all())->links('pagination::bootstrap-4') }}

        </div>
    </div>
    <!--/ Striped Rows -->

</div>
@endsection

@push('js')
<script>
    $('body').on('click', '.delete-user', function (e) {
        e.preventDefault();
        var deleteUrl = $(this).data('url');

        if (confirm('Are you sure you want to delete this user?')) {
            window.location.href = deleteUrl;
        }
    });
</script>
@endpush