@extends('admin.layout.app')

@section('title', 'Users')
@section('page-title', 'Registered Users')

@section('content')
<div class="app-content">
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">
                <h2 class="mb-0 fw-bold">Users Management</h2>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Filters -->
        <form method="GET" action="{{ route('users-index') }}" class="mb-4">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body">
                    <div class="row g-3">
                        
                        <div class="col-md-7">
                            <label class="form-label">Search (Name, Email, Phone)</label>
                            <input type="text" name="search" class="form-control" 
                                   value="{{ request('search') }}" 
                                   placeholder="Search by name, email, or phone...">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bi bi-search me-1"></i>Filter
                            </button>
                        </div>
                        @if(request()->hasAny(['email_verified', 'search']))
                        <div class="col-12">
                            <a href="{{ route('users-index') }}" class="btn btn-secondary btn-sm">
                                <i class="bi bi-x-circle me-1"></i>Clear Filters
                            </a>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </form>

        <!-- Users Table -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle text-center mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width:5%;">#</th>
                                        <th style="width:15%;">Name</th>
                                        <th style="width:20%;">Email</th>
                                        <th style="width:12%;">Phone</th>
                                        <th style="width:10%;">Registration Date</th>
                                        <th style="width:12%;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($users as $key => $user)
                                        <tr>
                                            <td>{{ $users->firstItem() + $key }}</td>
                                            <td class="text-start">
                                                <strong>{{ $user->first_name ?? 'N/A' }}</strong>
                                            </td>
                                            <td class="text-start">
                                                {{ $user->email }}
                                            </td>
                                            <td>
                                                {{ $user->phone ? $user->phone : 'N/A' }}
                                            </td>
                                            
                                            <td>
                                                <small>{{ $user->created_at->format('d M Y') }}</small><br>
                                                <small class="text-muted">{{ $user->created_at->format('h:i A') }}</small>
                                            </td>
                                            <td>
                                                <a href="{{ route('users-show', $user->id) }}" 
                                                   class="btn btn-sm btn-outline-primary" 
                                                   title="View Details">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                            <a href="{{ route('users-orders', $user->id) }}"
                                               class="btn btn-sm btn-outline-secondary"
                                               title="View User Page">
                                                <i class="bi bi-box-arrow-up-right"></i>
                                            </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="9" class="text-center text-muted py-4">
                                                <i class="bi bi-inbox"></i> No users found.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        @if($users->hasPages())
                            <div class="d-flex justify-content-center mt-3">
                                {{ $users->links('pagination::bootstrap-4') }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection