@extends('layouts.app')

@section('title', 'Dashboard Call Center')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800 text-gradient-primary">
                <i class="fas fa-chart-bar me-2"></i>Dashboard Call Center
            </h1>
            <p class="text-muted mb-0">Estadísticas y análisis de interacciones</p>
        </div>
        <div class="btn-group" role="group">
            <a href="{{ route('admin.call-center.dashboard', ['period' => 'week']) }}" 
               class="btn btn-sm {{ $period == 'week' ? 'btn-primary' : 'btn-outline-secondary' }}">
                Semana
            </a>
            <a href="{{ route('admin.call-center.dashboard', ['period' => 'month']) }}" 
               class="btn btn-sm {{ $period == 'month' ? 'btn-primary' : 'btn-outline-secondary' }}">
                Mes
            </a>
            <a href="{{ route('admin.call-center.dashboard', ['period' => 'year']) }}" 
               class="btn btn-sm {{ $period == 'year' ? 'btn-primary' : 'btn-outline-secondary' }}">
                Año
            </a>
            <a href="{{ route('admin.call-center.logs.index') }}" class="btn btn-sm btn-secondary">
                <i class="fas fa-list me-1"></i>Ver Listado
            </a>
        </div>
    </div>

    <!-- KPIs Principales -->
    <div class="row mb-4">
        <div class="col-xl-3 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 Interacciones
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($totalLogs) }}</div>
                            <small class="text-muted">Período seleccionado</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-phone-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 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">
                                Interacciones Hoy
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($todayLogs) }}</div>
                            <small class="text-muted">Registradas hoy</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar-day fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning 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-warning text-uppercase mb-1">
                                Seguimientos Vencidos
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($pendingFollowUps) }}</div>
                            <small class="text-muted">Requieren atención</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 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">
                                Seguimientos Hoy
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($todayFollowUps) }}</div>
                            <small class="text-muted">Programados para hoy</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas por Tipo y Estado -->
    <div class="row mb-4">
        <div class="col-md-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-pie me-2"></i>Interacciones por Tipo
                    </h6>
                </div>
                <div class="card-body">
                    @if($byType->count() > 0)
                        <canvas id="chartByType" height="200"></canvas>
                        <div class="mt-3">
                            @foreach($byType as $type => $count)
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span><i class="fas fa-circle me-2" style="color: {{ ['Llamada' => '#3498db', 'Email' => '#9b59b6', 'Visita' => '#e67e22', 'Mensaje' => '#2ecc71', 'Reunión' => '#95a5a6'][$type] ?? '#34495e' }}"></i>{{ $type }}</span>
                                    <strong>{{ number_format($count) }}</strong>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-muted text-center">No hay datos para mostrar</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-bar me-2"></i>Interacciones por Estado
                    </h6>
                </div>
                <div class="card-body">
                    @if($byStatus->count() > 0)
                        <canvas id="chartByStatus" height="200"></canvas>
                        <div class="mt-3">
                            @foreach($byStatus as $status => $count)
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span>
                                        <span class="badge 
                                            @if($status == 'Completado') bg-success
                                            @elseif($status == 'Seguimiento') bg-info
                                            @elseif($status == 'Rechazado') bg-danger
                                            @else bg-warning
                                            @endif me-2">{{ $status }}</span>
                                    </span>
                                    <strong>{{ number_format($count) }}</strong>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-muted text-center">No hay datos para mostrar</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas por Resultado y Agente -->
    <div class="row mb-4">
        @if($byOutcome->count() > 0)
        <div class="col-md-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-check-circle me-2"></i>Interacciones por Resultado
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Resultado</th>
                                    <th class="text-end">Cantidad</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($byOutcome as $outcome => $count)
                                    <tr>
                                        <td><span class="badge bg-info">{{ $outcome }}</span></td>
                                        <td class="text-end"><strong>{{ number_format($count) }}</strong></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="col-md-{{ $byOutcome->count() > 0 ? '6' : '12' }} mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-users me-2"></i>Top 10 Agentes
                    </h6>
                </div>
                <div class="card-body">
                    @if($byAgent->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Agente</th>
                                        <th class="text-end">Interacciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($byAgent as $agent)
                                        <tr>
                                            <td>{{ $agent['user'] }}</td>
                                            <td class="text-end">
                                                <strong>{{ number_format($agent['count']) }}</strong>
                                                <div class="progress mt-1" style="height: 5px;">
                                                    <div class="progress-bar" role="progressbar" 
                                                         style="width: {{ ($agent['count'] / $byAgent->first()['count']) * 100 }}%"></div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-muted text-center">No hay datos para mostrar</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Gráfico de Interacciones por Día y Top Clientes -->
    <div class="row mb-4">
        <div class="col-md-8 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-line me-2"></i>Interacciones por Día (Últimos 30 días)
                    </h6>
                </div>
                <div class="card-body">
                    @if($dailyLogs->count() > 0)
                        <canvas id="chartDaily" height="80"></canvas>
                    @else
                        <p class="text-muted text-center">No hay datos para mostrar</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-user-friends me-2"></i>Top 10 Clientes
                    </h6>
                </div>
                <div class="card-body">
                    @if($topClients->count() > 0)
                        <div class="list-group list-group-flush">
                            @foreach($topClients as $client)
                                <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                    <span class="text-truncate" style="max-width: 150px;" title="{{ $client['client'] }}">
                                        {{ $client['client'] }}
                                    </span>
                                    <span class="badge bg-primary rounded-pill">{{ $client['count'] }}</span>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-muted text-center">No hay datos para mostrar</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Pagos Programados -->
    <div class="row mb-4">
        <div class="col-md-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3 bg-success text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-calendar-check me-2"></i>Pagos Programados
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <h3 class="text-success">{{ number_format($scheduledPayments) }}</h3>
                        <p class="text-muted mb-0">Pagos programados en el período</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3 bg-danger text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-exclamation-circle me-2"></i>Pagos Programados Vencidos
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <h3 class="text-danger">{{ number_format($overdueScheduledPayments) }}</h3>
                        <p class="text-muted mb-0">Pagos programados vencidos</p>
                        @if($overdueScheduledPayments > 0)
                            <a href="{{ route('admin.call-center.logs.index', ['overdue_scheduled_payments' => 1]) }}" 
                               class="btn btn-sm btn-danger mt-2">
                                Ver Detalles
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gráfico por Tipo
    @if($byType->count() > 0)
    const ctxType = document.getElementById('chartByType');
    if (ctxType) {
        new Chart(ctxType, {
            type: 'doughnut',
            data: {
                labels: @json($byType->keys()),
                datasets: [{
                    data: @json($byType->values()),
                    backgroundColor: [
                        '#3498db',
                        '#9b59b6',
                        '#e67e22',
                        '#2ecc71',
                        '#95a5a6'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
    @endif

    // Gráfico por Estado
    @if($byStatus->count() > 0)
    const ctxStatus = document.getElementById('chartByStatus');
    if (ctxStatus) {
        new Chart(ctxStatus, {
            type: 'bar',
            data: {
                labels: @json($byStatus->keys()),
                datasets: [{
                    label: 'Interacciones',
                    data: @json($byStatus->values()),
                    backgroundColor: [
                        '#28a745',
                        '#ffc107',
                        '#17a2b8',
                        '#6c757d',
                        '#dc3545'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    }
    @endif

    // Gráfico por Día
    @if($dailyLogs->count() > 0)
    const ctxDaily = document.getElementById('chartDaily');
    if (ctxDaily) {
        new Chart(ctxDaily, {
            type: 'line',
            data: {
                labels: @json($dailyLogs->pluck('date')->map(function($date) {
                    return new Date($date).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' });
                })),
                datasets: [{
                    label: 'Interacciones',
                    data: @json($dailyLogs->pluck('count')),
                    borderColor: '#3498db',
                    backgroundColor: 'rgba(52, 152, 219, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    }
    @endif
});
</script>
@endpush