@extends('layouts.app')

@section('title', 'Detalles del Asesor Comercial')

@section('breadcrumbs')
    <li class="breadcrumb-item">Asesores Comerciales</li>
    <li class="breadcrumb-item"><a href="{{ route('commercial-advisors.index') }}">ABM Asesores</a></li>
    <li class="breadcrumb-item active">{{ $advisor['name'] }} {{ $advisor['last_name'] }}</li>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-user-tie"></i> {{ $advisor['name'] }} {{ $advisor['last_name'] }}
        <span class="badge bg-{{ $advisor['status'] === 'active' ? 'success' : 'secondary' }} ms-2">
            {{ $advisor['status'] === 'active' ? 'Activo' : 'Inactivo' }}
        </span>
    </h2>
    <div class="btn-group">
        <a href="{{ route('commercial-advisors.edit', $advisor['id']) }}" class="btn btn-warning">
            <i class="fas fa-edit"></i> Editar
        </a>
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" 
                data-bs-toggle="dropdown">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" onclick="changeStatus('{{ $advisor['id'] }}', '{{ $advisor['status'] }}')">
                <i class="fas fa-toggle-{{ $advisor['status'] === 'active' ? 'off' : 'on' }}"></i> 
                {{ $advisor['status'] === 'active' ? 'Desactivar' : 'Activar' }}
            </a></li>
            <li><a class="dropdown-item" href="#" onclick="generateReport()">
                <i class="fas fa-chart-line"></i> Generar Reporte
            </a></li>
            <li><a class="dropdown-item" href="#" onclick="sendMessage()">
                <i class="fas fa-envelope"></i> Enviar Mensaje
            </a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="{{ route('commercial-advisors.index') }}">
                <i class="fas fa-arrow-left"></i> Volver a la Lista
            </a></li>
        </ul>
    </div>
</div>

