@push('styles')
<style> 

    .contain-body {
        text-align: right;
        width: 100%;
    }

    .card-father{ 
        width: 80%;
        margin-left: 15%;
        margin-right: 5%;
    }

    .contain-body button {
    margin-right: 1%; 
    }

    .b-reporte{ 
        margin: 10px;
    }

    .card-child{ 
        margin: 20px;
        width: 450px !important;
    }
    
    .img{ 
        display: flex !important;
        justify-content: center;
        width: 150px !important;
        height: 100px !important;
        margin-top: -250px !important;
        margin-left: 120px !important;

    }

</style>
@endpush

    @section('title')
        Dashboard
    @endsection
    @section('css')
    <!-- choices css -->
    <link href="{{ URL::asset('build/libs/choices.js/public/assets/styles/choices.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.1.0/dist/css/coreui.min.css" rel="stylesheet" integrity="sha384-OaSt6YlNk8f06OeGRPsV4UfP2F3Si8sd9Rqxt7iOdIsBKk+zbBLgwCyBwoBqLjDE" crossorigin="anonymous">
    @endsection
    @section('page-title')
        Dashboard
    @endsection

<div>
    <div class="card card-father">
        <div class="row justify-content-start"  style="margin: 30px;" >
            <button class="col-sm-1 btn btn-primary btn-rounded waves-effect waves-light b-reporte" wire:click="generarReporte()">Generar Reporte</button>
        </div>
        <div class="row" style="margin-left: 20px;">
                
            <div class="col-8 row" style="padding-left: 30px;">
                    <div class="card card-child col" style="height: 200px !important;">
                        <div class="card-body">
                            <div>
                                <div class="d-flex align-items-center">
                                    <div class="avatar">
                                        <div class="avatar-title rounded bg-primary-subtle">
                                        <i class="bx bx-cart-alt font-size-24 mb-0 text-primary"></i>
                                        </div>
                                    </div>

                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-0 font-size-20">Ventas</h6>
                                    </div>
                                </div>

                                <div>
                                    <div class="d-flex mt-2 align-items-center">
                                    <h5 class=" pt-1 font-size-22">$34,123.20 </h5>
                                        <div>
                                             <div id="ventas" style="width: 200px; height: 80px" ></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                 
                <div class="card card-child col" style="height: 200px !important;">
                    <div class="card-body">
                        <div>
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-title rounded bg-primary-subtle">
                                        <i class="bx bx-wrench font-size-24 mb-0 text-primary"></i>
                                    </div>
                                </div>

                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-0 font-size-20">Postventas</h6>
                                </div>
                            </div>
                            <div>
                                    <div class="d-flex mt-2 align-items-center">
                                    <h5 class=" pt-1 font-size-22">$14,123.20 </h5>
                                        <div>
                                             <div id="postventas" style="width: 200px; height: 80px" ></div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>

                </div>

                <div class="card card-child col" style="height: 200px !important; margin-right: 10px !important;">
                    <div class="card-body">
                        <div>
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-title rounded bg-primary-subtle">
                                        <i class="bx bx-repeat font-size-24 mb-0 text-primary"></i>
                                    </div>
                                </div>

                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-0 font-size-20">Seminuevos</h6>
                                </div>

                            </div>

                            <div>
                                <div class="d-flex mt-2 align-items-center">
                                <h5 class=" pt-1 font-size-22">$34,123.20 </h5>
                                    <div>
                                        <div id="seminuevos" style="width: 200px; height: 80px" ></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>

            <div class="col-md-4" style="margin-top: 20px; padding-left: 30px;">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-start">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-0">Ventas totales</h5>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <h4 class="font-size-22">$23,590.00</h4>
                            </div>
                        </div>
                        <div>
                                <div id="ventasTotales" style="height: 450px; width: 450px;">

                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: -400px; margin-left: 25px; padding: 10px;" >
            <div class="col-md-4"  style="padding: 30px;">
                <div class="card">
                    <div class="card-body pb-0 ">
                        <div class="d-flex align-items-start">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-4">Ventas por Marca</h5>
                            </div>
                            <div class="flex-shrink-0">
                            </div>
                        </div>
                            <div>
                                        <div id="ventasMarcas" style="height: 450px; width: 450px;">

                                        </div>
                            </div>
                    </div>
                </div>
                
            </div>
            
            <div class="col-md-4" style="padding: 30px;">
                <div class="card" >

                    <div class="card-body pb-0 ">
                            <div class="d-flex align-items-start">
                                <div class="flex-grow-1">
                                    <h5 class="card-title mb-4">Ventas por Unidades</h5>
                                </div>
                                <div class="flex-shrink-0">
                                </div>
                            </div>
                                <div>
                                        <div id="ventasUnidades" style="height: 450px; width: 450px;"></div>
                                </div>
                    </div>
                   
                </div>
            </div>

            <div class="col-4">
                
            </div>     

        </div>

        <div class="row" style="margin-top: -50px; ">
            <div class="col-md-8"  style="padding: 25px; padding-left: 80px; " >
                <div class="card">
                    <div class="card-body pb-0 ">
                                <div class="d-flex align-items-start">
                                    <div class="flex-grow-1">
                                        <h5 class="card-title mb-4">Ventas por Modelo</h5>
                                    </div>
                                </div>
                                    <div> 
                                        <div>
                                            <div id="ventasModelo0" style="width: 300px; height: 300px; margin: 50px;"></div>
                                                <img class="img" src="/build/images/changansvg.svg" alt="">
                                        </div>
                                        <div id="ventasModelo1" style="width: 300px; height: 300px; margin: 50px;"></div>
                                    </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4 items-align-end" style="margin-top: -150px; padding-left: 12px !important; padding-right: 30px; ">
                <div class="card">
                <div class="card-body pb-0" style="height: 600px !important;">
                                <div class="d-flex align-items-start">
                                    <div class="flex-grow-1">
                                        <h5 class="card-title mb-4">Ventas por Sucursal</h5>
                                    </div>
                                    <div class="flex-shrink-0">
                                    </div>
                                </div>
                                    <div>
                                            <div id="ventasSucursales" style="height: 450px; width: 450px;"></div>
                                    </div>
                    </div>
                </div>

                <div class="card " style="height: 270px !important;">
                    <div class="card-body">
                        <div>
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-title rounded bg-primary-subtle">
                                        <i class="bx bx-transfer mb-0 text-primary" style="font-size: 36px;"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <h2 class="mb-0 ">Flujo</h2>
                                </div>
                            </div>

                            <div style="padding-left: 30%;">
                                <div class="mt-4 align-items-center overflow-hidden">
                                <h1 class="mt-4 pt-1 mb-0">$34,123.20 </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row col-md-12" style="padding: 30px; padding-left: 70px;">
            <div>
                <div class="card">
                    <div class="card-body pb-0 row">
                        <div class="d-flex align-items-start">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-4">Ventas por Asesor</h5>
                            </div>
                        </div>
                        <div class="col-md-8" id="VentasAsesor" style="height: 450px; width: 1350px;"></div>
                        <div class=" col-md-2 list-inline-item font-size-18" style="margin: 10px;"> 
                            @foreach($asesoresRanking as $asesor) 
                            <p>{{ $asesor['nombre'] }}: {{ $asesor['ventas'] }} ventas</p>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>    
    

    @section('scripts')        
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

        <script>
            var myChart = echarts.init(document.getElementById('ventasMarcas'));
            var unidadesChart = echarts.init(document.getElementById('ventasUnidades'));
            var ventasTotalesChart = echarts.init(document.getElementById('ventasTotales'));
            var sucursalesChart = echarts.init(document.getElementById('ventasSucursales'));
            var asesorChart = echarts.init(document.getElementById('VentasAsesor'));
            var modeloChart = echarts.init(document.getElementById('ventasModelo0'));
            var ventasChart = echarts.init(document.getElementById('ventas'));
            var postventasChart = echarts.init(document.getElementById('postventas'));
            var seminuevosChart = echarts.init(document.getElementById('seminuevos'));

            

            console.log(myChart);
            var options = [];
            var optionsUnidades = [];
            var optionsVentasTotales = [];
            var optionsSucursales = [];
            var optionsAsesor = [];
            var optionsModelos = [];
            var optionsVentas = [];
            var optionsPostventas = [];
            var optionsSeminuevos = [];
            var loop = 0;

            window.addEventListener('resize', function() {
                myChart.resize();
                unidadesChart.resize();
                ventasTotalesChart.resize();
                sucursalesChart.resize();
                asesorChart.resize();
                ventasChart.resize();
                postventasChart.resize();
                seminuevosChart.resize();
                modeloChart.resize();
            });


            document.addEventListener('livewire:init', () => {

                    Livewire.on('chart-created', function (data) {

                        console.log(data);

                        options = data.chartOptions;
                        optionsUnidades = data.chartOptionsUnidades;
                        optionsVentasTotales = data.chartOptionsVentasTotales;
                        optionsSucursales = data.chartOptionsSucursal;
                        optionsAsesor = data.chartOptionsAsesor;
                        optionsModelos = data.chartOptionsModelos[0];
                        optionsVentas = data.chartOptionsVenta;
                        optionsPostventas = data.chartOptionsPostventa;
                        optionsSeminuevos = data.chartOptionsSeminuevos;

                        // optionsModelos.forEach(function (modeloOptions) {
                        //     console.log(modeloOptions);
                        //     var options = 'VentasModelo' + loop;
                        //     var options = options.toString()
                        //     console.log(options);

                        //     console.log(document.getElementById(options));
                        //     var modeloChart = echarts.init(document.getElementById(options));
                        //     modeloChart.setOption(modeloOptions);
                        //     loop++;
                        //     options = '';
                        // });

                        console.log(optionsPostventas);

                        console.log(optionsSeminuevos);

                        myChart.setOption(options);
                        unidadesChart.setOption(optionsUnidades); 
                        ventasTotalesChart.setOption(optionsVentasTotales);
                        sucursalesChart.setOption(optionsSucursales);
                        asesorChart.setOption(optionsAsesor);
                        modeloChart.setOption(optionsModelos);
                        ventasChart.setOption(optionsVentas);
                        postventasChart.setOption(optionsPostventas);
                        seminuevosChart.setOption(optionsSeminuevos);
                        

                    });    
                });

                
         
        </script>

<script src="{{ URL::asset('build/js/app.js') }}"></script>

<script src="{{ URL::asset('build/js/pages/form-advanced.init.js') }}"></script>

<script src="{{ URL::asset('build/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>

 @endsection