@extends('layouts.dashboard')

@section('title', 'Pending User Approvals')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">Pending User Approvals</h4>
        <p class="text-muted mb-0">Approve or reject users created by client admins</p>
    </div>
</div>

<!-- Stats Row -->
<div class="row g-3 mb-4">
    <div class="col-md-6">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-warning mb-0">{{ $stats['total_pending'] }}</h3>
                <small class="text-muted">Total Pending</small>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-info mb-0">{{ $stats['today'] }}</h3>
                <small class="text-muted">Added Today</small>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('dashboard.approvals') }}" class="row g-3">
            <div class="col-md-4">
                <input type="text" class="form-control" name="search" placeholder="Search by name or email..." value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <select class="form-select" name="client_id">
                    <option value="">All Clients</option>
                    @foreach($clients as $client)
                    <option value="{{ $client->id }}" {{ request('client_id') == $client->id ? 'selected' : '' }}>{{ $client->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-primary w-100">
                    <i class="bi bi-funnel me-1"></i>Filter
                </button>
            </div>
            @if(request()->hasAny(['search', 'client_id']))
            <div class="col-md-2">
                <a href="{{ route('dashboard.approvals') }}" class="btn btn-outline-secondary w-100">
                    <i class="bi bi-x-circle me-1"></i>Clear
                </a>
            </div>
            @endif
        </form>
    </div>
</div>

<!-- Bulk Actions -->
@if($pendingUsers->count() > 0)
<form method="POST" action="{{ route('dashboard.approvals.bulk-approve') }}" id="bulkForm">
    @csrf
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="selectAll">
                <label class="form-check-label" for="selectAll">Select All</label>
            </div>
            <button type="submit" class="btn btn-success btn-sm"
                data-confirm="Approve all selected users?"
                data-confirm-title="Bulk Approve"
                data-confirm-btn="Approve All"
                data-confirm-class="btn-success">
                <i class="bi bi-check-all me-1"></i>Approve Selected
            </button>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="bg-light">
                    <tr>
                        <th width="40"></th>
                        <th>User</th>
                        <th>Client</th>
                        <th>Created By</th>
                        <th>Requested</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pendingUsers as $user)
                    <tr>
                        <td>
                            <input type="checkbox" class="form-check-input user-checkbox" name="user_ids[]" value="{{ $user->id }}">
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="rounded-circle bg-warning text-dark d-flex align-items-center justify-content-center" style="width: 36px; height: 36px;">
                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                </div>
                                <div>
                                    <div class="fw-medium">{{ $user->name }}</div>
                                    <small class="text-muted">{{ $user->email }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <a href="{{ route('dashboard.clients.show', $user->client_id) }}" class="text-decoration-none">
                                {{ $user->client?->name ?? 'Unknown' }}
                            </a>
                        </td>
                        <td>
                            @if($user->createdByClientAdmin)
                            <span class="badge bg-light text-dark">
                                <i class="bi bi-person me-1"></i>{{ $user->createdByClientAdmin->name }}
                            </span>
                            @else
                            <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            <small class="text-muted">{{ $user->created_at->diffForHumans() }}</small>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-success approve-btn"
                                    data-approve-url="{{ route('dashboard.approvals.approve', $user->id) }}"
                                    title="Approve">
                                    <i class="bi bi-check-lg"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger reject-btn"
                                    data-reject-url="{{ route('dashboard.approvals.reject', $user->id) }}"
                                    data-user-name="{{ $user->name }}"
                                    title="Reject">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($pendingUsers->hasPages())
        <div class="card-footer bg-transparent">
            {{ $pendingUsers->withQueryString()->links() }}
        </div>
        @endif
    </div>
</form>
@else
<div class="card border-0 shadow-sm">
    <div class="card-body text-center py-5">
        <div class="text-success mb-3">
            <i class="bi bi-check-circle" style="font-size: 3rem;"></i>
        </div>
        <h5 class="text-muted">All Caught Up!</h5>
        <p class="text-muted mb-0">No pending user approvals at this time.</p>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
    // Select All checkbox
    document.getElementById('selectAll')?.addEventListener('change', function() {
        document.querySelectorAll('.user-checkbox').forEach(function(cb) {
            cb.checked = this.checked;
        }.bind(this));
    });

    // Individual Approve via SweetAlert + dynamic form
    document.querySelectorAll('.approve-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var url = btn.getAttribute('data-approve-url');
            Swal.fire({
                title: 'Approve User?',
                text: 'This user will be approved and can log in to the app.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#198754',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Approve',
                reverseButtons: true
            }).then(function(result) {
                if (result.isConfirmed) {
                    var form = document.createElement('form');
                    form.method = 'POST';
                    form.action = url;
                    form.style.display = 'none';
                    var csrf = document.createElement('input');
                    csrf.type = 'hidden';
                    csrf.name = '_token';
                    csrf.value = '{{ csrf_token() }}';
                    form.appendChild(csrf);
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    });

    // Individual Reject via SweetAlert with reason input
    document.querySelectorAll('.reject-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var url = btn.getAttribute('data-reject-url');
            var userName = btn.getAttribute('data-user-name');
            Swal.fire({
                title: 'Reject User - ' + userName,
                icon: 'warning',
                html: '<div class="alert alert-warning text-start mb-3" style="font-size:0.9rem;">' +
                    '<i class="bi bi-exclamation-triangle me-2"></i>Rejected users cannot log in to the app.</div>' +
                    '<div class="text-start"><label class="form-label">Rejection Reason (Optional)</label>' +
                    '<textarea id="swal-reason" class="form-control" rows="3" placeholder="Enter reason for rejection..."></textarea></div>',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Reject User',
                reverseButtons: true,
                preConfirm: function() {
                    return {
                        reason: document.getElementById('swal-reason').value
                    };
                }
            }).then(function(result) {
                if (result.isConfirmed) {
                    var form = document.createElement('form');
                    form.method = 'POST';
                    form.action = url;
                    form.style.display = 'none';
                    var csrf = document.createElement('input');
                    csrf.type = 'hidden';
                    csrf.name = '_token';
                    csrf.value = '{{ csrf_token() }}';
                    form.appendChild(csrf);
                    if (result.value.reason) {
                        var reason = document.createElement('input');
                        reason.type = 'hidden';
                        reason.name = 'reason';
                        reason.value = result.value.reason;
                        form.appendChild(reason);
                    }
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    });
</script>
@endpush