@extends('layouts.admin')

@section('title', 'Users')

@section('content')
<div class="admin-page-header">
    <h1>Users Management</h1>
    @if($tab === 'staff' && auth()->user()->isAdmin())
        <a href="{{ route('admin.users.create') }}" class="admin-btn-primary">
            <i class="bi bi-person-plus"></i> Add Staff Member
        </a>
    @endif
</div>

<!-- KPI Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-primary">
                <i class="bi bi-calendar-day"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ number_format($todayRegistered) }}</div>
                <div class="kpi-card-label">Today</div>
                <div class="kpi-card-trend kpi-card-trend-neutral">
                    <span>New Registrations</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-info">
                <i class="bi bi-calendar-week"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ number_format($thisWeekRegistered) }}</div>
                <div class="kpi-card-label">This Week</div>
                <div class="kpi-card-trend kpi-card-trend-neutral">
                    <span>New Registrations</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-success">
                <i class="bi bi-calendar-month"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ number_format($thisMonthRegistered) }}</div>
                <div class="kpi-card-label">This Month</div>
                <div class="kpi-card-trend kpi-card-trend-neutral">
                    <span>New Registrations</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-warning">
                <i class="bi bi-calendar-year"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ number_format($thisYearRegistered) }}</div>
                <div class="kpi-card-label">This Year</div>
                <div class="kpi-card-trend kpi-card-trend-neutral">
                    <span>New Registrations</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tabs -->
<ul class="nav nav-tabs mb-3" id="userTabs" role="tablist">
    @can('customers.view')
    <li class="nav-item" role="presentation">
        <a class="nav-link {{ $tab === 'customers' ? 'active' : '' }}" 
           href="{{ route('admin.users.customers') }}" 
           id="customers-tab">
            <i class="bi bi-people"></i> Registered Users
            @if($tab === 'customers')
                <span class="badge-modern badge-modern-primary ms-2">{{ $users->total() }}</span>
            @endif
        </a>
    </li>
    @endcan
    @can('users.view')
    <li class="nav-item" role="presentation">
        <a class="nav-link {{ $tab === 'staff' ? 'active' : '' }}" 
           href="{{ route('admin.users.staff') }}" 
           id="staff-tab">
            <i class="bi bi-person-badge"></i> Staff Team
            @if($tab === 'staff')
                <span class="badge-modern badge-modern-primary ms-2">{{ $users->total() }}</span>
            @endif
        </a>
    </li>
    @endcan
</ul>

