@extends('layouts.app')

@section('title', 'Dashboard de Ventas Interactivo')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-chart-line me-2 text-primary"></i>Dashboard de Ventas Interactivo
            </h1>
            <p class="text-muted mb-0 small">Análisis interactivo de ventas con tendencias, comparativas y proyecciones</p>
        </div>
        <div class="d-flex gap-2">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-sm btn-outline-secondary period-btn {{ $period == 'week' ? 'active' : '' }}" data-period="week">Semana</button>
                <button type="button" class="btn btn-sm btn-outline-secondary period-btn {{ $period == 'month' ? 'active' : '' }}" data-period="month">Mes</button>
                <button type="button" class="btn btn-sm btn-outline-secondary period-btn {{ $period == 'year' ? 'active' : '' }}" data-period="year">Año</button>
            </div>
            <a href="{{ route('admin.reports.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <!-- KPIs de Ventas -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="stat-card stat-card-primary">
                <div class="stat-card-icon">
                    <i class="fas fa-dollar-sign"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Total Ventas</div>
                    <div class="stat-card-value">${{ number_format($data['sales']['total'] ?? 0, 2) }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card stat-card-success">
                <div class="stat-card-icon">
                    <i class="fas fa-file-invoice"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Facturas</div>
                    <div class="stat-card-value">{{ number_format($data['sales']['count'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card stat-card-info">
                <div class="stat-card-icon">
                    <i class="fas fa-calculator"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Promedio</div>
                    <div class="stat-card-value">${{ number_format($data['sales']['average'] ?? 0, 2) }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card stat-card-warning">
                <div class="stat-card-icon">
                    <i class="fas fa-percentage"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Tasa Conversión</div>
                    <div class="stat-card-value">{{ number_format($data['conversion']['rate'] ?? 0, 2) }}%</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos de Tendencias -->
    <div class="row g-4 mb-4">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-chart-line me-2 text-primary"></i>Tendencias de Ventas
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="salesTrendChart" height="80"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-balance-scale me-2 text-primary"></i>Comparativa
                    </h5>
                </div>
                <div class="card-body">
                    @if(isset($data['comparison']))
                        <div class="text-center mb-3">
                            <h6 class="text-muted">Período Actual</h6>
                            <h4 class="text-primary">${{ number_format($data['comparison']['current'] ?? 0, 2) }}</h4>
                        </div>
                        <div class="text-center mb-3">
                            <h6 class="text-muted">Período Anterior</h6>
                            <h4 class="text-secondary">${{ number_format($data['comparison']['compare'] ?? 0, 2) }}</h4>
                        </div>
                        <div class="progress mb-2" style="height: 25px;">
                            <div class="progress-bar {{ ($data['comparison']['percentage'] ?? 0) >= 0 ? 'bg-success' : 'bg-danger' }}" 
                                 style="width: {{ min(abs($data['comparison']['percentage'] ?? 0), 100) }}%">
                                {{ ($data['comparison']['percentage'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($data['comparison']['percentage'] ?? 0, 2) }}%
                            </div>
                        </div>
                    @else
                        <p class="text-muted text-center">No hay datos de comparación disponibles</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Productos Estrella y Proyecciones -->
    <div class="row g-4 mb-4">
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-star me-2 text-primary"></i>Productos Estrella
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Producto</th>
                                    <th>Cantidad</th>
                                    <th>Ingresos</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($data['products'] ?? [] as $product)
                                    <tr>
                                        <td>{{ $product->name }}</td>
                                        <td>{{ number_format($product->total_quantity ?? 0) }}</td>
                                        <td>${{ number_format($product->total_revenue ?? 0, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">No hay datos disponibles</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-project-diagram me-2 text-primary"></i>Proyecciones
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="text-muted">Ventas Actuales</h6>
                        <h4 class="text-primary">${{ number_format($data['projections']['current'] ?? 0, 2) }}</h4>
                    </div>
                    <div class="mb-3">
                        <h6 class="text-muted">Tasa de Crecimiento</h6>
                        <h4 class="{{ ($data['projections']['growth_rate'] ?? 0) >= 0 ? 'text-success' : 'text-danger' }}">
                            {{ ($data['projections']['growth_rate'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($data['projections']['growth_rate'] ?? 0, 2) }}%
                        </h4>
                    </div>
                    <div class="mb-3">
                        <h6 class="text-muted">Proyección Próximo Período</h6>
                        <h4 class="text-info">${{ number_format($data['projections']['projected'] ?? 0, 2) }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis de Conversión -->
    <div class="row g-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-exchange-alt me-2 text-primary"></i>Análisis de Conversión
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-4">
                            <h6 class="text-muted">Cotizaciones</h6>
                            <h3 class="text-info">{{ number_format($data['conversion']['quotations'] ?? 0) }}</h3>
                        </div>
                        <div class="col-md-4">
                            <h6 class="text-muted">Convertidas</h6>
                            <h3 class="text-success">{{ number_format($data['conversion']['converted'] ?? 0) }}</h3>
                        </div>
                        <div class="col-md-4">
                            <h6 class="text-muted">Tasa de Conversión</h6>
                            <h3 class="text-primary">{{ number_format($data['conversion']['rate'] ?? 0, 2) }}%</h3>
                        </div>
                    </div>
                    <div class="progress mt-3" style="height: 30px;">
                        <div class="progress-bar bg-success" 
                             style="width: {{ $data['conversion']['rate'] ?? 0 }}%">
                            {{ number_format($data['conversion']['rate'] ?? 0, 2) }}%
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Gráfico de tendencias de ventas
const salesTrendCtx = document.getElementById('salesTrendChart').getContext('2d');
const salesTrendChart = new Chart(salesTrendCtx, {
    type: 'line',
    data: {
        labels: @json($data['trends']['labels'] ?? []),
        datasets: [{
            label: 'Ventas',
            data: @json($data['trends']['values'] ?? []),
            borderColor: 'rgb(75, 192, 192)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
            legend: {
                display: true
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '$' + value.toLocaleString();
                    }
                }
            }
        }
    }
});

// Cambiar período
document.querySelectorAll('.period-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const period = this.dataset.period;
        window.location.href = '{{ route("admin.dashboards.sales-interactive") }}?period=' + period;
    });
});
</script>
@endpush
@endsection