@extends('adminlte::page')

@section('title', 'Reporte de Cotizaciones vs Ventas')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>
            <i class="fas fa-exchange-alt text-secondary"></i> Reporte de Cotizaciones vs Ventas
        </h1>
        <div>
            <a href="{{ route('admin.reportes.dashboard') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Volver al Dashboard
            </a>
        </div>
    </div>
@stop

@section('content')
    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-header bg-secondary text-white">
            <h5 class="mb-0"><i class="fas fa-filter"></i> Filtros</h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.reportes.cotizaciones-ventas') }}" id="formFiltros">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="fecha_inicio">Fecha Desde</label>
                            <input type="date" 
                                   class="form-control" 
                                   id="fecha_inicio" 
                                   name="fecha_inicio" 
                                   value="{{ $fechaInicio }}" 
                                   required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="fecha_fin">Fecha Hasta</label>
                            <input type="date" 
                                   class="form-control" 
                                   id="fecha_fin" 
                                   name="fecha_fin" 
                                   value="{{ $fechaFin }}" 
                                   required>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="estado_cotizacion">Estado Cotización</label>
                            <select class="form-control" id="estado_cotizacion" name="estado_cotizacion">
                                <option value="">Todos</option>
                                <option value="pendiente" {{ $estadoCotizacion == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                <option value="aprobada" {{ $estadoCotizacion == 'aprobada' ? 'selected' : '' }}>Aprobada</option>
                                <option value="rechazada" {{ $estadoCotizacion == 'rechazada' ? 'selected' : '' }}>Rechazada</option>
                                <option value="vencida" {{ $estadoCotizacion == 'vencida' ? 'selected' : '' }}>Vencida</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="cliente_id">Cliente</label>
                            <select class="form-control" id="cliente_id" name="cliente_id">
                                <option value="">Todos</option>
                                @foreach($clientes as $cliente)
                                    <option value="{{ $cliente->id }}" {{ $clienteId == $cliente->id ? 'selected' : '' }}>
                                        {{ $cliente->user->name ?? 'N/A' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 d-flex">
                        <button type="submit" class="btn btn-secondary mr-2">
                            <i class="fas fa-search"></i> Buscar
                        </button>
                        <a href="{{ route('admin.reportes.cotizaciones-ventas') }}" class="btn btn-light">
                            <i class="fas fa-redo"></i> Limpiar
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Métricas -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-secondary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="text-white-50">Total Cotizaciones</h6>
                            <h3 class="mb-0">{{ number_format($totalCotizaciones) }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-file-invoice fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="text-white-50">Ventas Generadas</h6>
                            <h3 class="mb-0">{{ number_format($totalVentasGeneradas) }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-shopping-cart fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="text-white-50">Tasa de Conversión</h6>
                            <h3 class="mb-0">{{ number_format($tasaConversion, 2) }}%</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-percentage fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="text-white-50">Diferencia Promedio</h6>
                            <h3 class="mb-0">S/ {{ number_format($diferenciaPromedio, 2) }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-chart-line fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-muted">Cotizaciones Ganadas</h6>
                    <h4 class="mb-0 text-success">{{ number_format($cotizacionesGanadas) }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-muted">Cotizaciones Perdidas</h6>
                    <h4 class="mb-0 text-danger">{{ number_format($cotizacionesPerdidas) }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-muted">Cotizaciones Pendientes</h6>
                    <h4 class="mb-0 text-info">{{ number_format($cotizacionesPendientes) }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-muted">Monto Total Cotizado</h6>
                    <h4 class="mb-0">S/ {{ number_format($montoTotalCotizado, 2) }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-muted">Monto Total Vendido</h6>
                    <h4 class="mb-0 text-success">S/ {{ number_format($montoTotalVendido, 2) }}</h4>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-bar"></i> Cotizaciones vs Ventas por Mes</h5>
                </div>
                <div class="card-body">
                    <canvas id="cotizacionesVentasPorMes" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-pie"></i> Estado de Cotizaciones</h5>
                </div>
                <div class="card-body">
                    <canvas id="estadosCotizaciones" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-line"></i> Tasa de Conversión en el Tiempo</h5>
                </div>
                <div class="card-body">
                    <canvas id="tasaConversionTiempo" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-users"></i> Top 10 Clientes por Tasa de Conversión</h5>
                </div>
                <div class="card-body">
                    <canvas id="topClientesConversion" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Detalle -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-table"></i> Detalle de Cotizaciones</h5>
            <div>
                <button class="btn btn-success btn-sm" onclick="exportarExcel()">
                    <i class="fas fa-file-excel"></i> Exportar Excel
                </button>
                <button class="btn btn-danger btn-sm" onclick="exportarPDF()">
                    <i class="fas fa-file-pdf"></i> Exportar PDF
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="tablaCotizaciones" class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Cotización</th>
                            <th>Cliente</th>
                            <th>Fecha</th>
                            <th>Monto Cotizado</th>
                            <th>Estado</th>
                            <th>Venta Generada</th>
                            <th>Monto Vendido</th>
                            <th>Diferencia</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($datosComparacion as $item)
                            <tr>
                                <td>
                                    <a href="{{ route('admin.cotizaciones.show', $item['cotizacion']) }}" target="_blank">
                                        {{ $item['cotizacion']->numero_cotizacion }}
                                    </a>
                                </td>
                                <td>{{ $item['cotizacion']->cliente->user->name ?? 'N/A' }}</td>
                                <td>{{ $item['cotizacion']->fecha_emision->format('d/m/Y') }}</td>
                                <td class="text-right"><strong>S/ {{ number_format($item['monto_cotizado'], 2) }}</strong></td>
                                <td>
                                    <span class="badge badge-{{ $item['cotizacion']->estado == 'aprobada' ? 'success' : ($item['cotizacion']->estado == 'rechazada' ? 'danger' : 'info') }}">
                                        {{ ucfirst($item['cotizacion']->estado) }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    @if($item['tiene_venta'])
                                        <span class="badge badge-success">Sí</span>
                                    @else
                                        <span class="badge badge-secondary">No</span>
                                    @endif
                                </td>
                                <td class="text-right">
                                    @if($item['tiene_venta'])
                                        <strong class="text-success">S/ {{ number_format($item['monto_vendido'], 2) }}</strong>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="text-right">
                                    @if($item['tiene_venta'])
                                        <span class="text-{{ $item['diferencia'] >= 0 ? 'success' : 'danger' }}">
                                            S/ {{ number_format($item['diferencia'], 2) }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('admin.cotizaciones.show', $item['cotizacion']) }}" class="btn btn-sm btn-info" title="Ver Cotización">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @if($item['tiene_venta'])
                                        <a href="{{ route('admin.ventas.show', $item['cotizacion']->venta) }}" class="btn btn-sm btn-success" title="Ver Venta">
                                            <i class="fas fa-shopping-cart"></i>
                                        </a>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center">No hay cotizaciones que coincidan con los filtros seleccionados</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(document).ready(function() {
            // Inicializar DataTable
            $('#tablaCotizaciones').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json"
                },
                "order": [[2, "desc"]],
                "pageLength": 25,
                "autoWidth": false
            });

            // Gráfico de Cotizaciones vs Ventas por Mes
            const cotizacionesVentasPorMes = @json($cotizacionesVentasPorMes);
            const ctxMes = document.getElementById('cotizacionesVentasPorMes').getContext('2d');
            new Chart(ctxMes, {
                type: 'bar',
                data: {
                    labels: cotizacionesVentasPorMes.meses,
                    datasets: [
                        {
                            label: 'Cotizaciones',
                            data: cotizacionesVentasPorMes.cotizaciones,
                            backgroundColor: 'rgba(108, 117, 125, 0.8)'
                        },
                        {
                            label: 'Ventas',
                            data: cotizacionesVentasPorMes.ventas,
                            backgroundColor: 'rgba(40, 167, 69, 0.8)'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });

            // Gráfico de Estados de Cotizaciones
            const estadosCotizaciones = @json($estadosCotizaciones);
            const ctxEstados = document.getElementById('estadosCotizaciones').getContext('2d');
            new Chart(ctxEstados, {
                type: 'doughnut',
                data: {
                    labels: estadosCotizaciones.estados,
                    datasets: [{
                        data: estadosCotizaciones.cantidades,
                        backgroundColor: estadosCotizaciones.colores
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // Gráfico de Tasa de Conversión en el Tiempo
            const tasaConversionTiempo = @json($tasaConversionTiempo);
            const ctxTasa = document.getElementById('tasaConversionTiempo').getContext('2d');
            new Chart(ctxTasa, {
                type: 'line',
                data: {
                    labels: tasaConversionTiempo.meses,
                    datasets: [{
                        label: 'Tasa de Conversión (%)',
                        data: tasaConversionTiempo.tasas,
                        borderColor: '#6c757d',
                        backgroundColor: 'rgba(108, 117, 125, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });

            // Gráfico de Top Clientes por Tasa de Conversión
            const topClientesConversion = @json($topClientesConversion);
            const ctxClientes = document.getElementById('topClientesConversion').getContext('2d');
            new Chart(ctxClientes, {
                type: 'bar',
                data: {
                    labels: topClientesConversion.clientes,
                    datasets: [{
                        label: 'Tasa de Conversión (%)',
                        data: topClientesConversion.tasas,
                        backgroundColor: 'rgba(108, 117, 125, 0.8)'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    indexAxis: 'y',
                    scales: {
                        x: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });
        });

        function exportarExcel() {
            alert('Funcionalidad de exportación a Excel próximamente');
        }

        function exportarPDF() {
            alert('Funcionalidad de exportación a PDF próximamente');
        }
    </script>
@stop

@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
@stop