@extends('layouts.app')

@section('title', 'User Management')

@section('nav-items')
    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li><a href="{{ route('admin.users.index') }}" style="color: var(--primary);">Users</a></li>
    <li><a href="{{ route('admin.divisions.index') }}">Divisions</a></li>
    <li><a href="{{ route('admin.logos.index') }}">Logos</a></li>
    <li><a href="{{ route('admin.company-profiles.index') }}">Company Profile</a></li>
    <li><a href="{{ route('admin.customer-download-requests.index') }}">Download Requests</a></li>
    <li><a href="{{ route('admin.marketing-requests.index') }}">Marketing Requests</a></li>
    <li><a href="{{ route('admin.media.index') }}">Media</a></li>
@endsection

@section('styles')
<style>
    .filters {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: end;
    }

    .filter-group {
        flex: 1;
        min-width: 200px;
    }

    .filter-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--gray-700);
    }

    .filter-group select,
    .filter-group input {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 0.875rem;
    }

    .table-container {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--gray-200);
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        background: var(--gray-50);
    }

    th {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--gray-700);
        border-bottom: 1px solid var(--gray-200);
    }

    td {
        padding: 1rem;
        border-bottom: 1px solid var(--gray-200);
        font-size: 0.875rem;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    tbody tr:hover {
        background: var(--gray-50);
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .user-details h4 {
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .user-details span {
        font-size: 0.75rem;
        color: var(--gray-500);
    }

    .badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .badge-success {
        background: rgba(5, 150, 105, 0.1);
        color: var(--success);
    }

    .badge-warning {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
    }

    .badge-primary {
        background: rgba(227, 27, 35, 0.1);
        color: var(--primary);
    }

    .badge-info {
        background: rgba(59, 130, 246, 0.1);
        color: var(--info);
    }

    .action-btns {
        display: flex;
        gap: 0.5rem;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-success {
        background: var(--success);
        color: white;
    }

    .btn-success:hover {
        background: #047857;
    }

    .btn-danger {
        background: var(--error);
        color: white;
    }

    .btn-danger:hover {
        background: #b91c1c;
    }

    .empty-state {
        text-align: center;
        padding: 3rem;
        color: var(--gray-500);
    }

    @media (max-width: 768px) {
        .table-container {
            overflow-x: auto;
        }
        table {
            min-width: 800px;
        }
    }
</style>
@endsection

@section('content')
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h1 style="font-size: 2rem; font-weight: 700; color: var(--gray-900);">
        User Management
    </h1>
</div>

<!-- Filters -->
<form method="GET" class="filters">
    <div class="filter-group">
        <label for="role">Role</label>
        <select name="role" id="role" onchange="this.form.submit()">
            <option value="">All Roles</option>
            <option value="admin" {{ request('role') == 'admin' ? 'selected' : '' }}>Admin</option>
            <option value="employee" {{ request('role') == 'employee' ? 'selected' : '' }}>Employee</option>
            <option value="customer" {{ request('role') == 'customer' ? 'selected' : '' }}>Customer</option>
        </select>
    </div>

    <div class="filter-group">
        <label for="status">Status</label>
        <select name="status" id="status" onchange="this.form.submit()">
            <option value="">All Status</option>
            <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
        </select>
    </div>

    <div class="filter-group">
        <label for="search">Search</label>
        <input type="text" name="search" id="search" placeholder="Name or email..." value="{{ request('search') }}">
    </div>

    <div class="filter-group">
        <button type="submit" class="btn btn-primary" style="width: 100%;">
            Filter
        </button>
    </div>

    @if(request()->hasAny(['role', 'status', 'search']))
        <div class="filter-group">
            <a href="{{ route('admin.users.index') }}" class="btn btn-secondary" style="width: 100%; text-align: center;">
                Clear
            </a>
        </div>
    @endif
</form>

<!-- Users Table -->
<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>User</th>
                <th>Role</th>
                <th>Status</th>
                <th>Registered</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($users as $user)
                <tr>
                    <td>
                        <div class="user-info">
                            <div class="user-avatar">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
                            <div class="user-details">
                                <h4>{{ $user->name }}</h4>
                                <span>{{ $user->email }}</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        @if($user->role->name === 'admin')
                            <span class="badge badge-primary">Admin</span>
                        @elseif($user->role->name === 'employee')
                            <span class="badge badge-info">Employee</span>
                        @else
                            <span class="badge">Customer</span>
                        @endif
                    </td>
                    <td>
                        @if($user->is_approved)
                            <span class="badge badge-success">Approved</span>
                        @else
                            <span class="badge badge-warning">Pending</span>
                        @endif
                    </td>
                    <td>{{ $user->created_at->diffForHumans() }}</td>
                    <td>
                        <div class="action-btns">
                            @if(!$user->is_approved)
                                <form method="POST" action="{{ route('admin.users.approve', $user) }}" style="display: inline;">
                                    @csrf
                                    <button type="submit" class="btn-sm btn-success">
                                        Approve
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('admin.users.reject', $user) }}" style="display: inline;">
                                    @csrf
                                    <button type="submit" class="btn-sm btn-danger" onclick="return confirm('Are you sure you want to reject this user?')">
                                        Reject
                                    </button>
                                </form>
                            @else
                                @if($user->id !== auth()->id())
                                    <form method="POST" action="{{ route('admin.users.destroy', $user) }}" style="display: inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this user?')">
                                            Delete
                                        </button>
                                    </form>
                                @endif
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5">
                        <div class="empty-state">
                            <svg style="width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--gray-400);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                            </svg>
                            <p>No users found</p>
                        </div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Pagination -->
@if($users->hasPages())
    <div style="margin-top: 1.5rem; display: flex; justify-content: center;">
        {{ $users->links() }}
    </div>
@endif
@endsection