<!-- Tarjetas de Estadísticas Principales -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stats-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3>${{ number_format($advisor['total_sales'] ?? 0, 0, ',', '.') }}</h3>
                    <small>Ventas Totales</small>
                </div>
                <i class="fas fa-dollar-sign fs-1"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card info">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3>{{ $advisor['clients_count'] ?? 0 }}</h3>
                    <small>Clientes Activos</small>
                </div>
                <i class="fas fa-users fs-1"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card warning">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3>{{ number_format($advisor['commission_rate'] ?? 0, 1) }}%</h3>
                    <small>Tasa de Comisión</small>
                </div>
                <i class="fas fa-percent fs-1"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card primary">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3>${{ number_format(($advisor['total_sales'] ?? 0) * ($advisor['commission_rate'] ?? 0) / 100, 0, ',', '.') }}</h3>
                    <small>Comisiones Ganadas</small>
                </div>
                <i class="fas fa-hand-holding-usd fs-1"></i>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Información Personal -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle"></i> Información Personal
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Nombre:</dt>
                            <dd class="col-sm-8">{{ $advisor['name'] }} {{ $advisor['last_name'] }}</dd>
                            
                            <dt class="col-sm-4">Email:</dt>
                            <dd class="col-sm-8">
                                <a href="mailto:{{ $advisor['email'] }}">{{ $advisor['email'] }}</a>
                            </dd>
                            
                            <dt class="col-sm-4">Teléfono:</dt>
                            <dd class="col-sm-8">
                                <a href="tel:{{ $advisor['phone'] }}">{{ $advisor['phone'] }}</a>
                            </dd>
                            
                            <dt class="col-sm-4">DNI:</dt>
                            <dd class="col-sm-8">{{ $advisor['dni'] ?? 'No especificado' }}</dd>
                        </dl>
                    </div>
                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Región:</dt>
                            <dd class="col-sm-8">
                                <span class="badge bg-info">{{ $advisor['region'] }}</span>
                            </dd>
                            
                            <dt class="col-sm-4">Estado:</dt>
                            <dd class="col-sm-8">
                                <span class="badge bg-{{ $advisor['status'] === 'active' ? 'success' : 'secondary' }}">
                                    {{ $advisor['status'] === 'active' ? 'Activo' : 'Inactivo' }}
                                </span>
                            </dd>
                            
                            <dt class="col-sm-4">Registrado:</dt>
                            <dd class="col-sm-8">
                                {{ date('d/m/Y', strtotime($advisor['created_at'])) }}
                                <br>
                                <small class="text-muted">{{ \Carbon\Carbon::parse($advisor['created_at'])->diffForHumans() }}</small>
                            </dd>
                            
                            <dt class="col-sm-4">Última Venta:</dt>
                            <dd class="col-sm-8">
                                @if(isset($advisor['last_sale_at']) && $advisor['last_sale_at'])
                                    {{ date('d/m/Y', strtotime($advisor['last_sale_at'])) }}
                                    <br>
                                    <small class="text-muted">{{ \Carbon\Carbon::parse($advisor['last_sale_at'])->diffForHumans() }}</small>
                                @else
                                    <span class="text-muted">Sin ventas registradas</span>
                                @endif
                            </dd>
                        </dl>
                    </div>
                </div>
                
                @if(isset($advisor['address']) && $advisor['address'])
                <hr>
                <div class="row">
                    <div class="col-12">
                        <dt>Dirección:</dt>
                        <dd>{{ $advisor['address'] }}</dd>
                    </div>
                </div>
                @endif
                
                @if(isset($advisor['notes']) && $advisor['notes'])
                <hr>
                <div class="row">
                    <div class="col-12">
                        <dt>Notas:</dt>
                        <dd>{{ $advisor['notes'] }}</dd>
                    </div>
                </div>
                @endif
            </div>
        </div>
        
        <!-- Gráfico de Ventas Mensuales -->
        @if(isset($advisor['monthly_sales']) && count($advisor['monthly_sales']) > 0)
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-chart-line"></i> Ventas Mensuales
                </h5>
            </div>
            <div class="card-body">
                <canvas id="salesChart" height="300"></canvas>
            </div>
        </div>
        @endif
        
        <!-- Clientes Recientes -->
        @if(isset($advisor['recent_clients']) && count($advisor['recent_clients']) > 0)
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-clock"></i> Clientes Recientes
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Cliente</th>
                                <th>Plan</th>
                                <th>Fecha</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($advisor['recent_clients'] as $client)
                            <tr>
                                <td>{{ $client['name'] }}</td>
                                <td>
                                    <span class="badge bg-{{ $client['plan'] === 'PRO' ? 'primary' : 'info' }}">
                                        {{ $client['plan'] }}
                                    </span>
                                </td>
                                <td>{{ date('d/m/Y', strtotime($client['date'])) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>
    
    <!-- Panel Lateral -->
    <div class="col-md-4">
        <!-- Avatar y Acciones Rápidas -->
        <div class="card">
            <div class="card-body text-center">
                <div class="advisor-avatar-large mb-3">
                    {{ substr($advisor['name'], 0, 1) }}{{ substr($advisor['last_name'], 0, 1) }}
                </div>
                <h5>{{ $advisor['name'] }} {{ $advisor['last_name'] }}</h5>
                <p class="text-muted">{{ $advisor['region'] }}</p>
                
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-primary" onclick="sendMessage()">
                        <i class="fas fa-envelope"></i> Enviar Mensaje
                    </button>
                    <button type="button" class="btn btn-outline-success" onclick="viewClients()">
                        <i class="fas fa-users"></i> Ver Clientes
                    </button>
                    <button type="button" class="btn btn-outline-info" onclick="generateReport()">
                        <i class="fas fa-file-pdf"></i> Generar Reporte
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Configuración Comercial -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-cog"></i> Configuración Comercial
                </h6>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span>Tasa de Comisión:</span>
                    <strong>{{ number_format($advisor['commission_rate'] ?? 0, 1) }}%</strong>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span>Estado:</span>
                    <span class="badge bg-{{ $advisor['status'] === 'active' ? 'success' : 'secondary' }}">
                        {{ $advisor['status'] === 'active' ? 'Activo' : 'Inactivo' }}
                    </span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <span>Región Asignada:</span>
                    <span class="badge bg-info">{{ $advisor['region'] }}</span>
                </div>
            </div>
        </div>
        
        <!-- Rendimiento -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-trophy"></i> Rendimiento
                </h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small>Ventas del Mes</small>
                        <small>$45,000</small>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-success" style="width: 75%"></div>
                    </div>
                    <small class="text-muted">Meta: $60,000</small>
                </div>
                
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small>Clientes Nuevos</small>
                        <small>8/10</small>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-info" style="width: 80%"></div>
                    </div>
                    <small class="text-muted">Meta: 10 clientes</small>
                </div>
                
                <div>
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small>Satisfacción</small>
                        <small>4.8/5.0</small>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-warning" style="width: 96%"></div>
                    </div>
                    <small class="text-muted">Basado en 15 reseñas</small>
                </div>
            </div>
        </div>
        
        <!-- Contacto Rápido -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-phone"></i> Contacto Rápido
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="tel:{{ $advisor['phone'] }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-phone"></i> {{ $advisor['phone'] }}
                    </a>
                    <a href="mailto:{{ $advisor['email'] }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-envelope"></i> Enviar Email
                    </a>
                    <button type="button" class="btn btn-outline-success btn-sm" onclick="openWhatsApp()">
                        <i class="fab fa-whatsapp"></i> WhatsApp
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .advisor-avatar-large {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 24px;
        margin: 0 auto;
    }
    
    .stats-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border: none;
        margin-bottom: 20px;
    }
    
    .stats-card.success {
        border-left: 4px solid #28a745;
    }
    
    .stats-card.info {
        border-left: 4px solid #17a2b8;
    }
    
    .stats-card.warning {
        border-left: 4px solid #ffc107;
    }
    
    .stats-card.primary {
        border-left: 4px solid #007bff;
    }
    
    .stats-card h3 {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0;
    }
    
    .progress {
        border-radius: 4px;
    }
    
    .card {
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-radius: 12px;
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        border-radius: 12px 12px 0 0 !important;
    }
    
    dt {
        font-weight: 600;
        color: #495057;
    }
    
    dd {
        color: #6c757d;
    }
</style>
@endpush

@push('scripts')
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gráfico de ventas mensuales
        @if(isset($advisor['monthly_sales']) && count($advisor['monthly_sales']) > 0)
        const ctx = document.getElementById('salesChart').getContext('2d');
        const salesChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: {!! json_encode(array_column($advisor['monthly_sales'], 'month')) !!},
                datasets: [{
                    label: 'Ventas Mensuales ($)',
                    data: {!! json_encode(array_column($advisor['monthly_sales'], 'amount')) !!},
                    borderColor: '#28a745',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#28a745',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return '$' + value.toLocaleString();
                            }
                        }
                    }
                },
                elements: {
                    point: {
                        hoverRadius: 8
                    }
                }
            }
        });
        @endif
    });
    
    function changeStatus(advisorId, currentStatus) {
        const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
        const statusText = newStatus === 'active' ? 'activar' : 'desactivar';
        
        if (confirm(`¿Estás seguro de que deseas ${statusText} este asesor comercial?`)) {
            // En producción sería una llamada AJAX
            alert('Funcionalidad de cambio de estado en desarrollo');
        }
    }
    
    function sendMessage() {
        alert('Funcionalidad de mensajería en desarrollo');
    }
    
    function viewClients() {
        alert('Redirigiendo a la lista de clientes del asesor...');
    }
    
    function generateReport() {
        alert('Generando reporte detallado del asesor...');
    }
    
    function openWhatsApp() {
        const phone = '{{ $advisor["phone"] }}';
        const cleanPhone = phone.replace(/\D/g, '');
        const message = encodeURIComponent('Hola {{ $advisor["name"] }}, te contacto desde el backoffice de SISCON.');
        
        window.open(`https://wa.me/${cleanPhone}?text=${message}`, '_blank');
    }
</script>
@endpush