@extends('layouts.reseller')

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

@section('content')
<div class="row">
    <div class="col-md-4">
        <!-- User Info Card -->
        <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="mb-0">User Information</h5>
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <div class="avatar bg-primary text-white rounded-circle mx-auto mb-3" 
                         style="width: 80px; height: 80px; line-height: 80px; text-align: center; font-size: 32px;">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                    <h4>{{ $user->name }}</h4>
                    <p class="text-muted">{{ $user->email }}</p>
                </div>

                <div class="user-details">
                    <div class="detail-item">
                        <strong>Mobile:</strong>
                        <span>{{ $user->mobile }}</span>
                    </div>
                    <div class="detail-item">
                        <strong>Balance:</strong>
                        <span class="text-success">৳{{ number_format($user->balance, 2) }}</span>
                    </div>
                    <div class="detail-item">
                        <strong>SMS Rate:</strong>
                        <span class="text-info">৳{{ $user->sms_rate ?? $defaultRate }}/SMS</span>
                    </div>
                    <div class="detail-item">
                        <strong>KYC Status:</strong>
                        <span class="badge bg-{{ $user->kyc_verified ? 'success' : 'warning' }}">
                            {{ $user->kyc_verified ? 'Verified' : 'Pending' }}
                        </span>
                    </div>
                    <div class="detail-item">
                        <strong>Account Status:</strong>
                        <span class="badge bg-{{ $user->status ? 'success' : 'danger' }}">
                            {{ $user->status ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                    <div class="detail-item">
                        <strong>Joined:</strong>
                        <span>{{ $user->created_at->format('M j, Y') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="card shadow">
            <div class="card-header bg-light py-3">
                <h6 class="mb-0">Quick Actions</h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('reseller.users.edit', $user) }}" class="btn btn-warning">
                        <i class="fas fa-edit me-2"></i>Edit User
                    </a>
                    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#adjustBalanceModal">
                        <i class="fas fa-money-bill-wave me-2"></i>Adjust Balance
                    </button>
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#changeRateModal">
                        <i class="fas fa-chart-line me-2"></i>Change SMS Rate
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Total SMS Sent</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_sms_sent'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-sms fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    Total Cost</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">৳{{ number_format($stats['total_cost'], 2) }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-money-bill-wave fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    Your Commission</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">৳{{ number_format($stats['commission_earned'], 2) }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-hand-holding-usd fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent SMS Activity -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Recent SMS Activity</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Sender ID</th>
                                <th>Recipients</th>
                                <th>Cost</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentSMS as $sms)
                            <tr>
                                <td>{{ $sms->created_at->format('M j, H:i') }}</td>
                                <td>
                                    <span class="badge bg-info">{{ $sms->sender_id }}</span>
                                </td>
                                <td>{{ $sms->message_count }}</td>
                                <td>৳{{ number_format($sms->cost, 2) }}</td>
                                <td>
                                    <span class="badge badge-{{ $sms->status === 'sent' ? 'success' : 'warning' }}">
                                        {{ ucfirst($sms->status) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                @if($recentSMS->isEmpty())
                <div class="text-center py-4">
                    <i class="fas fa-sms fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No SMS activity yet</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Transaction History -->
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Transaction History</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Amount</th>
                                <th>Description</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($transactions as $transaction)
                            <tr>
                                <td>{{ $transaction->created_at->format('M j, H:i') }}</td>
                                <td>
                                    <span class="badge bg-{{ $transaction->type === 'topup' ? 'success' : 'info' }}">
                                        {{ ucfirst($transaction->type) }}
                                    </span>
                                </td>
                                <td class="{{ $transaction->type === 'topup' ? 'text-success' : 'text-danger' }}">
                                    {{ $transaction->type === 'topup' ? '+' : '-' }}৳{{ number_format($transaction->amount, 2) }}
                                </td>
                                <td>{{ $transaction->description }}</td>
                                <td>
                                    <span class="badge badge-{{ $transaction->status === 'approved' ? 'success' : 'warning' }}">
                                        {{ ucfirst($transaction->status) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                @if($transactions->isEmpty())
                <div class="text-center py-4">
                    <i class="fas fa-exchange-alt fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No transactions yet</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Adjust Balance Modal -->
<div class="modal fade" id="adjustBalanceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Adjust User Balance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('reseller.users.adjust-balance', $user) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label for="adjustment_type" class="form-label">Adjustment Type</label>
                        <select class="form-control" id="adjustment_type" name="adjustment_type" required>
                            <option value="add">Add Balance</option>
                            <option value="deduct">Deduct Balance</option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="amount" class="form-label">Amount (৳)</label>
                        <input type="number" step="0.01" min="0.01" class="form-control" 
                               id="amount" name="amount" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="reason" class="form-label">Reason</label>
                        <textarea class="form-control" id="reason" name="reason" 
                                  placeholder="Enter reason for balance adjustment" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Adjust Balance</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Change Rate Modal -->
<div class="modal fade" id="changeRateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Change SMS Rate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('reseller.users.change-rate', $user) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label for="sms_rate" class="form-label">New SMS Rate (per SMS)</label>
                        <div class="input-group">
                            <span class="input-group-text">৳</span>
                            <input type="number" step="0.001" min="0.001" class="form-control" 
                                   id="sms_rate" name="sms_rate" 
                                   value="{{ $user->sms_rate ?? $defaultRate }}" required>
                        </div>
                        <small class="form-text text-muted">
                            Your rate: ৳{{ $resellerRate }}/SMS | Current user rate: ৳{{ $user->sms_rate ?? $defaultRate }}/SMS
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Rate</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.user-details .detail-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.user-details .detail-item:last-child {
    border-bottom: none;
}
</style>
@endpush