<!-- Tab Content -->
<div class="admin-card">
    <div class="card-body">
        @if($tab === 'customers')
        <!-- Filters for Customers -->
        <div class="row mb-3">
            <div class="col-md-12">
                <form method="GET" action="{{ route('admin.users.customers') }}" class="row g-2 justify-content-end">
                    <div class="col-md-3">
                        <label for="filter_name" class="admin-form-label">Filter by Name</label>
                        <input type="text" 
                               class="admin-form-control form-control" 
                               id="filter_name" 
                               name="filter_name" 
                               value="{{ request('filter_name') }}" 
                               placeholder="Enter name to search...">
                    </div>
                    <div class="col-md-3">
                        <label for="filter_mobile" class="admin-form-label">Filter by Mobile</label>
                        <div class="input-group">
                            <span class="input-group-text">+91</span>
                            <input type="text" 
                                   class="admin-form-control form-control" 
                                   id="filter_mobile" 
                                   name="filter_mobile" 
                                   value="{{ request('filter_mobile') }}" 
                                   placeholder="Enter mobile number..."
                                   maxlength="10"
                                   pattern="[6-9]\d{9}">
                        </div>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="admin-btn-primary me-2">
                            <i class="bi bi-search"></i> Search
                        </button>
                        @if(request()->has('filter_name') || request()->has('filter_mobile'))
                        <a href="{{ route('admin.users.customers') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle"></i> Clear
                        </a>
                        @endif
                    </div>
                </form>
            </div>
        </div>
        @endif
        
      

        <div class="table-responsive">
            <table class="admin-table table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        @if($tab === 'staff')
                        <th>Staff Number</th>
                        @endif
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>Roles</th>
                        <th>Status</th>
                        <th>Registered</th>
                        <th>Last Login</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $user)                      
                        <tr>
                            <td>#{{ $user->id }}</td>
                            @if($tab === 'staff')
                            <td>
                                @if($user->staff_number)
                                    <span class="badge-modern badge-modern-info">{{ $user->staff_number }}</span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            @endif
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->mobile }}</td>
                            <td>{{ $user->email ?? '-' }}</td>
                            <td>
                                @foreach($user->roles as $role)
                                    <span class="badge-modern {{ $role->name === 'admin' ? 'badge-modern-danger' : ($role->name === 'staff' ? 'badge-modern-warning' : 'badge-modern-primary') }}">
                                        {{ ucfirst($role->name) }}
                                    </span>
                                @endforeach
                                @if($user->roles->isEmpty())
                                    <span class="badge-modern badge-modern-primary">Customer</span>
                                @endif
                            </td>
                            <td>
                                @if($user->banned_at)
                                    <span class="badge-modern badge-modern-danger">
                                        <i class="bi bi-ban"></i> Banned
                                    </span>
                                @else
                                    <span class="badge-modern badge-modern-success">
                                        <i class="bi bi-check-circle"></i> Active
                                    </span>
                                @endif
                            </td>
                            <td>{{ $user->created_at->format('M d, Y') }}</td>
                            <td>{{ $user->last_login_at?->format('M d, Y H:i') ?? 'Never' }}</td>
                            <td>
                                @if($user->isAdmin() || $user->isStaff())
                                    {{-- Staff members: Can edit roles --}}
                                    @can('edit users')
                                    <a href="{{ route('admin.users.edit', $user->id) }}" class="admin-action-btn admin-action-btn-sm admin-btn-primary" title="Manage">
                                        <i class="bi bi-person-gear"></i>
                                    </a>
                                    @endcan
                                @else
                                    {{-- Regular customers: Manage Actions dropdown --}}
                                    <div class="d-flex gap-2">
                                        @if(auth()->user()->isAdmin() || auth()->user()->can('customers.view') || auth()->user()->can('users.view'))
                                            <a href="{{ route('admin.users.edit', $user->id) }}" class="admin-action-btn admin-action-btn-sm admin-btn-primary" title="View User Details">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                        @endif
                                        @if(auth()->user()->isAdmin() || auth()->user()->can('customers.update') || auth()->user()->can('users.update'))
                                            @if($user->banned_at)
                                                <form action="{{ route('admin.users.unban', $user->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('PUT')
                                                    <button type="submit" class="admin-action-btn admin-action-btn-sm admin-btn-primary" style="background: green; color: white;"
                                                            onclick="return confirm('Are you sure you want to unban this user?')" title="Unban User">
                                                        <i class="bi bi-person-gear"></i> 
                                                    </button>
                                                </form>
                                            @else
                                                <form action="{{ route('admin.users.ban', $user->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('PUT')
                                                    <button type="submit" class="admin-action-btn admin-action-btn-sm admin-btn-danger"  style="background: #ef4444; height: -webkit-fill-available; color: white;"
                                                            onclick="return confirm('Are you sure you want to ban this user? They will not be able to login.')" title="Ban User">
                                                        <i class="bi bi-person-gear"></i>
                                                    </button>
                                                </form>
                                            @endif

                                            {{-- Change Password Action --}}
                                            <button type="button" class="admin-action-btn admin-action-btn-sm admin-btn-primary" style="background: #f59e0b; color: white;"
                                                data-bs-toggle="modal" data-bs-target="#changePasswordModal{{ $user->id }}" title="Change Password">
                                                <i class="bi bi-key"></i>
                                            </button>

                                            {{-- Change Password Modal --}}
                                            <div class="modal fade mt-5" id="changePasswordModal{{ $user->id }}" tabindex="-1"
                                                aria-labelledby="changePasswordModalLabel{{ $user->id }}" aria-hidden="true" style="margin-top: 3rem;">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="changePasswordModalLabel{{ $user->id }}">
                                                                <i class="bi bi-key"></i> Change Password for {{ $user->name }}
                                                            </h5>
                                                            <button type="button" class="btn p-0 text-white" data-bs-dismiss="modal" aria-label="Close"><i class="bi-x-lg"></i></button>
                                                        </div>
                                                        <form action="{{ route('admin.users.change-password', $user->id) }}" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <div class="modal-body">
                                                                <div class="mb-3">
                                                                    <label for="password{{ $user->id }}" class="admin-form-label">New Password</label>
                                                                    <input type="password" class="admin-form-control form-control"
                                                                        id="password{{ $user->id }}" name="password"
                                                                        required minlength="8" placeholder="Enter new password">
                                                                    <div class="form-text">Minimum 8 characters</div>
                                                                </div>
                                                                <div class="mb-3">
                                                                    <label for="password_confirmation{{ $user->id }}" class="admin-form-label">Confirm Password</label>
                                                                    <input type="password" class="admin-form-control form-control"
                                                                        id="password_confirmation{{ $user->id }}" name="password_confirmation"
                                                                        required minlength="8" placeholder="Confirm new password">
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                                <button type="submit" class="admin-btn-primary"
                                                                        onclick="return confirm('Are you sure you want to change this user\'s password?')">
                                                                    <i class="bi bi-key"></i> Change Password
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $tab === 'staff' ? '10' : '9' }}" class="text-center py-5">
                                <div class="admin-empty-state">
                                    <i class="bi bi-people"></i>
                                    <h3>No {{ $tab === 'staff' ? 'Staff Members' : 'Users' }} Found</h3>
                                    <p>No {{ $tab === 'staff' ? 'staff members' : 'users' }} match your current filters.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination - Right Aligned -->
        @if($users->hasPages())
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $users->firstItem() ?? 0 }}</strong>–<strong>{{ $users->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $users->total() }}</strong> {{ $tab === 'staff' ? 'staff members' : 'users' }}
                </div>
                <div class="pagination-controls">
                    {{ $users->links('vendor.pagination.admin-categories') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

@if($tab === 'customers')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const mobileFilterInput = document.getElementById('filter_mobile');
    if (mobileFilterInput) {
        // Only allow digits, max 10
        mobileFilterInput.addEventListener('input', function(e) {
            let value = this.value.replace(/\D/g, '').substring(0, 10);
            if (this.value !== value) {
                this.value = value;
            }
        });
        
        // Strip +91 if pasted
        mobileFilterInput.addEventListener('paste', function(e) {
            setTimeout(() => {
                let value = this.value.replace(/^\+91/, '').replace(/\D/g, '').substring(0, 10);
                if (value) {
                    this.value = value;
                }
            }, 0);
        });
    }
});
</script>
@endif
@endsection