@extends('client.layouts.dashboard')

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

@section('styles')
<style>
    .channel-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 7px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
    }
    .channel-sms { background: #e3f2fd; color: #1565c0; }
    .channel-whatsapp { background: #e8f5e9; color: #128C7E; }
</style>
@endsection

@section('content')
<div class="mb-4">
    <a href="{{ route('client.users') }}" class="text-decoration-none">
        <i class="bi bi-arrow-left me-2"></i>Back to Users
    </a>
</div>

<div class="row g-4">
    <!-- User Info -->
    <div class="col-lg-4">
        <div class="table-card">
            <div class="card-body p-4 text-center">
                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 80px; height: 80px; font-size: 2rem;">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
                <h5 class="mb-1">{{ $user->name }}</h5>
                <p class="text-muted mb-3">{{ $user->email }}</p>

                <div class="d-flex justify-content-center gap-2 mb-3">
                    @if($user->approval_status === 'pending')
                    <span class="badge badge-pending px-3 py-2">
                        <i class="bi bi-clock me-1"></i>Pending Approval
                    </span>
                    @elseif($user->approval_status === 'approved')
                    <span class="badge badge-approved px-3 py-2">
                        <i class="bi bi-check-circle me-1"></i>Approved
                    </span>
                    @else
                    <span class="badge badge-rejected px-3 py-2">
                        <i class="bi bi-x-circle me-1"></i>Rejected
                    </span>
                    @endif

                    @if($user->is_active)
                    <span class="badge bg-success px-3 py-2">Active</span>
                    @else
                    <span class="badge bg-secondary px-3 py-2">Inactive</span>
                    @endif
                </div>

                <div class="border-top pt-3">
                    <div class="row text-start small">
                        <div class="col-6">
                            <div class="text-muted">Phone</div>
                            <div class="fw-medium">{{ $user->phone ?? '-' }}</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted">SMS Service</div>
                            <div class="fw-medium">
                                @if($user->sms_service_enabled)
                                <span class="text-success"><i class="bi bi-check-circle me-1"></i>Enabled</span>
                                @else
                                <span class="text-secondary"><i class="bi bi-x-circle me-1"></i>Disabled</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-6 mt-3">
                            <div class="text-muted">WhatsApp Service</div>
                            <div class="fw-medium">
                                @if($user->settings && $user->settings->whatsapp_enabled)
                                <span class="text-success"><i class="bi bi-whatsapp me-1"></i>Enabled</span>
                                @else
                                <span class="text-secondary"><i class="bi bi-whatsapp me-1"></i>Disabled</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-6 mt-3">
                            <div class="text-muted">Preferred Channel</div>
                            <div class="fw-medium">
                                {{ ucfirst($user->settings->preferred_channel ?? 'sms') }}
                            </div>
                        </div>
                        <div class="col-6 mt-3">
                            <div class="text-muted">Joined</div>
                            <div class="fw-medium">{{ $user->created_at->format('M d, Y') }}</div>
                        </div>
                        <div class="col-6 mt-3">
                            <div class="text-muted">Last Active</div>
                            <div class="fw-medium">{{ $user->last_active_at ? $user->last_active_at->diffForHumans() : 'Never' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer bg-transparent">
                <div class="d-grid gap-2">
                    <form method="POST" action="{{ route('client.users.toggle-status', $user->id) }}">
                        @csrf
                        <button type="submit" class="btn btn-{{ $user->is_active ? 'warning' : 'success' }} w-100">
                            <i class="bi bi-{{ $user->is_active ? 'pause' : 'play' }} me-2"></i>
                            {{ $user->is_active ? 'Deactivate User' : 'Activate User' }}
                        </button>
                    </form>
                    <form method="POST" action="{{ route('client.users.toggle-sms', $user->id) }}">
                        @csrf
                        <button type="submit" class="btn btn-outline-{{ $user->sms_service_enabled ? 'secondary' : 'primary' }} w-100">
                            <i class="bi bi-chat-dots me-2"></i>
                            {{ $user->sms_service_enabled ? 'Disable SMS Service' : 'Enable SMS Service' }}
                        </button>
                    </form>
                    <form method="POST" action="{{ route('client.users.toggle-whatsapp', $user->id) }}">
                        @csrf
                        <button type="submit" class="btn btn-outline-{{ ($user->settings && $user->settings->whatsapp_enabled) ? 'secondary' : 'success' }} w-100">
                            <i class="bi bi-whatsapp me-2"></i>
                            {{ ($user->settings && $user->settings->whatsapp_enabled) ? 'Disable WhatsApp Service' : 'Enable WhatsApp Service' }}
                        </button>
                    </form>
                    <hr class="my-1">
                    <form method="POST" action="{{ route('client.users.force-logout', $user->id) }}">
                        @csrf
                        <button type="submit" class="btn btn-outline-danger w-100"
                            data-confirm="Force logout {{ $user->name }} from their active device?"
                            data-confirm-title="Force Logout"
                            data-confirm-btn="Force Logout"
                            data-confirm-class="btn-danger">
                            <i class="bi bi-box-arrow-right me-2"></i>Force Logout
                        </button>
                    </form>
                    <form method="POST" action="{{ route('client.users.reset-password', $user->id) }}">
                        @csrf
                        <button type="submit" class="btn btn-outline-warning w-100"
                            data-confirm="Reset password for {{ $user->name }}?"
                            data-confirm-title="Reset Password"
                            data-confirm-btn="Reset Password"
                            data-confirm-class="btn-warning">
                            <i class="bi bi-key me-2"></i>Reset Password
                        </button>
                    </form>
                </div>
            </div>
        </div>

        @if($user->approval_status === 'rejected' && $user->rejection_reason)
        <div class="table-card mt-3">
            <div class="card-body">
                <h6 class="text-danger mb-2"><i class="bi bi-exclamation-triangle me-2"></i>Rejection Reason</h6>
                <p class="mb-0 small">{{ $user->rejection_reason }}</p>
            </div>
        </div>
        @endif
    </div>

    <!-- Activity & Stats -->
    <div class="col-lg-8">
        <!-- Stats Cards -->
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3">
                <div class="stat-card text-center">
                    <div class="stat-value text-primary">{{ $stats['total_sms'] }}</div>
                    <div class="stat-label"><i class="bi bi-chat-dots me-1"></i>Total SMS</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-card text-center">
                    <div class="stat-value" style="color:#128C7E">{{ $stats['total_whatsapp'] }}</div>
                    <div class="stat-label"><i class="bi bi-whatsapp me-1"></i>WhatsApp</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-card text-center">
                    <div class="stat-value text-success">{{ $stats['total_calls'] }}</div>
                    <div class="stat-label"><i class="bi bi-telephone me-1"></i>Total Calls</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-card text-center">
                    <div class="stat-value text-info">{{ $stats['active_days'] }}</div>
                    <div class="stat-label"><i class="bi bi-calendar-check me-1"></i>Active Days</div>
                </div>
            </div>
        </div>

        <!-- Recent Message Logs (SMS + WhatsApp) -->
        <div class="table-card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-chat-dots me-2"></i>Recent Message Logs</h5>
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Phone</th>
                            <th>Channel</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentSms as $sms)
                        <tr>
                            <td>{{ $sms->phone_number }}</td>
                            <td>
                                @if($sms->channel === 'whatsapp')
                                    <span class="channel-badge channel-whatsapp">
                                        <i class="bi bi-whatsapp"></i> WA
                                    </span>
                                @else
                                    <span class="channel-badge channel-sms">
                                        <i class="bi bi-chat-dots"></i> SMS
                                    </span>
                                @endif
                            </td>
                            <td>
                                @if($sms->sms_type === 'auto_reply')
                                <span class="badge bg-info">Auto Reply</span>
                                @elseif($sms->sms_type === 'promotion')
                                <span class="badge bg-warning">Promotion</span>
                                @else
                                <span class="badge bg-secondary">{{ ucfirst(str_replace('_', ' ', $sms->sms_type ?? 'unknown')) }}</span>
                                @endif
                            </td>
                            <td>
                                @if($sms->status === 'sent')
                                <span class="badge bg-success">Sent</span>
                                @elseif($sms->status === 'pending')
                                <span class="badge bg-warning">Pending</span>
                                @else
                                <span class="badge bg-danger">Failed</span>
                                @endif
                            </td>
                            <td><small class="text-muted">{{ $sms->created_at->diffForHumans() }}</small></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No message logs yet</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Recent Call Logs -->
        <div class="table-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-telephone me-2"></i>Recent Call Logs</h5>
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Phone</th>
                            <th>Type</th>
                            <th>Duration</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentCalls as $call)
                        <tr>
                            <td>{{ $call->phone_number }}</td>
                            <td>
                                @if($call->call_type === 'incoming')
                                <span class="badge bg-info">Incoming</span>
                                @elseif($call->call_type === 'outgoing')
                                <span class="badge bg-primary">Outgoing</span>
                                @else
                                <span class="badge bg-danger">Missed</span>
                                @endif
                            </td>
                            <td>{{ $call->duration ? gmdate('i:s', $call->duration) : '-' }}</td>
                            <td><small class="text-muted">{{ $call->created_at->diffForHumans() }}</small></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">No call logs yet</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection